fix a bug with timer not been reseted (#18)

* fix a bug with timer not been reseted
beekai-oss · Sep 26, 2017 · 5cdd557 · 5cdd557
1 parent 8fe09b8
commit 5cdd557
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/animate.js b/src/animate.js
@@ -103,12 +103,21 @@ export default class Animate extends React.Component<Props, State> {
     }, delayTotalSeconds);
   }
 
+  clearAllTimers() {
+    clearTimeout(this.animationTimeout);
+    clearTimeout(this.animationCompleteTimeout);
+    this.animationTimeout = null;
+    this.animationCompleteTimeout = null;
+  }
+
   componentWillReceiveProps(nextProps: Props) {
     const { startAnimation, reverseDelaySeconds } = nextProps;
     const isAnimationStatusChanged =
       startAnimation !== this.props.startAnimation;
 
     if (isAnimationStatusChanged) {
+      this.clearAllTimers();
+
       this.setState({
         ...defaultState,
         played: isAnimationStatusChanged && startAnimation,
@@ -121,10 +130,6 @@ export default class Animate extends React.Component<Props, State> {
     );
   }
 
-  componentDidMount() {
-    this.setDelayAndOnComplete(this.props);
-  }
-
   shouldComponentUpdate(
     { startStyle, endStyle, startAnimation, children, forceUpdate }: Props,
     { animationWillEnd, animationWillStart, animationWillComplete }: State,
@@ -142,11 +147,12 @@ export default class Animate extends React.Component<Props, State> {
     );
   }
 
+  componentDidMount() {
+    this.setDelayAndOnComplete(this.props);
+  }
+
   componentWillUnmount() {
-    clearTimeout(this.animationTimeout);
-    clearTimeout(this.animationCompleteTimeout);
-    this.animationTimeout = null;
-    this.animationCompleteTimeout = null;
+    this.clearAllTimers();
   }
 
   render() {

diff --git a/test/animate.test.js b/test/animate.test.js
@@ -221,8 +221,9 @@ describe('Animate', () => {
   });
 
   describe('when is animate prop value get changed', () => {
-    it('should trigger state reset', () => {
-      const tree = shallow(
+    it('should trigger state reset and clear all timers', () => {
+      const clearAllTimers = jest.fn();
+      const tree = mount(
         <Animate
           {...{
             ...props,
@@ -232,6 +233,8 @@ describe('Animate', () => {
         </Animate>,
       );
 
+      tree.instance().clearAllTimers = clearAllTimers;
+
       tree.setState({
         animationWillEnd: true,
       });
@@ -241,6 +244,7 @@ describe('Animate', () => {
       });
 
       expect(tree.state()).toEqual(defaultState);
+      expect(clearAllTimers).toBeCalled();
     });
   });