npm package: @riil-frontend/hooks
Description: riil hooks
Latest version: 1.1.4

# 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](https://fusion.design/50512/biz/892?themeid=15686) |

| 返回值      | 说明                                                         | 类型           |
| ----------- | ------------------------------------------------------------ | -------------- |
| 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 钩子，支持垂直，水平布局时，若空间不够，自动转换成另一种布局