diff --git a/packages/components/tree/TreeItem.tsx b/packages/components/tree/TreeItem.tsx index fed4f0d1b3..92e39c62cd 100644 --- a/packages/components/tree/TreeItem.tsx +++ b/packages/components/tree/TreeItem.tsx @@ -308,7 +308,7 @@ const TreeItem = forwardRef( if (operationsView) { return ( - + {operationsView} ); diff --git a/packages/components/tree/_example/operations.tsx b/packages/components/tree/_example/operations.tsx index ff21525af4..afe313c5d8 100644 --- a/packages/components/tree/_example/operations.tsx +++ b/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>(null); + + const [activeMultiple, setActiveMultiple] = useState(false); const [useActived, setUseActived] = useState(false); const [expandParent, setExpandParent] = useState(false); const [filterText, setFilterText] = useState(''); - const [activeId, setActiveId] = useState(''); 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>(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 = []; - if (node) { + const nodes = getActivedNodes(); + if (!nodes.length) return; + const allChildren: Array = []; + 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 = []; + 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 = []; + 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 ( -

render:

- -

api:

-
-
- - onChange={setUseActived} /> - - - onChange={setExpandParent} /> - -
-
-
+ + + + 允许多个节点同时高亮 + value={activeMultiple} onChange={setActiveMultiple} /> + + + 插入节点使用高亮节点 + value={useActived} onChange={setUseActived} /> + + + 子节点展开触发父节点展开 + value={expandParent} onChange={setExpandParent} /> + + + -
+ { onChange={handleChange} onActive={handleActive} /> -

api:

+ + * 相关信息通过控制台输出 + ); }; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 96a1b4aacf..89c13976d0 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -144132,140 +144132,152 @@ exports[`csr snapshot test > csr test packages/components/tree/_example/operatio
-

- render: -

-
-
-
- 暂无数据 -
-
-
-

- api: -

+
-
-
+
+ +
+
+
+
+
+
+ 插入节点使用高亮节点 - +
-
- -
+ +
+
+
+
- +
-
- -
+ +
+
- +
- - filter: + + filter: + - -
- +
+ +
@@ -144275,20 +144287,11 @@ exports[`csr snapshot test > csr test packages/components/tree/_example/operatio class="t-space-item" >
暂无数据
-
-

- api: -

-
@@ -144466,6 +144469,22 @@ exports[`csr snapshot test > csr test packages/components/tree/_example/operatio
+
+
+
+ + * 相关信息通过控制台输出 + +
+
+
`; @@ -150526,7 +150545,7 @@ exports[`ssr snapshot test > ssr test packages/components/tree/_example/line.tsx exports[`ssr snapshot test > ssr test packages/components/tree/_example/load.tsx 1`] = `"
暂无数据
"`; -exports[`ssr snapshot test > ssr test packages/components/tree/_example/operations.tsx 1`] = `"

render:

暂无数据

api:

filter:
暂无数据

api:

"`; +exports[`ssr snapshot test > ssr test packages/components/tree/_example/operations.tsx 1`] = `"
允许多个节点同时高亮
插入节点使用高亮节点
子节点展开触发父节点展开
filter:
暂无数据
* 相关信息通过控制台输出
"`; exports[`ssr snapshot test > ssr test packages/components/tree/_example/state.tsx 1`] = `"

state:

暂无数据

api:

"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4487fda12b..cb0b85c2ff 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1216,7 +1216,7 @@ exports[`ssr snapshot test > ssr test packages/components/tree/_example/line.tsx exports[`ssr snapshot test > ssr test packages/components/tree/_example/load.tsx 1`] = `"
暂无数据
"`; -exports[`ssr snapshot test > ssr test packages/components/tree/_example/operations.tsx 1`] = `"

render:

暂无数据

api:

filter:
暂无数据

api:

"`; +exports[`ssr snapshot test > ssr test packages/components/tree/_example/operations.tsx 1`] = `"
允许多个节点同时高亮
插入节点使用高亮节点
子节点展开触发父节点展开
filter:
暂无数据
* 相关信息通过控制台输出
"`; exports[`ssr snapshot test > ssr test packages/components/tree/_example/state.tsx 1`] = `"

state:

暂无数据

api:

"`;