README
riil hooks
hooks
riil hooks
RiilHooks
riil 工程中的 hook
.useSearchTree 高级树,next 原生树搜索 hook
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
defaultExpandedKeys | 默认展开项 | [] | |||
treeData | 树数据 | - | |||
onExpand | 点击展开回调 | null | |||
includeParent | 检索时是否需要返回父节点的 id | false | |||
propertyName | 被检索的属性名 | label | |||
defaultKeyword | 默认搜索关键字 | '' |
返回值 | 说明 | 类型 |
---|---|---|
matchedKeys | 过滤匹配项,通常无需使用 | string[] |
expandedKeys | 展开项,回填到 treeProps | string[] |
onExpand | 点击展开回调, 回填到 treeProps | (keys)=>{} |
onKeywordChange | 搜索关键字变化回调,回填到 Search 组件 onChange 方法 | (val)=>{} |
.useTableColumn 生成 table 列 hook,可结合列配置组件使用
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
columns | table 列原始数据 | column[] | - | ||
config | 列配置组件对接数据 | config[] | undefined | 详见 ColumnConfigurator |
返回值 | 说明 | 类型 |
---|---|---|
columnDatas | 用于 table 显示的列配置数据,导出后需要转换成<Table.Column/> | object[] |
columnNodes | 用于 table 显示的列配置 Nodes,<Table.Column/>[] | Table.Column[] |
扩展 Table.Column: 延续 Table.Column 所有属性,以下为扩展内容
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
titleOption | 扩展列头显示 | object | - | ||
titleOption.help | 列头增加 help | object | - | ||
titleOption.help.value | 列头帮助悬浮文案 | string | '' | ||
titleOption.help.balloonProps | 列头帮助悬浮组件透传 | object | {} | ||
titleOption.help.iconProps | 列头帮助 icon 组件透传 | object | {} | ||
cellOption | 扩展 cell | object | {} | ||
cellOption.nowrap | 单行截断 | {nowrapCell,title} / boolean | true | ||
cellOption.nowrap.nowrapCell | 截断内部自定义项 | ReactElement/ReactNode/(value, rowIndex, record)=>{} | value => value | ||
cellOption.nowrap.title | 自定义悬浮 | (value, rowIndex, record)=>string/string | undefined | ||
cellOption.inputEdit | 编辑浏览 Input,可在浏览模式和编辑模式切换。鼠标 hover 悬浮出边框,点击切换到 input 输入模式,点击外部或回车保存编辑。esc 键取消操作。可自定义校验,不通过校验不触发提交回调。校验执行事件为 input 的 onChange 事件 | {onSubmit,validator,viewCell,inputProps} | |||
cellOption.inputEdit.onSubmit | 编辑提交回调,鼠标点击外部,回车触发 | (value, rowIndex, record)=>{} | |||
cellOption.inputEdit.validator | 自定义校验。返回''表示通过校验,否则为不通过校验的提示文本 | (value, rowIndex, record)=>string | undefined | ||
cellOption.inputEdit.viewCell | 自定义 view 模式的显.示 | ReactElement/ReactNode/(value, rowIndex, record)=>{} | value => value | ||
cellOption.inputEdit.inputProps | input 组件属性透传,注意:style(style={{width:auto}}), value,ref,onKeyDown,onChange 为组件占用属性,请谨慎执行覆盖行为 | ReactElement/ReactNode/(value, rowIndex, record)=>{} | value => value |
{ anchorData, tableData, anchorChildren, domId, rowProps,anchorContent}; { data, anchorLabel }
.useAnchorWithGroupTable :锚点定位组件和 table tree 模式组合使用的钩子,
注意钩子函数会在 table 数据中添加 anchorId 属性,请在数据集中设置此字段为预留字段。
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
data | table 的数据 | ||||
anchorLabelKey | 锚点列表中要显示的名称对应 table 数据中哪个列的值 | - |
返回值 | 说明 | 类型 |
---|---|---|
anchorData | 供给 Anchor 组件使用的数据,如无需自定义 Anchor 功能,则可直接使用 anchorChildren 填充子项 | object[] |
tableData | 整合后的 table 数据,会增加一项唯一标示符行的列数据(anchorId) | object[] |
anchorChildren | 提供给 Anchor 组件使用的 children | ReactNode |
domId | 用来实现定位的 id,需要在 table 组件外层 dom 设置 id 为此值 | string |
rowProps | Table rowProps 属性设置为此值 | funtion |
anchorContent | Anchor 组件的 content 属性设置为此值 | function |
primaryKey | Table 数据若无唯一标示符关键字,则可将 primaryKey 属性可设置为此值 ('anchorId') | string |
.useAutoScroll 自动滚动
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
ref | 滚动dom的ref | 是 | - | - | - |
option | 扩展配置 | - | object | - | - |
option.text | "回到最新位置"按钮文本 | - | string | "回到最新位置" | - |
option.iconType | "回到最新位置"图标类型 | - | string | "arrow-double-left" | - |
option.className | "回到最新位置"样式名 | - | string | - | - |