@riil-frontend/hooks

riil hooks

Usage no npm install needed!

<script type="module">
  import riilFrontendHooks from 'https://cdn.skypack.dev/@riil-frontend/hooks';
</script>

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