diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx index e008bf5496..8bf18330c3 100644 --- a/components/statistic/Countdown.tsx +++ b/components/statistic/Countdown.tsx @@ -9,6 +9,7 @@ interface CountdownProps extends StatisticProps { value?: countdownValueType; format?: string; onFinish?: () => void; + onChange?: (value?: countdownValueType) => void; } function getTime(value?: countdownValueType) { @@ -48,8 +49,15 @@ class Countdown extends React.Component { startTimer = () => { if (this.countdownId) return; + const { onChange, value } = this.props; + const timestamp = getTime(value); + this.countdownId = window.setInterval(() => { this.forceUpdate(); + + if (onChange && timestamp > Date.now()) { + onChange(timestamp - Date.now()); + } }, REFRESH_INTERVAL); }; diff --git a/components/statistic/__tests__/__snapshots__/demo.test.js.snap b/components/statistic/__tests__/__snapshots__/demo.test.js.snap index c6d0b358f7..603e3cdde7 100644 --- a/components/statistic/__tests__/__snapshots__/demo.test.js.snap +++ b/components/statistic/__tests__/__snapshots__/demo.test.js.snap @@ -325,6 +325,29 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = ` +
+
+
+ Countdown +
+
+ + 00:00:10 + +
+
+
`; diff --git a/components/statistic/__tests__/index.test.js b/components/statistic/__tests__/index.test.js index 481a2397bb..941af94302 100644 --- a/components/statistic/__tests__/index.test.js +++ b/components/statistic/__tests__/index.test.js @@ -116,6 +116,21 @@ describe('Statistic', () => { expect(onMouseLeave).toHaveBeenCalled(); }); + describe('time onchange', () => { + it("called if time has't passed", async () => { + const deadline = Date.now() + 10 * 1000; + let remainingTime; + + const onChange = value => { + remainingTime = value; + }; + const wrapper = mount(); + wrapper.update(); + await sleep(100) + expect(remainingTime).toBeGreaterThan(0) + }); + }); + describe('time finished', () => { it('not call if time already passed', () => { const now = Date.now() - 1000; diff --git a/components/statistic/demo/countdown.md b/components/statistic/demo/countdown.md index 7bebd94e1b..c5041eda9d 100644 --- a/components/statistic/demo/countdown.md +++ b/components/statistic/demo/countdown.md @@ -23,6 +23,12 @@ function onFinish() { console.log('finished!'); } +function onChange(val) { + if (4.95 * 1000 < val && val < 5 * 1000) { + console.log('changed!'); + } +} + ReactDOM.render( @@ -34,6 +40,9 @@ ReactDOM.render( + + + , mountNode, ); diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md index 7b546c070f..8b970df45d 100644 --- a/components/statistic/index.en-US.md +++ b/components/statistic/index.en-US.md @@ -40,3 +40,4 @@ Display statistic number. | value | Set target countdown time | number \| moment | - | | | valueStyle | Set value css style | CSSProperties | - | | | onFinish | Trigger when time's up | () => void | - | | +| onChange | Trigger when time's changing | (value: number) => void | - | 4.16.0 | diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index d691de797b..f094f26a9c 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -41,3 +41,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg | value | 数值内容 | number \| moment | - | | | valueStyle | 设置数值的样式 | CSSProperties | - | | | onFinish | 倒计时完成时触发 | () => void | - | | +| onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |