feat: tree token (ant-design#44282)

components/theme/interface/components.ts

@@ -54,6 +54,8 @@ import type { ComponentToken as TimelineComponentToken } from '../../timeline/st
 import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
 import type { ComponentToken as TourComponentToken } from '../../tour/style';
 import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
+import type { ComponentToken as TreeComponentToken } from '../../tree/style';
+import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 
@@ -102,8 +104,8 @@ export interface ComponentTokenMap {
   Statistic?: StatisticComponentToken;
   Switch?: SwitchComponentToken;
   Tag?: TagComponentToken;
-  Tree?: {};
-  TreeSelect?: {};
+  Tree?: TreeComponentToken;
+  TreeSelect?: TreeSelectComponentToken;
   Typography?: TypographyComponentToken;
   Timeline?: TimelineComponentToken;
   Transfer?: TransferComponentToken;

components/tree-select/__tests__/demo-extend.test.ts

@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('tree-select');
+extendTest('tree-select', { skip: ['component-token.tsx'] });

components/tree-select/__tests__/demo.test.tsx

@@ -3,6 +3,7 @@ import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('tree-select', {
   testRootProps: false,
+  skip: ['component-token.tsx'],
 });
 
 rootPropsTest('tree-select', (TreeSelect, props) => <TreeSelect {...props} />, {

components/tree-select/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token
+
+## en-US
+
+Component Token

components/tree-select/demo/component-token.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { ConfigProvider, TreeSelect } from 'antd';
+
+const treeData = [
+  {
+    value: 'parent 1',
+    title: 'parent 1',
+    children: [
+      {
+        value: 'parent 1-0',
+        title: 'parent 1-0',
+        children: [
+          {
+            value: 'leaf1',
+            title: 'leaf1',
+          },
+          {
+            value: 'leaf2',
+            title: 'leaf2',
+          },
+        ],
+      },
+      {
+        value: 'parent 1-1',
+        title: 'parent 1-1',
+        children: [
+          {
+            value: 'leaf3',
+            title: <b style={{ color: '#08c' }}>leaf3</b>,
+          },
+        ],
+      },
+    ],
+  },
+];
+const App: React.FC = () => {
+  const [value, setValue] = useState<string>();
+
+  const onChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          TreeSelect: {
+            nodeHoverBg: '#fff2f0',
+            nodeSelectedBg: '#ffa39e',
+          },
+        },
+      }}
+    >
+      <TreeSelect
+        showSearch
+        style={{ width: '100%' }}
+        value={value}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="Please select"
+        allowClear
+        treeDefaultExpandAll
+        onChange={onChange}
+        treeData={treeData}
+      />
+    </ConfigProvider>
+  );
+};
+
+export default App;

components/tree-select/index.en-US.md

@@ -27,6 +27,7 @@ Tree selection control.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/suffix.tsx" debug>Suffix</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/tree-select/index.zh-CN.md

@@ -28,6 +28,7 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/suffix.tsx" debug>后缀图标</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/tree-select/style/index.ts

@@ -1,7 +1,10 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genTreeStyle } from '../../tree/style';
+import type { TreeSharedToken } from '../../tree/style';
+import { genTreeStyle, initComponentToken } from '../../tree/style';
+
+export interface ComponentToken extends TreeSharedToken {}
 
 interface TreeSelectToken extends FullToken<'TreeSelect'> {
   treePrefixCls: string;
@@ -25,7 +28,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token) => {
         // ====================== Tree ======================
         genTreeStyle(
           treePrefixCls,
-          mergeToken<AliasToken>(token, { colorBgContainer: colorBgElevated }),
+          mergeToken<AliasToken & TreeSharedToken>(token, { colorBgContainer: colorBgElevated }),
         ),
         {
           [treeCls]: {
@@ -64,8 +67,12 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token) => {
 
 // ============================== Export ==============================
 export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
-  return genComponentStyleHook('TreeSelect', (token) => {
-    const treeSelectToken = mergeToken<TreeSelectToken>(token, { treePrefixCls });
-    return [genBaseStyle(treeSelectToken)];
-  })(prefixCls);
+  return genComponentStyleHook(
+    'TreeSelect',
+    (token) => {
+      const treeSelectToken = mergeToken<TreeSelectToken>(token, { treePrefixCls });
+      return [genBaseStyle(treeSelectToken)];
+    },
+    initComponentToken,
+  )(prefixCls);
 }

components/tree/__tests__/demo-extend.test.ts

@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] });
+extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] });

components/tree/__tests__/demo.test.ts

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] });
+demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] });

components/tree/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token
+
+## en-US
+
+Component Token

components/tree/demo/component-token.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ConfigProvider, Tree } from 'antd';
+import type { DataNode, TreeProps } from 'antd/es/tree';
+
+const treeData: DataNode[] = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        disabled: true,
+        children: [
+          {
+            title: 'leaf',
+            key: '0-0-0-0',
+            disableCheckbox: true,
+          },
+          {
+            title: 'leaf',
+            key: '0-0-0-1',
+          },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => {
+  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  };
+
+  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
+    console.log('onCheck', checkedKeys, info);
+  };
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Tree: {
+            nodeHoverBg: '#fff2f0',
+            nodeSelectedBg: '#ffa39e',
+          },
+        },
+      }}
+    >
+      <Tree
+        checkable
+        defaultExpandedKeys={['0-0-0', '0-0-1']}
+        defaultSelectedKeys={['0-0-0', '0-0-1']}
+        defaultCheckedKeys={['0-0-0', '0-0-1']}
+        onSelect={onSelect}
+        onCheck={onCheck}
+        treeData={treeData}
+      />
+    </ConfigProvider>
+  );
+};
+
+export default App;

components/tree/index.en-US.md

@@ -30,6 +30,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
 <code src="./demo/big-data.tsx" debug>Big data</code>
 <code src="./demo/block-node.tsx">Block Node</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
@@ -126,7 +127,7 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t
 
 ## Design Token
 
-<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+<ComponentTokenTable component="Tree"></ComponentTokenTable>
 
 ## FAQ
 

components/tree/index.zh-CN.md

@@ -31,6 +31,7 @@ demo:
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
 <code src="./demo/big-data.tsx" debug>大数据</code>
 <code src="./demo/block-node.tsx">占据整行</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 
@@ -128,7 +129,7 @@ demo:
 
 ## Design Token
 
-<ComponentTokenTable component="Transfer"></ComponentTokenTable>
+<ComponentTokenTable component="Tree"></ComponentTokenTable>
 
 ## FAQ