feat(catalogue): change some utils method

re #607

Author: LuckyFBB

src/catalogue/demos/async.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Catalogue } from 'dt-react-component';
 import { useTreeData } from 'dt-react-component/catalogue/useTreeData';
-import { insertChildIntoNode } from 'dt-react-component/catalogue/utils';
+import { addChildrenIntoNode } from 'dt-react-component/catalogue/utils';
 
 interface DataNode {
     title: string;
@@ -30,7 +30,7 @@ const App: React.FC = () => {
                 return;
             }
             setTimeout(() => {
-                const newData = insertChildIntoNode(treeData.data, key, [
+                const newData = addChildrenIntoNode(treeData.data, key, [
                     { title: 'Child Node', key: `${key}-0` },
                     { title: 'Child Node', key: `${key}-1` },
                 ]);

src/catalogue/demos/config.tsx

@@ -8,7 +8,7 @@ import { cloneDeep } from 'lodash-es';
 import shortid from 'shortid';
 
 import {
-    appendNodeByKey,
+    addChildrenIntoNode,
     findNodeByKey,
     findParentNodeByKey,
     removeEditNode,
@@ -83,7 +83,13 @@ export default () => {
 
     const handleAdd = (key: ITreeNode<IData>['key']) => {
         const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
-        const data = appendNodeByKey<IData>(treeData.data, key);
+        const data = addChildrenIntoNode<IData>(treeData.data, key, [
+            {
+                key: 'new_',
+                title: '',
+                edit: true,
+            },
+        ]);
         if (!newExpandedKeys?.includes(key)) {
             newExpandedKeys.push(key);
         }

src/catalogue/demos/drag.tsx

@@ -8,7 +8,7 @@ import { cloneDeep } from 'lodash-es';
 import shortid from 'shortid';
 
 import {
-    appendNodeByKey,
+    addChildrenIntoNode,
     findNodeByKey,
     findParentNodeByKey,
     removeEditNode,
@@ -77,7 +77,9 @@ export default () => {
 
     const handleAdd = (key: ITreeNode<IData>['key']) => {
         const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
-        const data = appendNodeByKey<IData>(treeData.data, key);
+        const data = addChildrenIntoNode<IData>(treeData.data, key, [
+            { key: 'new_', title: '', edit: true },
+        ]);
         if (!newExpandedKeys?.includes(key)) {
             newExpandedKeys.push(key);
         }

src/catalogue/demos/operator.tsx

@@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash-es';
 import shortid from 'shortid';
 
 import {
-    appendNodeByKey,
+    addChildrenIntoNode,
     findNodeByKey,
     findParentNodeByKey,
     removeEditNode,
@@ -130,7 +130,9 @@ export default () => {
 
     const handleAdd = (key: ITreeNode<IData>['key']) => {
         const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
-        const data = appendNodeByKey<IData>(treeData.data, key);
+        const data = addChildrenIntoNode<IData>(treeData.data, key, [
+            { key: 'new_', title: '', edit: true },
+        ]);
         if (!newExpandedKeys?.includes(key)) {
             newExpandedKeys.push(key);
         }

src/catalogue/utils.tsx

@@ -102,29 +102,6 @@ export const findParentNodeByKey = <U extends { edit?: boolean }>(
     return null;
 };
 
-/**
- * 在 key 节点中添加子节点
- * @param data 遍历的数组
- * @param key 当前 key 值
- * @returns 插入新数据之后的 data
- */
-export const appendNodeByKey = <U extends { edit?: boolean }>(
-    data: ITreeNode<U>[],
-    key: ITreeNode<U>['key']
-): ITreeNode<U>[] => {
-    const newNode = { key: 'new_', title: '', edit: true };
-    return data.map((node) => {
-        if (node.key === key) {
-            const updatedChildren = node.children ? [...node.children, newNode] : [newNode];
-            return { ...node, children: updatedChildren };
-        }
-        if (node.children) {
-            return { ...node, children: appendNodeByKey(node.children, key) };
-        }
-        return node;
-    });
-};
-
 /**
  * 移除 key 节点
  * @param data 遍历的数组
@@ -165,27 +142,84 @@ export const removeEditNode = <U extends { edit?: boolean }>(
 };
 
 /**
- *
+ * 在指定节点的子节点列表中添加一组子节点，可以选择添加在开头或结尾
+ * @param treeData 要操作的树节点数组
+ * @param key 要添加子节点的目标节点 key
+ * @param children 要添加的子节点数组
+ * @param beforeKey 是否将子节点添加到现有子节点之前，true 表示添加到开头，false 表示添加到结尾
+ * @returns 更新后的树节点数组
  */
-
-export const insertChildIntoNode = <U extends { edit?: boolean }>(
+export const addChildrenIntoNode = <U extends { edit?: boolean }>(
     treeData: ITreeNode<U>[],
     key: ITreeNode<U>['key'],
-    children: ITreeNode<U>[]
-): ITreeNode<U>[] => {
-    return treeData.map((node) => {
+    children: ITreeNode<U>[],
+    beforeKey = true
+): ITreeNode<U>[] =>
+    treeData.map((node) => {
+        const updatedChildren = beforeKey
+            ? [...children, ...(node.children || [])]
+            : [...(node.children || []), ...children];
         if (node.key === key) {
             return {
                 ...node,
-                children,
+                children: node.children ? updatedChildren : children,
             };
         }
         if (node.children) {
             return {
                 ...node,
-                children: insertChildIntoNode(node.children, key, children),
+                children: addChildrenIntoNode(node.children, key, children, beforeKey),
             };
         }
         return node;
     });
+
+/**
+ * @description 在树节点数组中查找指定 key 的节点索引
+ * @param 要搜索的树节点数组
+ * @param 要查找的节点 key
+ * @returns 找到的节点索引，如果未找到则返回 -1
+ */
+export const findChildIndex = <U extends { edit?: boolean }>(
+    data: ITreeNode<U>[],
+    key: ITreeNode<U>['key']
+): number => {
+    const findIndex = data.findIndex((item) => item.key === key);
+    return findIndex;
+};
+
+/**
+ * 在树节点数组中，根据指定的 key 找到目标节点，并将新节点插入到目标节点之前或之后。
+ * @param {ITreeNode<U>[]} treeData - 要操作的树节点数组。
+ * @param {ITreeNode<U>['key']} currentKey - 目标节点的 key。
+ * @param {ITreeNode<U>} node - 要插入的新节点。
+ * @param {boolean} [beforeKey=true] - 是否将新节点插入到目标节点之前。true 表示之前，false 表示之后。
+ * @returns {ITreeNode<U>[]} 更新后的树节点数组。
+ */
+export const insertNodeAtKey = <U extends { edit?: boolean }>(
+    treeData: ITreeNode<U>[],
+    currentKey: ITreeNode<U>['key'],
+    node: ITreeNode<U>,
+    beforeKey = true
+): ITreeNode<U>[] => {
+    const newTreeData: ITreeNode<U>[] = [];
+    for (const item of treeData) {
+        if (item.key === currentKey) {
+            if (beforeKey) {
+                newTreeData.push(node);
+                newTreeData.push(item);
+            } else {
+                newTreeData.push(item);
+                newTreeData.push(node);
+            }
+        } else {
+            newTreeData.push({
+                ...item,
+                children: item.children
+                    ? insertNodeAtKey(item.children, currentKey, node, beforeKey)
+                    : item.children,
+            });
+        }
+    }
+    return newTreeData;
 };