refactor(tree): 将插件改造成带参的形式

packages/devui-vue/devui/tree/src/core/README.md

@@ -22,7 +22,7 @@ const data = [
   { label: 'Leaf node 2' }
 ];
 
-const { getExpendedTree } = useTree(data, [useSelect, useCheck]);
+const { getExpendedTree } = useTree(data, [useSelect(), useCheck()]);
 ```
 
 ## API

packages/devui-vue/devui/tree/src/core/use-check.ts

@@ -1,28 +1,33 @@
 import { Ref } from 'vue';
-import { IInnerTreeNode, IUseCore } from './use-tree-types';
+import { CheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types';
 
-export default function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-  const { setNodeValue, getNode } = core;
+export default function(options?: {
+  checkStrategy: CheckStrategy
+}) {
+  return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
+    console.log('useCheck options:', options);
+    const { setNodeValue, getNode } = core;
 
-  const checkNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'checked', true);
-  }
-
-  const uncheckNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'checked', false);
-  }
+    const checkNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'checked', true);
+    }
 
-  const toggleCheckNode = (node: IInnerTreeNode): void => {
-    if (getNode(node).checked) {
+    const uncheckNode = (node: IInnerTreeNode): void => {
       setNodeValue(node, 'checked', false);
-    } else {
-      setNodeValue(node, 'checked', true);
     }
-  }
 
-  return {
-    checkNode,
-    uncheckNode,
-    toggleCheckNode,
-  }
-}
+    const toggleCheckNode = (node: IInnerTreeNode): void => {
+      if (getNode(node).checked) {
+        setNodeValue(node, 'checked', false);
+      } else {
+        setNodeValue(node, 'checked', true);
+      }
+    }
+
+    return {
+      checkNode,
+      uncheckNode,
+      toggleCheckNode,
+    }
+  };
+}

packages/devui-vue/devui/tree/src/core/use-core.ts

@@ -2,71 +2,73 @@ import { computed, ComputedRef, Ref } from 'vue';
 import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types';
 import { generateInnerTree } from './utils';
 
-export default function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
-  console.log('useCore:', data, data.value);
+export default function(options?){
+  return function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
+    console.log('useCore:', data, data.value);
 
-  const getLevel = (node: ITreeNode): number => {
-    return data.value.find((item) => item.id === node.id).level;
-  }
-
-  const getChildren = (node: ITreeNode, expanded = false): IInnerTreeNode[] => {
-    let result = [];
-    const treeData = expanded ? getExpendedTree() : data;
-    const startIndex = treeData.value.findIndex((item) => item.id === node.id);
-
-    for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
-      result.push(treeData.value[i]);
+    const getLevel = (node: ITreeNode): number => {
+      return data.value.find((item) => item.id === node.id).level;
     }
 
-    return result;
-  }
-
-  const getExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
-    return computed(() => {
-      let excludeNodes: IInnerTreeNode[] = [];
+    const getChildren = (node: ITreeNode, expanded = false): IInnerTreeNode[] => {
       let result = [];
+      const treeData = expanded ? getExpendedTree() : data;
+      const startIndex = treeData.value.findIndex((item) => item.id === node.id);
 
-      for (let i = 0, len = data?.value.length; i < len; i++) {
-        const item = data?.value[i];
+      for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
+        result.push(treeData.value[i]);
+      }
+
+      return result;
+    }
 
-        if (excludeNodes.map(node => node.id).includes(item.id)) {
-          continue;
-        }
-
-        if (item.expanded !== true) {
-          excludeNodes = getChildren(item);
-        }
+    const getExpendedTree = (): ComputedRef<IInnerTreeNode[]> => {
+      return computed(() => {
+        let excludeNodes: IInnerTreeNode[] = [];
+        let result = [];
 
-        result.push(item);
-      }
+        for (let i = 0, len = data?.value.length; i < len; i++) {
+          const item = data?.value[i];
 
-      return result;
-    });
-  }
+          if (excludeNodes.map(node => node.id).includes(item.id)) {
+            continue;
+          }
+
+          if (item.expanded !== true) {
+            excludeNodes = getChildren(item);
+          }
 
-  const getIndex = (node: ITreeNode): number => {
-    return data.value.findIndex((item) => item.id === node.id);
-  }
+          result.push(item);
+        }
 
-  const getNode = (node: ITreeNode): IInnerTreeNode => {
-    return data.value.find((item) => item.id === node.id);
-  }
+        return result;
+      });
+    }
 
-  const setNodeValue = (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>): void => {
-    data.value[getIndex(node)][key] = value;
-  }
+    const getIndex = (node: ITreeNode): number => {
+      return data.value.findIndex((item) => item.id === node.id);
+    }
 
-  const setTree = (newTree: ITreeNode[]): void => {
-    data.value = generateInnerTree(newTree);
-  }
+    const getNode = (node: ITreeNode): IInnerTreeNode => {
+      return data.value.find((item) => item.id === node.id);
+    }
 
-  return {
-    getLevel,
-    getChildren,
-    getExpendedTree,
-    getIndex,
-    getNode,
-    setNodeValue,
-    setTree,
-  }
-}
+    const setNodeValue = (node: IInnerTreeNode, key: keyof IInnerTreeNode, value: valueof<IInnerTreeNode>): void => {
+      data.value[getIndex(node)][key] = value;
+    }
+
+    const setTree = (newTree: ITreeNode[]): void => {
+      data.value = generateInnerTree(newTree);
+    }
+
+    return {
+      getLevel,
+      getChildren,
+      getExpendedTree,
+      getIndex,
+      getNode,
+      setNodeValue,
+      setTree,
+    }
+  };
+}

packages/devui-vue/devui/tree/src/core/use-disable.ts

@@ -1,39 +1,41 @@
 import { Ref } from 'vue';
 import { IInnerTreeNode, IUseCore } from './use-tree-types';
 
-export default function useDisable(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-  const { setNodeValue } = core;
-
-  const disableSelectNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableSelect', true);
-  }
+export default function(options?) {
+  return function useDisable(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
+    const { setNodeValue } = core;
+
+    const disableSelectNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableSelect', true);
+    }
 
-  const disableCheckNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableCheck', true);
-  }
+    const disableCheckNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableCheck', true);
+    }
 
-  const disableToggleNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableToggle', true);
-  }
-
-  const enableSelectNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableSelect', false);
-  }
+    const disableToggleNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableToggle', true);
+    }
+    
+    const enableSelectNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableSelect', false);
+    }
 
-  const enableCheckNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableCheck', false);
-  }
+    const enableCheckNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableCheck', false);
+    }
 
-  const enableToggleNode = (node: IInnerTreeNode): void => {
-    setNodeValue(node, 'disableToggle', false);
-  }
+    const enableToggleNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'disableToggle', false);
+    }
 
-  return {
-    disableSelectNode,
-    disableCheckNode,
-    disableToggleNode,
-    enableSelectNode,
-    enableCheckNode,
-    enableToggleNode,
-  }
-}
+    return {
+      disableSelectNode,
+      disableCheckNode,
+      disableToggleNode,
+      enableSelectNode,
+      enableCheckNode,
+      enableToggleNode,
+    }
+  };
+}

packages/devui-vue/devui/tree/src/core/use-operate.ts

@@ -1,56 +1,58 @@
 import { Ref } from 'vue';
 import { IInnerTreeNode, ITreeNode, IUseCore } from './use-tree-types';
 
-export default function useOperate(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-  console.log('useOperate:', data, data.value);
-
-  const { setNodeValue, getChildren, getIndex, getLevel } = core;
-
-  const insertBefore = (
-    parentNode: ITreeNode,
-    node: ITreeNode,
-    referenceNode: ITreeNode,
-  ): void => {
-    const children = getChildren(parentNode);
-    const lastChild = children[children.length - 1];
-    let insertedIndex = getIndex(parentNode) + 1;
-
-    if (referenceNode) {
-      insertedIndex = getIndex(referenceNode);
-    } else if (lastChild) {
-      insertedIndex = getIndex(lastChild) + 1;
+export default function(options?) {
+  return function useOperate(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
+    console.log('useOperate:', data, data.value, options);
+
+    const { setNodeValue, getChildren, getIndex, getLevel } = core;
+
+    const insertBefore = (
+      parentNode: ITreeNode,
+      node: ITreeNode,
+      referenceNode: ITreeNode,
+    ): void => {
+      const children = getChildren(parentNode);
+      const lastChild = children[children.length - 1];
+      let insertedIndex = getIndex(parentNode) + 1;
+
+      if (referenceNode) {
+        insertedIndex = getIndex(referenceNode);
+      } else if (lastChild) {
+        insertedIndex = getIndex(lastChild) + 1;
+      }
+
+      setNodeValue(parentNode, 'expanded', true);
+      setNodeValue(parentNode, 'isLeaf', false);
+
+      const currentNode = {
+        ...node,
+        level: getLevel(parentNode) + 1,
+        parentId: parentNode.id,
+        isLeaf: true,
+      };
+
+      data.value = data.value.slice(0, insertedIndex)
+      .concat(
+        currentNode,
+        data.value.slice(insertedIndex, data.value.length)
+      );
     }
 
-    setNodeValue(parentNode, 'expanded', true);
-    setNodeValue(parentNode, 'isLeaf', false);
-
-    const currentNode = {
-      ...node,
-      level: getLevel(parentNode) + 1,
-      parentId: parentNode.id,
-      isLeaf: true,
-    };
-
-    data.value = data.value.slice(0, insertedIndex)
-    .concat(
-      currentNode,
-      data.value.slice(insertedIndex, data.value.length)
-    );
-  }
-
-  const removeNode = (node: ITreeNode): void => {
-    data.value = data.value.filter(item => {
-      return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id);
-    });
-  }
-
-  const editNode = (node: IInnerTreeNode, label: string): void => {
-    setNodeValue(node, 'label', label);
-  }
-
-  return {
-    insertBefore,
-    removeNode,
-    editNode,
-  }
-}
+    const removeNode = (node: ITreeNode): void => {
+      data.value = data.value.filter(item => {
+        return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id);
+      });
+    }
+
+    const editNode = (node: IInnerTreeNode, label: string): void => {
+      setNodeValue(node, 'label', label);
+    }
+
+    return {
+      insertBefore,
+      removeNode,
+      editNode,
+    }
+  };
+}