diff --git a/.changeset/grumpy-cherries-move.md b/.changeset/grumpy-cherries-move.md new file mode 100644 index 000000000..625220920 --- /dev/null +++ b/.changeset/grumpy-cherries-move.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat: 支持在孩子节点前面或后面添加节点 diff --git a/.changeset/tame-bags-admire.md b/.changeset/tame-bags-admire.md new file mode 100644 index 000000000..65419df42 --- /dev/null +++ b/.changeset/tame-bags-admire.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/tree": patch +--- + +feat: 支持在孩子节点前面或后面添加节点 diff --git a/packages/ui/tree/src/hooks/use-edit.ts b/packages/ui/tree/src/hooks/use-edit.ts index 8c327adad..7776dcac6 100644 --- a/packages/ui/tree/src/hooks/use-edit.ts +++ b/packages/ui/tree/src/hooks/use-edit.ts @@ -35,11 +35,11 @@ export const useEdit = ( ) const addChildNode = useCallback( - (node: FlattedTreeNodeData) => { + (node: FlattedTreeNodeData, position: 0 | 1 = 0) => { setTreeData((prev) => { const nextTreeData = cloneTree(prev) const nodeToAdd = genTreeNode() - addChildNodeById(nextTreeData, node.id, nodeToAdd, 0) + addChildNodeById(nextTreeData, node.id, nodeToAdd, position) return nextTreeData }) }, diff --git a/packages/ui/tree/src/types.ts b/packages/ui/tree/src/types.ts index 5ae85f99e..c9207da9c 100644 --- a/packages/ui/tree/src/types.ts +++ b/packages/ui/tree/src/types.ts @@ -135,8 +135,10 @@ export type TreeEditActions = { editNode: () => void /** * 执行添加子节点操作 + * + * @param position 0 表示插入到孩子节点之前,1 表示之后 */ - addChildNode: () => void + addChildNode: (position?: 0 | 1) => void /** * 执行添加兄弟节点操作 */ diff --git a/packages/ui/tree/src/use-tree-action.tsx b/packages/ui/tree/src/use-tree-action.tsx index e66d21ed8..65d01409f 100644 --- a/packages/ui/tree/src/use-tree-action.tsx +++ b/packages/ui/tree/src/use-tree-action.tsx @@ -219,7 +219,7 @@ interface EditableTreeNodeTitleProps { onCancel: (node: FlattedTreeNodeData) => void onSave: (savedNode: FlattedTreeNodeData) => Promise onDelete: (deletedNode: FlattedTreeNodeData) => Promise - addChildNode: (node: FlattedTreeNodeData) => void + addChildNode: (node: FlattedTreeNodeData, position?: 0 | 1) => void addSiblingNode: (node: FlattedTreeNodeData) => void onExpand: (ids: React.ReactText[]) => void placeholder?: string @@ -267,9 +267,9 @@ const EditableNodeMenu = (props: EditableNodeMenuProps) => { menuVisibleAction.off() }) }, - addChildNode: () => { + addChildNode: (position: 0 | 1 = 0) => { menuVisibleAction.off() - addChildNode(node) + addChildNode(node, position) // 展开子节点列表 onExpand(expandedIds.concat(node.id)) }, @@ -305,8 +305,6 @@ const EditableNodeMenu = (props: EditableNodeMenuProps) => { return menuOptions }, [menuOptionsProp, node]) - if (!isArrayNonEmpty(menuOptions)) return null - return (
{ > {isFunction(actionRender) ? ( actionRender(node, menuActionsRef.current) - ) : ( + ) : !isArrayNonEmpty(menuOptions) ? null : ( <> { return id === 11 ? ( - editActions.addChildNode()} /> + editActions.addChildNode(1)} /> editActions.addSiblingNode()} /> editActions.editNode()} /> { ) : null }} - menuOptions={[ - { - type: 'addChildNode', - title: '新建子节点', - }, - { - type: 'addSiblingNode', - title: '新建兄弟节点', - }, - { - // type: 'deleteNode', - title: '删除当前菜单', - onClick(node, action) { - action.closeMenu() - - Modal.confirm({ - title: '提示', - content: '确定删除吗?', - onConfirm: () => { - action.deleteNode() - }, - }) - }, - }, - { - type: 'editNode', - title: '编辑当前菜单', - }, - { - title: 'Hello,自定义的菜单', - onClick(node, action) { - console.log(node) - action.closeMenu() - }, - }, - ]} data={[ { id: 1,