refactor:statistic (#6240)

* refactor:statistic

* fix inheritAttrs: false & attrs.class

components/statistic/Statistic.tsx

@@ -7,6 +7,9 @@ import type { valueType } from './utils';
 import Skeleton from '../skeleton/Skeleton';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
+// CSSINJS
+import useStyle from './style';
+
 export const statisticProps = () => ({
   prefixCls: String,
   decimalSeparator: String,
@@ -30,14 +33,19 @@ export type StatisticProps = Partial<ExtractPropTypes<ReturnType<typeof statisti
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AStatistic',
+  inheritAttrs: false,
   props: initDefaultProps(statisticProps(), {
     decimalSeparator: '.',
     groupSeparator: ',',
     loading: false,
   }),
   slots: ['title', 'prefix', 'suffix', 'formatter'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('statistic', props);
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     return () => {
       const { value = 0, valueStyle, valueRender } = props;
       const pre = prefixCls.value;
@@ -56,8 +64,11 @@ export default defineComponent({
       if (valueRender) {
         valueNode = valueRender(valueNode);
       }
-      return (
-        <div class={[pre, { [`${pre}-rtl`]: direction.value === 'rtl' }]}>
+      return wrapSSR(
+        <div
+          {...attrs}
+          class={[pre, { [`${pre}-rtl`]: direction.value === 'rtl' }, attrs.class, hashId.value]}
+        >
           {title && <div class={`${pre}-title`}>{title}</div>}
           <Skeleton paragraph={false} loading={props.loading}>
             <div style={valueStyle} class={`${pre}-content`}>
@@ -66,7 +77,7 @@ export default defineComponent({
               {suffix && <span class={`${pre}-content-suffix`}>{suffix}</span>}
             </div>
           </Skeleton>
-        </div>
+        </div>,
       );
     };
   },

components/statistic/style/index.less

@@ -1,40 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@statistic-prefix-cls: ~'@{ant-prefix}-statistic';
-
-.@{statistic-prefix-cls} {
-  .reset-component();
-
-  &-title {
-    margin-bottom: @margin-xss;
-    color: @text-color-secondary;
-    font-size: @statistic-title-font-size;
-  }
-
-  &-content {
-    color: @heading-color;
-    font-size: @statistic-content-font-size;
-    font-family: @statistic-font-family;
-
-    &-value {
-      display: inline-block;
-      direction: ltr;
-    }
-
-    &-prefix,
-    &-suffix {
-      display: inline-block;
-    }
-
-    &-prefix {
-      margin-right: 4px;
-    }
-
-    &-suffix {
-      margin-left: 4px;
-    }
-  }
-}
-
-@import './rtl';

components/statistic/style/index.tsx

@@ -1,2 +1,69 @@
-import '../../style/index.less';
-import './index.less';
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent } from '../../_style';
+
+interface StatisticToken extends FullToken<'Statistic'> {
+  statisticTitleFontSize: number;
+  statisticContentFontSize: number;
+  statisticFontFamily: string;
+}
+
+const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken): CSSObject => {
+  const {
+    componentCls,
+    marginXXS,
+    padding,
+    colorTextDescription,
+    statisticTitleFontSize,
+    colorTextHeading,
+    statisticContentFontSize,
+    statisticFontFamily,
+  } = token;
+
+  return {
+    [`${componentCls}`]: {
+      ...resetComponent(token),
+      [`${componentCls}-title`]: {
+        marginBottom: marginXXS,
+        color: colorTextDescription,
+        fontSize: statisticTitleFontSize,
+      },
+
+      [`${componentCls}-skeleton`]: {
+        paddingTop: padding,
+      },
+
+      [`${componentCls}-content`]: {
+        color: colorTextHeading,
+        fontSize: statisticContentFontSize,
+        fontFamily: statisticFontFamily,
+        [`${componentCls}-content-value`]: {
+          display: 'inline-block',
+          direction: 'ltr',
+        },
+        [`${componentCls}-content-prefix, ${componentCls}-content-suffix`]: {
+          display: 'inline-block',
+        },
+        [`${componentCls}-content-prefix`]: {
+          marginInlineEnd: marginXXS,
+        },
+        [`${componentCls}-content-suffix`]: {
+          marginInlineStart: marginXXS,
+        },
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Statistic', token => {
+  const { fontSizeHeading3, fontSize, fontFamily } = token;
+
+  const statisticToken = mergeToken<StatisticToken>(token, {
+    statisticTitleFontSize: fontSize,
+    statisticContentFontSize: fontSizeHeading3,
+    statisticFontFamily: fontFamily,
+  });
+  return [genStatisticStyle(statisticToken)];
+});

components/statistic/style/rtl.less

@@ -1,21 +0,0 @@
-.@{statistic-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-content {
-    &-prefix {
-      .@{statistic-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 4px;
-      }
-    }
-
-    &-suffix {
-      .@{statistic-prefix-cls}-rtl & {
-        margin-right: 4px;
-        margin-left: 0;
-      }
-    }
-  }
-}

components/style.ts

@@ -53,7 +53,7 @@ import './drawer/style';
 // import './comment/style';
 // import './config-provider/style';
 import './empty/style';
-import './statistic/style';
+// import './statistic/style';
 import './result/style';
 // import './descriptions/style';
 // import './page-header/style';