diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx index d7eb7b7f9c..0fbb98169e 100644 --- a/src/tree/Tree.tsx +++ b/src/tree/Tree.tsx @@ -104,6 +104,21 @@ const Tree = forwardRef, TreeProps>((origi return expanded; }, ); + + // 因为是被 useImperativeHandle 依赖的方法,使用 usePersistFn 变成持久化的。或者也可以使用 useCallback + const setIndeterminate = usePersistFn( + ( + node: TreeNode, + isIndeterminate: boolean, + ctx: { e?: MouseEvent; 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, 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 index ff21525af4..d8fd460d4b 100644 --- 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 ( -

render:

- -

api:

-
-
- - onChange={setUseActived} /> - - - onChange={setExpandParent} /> - -
-
-
- - - -
{ onChange={handleChange} onActive={handleActive} /> -

api:

- - - - - - - - -