@riil-frontend/rule-drawer NPM

可操作树

action-tree

可操作树

CHANGE LOG

2021-12-16
1. 扩展 dataSource 中对象可传 title，适用于 label 传 ReactNode 时，title 设置 hover 标题
2021-12-2
1. 扩展属性，支持 openEllipsis 参数，默认为 false，设置打开后，支持文本溢出显示...
2. 扩展属性, 执行 editOkInterceptor 参数，添加/编辑失焦或确定时的拦截器，若返回为 false，则不会触发组件内后续行为，包括文本为空时清空节点和文本不为空时回调 onOperation 方法
3. dataSource 中数据格式扩展，支持 iconFrom 字段，默认为 img，可设置为 icon，表示节点图标使用 next/Icon 组件
4. 组件默认树节点占满一行，并支持该模式下拖拽效果
5. 样式调整：拖拽效果颜色、图标尺寸间距、树节点间距、圆角调整等
2021-11-15 扩展属性，支持 addNodeIcon 参数，可以指定触发内部添加事件时，新增节点的图标名称
2021-11-15 扩展属性，支持 addNodePosition 参数，触发组件内部添加事件时，新增的树节点所在位置，默认为 0 代表顶部
2021-11-15 扩展属性，支持 showPopupIcon 参数，默认显示操作按钮浮层中的按钮图标，可以设置为 false，则浮层按钮中不显示图标
2021-11-15 扩展属性，支持 moreButtonsMenuProps 参数，透传给内部的 MoreButtonsMenu 组件
2021-10-29 内置样式：折叠按钮左外边距$s-2；树节点左侧缩进$s-4；
2021-05-06 支付 ref 形式下暴露 onPositionAdd 方法,用于组件外部按钮触发在指定位置(顶部、底部)添加
2021-05-06 支付 ref 形式下暴露 onTreeNodeAdd 方法,用于组件外部按钮直接触发某节点下添加行为
2020-11-14 添加 props.inputProps 扩展输入框
2020-11-18 修改 props.inputProps 扩展输入框
2021-01-04 扩展节点 label，添加 labelAppendImg 用于 label 追加图标
2021-01-05 扩展节点 label，合并 labelAppendImg 的 defaultProps
2021-01-05 扩展节点 label，合并 labelAppendImg 的 defaultProps
2021-03-03 扩展 onTreeNodeAdd 等内容，使其适配不同的添加操作
2021-03-04 修改初始化 expendedKeys 方式
2021-03-05 添加 props.treeProps 空判断
2021-03-11 添加 img 标题的 onError 事件，处理图标不存在时显示默认图标
2021-03-15 修改操作按钮事件的参数，用于区别不同对象的同一类型的操作
2021-03-15 更新主题包，使图标生效
2021-03-17 添加节点 title 属性

API

参数名	说明	类型	默认值
dataSource	数据源签名:Array<Object>参数:id: {String} 树节点唯一标识 label: {String} 树节点文本title: {String} 树节点 hover 文本，不传默认取 labelicon: {String} 树节点图标路径 iconFrom: {String} 图片获取源，默认为 img（将 icon 作为引用图片路径），可设置为 icon（将 icon 作为 Icon 组件的 iconType） count: {String} 树节点统计值 operation: {Array<Object>} 树节点操作按钮集合 type: {String} 按钮类型，回传到 onOperation 方法，内置 add edit delete 三种类型，可忽略其他参数 icon: {String} 按钮图标 label: {String} 按钮文本 preDivider: {Boolean} 是否在按钮前添加分割线 buttonProps: {Object} Button 属性透传，详见 ButtontreeNodeProps: {Object} Tree.Node 属性透传，详见 Tree	Array	-
draggable	是否支持拖拽节点	Boolean	true
showIcon	是否显示节点图标（需要设置 dataSource 的 icon）	Boolean	true
showPopupIcon	是否显示悬浮按钮...浮层中的按钮图标	Boolean	true
showCount	是否显示统计数字（需要设置 dataSource 的 count）	Boolean	true
addNodeIcon	触发内部添加事件时，新增树节点的图标名称	string	tree_leaf
addNodePosition	触发组件内部添加事件时，新增的树节点所在位置（新建后在 onOperation 事件回调的 node 对象中会包含 index）	'bottom'/number	0
openEllipsis	开启文本超长时显示...	true/false	false
onDrop	拖拽节点放入目标节点内或前后触发的回调函数签名:Function(dataSource: Array, dragObj: Object, info: Object) => void参数:dataSource: {Array} 拖拽后的树数据 dragObj: {Object} 当前拖拽的树节点info: {Object} 当前操作事件对象	Function	-
onOperation	节点操作按钮触发的回调函数签名:Function(node: Object, type: String) => void参数:node: {Object} 当前操作的节点 type: {String} 操作按钮类型，同 dataSource 中的 operation 的 type	Function	-
editOkInterceptor	添加/编辑失焦或确定时的拦截器，若返回为 false，则不会触发组件内后续行为，包括文本为空时清空节点和文本不为空时回调 onOperation 方法签名:Function(node: Object, value: String) => void参数:node: {Object} 当前操作的节点 value: {String} 当前输入文本	Function	-
onSelect	选中或取消选中节点时触发的回调函数签名:Function(selectedKeys: Array, extra: Object) => void参数:selectedKeys: {Array} 选中节点 key 的数组extra: {Object} 额外参数extra.selectedNodes: {Array} 选中节点的数组extra.node: {Object} 当前操作的节点extra.selected: {Boolean} 当前操作是否是选中	Function	func.noop
treeProps	Tree 属性透传，详见 Tree	Object	-
moreButtonsMenuProps	MoreButtonsMenu 属性透传，详见 MoreButtonsMenu	Object	-
onPositionAdd	支付 ref 形式下暴露 onPositionAdd 方法,用于组件外部按钮触发在指定位置(顶部、底部)添加签名:Function(position: string, clickItem: Object) => void参数:position: {String} 添加节点的位置,支持 top/bottom clickItem: {Object} 扩展对象,回传到 onOperation 事件	Function	-
onTreeNodeAdd	支付 ref 形式下暴露 onTreeNodeAdd 方法,用于组件外部按钮直接触发某节点下添加行为签名:Function(id: string, clickItem: Object) => void参数:id: {String} 在哪个节点下触发添加 clickItem: {Object} 扩展对象,回传到 onOperation 事件	Function	-