refactor: Cssinjs tree select (#34383)

* refactor: TreeSelect move in cssinjs

* fix: checkbox style

components/cascader/style/index.tsx

@@ -18,12 +18,13 @@ import {
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
 interface CascaderToken extends DerivativeToken {
+  prefixCls: string;
   cascaderCls: string;
 }
 
 // =============================== Base ===============================
-const genBaseStyle = (token: CascaderToken): CSSInterpolation => {
-  const { cascaderCls } = token;
+const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation => {
+  const { prefixCls, cascaderCls } = token;
   const cascaderMenuItemCls = `${cascaderCls}-menu-item`;
   const iconCls = `
     ${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
@@ -48,7 +49,10 @@ const genBaseStyle = (token: CascaderToken): CSSInterpolation => {
     // ==                      Popup                      ==
     // =====================================================
     {
-      [`${cascaderCls}-dropdown`]: {
+      [`${cascaderCls}-dropdown`]: [
+        // ==================== Checkbox ====================
+        getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
+        {
           [cascaderCls]: {
             // ================== Checkbox ==================
             '&-checkbox': {
@@ -141,6 +145,7 @@ const genBaseStyle = (token: CascaderToken): CSSInterpolation => {
             },
           },
         },
+      ],
     },
     // =====================================================
     // ==                       RTL                       ==
@@ -159,13 +164,13 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
 
   const cascaderToken: CascaderToken = {
     ...token,
+    prefixCls,
     cascaderCls: `.${prefixCls}`,
   };
 
   return [
     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-      getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
-      genBaseStyle(cascaderToken),
+      genBaseStyle(cascaderToken, hashId),
     ]),
     hashId,
   ];

components/tree-select/index.tsx

@@ -20,6 +20,8 @@ import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 import { FormItemStatusContext } from '../form/context';
 import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
+import useStyle from './style';
+import useSelectStyle from '../select/style';
 
 type RawValue = string | number;
 
@@ -84,6 +86,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     direction,
     virtual,
     dropdownMatchSelectWidth,
+    iconPrefixCls,
   } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
 
@@ -93,13 +96,22 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     '`multiple` will always be `true` when `treeCheckable` is true',
   );
 
+  const rootPrefixCls = getPrefixCls();
   const prefixCls = getPrefixCls('select', customizePrefixCls);
   const treePrefixCls = getPrefixCls('select-tree', customizePrefixCls);
   const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls);
 
-  const mergedDropdownClassName = classNames(dropdownClassName, `${treeSelectPrefixCls}-dropdown`, {
+  const [wrapSelectSSR, hashId] = useSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls);
+  const [wrapTreeSelectSSR] = useStyle(treeSelectPrefixCls, treePrefixCls);
+
+  const mergedDropdownClassName = classNames(
+    dropdownClassName,
+    `${treeSelectPrefixCls}-dropdown`,
+    {
       [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
-  });
+    },
+    hashId,
+  );
 
   const isMultiple = !!(treeCheckable || multiple);
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
@@ -156,10 +168,10 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     },
     getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
     className,
+    hashId,
   );
-  const rootPrefixCls = getPrefixCls();
 
-  return (
+  const returnNode = (
     <RcTreeSelect
       virtual={virtual}
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
@@ -195,6 +207,8 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       showArrow={hasFeedback || showArrow}
     />
   );
+
+  return wrapSelectSSR(wrapTreeSelectSSR(returnNode));
 };
 
 const TreeSelectRef = React.forwardRef(InternalTreeSelect) as <

components/tree-select/style/index.less

@@ -1,57 +1,57 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../tree/style/mixin';
-@import '../../checkbox/style/mixin';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
+// @import '../../tree/style/mixin';
+// @import '../../checkbox/style/mixin';
 
-@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
-@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+// @tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
+// @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
 
-.antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');
+// .antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');
 
-.@{tree-select-prefix-cls} {
-  // ======================= Dropdown =======================
-  &-dropdown {
-    padding: @padding-xs (@padding-xs / 2);
+// .@{tree-select-prefix-cls} {
+//   // ======================= Dropdown =======================
+//   &-dropdown {
+//     padding: @padding-xs (@padding-xs / 2);
 
-    &-rtl {
-      direction: rtl;
-    }
-    // ======================== Tree ========================
-    .@{select-tree-prefix-cls} {
-      border-radius: 0;
+//     &-rtl {
+//       direction: rtl;
+//     }
+//     // ======================== Tree ========================
+//     .@{select-tree-prefix-cls} {
+//       border-radius: 0;
 
-      &-list-holder-inner {
-        align-items: stretch;
+//       &-list-holder-inner {
+//         align-items: stretch;
 
-        .@{select-tree-prefix-cls}-treenode {
-          .@{select-tree-prefix-cls}-node-content-wrapper {
-            flex: auto;
-          }
-        }
-      }
-    }
-  }
-}
+//         .@{select-tree-prefix-cls}-treenode {
+//           .@{select-tree-prefix-cls}-node-content-wrapper {
+//             flex: auto;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
 
-.@{select-tree-prefix-cls} {
-  .antTreeFn(@select-tree-prefix-cls);
+// .@{select-tree-prefix-cls} {
+//   .antTreeFn(@select-tree-prefix-cls);
 
-  // change switcher icon rotation in rtl direction
-  & &-switcher {
-    &_close {
-      .@{select-tree-prefix-cls}-switcher-icon {
-        svg {
-          .@{tree-select-prefix-cls}-dropdown-rtl & {
-            transform: rotate(90deg);
-          }
-        }
-      }
-    }
+//   // change switcher icon rotation in rtl direction
+//   & &-switcher {
+//     &_close {
+//       .@{select-tree-prefix-cls}-switcher-icon {
+//         svg {
+//           .@{tree-select-prefix-cls}-dropdown-rtl & {
+//             transform: rotate(90deg);
+//           }
+//         }
+//       }
+//     }
 
-    &-loading-icon {
-      .@{tree-select-prefix-cls}-dropdown-rtl & {
-        transform: scaleY(-1);
-      }
-    }
-  }
-}
+//     &-loading-icon {
+//       .@{tree-select-prefix-cls}-dropdown-rtl & {
+//         transform: scaleY(-1);
+//       }
+//     }
+//   }
+// }

components/tree-select/style/index.tsx

@@ -1,7 +1,96 @@
-import '../../style/index.less';
-import './index.less';
+// import '../../style/index.less';
+// import './index.less';
 
-// style dependencies
-// deps-lint-skip: tree, form
-import '../../select/style';
-import '../../empty/style';
+// // style dependencies
+// // deps-lint-skip: tree, form
+// import '../../select/style';
+// import '../../empty/style';
+
+// deps-lint-skip-all
+import { CSSInterpolation } from '@ant-design/cssinjs';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  UseComponentStyleResult,
+} from '../../_util/theme';
+import { getStyle as getCheckboxStyle } from '../../checkbox/style';
+import { genTreeStyle } from '../../tree/style';
+
+interface TreeSelectToken extends DerivativeToken {
+  selectCls: string;
+  treePrefixCls: string;
+}
+
+// =============================== Base ===============================
+const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation => {
+  const { selectCls, treePrefixCls } = token;
+  const treeCls = `.${treePrefixCls}`;
+
+  return [
+    // ======================================================
+    // ==                     Dropdown                     ==
+    // ======================================================
+    {
+      [`${selectCls}-dropdown`]: [
+        {
+          padding: `${token.paddingXS}px ${token.paddingXS / 2}px`,
+        },
+
+        // ====================== Tree ======================
+        genTreeStyle(treePrefixCls, token, hashId),
+        {
+          [treeCls]: {
+            borderRadius: 0,
+            '&-list-holder-inner': {
+              alignItems: 'stretch',
+
+              [`${treeCls}-treenode`]: {
+                [`${treeCls}-node-content-wrapper`]: {
+                  flex: 'auto',
+                },
+              },
+            },
+          },
+        },
+
+        // ==================== Checkbox ====================
+        getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId),
+
+        // ====================== RTL =======================
+        {
+          '&-rtl': {
+            direction: 'rtl',
+
+            [`${treeCls}-switcher${treeCls}-switcher_close`]: {
+              [`${treeCls}-switcher-icon svg`]: {
+                transform: 'rotate(90deg)',
+              },
+            },
+          },
+        },
+      ],
+    },
+  ];
+};
+
+// ============================== Export ==============================
+export default function useStyle(
+  prefixCls: string,
+  treePrefixCls: string,
+): UseComponentStyleResult {
+  const [theme, token, hashId] = useToken();
+
+  const treeSelectToken: TreeSelectToken = {
+    ...token,
+    selectCls: `.${prefixCls}`,
+    treePrefixCls,
+  };
+
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      genBaseStyle(treeSelectToken, hashId),
+    ]),
+    hashId,
+  ];
+}