Skip to main content

表格中控 FunctionControl

FunctionControl 是一个功能控制组件，通常用于提供一组操作按钮，如查询、重置、展开/收起等，常用于表格、表单等界面中的功能控制区域。它还支持国际化，能够根据当前语言环境显示不同语言的文本。

📦 引入方式​

import { FunctionControl } from '@npmqg/react-ui-functioncontrol';

🧩 使用示例​

📚 最简单的用法​

<FunctionControl
  onSearch={() => console.log('查询')}
  onResetForm={() => console.log('重置')}
  onChangeIsHideFormItem={() => console.log('切换展开收起')}
  loading={false}
/>

📚 定制按钮组和标题​

<FunctionControl
  optionButtonGroup={[
    <Button key="button1">{Intl.v('按钮1')}</Button>,
    <Button key="button2">{Intl.v('按钮2')}</Button>,
  ]}
  functionControlTableTitle="自定义表格标题"
  loading={false}
  onSearch={() => console.log('查询')}
  onResetForm={() => console.log('重置')}
  onChangeIsHideFormItem={() => console.log('切换展开收起')}
/>

📚 控制收起与展开的功能​

<FunctionControl
  isHideFormItem={true} // 控制是否收起表单项
  isHideText={true} // 控制是否显示“收起/展开”按钮的文字
  onChangeIsHideFormItem={() => console.log('切换展开收起')}
  loading={false}
/>

🧩 Props​

Prop类型默认值说明
optionButtonGroupReact.ReactNode[][]自定义的按钮组，可以传入多个按钮组件
loadingbooleanfalse控制查询按钮的加载状态
onSearch() => void() => null查询按钮的点击事件
onResetForm() => void() => null重置按钮的点击事件
onChangeIsHideFormItem() => void() => null收起/展开表单项的切换事件
isHideFormItembooleanfalse控制表单项是否隐藏（收起状态）
isHideTextbooleanfalse控制是否显示“收起”或“展开”的文字
functionControlTableTitlestring'查询表格'控制显示的功能控制区域标题
functionControlHidebooleanfalse控制是否隐藏整个功能控制组件

🧠 组件特性​

  • 按钮组自定义：optionButtonGroup 支持传入自定义的按钮组，便于用户扩展按钮功能。
  • 国际化支持：所有的文本（如“查询”，“重置”，“收起”，“展开”）都支持国际化，通过 Intl.v 函数进行语言切换。
  • 收起/展开功能：通过 isHideFormItem 控制表单项的收起或展开，并通过点击按钮切换显示状态。
  • 加载状态：loading 属性控制查询按钮是否处于加载状态。

🧱 组件结构说明​

  • 功能区标题：通过 functionControlTableTitle 控制显示的标题。
  • 按钮区域：展示查询、重置和自定义按钮，并支持通过 optionButtonGroup 传入自定义按钮。
  • 收起/展开按钮：当 isHideText 为 true 时显示该按钮，用户点击该按钮可以切换表单项的显示/隐藏状态。
  • 国际化：所有文本都通过 Intl.v 函数进行国际化，确保组件支持多语言。

⚙️ 性能优化​

  • 该组件使用了 memo 来避免不必要的重新渲染，尤其是在 optionButtonGroup 或 locales 改变时，减少不必要的计算。

📝 注意事项​

  • 确保传入的 optionButtonGroup 中的元素是合法的 React 元素。
  • 在使用 isHideFormItem 和 isHideText 时，确保它们与表单项的显示逻辑一致。
  • 通过 Intl.v 进行国际化时，确保文本在语言环境发生变化时能正确渲染。