feat(tree): addChildNode增加position参数

.changeset/grumpy-cherries-move.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat: 支持在孩子节点前面或后面添加节点

.changeset/tame-bags-admire.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/tree": patch
+---
+
+feat: 支持在孩子节点前面或后面添加节点

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
       })
     },

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
   /**
    * 执行添加兄弟节点操作
    */

packages/ui/tree/src/use-tree-action.tsx

@@ -219,7 +219,7 @@ interface EditableTreeNodeTitleProps {
   onCancel: (node: FlattedTreeNodeData) => void
   onSave: (savedNode: FlattedTreeNodeData) => Promise<void>
   onDelete: (deletedNode: FlattedTreeNodeData) => Promise<void>
-  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 (
     <div
       className={cx(`${prefixCls}-action-wrap`, menuVisible && `${prefixCls}-action-wrap--visible`)}
@@ -317,7 +315,7 @@ const EditableNodeMenu = (props: EditableNodeMenuProps) => {
     >
       {isFunction(actionRender) ? (
         actionRender(node, menuActionsRef.current)
-      ) : (
+      ) : !isArrayNonEmpty(menuOptions) ? null : (
         <>
           <IconButton
             tabIndex={-1}

packages/ui/tree/stories/action-render.stories.tsx

@@ -25,7 +25,7 @@ export const ActionRender = () => {
 
             return id === 11 ? (
               <Space>
-                <PlusOutlined onClick={() => editActions.addChildNode()} />
+                <PlusOutlined onClick={() => editActions.addChildNode(1)} />
                 <DuplicateOutlined onClick={() => editActions.addSiblingNode()} />
                 <EditOutlined onClick={() => editActions.editNode()} />
                 <PopConfirm
@@ -38,42 +38,6 @@ export const ActionRender = () => {
               </Space>
             ) : 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,