feat: add onChange for Statistic.Countdown (#30265)

* feat: add onChange for countdown

* update the demo

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);
   };
 

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>
 `;
 

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;

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,
 );

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 |

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 |