From 9a5b603400e8d006fc6977b023db2224d846babf Mon Sep 17 00:00:00 2001
From: shifeng1993 <shifeng199307@gmail.com>
Date: Tue, 7 Feb 2023 22:16:47 +0800
Subject: [PATCH 1/2] refactor:statistic

---
 components/statistic/Statistic.tsx    | 17 +++++--
 components/statistic/style/index.less | 40 ---------------
 components/statistic/style/index.tsx  | 71 ++++++++++++++++++++++++++-
 components/statistic/style/rtl.less   | 21 --------
 components/style.ts                   |  2 +-
 5 files changed, 83 insertions(+), 68 deletions(-)
 delete mode 100644 components/statistic/style/index.less
 delete mode 100644 components/statistic/style/rtl.less

diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index e0a75d07d7..dcfcadff0e 100644
--- a/components/statistic/Statistic.tsx
+++ b/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,
@@ -36,8 +39,12 @@ export default defineComponent({
     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 +63,10 @@ export default defineComponent({
       if (valueRender) {
         valueNode = valueRender(valueNode);
       }
-      return (
-        <div class={[pre, { [`${pre}-rtl`]: direction.value === 'rtl' }]}>
+      return wrapSSR(
+        <div
+          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 +75,7 @@ export default defineComponent({
               {suffix && <span class={`${pre}-content-suffix`}>{suffix}</span>}
             </div>
           </Skeleton>
-        </div>
+        </div>,
       );
     };
   },
diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less
deleted file mode 100644
index 17d023ffa3..0000000000
--- a/components/statistic/style/index.less
+++ /dev/null
@@ -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';
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
index 3a3ab0de59..ee4ae80c68 100644
--- a/components/statistic/style/index.tsx
+++ b/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)];
+});
diff --git a/components/statistic/style/rtl.less b/components/statistic/style/rtl.less
deleted file mode 100644
index 93e264a359..0000000000
--- a/components/statistic/style/rtl.less
+++ /dev/null
@@ -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;
-      }
-    }
-  }
-}
diff --git a/components/style.ts b/components/style.ts
index 0ab8e11ce1..973808d0c9 100644
--- a/components/style.ts
+++ b/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';

From 8569079cc452a4553c3cf6ee0a0a364cb6249412 Mon Sep 17 00:00:00 2001
From: shifeng1993 <shifeng199307@gmail.com>
Date: Wed, 8 Feb 2023 00:16:50 +0800
Subject: [PATCH 2/2] fix inheritAttrs: false & attrs.class

---
 components/statistic/Statistic.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index dcfcadff0e..9e75b352a3 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -33,6 +33,7 @@ export type StatisticProps = Partial<ExtractPropTypes<ReturnType<typeof statisti
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AStatistic',
+  inheritAttrs: false,
   props: initDefaultProps(statisticProps(), {
     decimalSeparator: '.',
     groupSeparator: ',',
@@ -65,6 +66,7 @@ export default defineComponent({
       }
       return wrapSSR(
         <div
+          {...attrs}
           class={[pre, { [`${pre}-rtl`]: direction.value === 'rtl' }, attrs.class, hashId.value]}
         >
           {title && <div class={`${pre}-title`}>{title}</div>}