docs: add animated number demo for Statistic (#40027)

* docs: add animated number demo for Statistic

* style: update demo

* add back countdownValueType

* type: fix demo type

components/statistic/Countdown.tsx

@@ -3,19 +3,19 @@ import useForceUpdate from '../_util/hooks/useForceUpdate';
 import { cloneElement } from '../_util/reactNode';
 import type { StatisticProps } from './Statistic';
 import Statistic from './Statistic';
-import type { countdownValueType, FormatConfig, valueType } from './utils';
+import type { valueType, FormatConfig } from './utils';
 import { formatCountdown } from './utils';
 
 const REFRESH_INTERVAL = 1000 / 30;
 
 export interface CountdownProps extends StatisticProps {
-  value?: countdownValueType;
+  value?: valueType;
   format?: string;
   onFinish?: () => void;
-  onChange?: (value?: countdownValueType) => void;
+  onChange?: (value?: valueType) => void;
 }
 
-function getTime(value?: countdownValueType) {
+function getTime(value?: valueType) {
   return new Date(value as valueType).getTime();
 }
 
@@ -57,7 +57,7 @@ const Countdown: React.FC<CountdownProps> = (props) => {
     };
   }, [value]);
 
-  const formatter = (formatValue: countdownValueType, config: FormatConfig) =>
+  const formatter = (formatValue: valueType, config: FormatConfig) =>
     formatCountdown(formatValue, { ...config, format });
 
   const valueRender = (node: React.ReactElement<HTMLDivElement>) =>

components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,5 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/statistic/demo/animated.tsx extend context correctly 1`] = `
+<div
+  class="ant-row"
+  style="margin-left:-8px;margin-right:-8px"
+>
+  <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-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span />
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Account Balance (CNY)
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/statistic/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-row"

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

@@ -1,5 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/statistic/demo/animated.tsx correctly 1`] = `
+<div
+  class="ant-row"
+  style="margin-left:-8px;margin-right:-8px"
+>
+  <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-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span />
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-col ant-col-12"
+    style="padding-left:8px;padding-right:8px"
+  >
+    <div
+      class="ant-statistic"
+    >
+      <div
+        class="ant-statistic-title"
+      >
+        Account Balance (CNY)
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          <span />
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-row"

components/statistic/demo/animated.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+给数值添加动画进入效果，需要配合 [react-countup](https://www.npmjs.com/package/react-countup)。
+
+## en-US
+
+Animated number with [react-countup](https://www.npmjs.com/package/react-countup).

components/statistic/demo/animated.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Col, Row, Statistic } from 'antd';
+import CountUp from 'react-countup';
+
+const formatter = (value: number) => <CountUp end={value} separator="," />;
+
+const App: React.FC = () => (
+  <Row gutter={16}>
+    <Col span={12}>
+      <Statistic title="Active Users" value={112893} formatter={formatter} />
+    </Col>
+    <Col span={12}>
+      <Statistic title="Account Balance (CNY)" value={112893} precision={2} formatter={formatter} />
+    </Col>
+  </Row>
+);
+
+export default App;

components/statistic/demo/card.md

@@ -8,7 +8,7 @@ Display statistic data in Card.
 
 ```css
 .site-statistic-demo-card {
-  padding: 30px;
+  padding: 24px;
   background: #ececec;
 }
 ```

components/statistic/demo/countdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Col, Row, Statistic } from 'antd';
-import type { countdownValueType } from 'antd/es/statistic/utils';
+import type { StatisticProps } from 'antd';
 
 const { Countdown } = Statistic;
 const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK
@@ -10,8 +10,8 @@ const App: React.FC = () => {
     console.log('finished!');
   };
 
-  const onChange = (val: countdownValueType) => {
-    if (4.95 * 1000 < val && val < 5 * 1000) {
+  const onChange = (val: StatisticProps['value']) => {
+    if (val && 4.95 * 1000 < val && val < 5 * 1000) {
       console.log('changed!');
     }
   };

components/statistic/index.en-US.md

@@ -19,7 +19,8 @@ Display statistic number.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/unit.tsx">Unit</code>
-<code src="./demo/card.tsx">In Card</code>
+<code src="./demo/animated.tsx">Animated number</code>
+<code src="./demo/card.tsx" compact>In Card</code>
 <code src="./demo/countdown.tsx">Countdown</code>
 
 ## API

components/statistic/index.zh-CN.md

@@ -20,7 +20,8 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/unit.tsx">单位</code>
-<code src="./demo/card.tsx">在卡片中使用</code>
+<code src="./demo/animated.tsx">动画效果</code>
+<code src="./demo/card.tsx" compact>在卡片中使用</code>
 <code src="./demo/countdown.tsx">倒计时</code>
 
 ## API

components/statistic/utils.ts

@@ -1,7 +1,8 @@
 import type * as React from 'react';
 
 export type valueType = number | string;
-export type countdownValueType = valueType | string;
+// countdownValueType is deprecated but still support
+export type countdownValueType = number | string;
 
 export type Formatter =
   | false
@@ -59,7 +60,7 @@ export function formatTimeStr(duration: number, format: string) {
   });
 }
 
-export function formatCountdown(value: countdownValueType, config: CountdownFormatConfig) {
+export function formatCountdown(value: valueType, config: CountdownFormatConfig) {
   const { format = '' } = config;
   const target = new Date(value).getTime();
   const current = Date.now();

docs/react/recommendation.en-US.md

@@ -37,7 +37,8 @@ title: Third-Party Libraries
 | Text Loop | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | Page Footer | [rc-footer](https://github.com/react-component/footer) |
-| Currency | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
+| Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) |
+
 | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
 
 ## Products we are using ✨

docs/react/recommendation.zh-CN.md

@@ -38,7 +38,7 @@ title: 社区精选组件
 | 文字轮播 | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | 页脚 | [rc-footer](https://github.com/react-component/footer) |
-| 金额格式化 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
+| 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
 | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) |
 | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
 

package.json

@@ -252,6 +252,7 @@
     "react": "^18.0.0",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-countup": "^6.4.0",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
     "react-dom": "^18.0.0",