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[] |

useAnchorsScroll 锚点定位 hook

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------ | ------------------------- | ---- | ------- | -------- | ---------------------------------------------- | | target | DOM element or ref object | 是 | Element | Document | (() => Element) | | config | 滚动监听的类名配置 | 是 | object | "" | { contentItemClassName：<内容区域目录的名字> } |

扩展 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 | - | - |

.useFilterTree 高级树，next 原生树搜索过滤 hook，返回原始数据过滤后的副本数据

注意：filterType 为 onlyLeaf 时，需要树数据项中，叶子节点数据中具备 filterLeaf=true 的属性。

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---- | ----------- | ---- | | defaultExpandedKeys | 默认展开项 | | | [] | | | treeData | 树数据 | | | - | | | onExpand | 点击展开回调 | | | null | | | propertyName | 被检索的属性名 | | | 'label' | | | defaultKeyword | 默认搜索关键字 | | | '' | | | filterType | 过滤方式 onlyLeaf or all。onlyLeaf 此类型会过滤掉标记为叶子节点(数据关键字：'filterLeaf')的所有非匹配项，并将无叶子节点的父节点一并过滤掉；all 此类型过滤掉所有匹配关键字的项，若父节点下包含过滤项，则保留父节点 | | | 'onlyLeaf ' | | | keyName | 树组件 key 属性数据，actionTree 组件此属性为 id，next tree 组件原生属性为 key。用来实现展开功能 | | | 'key' | |

| 返回值 | 说明 | 类型 | | --------------- | --------------------------------------------------- | ---------- | | filterData | 过滤后的树数据 | object | | expandedKeys | 展开项，回填到 treeProps | string[] | | onExpand | 点击展开回调, 回填到 treeProps | (keys)=>{} | | onKeywordChange | 搜索关键字变化回调,回填到 Search 组件 onChange 方法 | (val)=>{} |

FILTER_TYPE

useFilterTree filterType 的枚举常量

FILTER_TYPE = {

onlyLeaf: 'onlyLeaf',

all: 'all',

};

.delTreeNodeProp 删除树数据中某属性的方法 为解决附加属性 filterLeaf 加入到树数据上时，引起 next Tree 原生组件报错的问题 此方法会生成树数据的一份副本

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | --------- | ---------------- | ---- | ------ | ------------ | ---- | | data | tree 数据 | - | - | - | - | | propsName | 要删除属性的名称 | - | string | 'filterLeaf' | - |

| 返回值 | 说明 | 类型 | | ------ | -------------------- | ------ | | data | 删除属性后的副本数据 | object |

.useAutoBalloonAlign 气泡框根据 targer 位置，自动布局函数 defaultAlign, target, popWidth, popHeight, dir = 'v'

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------------ | ---------------- | ---- | -------- | ------------------------- | ---------------------- | | defaultAlign | 默认 align 值 | - | - | dir === 'v' ? 'tl' : 'rb' | - | | target | 气泡框组件 ref | 必填 | any | - | - | | popWidth | 弹出层宽度 | 必填 | number | - | - | | popHeight | 弹出层高度 | 必填 | number | - | - | | dir | 垂直 or 水平弹出 | - | 'v'or'h' | 'v' | v=上下弹出；h=左右弹出 |

| 返回值 | 说明 | 类型 | | ------ | ----------------------- | ------ | | align | 填充气泡框 align 属性值 | string |

CHANGE LOG

• 1.1.0 增加树组件过滤函数 useFilterTree,树删除属性方法 delTreeNodeProp
• 1.1.2 增加 useAutoBalloonAlign 钩子
• 1.1.3 优化 useAutoBalloonAlign 钩子，增加居中弹出
• 1.1.4 优化 useAutoBalloonAlign 钩子，支持垂直，水平布局时，若空间不够，自动转换成另一种布局