fix(TreeItem): prevent click event from propagating on operations span (#3889)

Author: RylanBot

packages/components/tree/TreeItem.tsx

@@ -308,7 +308,7 @@ const TreeItem = forwardRef(
 
       if (operationsView) {
         return (
-          <span className={treeClassNames.treeOperations} data-target="operations">
+          <span className={treeClassNames.treeOperations} data-target="operations" onClick={stopPropagation}>
             {operationsView}
           </span>
         );

packages/components/tree/_example/operations.tsx

@@ -1,17 +1,6 @@
 import React, { useRef, useState } from 'react';
-import {
-  InputAdornment,
-  Button,
-  Input,
-  Tree,
-  Form,
-  Switch,
-  Space,
-  TreeNodeModel,
-  TreeInstanceFunctions,
-} from 'tdesign-react';
-
-import type { TreeProps, TreeNodeValue } from 'tdesign-react';
+import { Button, Input, InputAdornment, Space, Switch, Tree } from 'tdesign-react';
+import type { TreeInstanceFunctions, TreeNodeModel, TreeProps } from 'tdesign-react';
 
 const items = [
   {
@@ -25,10 +14,12 @@ const items = [
 let index = 2;
 
 export default () => {
+  const treeRef = useRef<TreeInstanceFunctions<{ value: string; label?: string }>>(null);
+
+  const [activeMultiple, setActiveMultiple] = useState(false);
   const [useActived, setUseActived] = useState(false);
   const [expandParent, setExpandParent] = useState(false);
   const [filterText, setFilterText] = useState('');
-  const [activeId, setActiveId] = useState<TreeNodeValue>('');
   const [activeIds, setActiveIds] = useState([]);
 
   const getLabelContent = (node: TreeNodeModel) => {
@@ -45,8 +36,6 @@ export default () => {
     return label;
   };
 
-  const renderOperations: TreeProps['operations'] = (node) => `value: ${node.value}`;
-
   const handleInputChange = (value: string) => {
     setFilterText(value);
     console.info('on input:', value);
@@ -69,11 +58,9 @@ export default () => {
   const handleActive: TreeProps['onActive'] = (vals, state) => {
     console.info('on active:', vals, state);
     setActiveIds(vals);
-    setActiveId(vals[0] || '');
   };
 
   /* ======== 操作 api ======= */
-  const treeRef = useRef<TreeInstanceFunctions<{ value: string; label?: string }>>(null);
 
   const setLabel = (value: string) => {
     const node = treeRef.current.getItem(value);
@@ -82,10 +69,7 @@ export default () => {
     data.label = label;
   };
 
-  const getActivedNode = () => {
-    const activeNode = treeRef.current.getItem(activeId);
-    return activeNode;
-  };
+  const getActivedNodes = () => activeIds.map((id) => treeRef.current.getItem(id));
 
   const getInsertItem = () => {
     let item = null;
@@ -96,17 +80,20 @@ export default () => {
     };
     return item;
   };
+
   const append = (node?: TreeNodeModel) => {
     const item = getInsertItem();
-    if (item) {
-      if (!node) {
-        treeRef.current.appendTo('', item);
-      } else {
-        treeRef.current.appendTo(node.value, item);
-      }
-      // setLabel(item.value);
-      if (useActived) {
+    if (!item) return;
+    if (!node) {
+      treeRef.current.appendTo('', item);
+    } else {
+      treeRef.current.appendTo(node.value, item);
+    }
+    if (useActived) {
+      if (activeMultiple) {
         setActiveIds((v) => [...v, item.value]);
+      } else {
+        setActiveIds([item.value]);
       }
     }
   };
@@ -164,21 +151,18 @@ export default () => {
 
   const getActiveChildren = () => {
     console.log(activeIds);
-    const node = getActivedNode();
-    if (!node) return;
-    let nodes: Array<TreeNodeModel> = [];
-    if (node) {
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const allChildren: Array<TreeNodeModel> = [];
+    nodes.forEach((node) => {
       const child = node.getChildren(true);
-      if (typeof child === 'boolean') {
-        // getChildren will never return true value.
-        nodes = [];
-      } else {
-        nodes = child;
+      if (Array.isArray(child)) {
+        allChildren.push(...child);
       }
-    }
+    });
     console.info(
       'getActiveChildren:',
-      nodes.map((node) => node.value),
+      allChildren.map((node) => node.value),
     );
   };
 
@@ -187,52 +171,75 @@ export default () => {
   };
 
   const getActiveChecked = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const nodes = treeRef.current.getItems(node.value);
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const allCheckedNodes: Array<TreeNodeModel> = [];
+    nodes.forEach((node) => {
+      const nodeItems = treeRef.current.getItems(node.value);
+      allCheckedNodes.push(...nodeItems.filter((item) => item.checked));
+    });
     console.info(
       'getChecked:',
-      nodes.filter((node) => node.checked).map((node) => node.value),
+      allCheckedNodes.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 nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const parents = nodes
+      .map((node) => {
+        const parent = treeRef.current.getParent(node.value);
+        return parent;
+      })
+      .filter(Boolean);
+    console.info(
+      'getParent',
+      parents.map((parent) => parent.value),
+    );
   };
 
   const getActiveParents = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const parents = treeRef.current.getParents(node.value);
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const allParents: Array<TreeNodeModel> = [];
+    nodes.forEach((node) => {
+      const parents = treeRef.current.getParents(node.value);
+      allParents.push(...parents);
+    });
     console.info(
       'getParents',
-      parents.map((node) => node.value),
+      allParents.map((node) => node.value),
     );
   };
 
   const getActiveIndex = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const index = treeRef.current.getIndex(node.value);
-    console.info('getIndex', index);
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const indexes = nodes.map((node) => {
+      const index = treeRef.current.getIndex(node.value);
+      return { value: node.value, index };
+    });
+    console.info('getIndex', indexes);
   };
 
   const setActiveChecked = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    treeRef.current.setItem(node.value, {
-      checked: true,
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    nodes.forEach((node) => {
+      treeRef.current.setItem(node.value, {
+        checked: true,
+      });
     });
   };
 
   const setActiveExpanded = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    treeRef.current.setItem(node?.value, {
-      expanded: true,
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    nodes.forEach((node) => {
+      treeRef.current.setItem(node.value, {
+        expanded: true,
+      });
     });
   };
 
@@ -270,44 +277,51 @@ export default () => {
   };
 
   const getActivePlainData = () => {
-    const node = getActivedNode();
-    if (!node) return;
-    const data = getPlainData(node);
-    console.log('getActivePlainData:', data);
-    return data;
+    const nodes = getActivedNodes();
+    if (!nodes.length) return;
+    const allData = nodes.map((node) => {
+      const data = getPlainData(node);
+      return { nodeValue: node.value, data };
+    });
+    console.log('getActivePlainData:', allData);
+    return allData;
   };
 
   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">
+      <style>{`.tdesign-tree-operations .t-is-active .t-tree__label { background-color: rgba(0, 0, 255, 0.2);}`}</style>
+      <Space direction="vertical">
+        <Space>
+          <span>允许多个节点同时高亮</span>
+          <Switch<boolean> value={activeMultiple} onChange={setActiveMultiple} />
+        </Space>
+        <Space>
+          <span>插入节点使用高亮节点</span>
+          <Switch<boolean> value={useActived} onChange={setUseActived} />
+        </Space>
+        <Space>
+          <span>子节点展开触发父节点展开</span>
+          <Switch<boolean> value={expandParent} onChange={setExpandParent} />
+        </Space>
+      </Space>
+      <Space>
         <InputAdornment prepend="filter:">
           <Input value={filterText} onChange={handleInputChange} />
         </InputAdornment>
-      </div>
+      </Space>
       <Tree
         ref={treeRef}
+        className="tdesign-tree-operations"
         hover
         expandAll
         activable
         checkable
+        checkStrictly
         line
+        allowFoldNodeOnFilter
         data={items}
         actived={activeIds}
-        activeMultiple
-        allowFoldNodeOnFilter
+        activeMultiple={activeMultiple}
         label={getLabel}
         expandParent={expandParent}
         filter={filterByText}
@@ -316,7 +330,6 @@ export default () => {
         onChange={handleChange}
         onActive={handleActive}
       />
-      <h3 className="title">api:</h3>
       <Space breakLine>
         <Button theme="primary" onClick={getItem}>
           {"获取 value 为 'node1' 的单个节点"}
@@ -355,6 +368,9 @@ export default () => {
           获取高亮节点与其子节点的数据
         </Button>
       </Space>
+      <Space>
+        <strong>* 相关信息通过控制台输出</strong>
+      </Space>
     </Space>
   );
 };