fix(Tree): update checked state logic to consider indeterminate nodes (#3828)

* fix(Tree): update checked state logic to consider indeterminate nodes

* chore: update demo

* fix(Tree): update disableCheck logic

* chore: update snapshots

* chore: update CHANGELOG.md

* docs: add checkable and strictly mode switches to lazy example

* chore: update CHANGELOG.md

* chore: sync common

* chore: update common

* chore: demo

* fix(Tree): improve checked state logic in handleChange

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: wū yāng <[email protected]>

Author: 3 people

packages/common

@@ -1,40 +1,40 @@
 import React, {
   forwardRef,
-  useState,
+  MouseEvent,
+  RefObject,
+  useCallback,
   useImperativeHandle,
   useMemo,
-  RefObject,
-  MouseEvent,
   useRef,
-  useCallback,
+  useState,
 } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import classNames from 'classnames';
 import { get } from 'lodash-es';
 
-import TreeNode from '@tdesign/common-js/tree-v1/tree-node';
 import log from '@tdesign/common-js/log/index';
+import TreeNode from '@tdesign/common-js/tree-v1/tree-node';
 import type {
   TreeNodeState,
   TreeNodeValue,
   TypeTreeNodeData,
   TypeTreeNodeModel,
 } from '@tdesign/common-js/tree-v1/types';
-import { TreeOptionData, StyledProps, ComponentScrollToElementParams } from '../common';
-import { TreeItemProps } from './interface';
-import TreeItem from './TreeItem';
 
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePersistFn } from '../hooks/usePersistFn';
+import { treeDefaultProps } from './defaultProps';
+import { TreeDraggableContext } from './hooks/TreeDraggableContext';
 import useControllable from './hooks/useControllable';
 import { useStore } from './hooks/useStore';
 import { useTreeConfig } from './hooks/useTreeConfig';
-import { TreeDraggableContext } from './hooks/TreeDraggableContext';
-import parseTNode from '../_util/parseTNode';
-import { usePersistFn } from '../hooks/usePersistFn';
 import useTreeVirtualScroll from './hooks/useTreeVirtualScroll';
+import TreeItem from './TreeItem';
 
-import type { TreeInstanceFunctions, TdTreeProps } from './type';
-import { treeDefaultProps } from './defaultProps';
-import useDefaultProps from '../hooks/useDefaultProps';
+import type { ComponentScrollToElementParams, StyledProps, TreeOptionData } from '../common';
+import type { TreeItemProps } from './interface';
+import type { TdTreeProps, TreeInstanceFunctions } from './type';
 
 export type TreeProps = TdTreeProps & StyledProps;
 
@@ -179,11 +179,12 @@ const Tree = forwardRef<TreeInstanceFunctions<TreeOptionData>, TreeProps>((origi
   };
 
   const handleChange: TreeItemProps['onChange'] = (node, ctx) => {
-    if (!node || disabled || node.disabled) {
-      return;
-    }
-    setChecked(node, !node.isChecked(), { ...ctx, trigger: 'node-click' });
+    if (!node || disabled || node.disabled) return;
+    const checked = node.toggleChecked();
+    const treeNodeModel = node?.getModel();
+    onChange?.(checked, { node: treeNodeModel, ...ctx, trigger: 'node-click' });
   };
+
   const handleScrollToElement = useCallback(
     (params: ComponentScrollToElementParams) => {
       let { index } = params;

packages/components/tree/Tree.tsx

@@ -50,7 +50,6 @@ const TreeItem = forwardRef(
       expandOnClickNode,
       activable,
       checkProps,
-      disableCheck,
       operations,
       onClick,
       onChange,
@@ -242,32 +241,20 @@ const TreeItem = forwardRef(
       });
 
       if (node.isCheckable()) {
-        let checkboxDisabled: boolean;
-        if (typeof disableCheck === 'function') {
-          checkboxDisabled = disableCheck(node.getModel());
-        } else {
-          checkboxDisabled = !!disableCheck;
-        }
-
-        if (node.isDisabled()) {
-          checkboxDisabled = true;
-        }
-
         let checkboxProps: CheckboxProps;
         if (typeof checkProps === 'function') {
           checkboxProps = checkProps(node.getModel());
         } else {
           checkboxProps = checkProps;
         }
-
         return (
           <Checkbox
             ref={setRefCurrent}
             checked={node.checked}
             indeterminate={node.indeterminate}
-            disabled={checkboxDisabled}
+            disabled={node.disabled}
             name={String(node.value)}
-            onChange={(checked, ctx) => onChange(node, ctx)}
+            onChange={(_, ctx) => onChange(node, ctx)}
             className={labelClasses}
             stopLabelTrigger={expandOnClickNode && !!node.children}
             {...checkboxProps}

packages/components/tree/TreeItem.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Tree } from 'tdesign-react';
+import React, { useState } from 'react';
+import { Space, Switch, Tree } from 'tdesign-react';
 import type { TreeProps } from 'tdesign-react';
 
 const items = [
@@ -14,6 +14,9 @@ const items = [
 ];
 
 export default () => {
+  const [checkable, setCheckable] = useState(true);
+  const [strictly, setStrictly] = useState(false);
+
   const load: TreeProps['load'] = (node) =>
     new Promise((resolve) => {
       setTimeout(() => {
@@ -38,5 +41,23 @@ export default () => {
     console.log('on load:', state);
   };
 
-  return <Tree data={items} hover expandAll load={load} onLoad={handleLoad} />;
+  return (
+    <Space direction="vertical">
+      <Space>
+        可选: <Switch value={checkable} onChange={(value) => setCheckable(value)} />
+      </Space>
+      <Space>
+        严格模式: <Switch value={checkable} onChange={(value) => setStrictly(value)} />
+      </Space>
+      <Tree
+        hover
+        valueMode="all"
+        data={items}
+        checkable={checkable}
+        checkStrictly={strictly}
+        load={load}
+        onLoad={handleLoad}
+      />
+    </Space>
+  );
 };

packages/components/tree/_example/lazy.tsx

@@ -8,6 +8,7 @@ const items = [
   },
   {
     value: 'node2',
+    disabled: true,
   },
 ];
 
@@ -21,6 +22,7 @@ export default () => {
   const [expandParent, setExpandParent] = useState(false);
   const [filterText, setFilterText] = useState('');
   const [activeIds, setActiveIds] = useState([]);
+  const [checkStrictly, setCheckStrictly] = useState(false);
 
   const getLabelContent = (node: TreeNodeModel) => {
     const pathNodes = node.getPath();
@@ -114,6 +116,22 @@ export default () => {
     }
   };
 
+  const canToggleDisable = (node: TreeNodeModel) => {
+    const parent = node.getParent?.();
+    const isCheckStrictly = false; // 默认关闭
+    if (!isCheckStrictly && parent?.disabled) {
+      return false; // 父节点被禁用时，子节点状态不支持手动改变
+    }
+    return true;
+  };
+
+  const toggleDisable = (node: TreeNodeModel) => {
+    treeRef.current.setItem(node.value, {
+      disabled: !node.disabled,
+    });
+    console.log(treeRef.current.getItems(node.value));
+  };
+
   const remove = (node: TreeNodeModel) => {
     treeRef.current.remove(node.value);
   };
@@ -129,6 +147,16 @@ export default () => {
       <Button style={{ marginLeft: '10px' }} size="small" variant="outline" onClick={() => insertAfter(node)}>
         后插节点
       </Button>
+      <Button
+        style={{ marginLeft: '10px' }}
+        size="small"
+        variant="base"
+        theme={node.disabled ? 'success' : 'warning'}
+        disabled={!canToggleDisable(node)}
+        onClick={() => toggleDisable(node)}
+      >
+        {node.disabled ? 'enable' : 'disable'}
+      </Button>
       <Button style={{ marginLeft: '10px' }} size="small" variant="base" theme="danger" onClick={() => remove(node)}>
         删除
       </Button>
@@ -291,6 +319,10 @@ export default () => {
     <Space direction="vertical">
       <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={checkStrictly} onChange={setCheckStrictly} />
+        </Space>
         <Space>
           <span>允许多个节点同时高亮</span>
           <Switch<boolean> value={activeMultiple} onChange={setActiveMultiple} />
@@ -316,7 +348,7 @@ export default () => {
         expandAll
         activable
         checkable
-        checkStrictly
+        checkStrictly={checkStrictly}
         line
         allowFoldNodeOnFilter
         data={items}

packages/components/tree/_example/operations.tsx

@@ -29,6 +29,7 @@ export function useStore(
     activeMultiple,
     actived,
     disabled,
+    disableCheck,
     draggable,
     checkable,
     value,
@@ -109,6 +110,7 @@ export function useStore(
       expandMutex,
       expandParent,
       disabled,
+      disableCheck,
       draggable,
       load,
       lazy,
@@ -185,6 +187,7 @@ export function useStore(
       activable,
       activeMultiple,
       disabled,
+      disableCheck,
       checkable,
       draggable,
       checkStrictly,
@@ -201,6 +204,7 @@ export function useStore(
     draggable,
     checkable,
     disabled,
+    disableCheck,
     expandAll,
     expandLevel,
     expandMutex,

packages/components/tree/hooks/useStore.ts

@@ -92,9 +92,11 @@ spline: explain
 ### 🐞 Bug Fixes
 - `Tree`: @RylanBot ([#3756](https://github.com/Tencent/tdesign-react/pull/3756))
   - 修正节点属性 `date-target` 单词拼写为 `data-target`，之前有使用该属性的业务请注意此变更 ⚠️
-  - 修复拖拽后展开收起图标展示异常的问题 
+  - 修复拖拽后展开收起图标展示异常的问题
 - `MessagePlugin`: 修复 `content` 为 `''` / `undefined` / `null` 时产生的报错  @RylanBot ([#3778](https://github.com/Tencent/tdesign-react/pull/3778))
-- `Table`: 修复未开启 `<React.StrictMode>` 时，`Loading` 挂载导致的页面闪烁问题 @RylanBot ([#3775](https://github.com/Tencent/tdesign-react/pull/3775))
+- `Table`: 
+  - 修复未开启 `<React.StrictMode>` 时，`Loading` 挂载导致的页面闪烁问题 @RylanBot ([#3775](https://github.com/Tencent/tdesign-react/pull/3775))
+  - 修复 `size='small'` 的 `firstFullRow` 尺寸比 `size='medium'` 大的异常 ([#common2253](https://github.com/Tencent/tdesign-common/pull/2253))
 - `Upload`: 修复拖拽模式下 `status` 更新错误 @RSS1102 ([#3801](https://github.com/Tencent/tdesign-react/pull/3801))
 - `Input`: 修复在开启 `readonly` 或者禁用 `allowInput` 情况下没有触发 `onFocus` 和 `onBlur` 的问题 @RylanBot ([#3800](https://github.com/Tencent/tdesign-react/pull/3800))
 - `Cascader`: