feat(onAnimationDone): add onAnimationDone cb

Author: dielduarte

src/Animate/StackAnimates.js

@@ -3,48 +3,51 @@ import * as Utils from './Utils';
 
 class StackAnimates extends PureComponent {
   constructor(props) {
-    super(props);  
+    super(props);
     this.state = Utils.buildState(props);
   }
 
   get getNextIndex() {
-    return this.state.index +1;
+    return this.state.index + 1;
   }
 
   get getNextStartTime() {
-    const time = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.duration)));
-    const delay = Utils.convertToMs(parseFloat(Utils.removeUnit(this.state.delay)));
+    const time = Utils.convertToMs(
+      parseFloat(Utils.removeUnit(this.state.duration))
+    );
+    const delay = Utils.convertToMs(
+      parseFloat(Utils.removeUnit(this.state.delay))
+    );
     return time + delay;
   }
-  
-  get HaveMoreAnimations() {
+
+  get HasMoreAnimations() {
     return this.getNextIndex < this.props.Animation.length;
   }
 
   renderNextAnimate() {
-    if (this.HaveMoreAnimations) {
+    if (this.HasMoreAnimations) {
       setTimeout(() => {
-        this.setState(
-          Utils.buildState(this.props, this.getNextIndex),
-          () => this.renderNextAnimate()
+        this.setState(Utils.buildState(this.props, this.getNextIndex), () =>
+          this.renderNextAnimate()
         );
       }, this.getNextStartTime);
+    } else if (this.props.onAnimationDone) {
+      setTimeout(() => {
+        this.props.onAnimationDone();
+      }, this.getNextStartTime);
     }
   }
 
   render() {
     const { Animation } = this.state;
 
-    return (
-      <Animation {...this.state}>
-        {this.props.children}
-      </Animation>
-    );
+    return <Animation {...this.state}>{this.props.children}</Animation>;
   }
 
   componentDidMount() {
     this.renderNextAnimate();
   }
 }
 
-export default StackAnimates;
+export default StackAnimates;

stories/Animate.stories.js

@@ -2,30 +2,46 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import FullView from '../Example/FullView';
 import Card from '../Example/Card';
-import Animate, {
-    Flash,
-    Bounce,
-    FadeOut,
-    FadeIn
-} from '../src';
-
+import Animate, { Flash, Bounce, FadeOut, FadeIn } from '../src';
 
 storiesOf('Animate (HOC)', module)
-    .add('Multiple Animations', () => (
-        <FullView center>
-            <Animate Animation={[Flash, Bounce, FadeOut, FadeIn]} duration="0.8s" delay="0.2s">
-                <Card rounded width="100px" height="100px">
-                    card content...
-                </Card>
-            </Animate>
-        </FullView>
-    ))
-    .add('Multiple Animations with diferent times and delays', () => (
-        <FullView center>
-            <Animate Animation={[Flash, Bounce, FadeOut, FadeIn]} duration={["0.8s", "3s", "2s", "0.4s"]} delay={["0.2s", "0.1s", "0.5s", "1s"]}>
-                <Card rounded width="100px" height="100px">
-                    card content...
-                </Card>
-            </Animate>
-        </FullView>
-    ));
+  .add('Multiple Animations', () => (
+    <FullView center>
+      <Animate
+        Animation={[Flash, Bounce, FadeOut, FadeIn]}
+        duration="0.8s"
+        delay="0.2s"
+      >
+        <Card rounded width="100px" height="100px">
+          card content...
+        </Card>
+      </Animate>
+    </FullView>
+  ))
+  .add('Multiple Animations with diferent times and delays', () => (
+    <FullView center>
+      <Animate
+        Animation={[Flash, Bounce, FadeOut, FadeIn]}
+        duration={['0.8s', '3s', '2s', '0.4s']}
+        delay={['0.2s', '0.1s', '0.5s', '1s']}
+      >
+        <Card rounded width="100px" height="100px">
+          card content...
+        </Card>
+      </Animate>
+    </FullView>
+  ))
+  .add('with onAnimationDone callback', () => (
+    <FullView center>
+      <Animate
+        Animation={[Flash, Bounce, FadeOut, FadeIn]}
+        duration={['0.8s', '3s', '0.2s', '0.2s']}
+        delay={['0.2s', '0.1s', '0.3s', '0.8s']}
+        onAnimationDone={() => alert('animation finished!')}
+      >
+        <Card rounded width="100px" height="100px">
+          card content...
+        </Card>
+      </Animate>
+    </FullView>
+  ));