feat: Table support cssVar (ant-design#45856)

* feat: Table support cssVar * fix: fix * fix: fix * Update check-cssinjs.tsx Signed-off-by: lijianan <[email protected]> * Update components/table/style/fixed.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: lijianan <[email protected]> * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix * feat: optimize token * chore: update --------- Signed-off-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 17, 2023 · a1f77f3 · a1f77f3
1 parent 427d1a3
commit a1f77f3
Show file tree

Hide file tree

Showing 17 changed files with 261 additions and 201 deletions.
diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
@@ -16,6 +16,7 @@ import { devUseWarning } from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -56,6 +57,7 @@ import type {
 import RcTable from './RcTable';
 import RcVirtualTable from './RcTable/VirtualTable';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export type { ColumnsType, TablePaginationConfig };
 
@@ -537,11 +539,13 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     };
   }
 
-  // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
   const [, token] = useToken();
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const wrapperClassNames = classNames(
+    rootCls,
     `${prefixCls}-wrapper`,
     table?.className,
     {
@@ -584,7 +588,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     virtualProps.listItemHeight = listItemHeight;
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div ref={rootRef} className={wrapperClassNames} style={mergedStyle}>
       <Spin spinning={false} {...spinProps}>
         {topPaginationNode}

diff --git a/components/table/style/bordered.ts b/components/table/style/bordered.ts
@@ -1,10 +1,20 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
-  const { componentCls } = token;
-  const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`;
+  const {
+    componentCls,
+    lineWidth,
+    lineType,
+    tableBorderColor,
+    tableHeaderBg,
+    tablePaddingVertical,
+    tablePaddingHorizontal,
+    calc,
+  } = token;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
 
   const getSizeBorderStyle = (
     size: 'small' | 'middle',
@@ -19,7 +29,8 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
             > table > tbody > tr > td
           `]: {
             [`> ${componentCls}-expanded-row-fixed`]: {
-              margin: `-${paddingVertical}px -${paddingHorizontal + token.lineWidth}px`,
+              margin: `${unit(calc(paddingVertical).mul(-1).equal())}
+              ${unit(calc(calc(paddingHorizontal).add(lineWidth)).mul(-1).equal())}`,
             },
           },
         },
@@ -88,14 +99,13 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
                 > tbody > tr > td
               `]: {
                 [`> ${componentCls}-expanded-row-fixed`]: {
-                  margin: `-${token.tablePaddingVertical}px -${
-                    token.tablePaddingHorizontal + token.lineWidth
-                  }px`,
-
+                  margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
+                    calc(calc(tablePaddingHorizontal).add(lineWidth)).mul(-1).equal(),
+                  )}`,
                   '&::after': {
                     position: 'absolute',
                     top: 0,
-                    insetInlineEnd: token.lineWidth,
+                    insetInlineEnd: lineWidth,
                     bottom: 0,
                     borderInlineEnd: tableBorder,
                     content: '""',
@@ -149,7 +159,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         },
         // https://github.com/ant-design/ant-design/issues/35577
         '&-scrollbar:not([rowspan])': {
-          boxShadow: `0 ${token.lineWidth}px 0 ${token.lineWidth}px ${token.tableHeaderBg}`,
+          boxShadow: `0 ${unit(lineWidth)} 0 ${unit(lineWidth)} ${tableHeaderBg}`,
         },
       },
 

diff --git a/components/table/style/cssVar.ts b/components/table/style/cssVar.ts
@@ -0,0 +1,8 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister<'Table'>('Table', prepareComponentToken, {
+  unitless: {
+    expandIconScale: true,
+  },
+});
diff --git a/components/table/style/expand.ts b/components/table/style/expand.ts
@@ -1,13 +1,13 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
+import { operationUnit } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
-import { operationUnit } from '../../style';
 
 const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
   const {
     componentCls,
     antCls,
-    controlInteractiveSize: checkboxSize,
     motionDurationSlow,
     lineWidth,
     paddingXS,
@@ -16,19 +16,18 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     tableExpandIconBg,
     tableExpandColumnWidth,
     borderRadius,
-    fontSize,
-    fontSizeSM,
-    lineHeight,
     tablePaddingVertical,
     tablePaddingHorizontal,
     tableExpandedRowBg,
     paddingXXS,
+    expandIconMarginTop,
+    expandIconSize,
+    expandIconHalfInner,
+    expandIconScale,
+    calc,
   } = token;
-  const halfInnerSize = checkboxSize / 2 - lineWidth;
-  // must be odd number, unless it cannot align center
-  const expandIconSize = halfInnerSize * 2 + lineWidth * 3;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
-  const expandIconLineOffset = paddingXXS - lineWidth;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
+  const expandIconLineOffset = calc(paddingXXS).sub(lineWidth).equal();
 
   return {
     [`${componentCls}-wrapper`]: {
@@ -60,11 +59,11 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         height: expandIconSize,
         padding: 0,
         color: 'inherit',
-        lineHeight: `${expandIconSize}px`,
+        lineHeight: unit(expandIconSize),
         background: tableExpandIconBg,
         border: tableBorder,
         borderRadius,
-        transform: `scale(${checkboxSize / expandIconSize})`,
+        transform: `scale(${expandIconScale})`,
         transition: `all ${motionDurationSlow}`,
         userSelect: 'none',
 
@@ -80,7 +79,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         },
 
         '&::before': {
-          top: halfInnerSize,
+          top: expandIconHalfInner,
           insetInlineEnd: expandIconLineOffset,
           insetInlineStart: expandIconLineOffset,
           height: lineWidth,
@@ -89,7 +88,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         '&::after': {
           top: expandIconLineOffset,
           bottom: expandIconLineOffset,
-          insetInlineStart: halfInnerSize,
+          insetInlineStart: expandIconHalfInner,
           width: lineWidth,
           transform: 'rotate(90deg)',
         },
@@ -115,9 +114,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       },
 
       [`${componentCls}-row-indent + ${componentCls}-row-expand-icon`]: {
-        marginTop:
-          (fontSize * lineHeight - lineWidth * 3) / 2 -
-          Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
+        marginTop: expandIconMarginTop,
         marginInlineEnd: paddingXS,
       },
 
@@ -142,8 +139,10 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       // With fixed
       [`${componentCls}-expanded-row-fixed`]: {
         position: 'relative',
-        margin: `-${tablePaddingVertical}px -${tablePaddingHorizontal}px`,
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        margin: `${unit(calc(tablePaddingVertical).mul(-1).equal())} ${unit(
+          calc(tablePaddingHorizontal).mul(-1).equal(),
+        )}`,
+        padding: `${unit(tablePaddingVertical)} ${unit(tablePaddingHorizontal)}`,
       },
     },
   };

diff --git a/components/table/style/filter.ts b/components/table/style/filter.ts
@@ -1,3 +1,5 @@
+import { unit } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
@@ -15,7 +17,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
     lineWidth,
     lineType,
     tableBorderColor,
-    tableHeaderIconColor,
+    headerIconColor,
     fontSizeSM,
     tablePaddingHorizontal,
     borderRadius,
@@ -30,11 +32,12 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
     controlItemBgActive,
     boxShadowSecondary,
     filterDropdownMenuBg,
+    calc,
   } = token;
   const dropdownPrefixCls = `${antCls}-dropdown`;
   const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`;
   const treePrefixCls = `${antCls}-tree`;
-  const tableBorder = `${lineWidth}px ${lineType} ${tableBorderColor}`;
+  const tableBorder = `${unit(lineWidth)} ${lineType} ${tableBorderColor}`;
 
   return [
     {
@@ -48,10 +51,12 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           position: 'relative',
           display: 'flex',
           alignItems: 'center',
-          marginBlock: -paddingXXS,
-          marginInline: `${paddingXXS}px ${-tablePaddingHorizontal / 2}px`,
-          padding: `0 ${paddingXXS}px`,
-          color: tableHeaderIconColor,
+          marginBlock: calc(paddingXXS).mul(-1).equal(),
+          marginInline: `${unit(paddingXXS)} ${unit(
+            calc(tablePaddingHorizontal).div(2).mul(-1).equal(),
+          )}`,
+          padding: `0 ${unit(paddingXXS)}`,
+          color: headerIconColor,
           fontSize: fontSizeSM,
           borderRadius,
           cursor: 'pointer',
@@ -93,7 +98,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
 
             '&:empty::after': {
               display: 'block',
-              padding: `${paddingXS}px 0`,
+              padding: `${unit(paddingXS)} 0`,
               color: colorTextDisabled,
               fontSize: fontSizeSM,
               textAlign: 'center',
@@ -102,7 +107,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           },
 
           [`${tableFilterDropdownPrefixCls}-tree`]: {
-            paddingBlock: `${paddingXS}px 0`,
+            paddingBlock: `${unit(paddingXS)} 0`,
             paddingInline: paddingXS,
 
             [treePrefixCls]: {
@@ -144,7 +149,7 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
           [`${tableFilterDropdownPrefixCls}-btns`]: {
             display: 'flex',
             justifyContent: 'space-between',
-            padding: `${paddingXS - lineWidth}px ${paddingXS}px`,
+            padding: `${unit(calc(paddingXS).sub(lineWidth).equal())} ${unit(paddingXS)}`,
             overflow: 'hidden',
             borderTop: tableBorder,
           },

diff --git a/components/table/style/fixed.ts b/components/table/style/fixed.ts
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
@@ -11,6 +12,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     zIndexTableFixed,
     tableBg,
     zIndexTableSticky,
+    calc,
   } = token;
 
   const shadowColor = colorSplit;
@@ -37,7 +39,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           _skip_check_: true,
           value: 0,
         },
-        bottom: -lineWidth,
+        bottom: calc(lineWidth).mul(-1).equal(),
         width: 30,
         transform: 'translateX(100%)',
         transition: `box-shadow ${motionDurationSlow}`,
@@ -55,7 +57,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       `]: {
         position: 'absolute',
         top: 0,
-        bottom: -lineWidth,
+        bottom: calc(lineWidth).mul(-1).equal(),
         left: {
           _skip_check_: true,
           value: 0,
@@ -72,7 +74,7 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           position: 'absolute',
           top: 0,
           bottom: 0,
-          zIndex: zIndexTableSticky + 1,
+          zIndex: calc(zIndexTableSticky).add(1).equal({ unit: false }),
           width: 30,
           transition: `box-shadow ${motionDurationSlow}`,
           content: '""',