feat:[Tree] selected background color is gray when the node is disabl…

…ed (ant-design#52173) * feat:[Tree]对不可check的文本，select时候背景色改为灰色 * feat:[Tree] 修改disabled 选中的文本背景颜色 * feat: 对整行disable 的文本调整select背景色 * fix:恢复误改内容 * feat:删除不需要的多增加的注释内容 * feat：合并css选择器 * feat:更新 Tree snapshot * feat：删除不需要的提交 --------- Co-authored-by: 刘欢 <[email protected]> Co-authored-by: afc163 <[email protected]>
Jinbao1001 · Jan 2, 2025 · 2a21f7b · 2a21f7b
1 parent 8164b9e
commit 2a21f7b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 19 deletions.
diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -90,7 +90,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -218,7 +218,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -260,7 +260,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
@@ -4120,7 +4120,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -4248,7 +4248,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -4290,7 +4290,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span

diff --git a/components/tree/__tests__/__snapshots__/demo.test.ts.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
@@ -90,7 +90,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -218,7 +218,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -260,7 +260,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span
@@ -4005,7 +4005,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
           >
             <span
@@ -4133,7 +4133,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
           </div>
           <div
             aria-grabbed="false"
-            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
           >
             <span
@@ -4175,7 +4175,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               />
             </span>
             <span
-              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open ant-tree-node-selected"
               title="parent 1-1"
             >
               <span

diff --git a/components/tree/demo/basic.tsx b/components/tree/demo/basic.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => {
     <Tree
       checkable
       defaultExpandedKeys={['0-0-0', '0-0-1']}
-      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-1']}
       defaultCheckedKeys={['0-0-0', '0-0-1']}
       onSelect={onSelect}
       onCheck={onCheck}

diff --git a/components/tree/demo/component-token.tsx b/components/tree/demo/component-token.tsx
@@ -58,7 +58,7 @@ const App: React.FC = () => {
       <Tree
         checkable
         defaultExpandedKeys={['0-0-0', '0-0-1']}
-        defaultSelectedKeys={['0-0-0', '0-0-1']}
+        defaultSelectedKeys={['0-0-1']}
         defaultCheckedKeys={['0-0-0', '0-0-1']}
         onSelect={onSelect}
         onCheck={onCheck}

diff --git a/components/tree/demo/directory-debug.tsx b/components/tree/demo/directory-debug.tsx
@@ -9,8 +9,8 @@ const treeData: TreeDataNode[] = [
     title: 'parent 0',
     key: '0-0',
     children: [
-      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
-      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
+      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true, disabled: true },
+      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true, disableCheckbox: true },
     ],
   },
   {
@@ -46,7 +46,7 @@ const BasicDemo = () => <DirectoryTree {...sharedProps} multiple treeData={treeD
 
 const NormalDemo = () => <Tree {...sharedProps} defaultSelectedKeys={['0-1']} />;
 
-const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1']} />;
+const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1','0-0-0', '0-0-1','0-1-1']} />;
 
 const NormalDragDemo = () => <Tree {...sharedProps} draggable defaultSelectedKeys={['0-1-0']} />;
 

diff --git a/components/tree/demo/multiple-line.tsx b/components/tree/demo/multiple-line.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => {
     <Tree
       checkable
       defaultExpandedKeys={['0-0-0', '0-0-1']}
-      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-1']}
       defaultCheckedKeys={['0-0-0', '0-0-1']}
       onSelect={onSelect}
       onCheck={onCheck}

diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts
@@ -119,8 +119,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
     nodeSelectedBg,
     nodeHoverBg,
     colorTextQuaternary,
+    controlItemBgActiveDisabled,
   } = token;
-
   return {
     [treeCls]: {
       ...resetComponent(token),
@@ -199,6 +199,11 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
           },
         },
 
+        [`${treeCls}-checkbox-disabled + ${treeCls}-node-selected,&${treeNodeCls}-disabled${treeNodeCls}-selected ${treeCls}-node-content-wrapper`]:
+          {
+            backgroundColor: controlItemBgActiveDisabled,
+          },
+
         // not disable
         [`&:not(${treeNodeCls}-disabled)`]: {
           // >>> Title