fix(module:badge): fix toggling animation (#21887)

close #21674

chore: remove log

fix: timer leak

fix: willUnmount

test: cov

components/badge/ScrollNumber.tsx

@@ -71,6 +71,8 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
 
   lastCount?: string | number | null;
 
+  private timeout?: number;
+
   constructor(props: ScrollNumberProps) {
     super(props);
     this.state = {
@@ -83,17 +85,26 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
     this.lastCount = prevState.count;
     const { animateStarted } = this.state;
     if (animateStarted) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState(
-        (__, props) => ({
-          animateStarted: false,
-          count: props.count,
-        }),
-        this.onAnimated,
-      );
+      this.clearTimeout();
+      // Let browser has time to reset the scroller before actually
+      // performing the transition.
+      this.timeout = setTimeout(() => {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState(
+          (__, props) => ({
+            animateStarted: false,
+            count: props.count,
+          }),
+          this.onAnimated,
+        );
+      });
     }
   }
 
+  componentWillUnmount() {
+    this.clearTimeout();
+  }
+
   getPositionByNum(num: number, i: number) {
     const { count } = this.state;
     const currentCount = Math.abs(Number(count));
@@ -210,6 +221,13 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
   render() {
     return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
   }
+
+  private clearTimeout(): void {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = undefined;
+    }
+  }
 }
 
 polyfill(ScrollNumber);

components/badge/__tests__/index.test.js

@@ -25,6 +25,7 @@ describe('Badge', () => {
     expect(wrapper).toMatchSnapshot();
     wrapper = mount(<Badge count="3.5" />);
     expect(wrapper).toMatchSnapshot();
+    expect(() => wrapper.unmount()).not.toThrow();
   });
 
   it('badge dot not showing count == 0', () => {