feat: add loading prop for Statistic (#26811)

* feat: add loading prop for Statistic

* feat: update statistic demo

* feat: add style dependency

* feat: replace loading component

* feat: update doc of statistic

* fix loading type

* feat: add loading prop for Statistic

* feat: update statistic demo

* update api version

Co-authored-by: lvpansen <pansen.lv@atzuche.com>

components/statistic/Statistic.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { ConfigConsumerProps } from '../config-provider';
 import { withConfigConsumer } from '../config-provider/context';
+import Skeleton from '../skeleton';
 import StatisticNumber from './Number';
 import Countdown from './Countdown';
 import { valueType, FormatConfig } from './utils';
@@ -21,6 +22,7 @@ export interface StatisticProps extends FormatConfig {
   title?: React.ReactNode;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
+  loading?: boolean;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
@@ -36,6 +38,7 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
     valueRender,
     prefix,
     suffix,
+    loading,
     direction,
     onMouseEnter,
     onMouseLeave,
@@ -51,11 +54,13 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
   return (
     <div className={cls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {title && <div className={`${prefixCls}-title`}>{title}</div>}
+      <Skeleton paragraph={false} loading={loading}>
         <div style={valueStyle} className={`${prefixCls}-content`}>
           {prefix && <span className={`${prefixCls}-content-prefix`}>{prefix}</span>}
           {valueRender ? valueRender(valueNode) : valueNode}
           {suffix && <span className={`${prefixCls}-content-suffix`}>{suffix}</span>}
         </div>
+      </Skeleton>
     </div>
   );
 };
@@ -63,6 +68,7 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = props => {
 Statistic.defaultProps = {
   decimalSeparator: '.',
   groupSeparator: ',',
+  loading: false,
 };
 
 const WrapperStatistic = withConfigConsumer<StatisticProps>({

components/statistic/__tests__/__snapshots__/demo.test.js.snap

@@ -73,6 +73,31 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
       </span>
     </button>
   </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Active Users
+      </div>
+      <div
+        class="ant-skeleton"
+      >
+        <div
+          class="ant-skeleton-content"
+        >
+          <h3
+            class="ant-skeleton-title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

components/statistic/__tests__/index.test.js

@@ -50,6 +50,18 @@ describe('Statistic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('loading with skeleton', async () => {
+    let loading = false;
+    const wrapper = mount(<Statistic title="Active Users" value={112112} loading={loading} />);
+    expect(wrapper.find('.ant-skeleton')).toHaveLength(0);
+    expect(wrapper.find('.ant-statistic-content')).toHaveLength(1);
+
+    loading = true;
+    wrapper.setProps({ loading });
+    expect(wrapper.find('.ant-skeleton')).toHaveLength(1);
+    expect(wrapper.find('.ant-statistic-content')).toHaveLength(0);
+  });
+
   describe('Countdown', () => {
     it('render correctly', () => {
       const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');

components/statistic/demo/basic.md

@@ -27,6 +27,9 @@ ReactDOM.render(
         Recharge
       </Button>
     </Col>
+    <Col span={12}>
+      <Statistic title="Active Users" value={112893} loading />
+    </Col>
   </Row>,
   mountNode,
 );

components/statistic/index.en-US.md

@@ -21,6 +21,7 @@ Display statistic number.
 | decimalSeparator | The decimal separator | string | `.` |  |
 | formatter | Customize value display logic | (value) => ReactNode | - |  |
 | groupSeparator | Group separator | string | `,` |  |
+| loading | Loading status of Statistic | boolean | false | 4.8.0 |
 | precision | The precision of input value | number | - |  |
 | prefix | The prefix node of value | ReactNode | - |  |
 | suffix | The suffix node of value | ReactNode | - |  |

components/statistic/index.zh-CN.md

@@ -22,6 +22,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
 | decimalSeparator | 设置小数点 | string | `.` |  |
 | formatter | 自定义数值展示 | (value) => ReactNode | - |  |
 | groupSeparator | 设置千分位标识符 | string | `,` |  |
+| loading | 数值是否加载中 | boolean | false | 4.8.0 |
 | precision | 数值精度 | number | - |  |
 | prefix | 设置数值的前缀 | ReactNode | - |  |
 | suffix | 设置数值的后缀 | ReactNode | - |  |

components/statistic/style/index.tsx

@@ -1,2 +1,5 @@
 import '../../style/index.less';
 import './index.less';
+
+// style dependencies
+import '../../skeleton/style';