fix(catalogue): remove some function to utils

Author: LuckyFBB

src/catalogue/components/catalogue.tsx

@@ -17,7 +17,7 @@ type readOnlyTab = readonly Tab[];
 type TabKey<T extends readOnlyTab> = T[number]['key'];
 
 interface NormalCatalogueProps<U extends Record<string, any> = {}>
-    extends Pick<IBlockHeaderProps, 'tooltip' | 'addonAfter' | 'addonBefore' | 'title'>,
+    extends Partial<Pick<IBlockHeaderProps, 'tooltip' | 'addonAfter' | 'addonBefore' | 'title'>>,
         ICatalogueTree<U> {
     showSearch?: boolean;
     edit?: boolean;

src/catalogue/demos/async.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { Catalogue } from 'dt-react-component';
+
+import { useTreeData } from '../useTreeData';
+import { insertChildIntoNode } from '../utils';
+
+interface DataNode {
+    title: string;
+    key: string;
+    isLeaf?: boolean;
+    children?: DataNode[];
+}
+
+const initTreeData: DataNode[] = [
+    { title: 'Expand to load', key: '0' },
+    { title: 'Expand to load', key: '1' },
+    { title: 'Tree Node', key: '2', isLeaf: true },
+];
+
+const App: React.FC = () => {
+    const treeData = useTreeData();
+
+    useEffect(() => {
+        treeData.onChange(initTreeData);
+    }, []);
+
+    const onLoadData = ({ key, children }: any) =>
+        new Promise<void>((resolve) => {
+            if (children) {
+                resolve();
+                return;
+            }
+            setTimeout(() => {
+                const newData = insertChildIntoNode(treeData.data, key, [
+                    { title: 'Child Node', key: `${key}-0` },
+                    { title: 'Child Node', key: `${key}-1` },
+                ]);
+                treeData.onChange(newData);
+                resolve();
+            }, 1000);
+        });
+
+    return <Catalogue loadData={onLoadData} treeData={treeData.data} />;
+};
+
+export default App;

src/catalogue/demos/config.tsx

@@ -6,16 +6,15 @@ import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
 import { CatalogueProps } from '../components/catalogue';
+import { ITreeNode, useTreeData } from '../useTreeData';
 import {
     appendNodeByKey,
     findNodeByKey,
     findParentNodeByKey,
-    ITreeNode,
     removeEditNode,
     removeNodeByKey,
     updateTreeNodeEdit,
-    useTreeData,
-} from '../useTreeData';
+} from '../utils';
 
 const DEFAULT_DATA: ITreeNode<IData>[] = [
     {

src/catalogue/demos/drag.tsx

@@ -6,16 +6,15 @@ import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
 import { CatalogueProps } from '../components/catalogue';
+import { ITreeNode, useTreeData } from '../useTreeData';
 import {
     appendNodeByKey,
     findNodeByKey,
     findParentNodeByKey,
-    ITreeNode,
     removeEditNode,
     removeNodeByKey,
     updateTreeNodeEdit,
-    useTreeData,
-} from '../useTreeData';
+} from '../utils';
 
 interface IData {
     edit?: boolean;

src/catalogue/demos/operator.tsx

@@ -5,16 +5,15 @@ import { Catalogue } from 'dt-react-component';
 import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
+import { ITreeNode, useTreeData } from '../useTreeData';
 import {
     appendNodeByKey,
     findNodeByKey,
     findParentNodeByKey,
-    ITreeNode,
     removeEditNode,
     removeNodeByKey,
     updateTreeNodeEdit,
-    useTreeData,
-} from '../useTreeData';
+} from '../utils';
 
 const DEFAULT_DATA = [
     {

src/catalogue/index.md

@@ -22,6 +22,7 @@ demo:
 <code src="./demos/drag.tsx">可拖拽的目录树</code>
 <code src="./demos/config.tsx">配置操作项的目录树</code>
 <code src="./demos/tabs.tsx">配置操作项的目录树</code>
+<code src="./demos/async.tsx">异步加载数据</code>
 
 ## API
 

src/catalogue/useTreeData.tsx

@@ -10,14 +10,11 @@ export type ITreeNode<U = {}> = Omit<DataNode, 'children' | 'title'> & {
 
 export const useTreeData = <U extends Record<string, any> = {}>(): {
     data: ITreeNode<U>[];
-    loading: boolean;
     expandedKeys: CatalogueProps['expandedKeys'];
     onChange: (node: ITreeNode<U>[]) => void;
-    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
     onExpand: React.Dispatch<React.SetStateAction<CatalogueProps['expandedKeys']>>;
 } => {
     const [data, setData] = useState<ITreeNode<U>[]>([]);
-    const [loading, setLoading] = useState(false);
     const [expandedKeys, setExpandedKeys] = useState<CatalogueProps['expandedKeys']>([]);
 
     const onChange = (data: ITreeNode<U>[]) => {
@@ -26,138 +23,8 @@ export const useTreeData = <U extends Record<string, any> = {}>(): {
 
     return {
         data,
-        loading,
         expandedKeys,
         onChange,
-        setLoading,
         onExpand: setExpandedKeys,
     };
 };
-
-/**
- * 查找 key 对应的节点
- * @param data 遍历的数组
- * @param key 当前 key 值
- * @returns 找到的对应节点
- */
-export const findNodeByKey = <U,>(
-    data: ITreeNode<U>[],
-    key: ITreeNode<U>['key']
-): ITreeNode<U> | null => {
-    for (const node of data) {
-        if (node.key === key) {
-            return node;
-        }
-        if (node.children) {
-            const result = findNodeByKey(node.children, key);
-            if (result) return result;
-        }
-    }
-    return null;
-};
-
-/**
- * 更新 key 对应节点为编辑状态
- * @param data 遍历的数组
- * @param key 当前 key 值
- * @returns 更新之后 data
- */
-export const updateTreeNodeEdit = <U,>(
-    data: ITreeNode<U>[],
-    key: ITreeNode<U>['key']
-): ITreeNode<U>[] => {
-    return data.map((node) => {
-        if (node.key === key) {
-            return { ...node, edit: true };
-        }
-        if (node.children) {
-            return { ...node, children: updateTreeNodeEdit(node.children, key) };
-        }
-        return node;
-    });
-};
-
-/**
- * 查找 key 对应的父级节点
- * @param data 遍历的数组
- * @param key 当前 key 值
- * @returns 当前找到父级节点
- */
-export const findParentNodeByKey = <U extends { edit?: boolean }>(
-    data: ITreeNode<U>[],
-    key: ITreeNode<U>['key']
-): ITreeNode<U> | null => {
-    for (const node of data) {
-        if (node.children?.some((child) => child.key === key)) {
-            return node;
-        }
-        // 如果有子节点，递归查找
-        if (node.children) {
-            const parent = findParentNodeByKey(node.children, key);
-            if (parent) return parent;
-        }
-    }
-    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 遍历的数组
- * @param key 当前 key 值
- * @returns 删除数据之后的 data
- */
-export const removeNodeByKey = <U,>(
-    data: ITreeNode<U>[],
-    key: ITreeNode<U>['key']
-): ITreeNode<U>[] => {
-    return data
-        .filter((node) => node.key !== key)
-        .map((node) => {
-            if (node.children) {
-                return {
-                    ...node,
-                    children: removeNodeByKey(node.children, key),
-                };
-            }
-            return node;
-        });
-};
-
-/**
- * 移除 edit 为 true 的节点
- * @param treeData
- * @returns 移除之后的数据
- */
-export const removeEditNode = <U extends { edit?: boolean }>(
-    treeData: ITreeNode<U>[]
-): ITreeNode<U>[] => {
-    return treeData
-        .filter((node) => !node.edit)
-        .map((node) => ({
-            ...node,
-            children: node.children ? removeEditNode(node.children) : undefined,
-        }));
-};