From 7c6994e5a87b5384be0c6dbec11f3d2a68be67cb Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 14 Sep 2023 11:21:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(tree):=20addChildNode=E5=A2=9E=E5=8A=A0pos?=
 =?UTF-8?q?ition=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/grumpy-cherries-move.md            |  5 +++
 .changeset/tame-bags-admire.md                |  5 +++
 packages/ui/tree/src/hooks/use-edit.ts        |  4 +-
 packages/ui/tree/src/types.ts                 |  4 +-
 packages/ui/tree/src/use-tree-action.tsx      | 10 ++---
 .../ui/tree/stories/action-render.stories.tsx | 38 +------------------
 6 files changed, 20 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/grumpy-cherries-move.md
 create mode 100644 .changeset/tame-bags-admire.md

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<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}
diff --git a/packages/ui/tree/stories/action-render.stories.tsx b/packages/ui/tree/stories/action-render.stories.tsx
index 308a52fb8..5e350c409 100644
--- a/packages/ui/tree/stories/action-render.stories.tsx
+++ b/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,