refactor: statistic support css var (ant-design#45841)

* refactor: statistic support css var * chore: remove statistic from ignore list --------- Signed-off-by: MadCcc <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 14, 2023 · 5224c05 · 5224c05
1 parent 20cf0b6
commit 5224c05
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
@@ -5,6 +5,7 @@ import { ConfigContext } from '../config-provider';
 import Skeleton from '../skeleton';
 import StatisticNumber from './Number';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import type { FormatConfig, valueType } from './utils';
 
 export interface StatisticProps extends FormatConfig {
@@ -47,7 +48,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
 
   const prefixCls = getPrefixCls('statistic', customizePrefixCls);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const valueNode: React.ReactNode = (
     <StatisticNumber
@@ -70,7 +72,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     hashId,
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div
       className={cls}
       style={{ ...statistic?.style, ...style }}

diff --git a/components/statistic/style/cssVar.ts b/components/statistic/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Statistic', prepareComponentToken);
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -66,17 +66,19 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Statistic'> = (token) => {
+  const { fontSizeHeading3, fontSize } = token;
+  return {
+    titleFontSize: fontSize,
+    contentFontSize: fontSizeHeading3,
+  };
+};
+
 export default genComponentStyleHook(
   'Statistic',
   (token) => {
     const statisticToken = mergeToken<StatisticToken>(token, {});
     return [genStatisticStyle(statisticToken)];
   },
-  (token) => {
-    const { fontSizeHeading3, fontSize } = token;
-    return {
-      titleFontSize: fontSize,
-      contentFontSize: fontSizeHeading3,
-    };
-  },
+  prepareComponentToken,
 );
diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
@@ -62,7 +62,6 @@ async function checkCSSVar() {
     'select',
     'slider',
     'space',
-    'statistic',
     'steps',
     'switch',
     'table',