From 755682c317359031e65175abd0a473e9522913e1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 5 Jan 2023 14:07:33 +0800 Subject: [PATCH] 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 | 10 ++-- .../__snapshots__/demo-extend.test.ts.snap | 54 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 54 +++++++++++++++++++ components/statistic/demo/animated.md | 7 +++ components/statistic/demo/animated.tsx | 18 +++++++ components/statistic/demo/card.md | 2 +- components/statistic/demo/countdown.tsx | 6 +-- components/statistic/index.en-US.md | 3 +- components/statistic/index.zh-CN.md | 3 +- components/statistic/utils.ts | 5 +- docs/react/recommendation.en-US.md | 3 +- docs/react/recommendation.zh-CN.md | 2 +- package.json | 1 + 13 files changed, 153 insertions(+), 15 deletions(-) create mode 100644 components/statistic/demo/animated.md create mode 100644 components/statistic/demo/animated.tsx diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx index 42175e481e..4fcd5c95ee 100644 --- a/components/statistic/Countdown.tsx +++ b/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 = (props) => { }; }, [value]); - const formatter = (formatValue: countdownValueType, config: FormatConfig) => + const formatter = (formatValue: valueType, config: FormatConfig) => formatCountdown(formatValue, { ...config, format }); const valueRender = (node: React.ReactElement) => diff --git a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap index df1cb1fa47..feb225fc5e 100644 --- a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/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`] = ` +
+
+
+
+ Active Users +
+
+ + + +
+
+
+
+
+
+ Account Balance (CNY) +
+
+ + + +
+
+
+
+`; + exports[`renders ./components/statistic/demo/basic.tsx extend context correctly 1`] = `
+
+
+
+ Active Users +
+
+ + + +
+
+
+
+
+
+ Account Balance (CNY) +
+
+ + + +
+
+
+
+`; + exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = `
; + +const App: React.FC = () => ( + + + + + + + + +); + +export default App; diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md index 2079970f5d..9ef80c7502 100644 --- a/components/statistic/demo/card.md +++ b/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; } ``` diff --git a/components/statistic/demo/countdown.tsx b/components/statistic/demo/countdown.tsx index 6822508a13..0615f07148 100644 --- a/components/statistic/demo/countdown.tsx +++ b/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!'); } }; diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md index 3fcbc8d1d2..5bda65f0f9 100644 --- a/components/statistic/index.en-US.md +++ b/components/statistic/index.en-US.md @@ -19,7 +19,8 @@ Display statistic number. Basic Unit -In Card +Animated number +In Card Countdown ## API diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index 9bdc69e036..cb238dfc99 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -20,7 +20,8 @@ demo: 基本 单位 -在卡片中使用 +动画效果 +在卡片中使用 倒计时 ## API diff --git a/components/statistic/utils.ts b/components/statistic/utils.ts index 138747054f..7d1b094301 100644 --- a/components/statistic/utils.ts +++ b/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(); diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index f5497bf96e..eda6f361b2 100644 --- a/docs/react/recommendation.en-US.md +++ b/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 ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index dc9844d247..1ba7db3703 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/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) | diff --git a/package.json b/package.json index 941e69fc50..e8da24e0a6 100644 --- a/package.json +++ b/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",