From c3405bd887ebbfc222eb6fff12d1ab6ffe772038 Mon Sep 17 00:00:00 2001
From: appleshell <appleshell@outlook.com>
Date: Fri, 23 Apr 2021 22:15:26 +0800
Subject: [PATCH] feat: add onChange for Statistic.Countdown (#30265)

* feat: add onChange for countdown

* update the demo
---
 components/statistic/Countdown.tsx            |  8 +++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 23 +++++++++++++++++++
 components/statistic/__tests__/index.test.js  | 15 ++++++++++++
 components/statistic/demo/countdown.md        |  9 ++++++++
 components/statistic/index.en-US.md           |  1 +
 components/statistic/index.zh-CN.md           |  1 +
 6 files changed, 57 insertions(+)

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<CountdownProps, {}> {
   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`] = `
       </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"
+      >
+        Countdown
+      </div>
+      <div
+        class="ant-statistic-content"
+      >
+        <span
+          class="ant-statistic-content-value"
+        >
+          00:00:10
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
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(<Statistic.Countdown value={deadline} onChange={onChange} />);
+        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(
   <Row gutter={16}>
     <Col span={12}>
@@ -34,6 +40,9 @@ ReactDOM.render(
     <Col span={24} style={{ marginTop: 32 }}>
       <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
     </Col>
+    <Col span={12}>
+      <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
+    </Col>
   </Row>,
   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 |