feat(Tree): support set indeterminate

Tencent · Dec 2, 2024 · b7f0fb0 · b7f0fb0
1 parent 81fce9a
commit b7f0fb0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 97 deletions.
diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx
@@ -104,6 +104,21 @@ const Tree = forwardRef<TreeInstanceFunctions<TreeOptionData>, TreeProps>((origi
       return expanded;
     },
   );
+
+  // 因为是被 useImperativeHandle 依赖的方法，使用 usePersistFn 变成持久化的。或者也可以使用 useCallback
+  const setIndeterminate = usePersistFn(
+    (
+      node: TreeNode,
+      isIndeterminate: boolean,
+      ctx: { e?: MouseEvent<HTMLDivElement>; trigger: 'node-click' | 'icon-click' | 'setItem' },
+    ) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { e, trigger } = ctx;
+      const indeterminate = node.setIndeterminate(isIndeterminate);
+      return indeterminate;
+    },
+  );
+
   const treeRef = useRef(null);
 
   const {
@@ -254,11 +269,15 @@ const Tree = forwardRef<TreeInstanceFunctions<TreeOptionData>, TreeProps>((origi
             setChecked(node, spec.checked, { trigger: 'setItem' });
             delete spec.checked;
           }
+          if ('indeterminate' in options) {
+            setIndeterminate(node, spec.indeterminate, { trigger: 'setItem' });
+            delete spec.indeterminate;
+          }
           node.set(spec);
         }
       },
     }),
-    [store, setExpanded, setActived, setChecked, handleScrollToElement],
+    [store, setExpanded, setActived, setChecked, setIndeterminate, handleScrollToElement],
   );
 
   /* ======== render ======= */

diff --git a/src/tree/_example/operations.tsx b/src/tree/_example/operations.tsx
@@ -19,6 +19,7 @@ const items = [
   },
   {
     value: 'node2',
+    children: [],
   },
 ];
 
@@ -45,13 +46,6 @@ export default () => {
     return label;
   };
 
-  const renderOperations: TreeProps['operations'] = (node) => `value: ${node.value}`;
-
-  const handleInputChange = (value: string) => {
-    setFilterText(value);
-    console.info('on input:', value);
-  };
-
   const filterByText: TreeProps['filter'] = (node) => {
     const label = node?.data?.label || '';
     const rs = (label as string).indexOf(filterText) >= 0;
@@ -182,56 +176,16 @@ export default () => {
     );
   };
 
-  const getAllActived = () => {
-    console.info('getActived value:', activeIds.slice(0));
-  };
-
-  const getActiveChecked = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const nodes = treeRef.current.getItems(node.value);
-    console.info(
-      'getChecked:',
-      nodes.filter((node) => node.checked).map((node) => node.value),
-    );
-  };
-
-  const getActiveParent = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const parent = treeRef.current.getParent(node.value);
-    console.info('getParent', parent?.value);
-  };
-
-  const getActiveParents = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const parents = treeRef.current.getParents(node.value);
-    console.info(
-      'getParents',
-      parents.map((node) => node.value),
-    );
-  };
-
-  const getActiveIndex = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const index = treeRef.current.getIndex(node.value);
-    console.info('getIndex', index);
-  };
-
   const setActiveChecked = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    treeRef.current.setItem(node.value, {
-      checked: true,
+    treeRef.current.setItem('node2', {
+      indeterminate: true,
     });
   };
 
   const setActiveExpanded = () => {
     const node = getActivedNode();
     if (!node) return;
-    treeRef.current.setItem(node?.value, {
+    treeRef.current.setItem('node2', {
       expanded: true,
     });
   };
@@ -279,24 +233,6 @@ export default () => {
 
   return (
     <Space direction="vertical">
-      <h3 className="title">render:</h3>
-      <Tree hover expandAll data={items} label={getLabel} operations={renderOperations} />
-      <h3 className="title">api:</h3>
-      <div className="operations">
-        <Form labelWidth={200}>
-          <Form.FormItem label="插入节点使用高亮节点" initialData={useActived}>
-            <Switch<boolean> onChange={setUseActived} />
-          </Form.FormItem>
-          <Form.FormItem label="子节点展开触发父节点展开" initialData={expandParent}>
-            <Switch<boolean> onChange={setExpandParent} />
-          </Form.FormItem>
-        </Form>
-      </div>
-      <div className="operations">
-        <InputAdornment prepend="filter:">
-          <Input value={filterText} onChange={handleInputChange} />
-        </InputAdornment>
-      </div>
       <Tree
         ref={treeRef}
         hover
@@ -316,35 +252,7 @@ export default () => {
         onChange={handleChange}
         onActive={handleActive}
       />
-      <h3 className="title">api:</h3>
       <Space breakLine>
-        <Button theme="primary" onClick={getItem}>
-          {"获取 value 为 'node1' 的单个节点"}
-        </Button>
-        <Button theme="primary" onClick={getAllItems}>
-          获取所有节点
-        </Button>
-        <Button theme="primary" onClick={getActiveChildren}>
-          获取高亮节点的所有子节点
-        </Button>
-        <Button theme="primary" onClick={getAllActived}>
-          获取所有高亮节点
-        </Button>
-        <Button theme="primary" onClick={getActiveChecked}>
-          获取高亮节点下的选中节点
-        </Button>
-        <Button theme="primary" onClick={() => append()}>
-          插入一个根节点
-        </Button>
-        <Button theme="primary" onClick={getActiveParent}>
-          获取高亮节点的父节点
-        </Button>
-        <Button theme="primary" onClick={getActiveParents}>
-          获取高亮节点的所有父节点
-        </Button>
-        <Button theme="primary" onClick={getActiveIndex}>
-          获取高亮节点在子节点中的位置
-        </Button>
         <Button theme="primary" onClick={setActiveChecked}>
           选中高亮节点
         </Button>