@riil-frontend/hooks

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 钩子，支持垂直，水平布局时，若空间不够，自动转换成另一种布局