add duration option and remove delay option from Frame

Author: nkzawa

gulpfile.js

@@ -16,7 +16,7 @@ gulp.task('compile', function () {
     plugins: [
       'syntax-async-functions',
       'transform-async-to-generator',
-      "transform-class-properties",
+      'transform-class-properties',
       'transform-runtime'
     ]
   }))

lib/frame.js

@@ -2,15 +2,15 @@ import React, { PropTypes } from 'react';
 
 export default class Frame extends React.Component {
   static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
+    children: PropTypes.array.isRequired,
     component: PropTypes.string,
-    delay: PropTypes.number,
+    duration: PropTypes.number,
     onRender: PropTypes.func
   };
 
   static defaultProps = {
     component: null,
-    delay: 0,
+    duration: 0,
     onRender: () => {}
   };
 

lib/keyframes.js

@@ -6,20 +6,22 @@ export default class Keyframes extends React.Component {
   static propTypes = {
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
     component: PropTypes.string,
+    delay: PropTypes.number,
     onStart: PropTypes.func,
     onEnd: PropTypes.func
   };
 
   static defaultProps = {
     component: 'span',
+    delay: 0,
     onStart: noop,
     onEnd: noop
   };
 
   constructor (props) {
     super(props);
-    this.state = { frameNum: -1 };
-    this.delayTimer = null;
+    this.state = { frameNum: this.props.delay ? -1 : 0 };
+    this.timer = null;
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -29,12 +31,14 @@ export default class Keyframes extends React.Component {
   }
 
   componentWillMount () {
-    const frameNum = this.state.frameNum + 1;
-    const frame = this.getFrame(frameNum);
+    if (0 === this.state.frameNum) {
+      this.props.onStart();
+    }
+  }
 
-    // render the first frame if it has no delay
-    if (frame && !frame.props.delay) {
-      this.setState({ frameNum });
+  componentWillUpdate () {
+    if (0 === this.state.frameNum) {
+      this.props.onStart();
     }
   }
 
@@ -47,7 +51,7 @@ export default class Keyframes extends React.Component {
   }
 
   componentWillUnmount () {
-    clearTimeout(this.delayTimer);
+    clearTimeout(this.timer);
   }
 
   render () {
@@ -59,25 +63,25 @@ export default class Keyframes extends React.Component {
   }
 
   requestNextFrame () {
-    const frameNum = this.state.frameNum + 1;
-    const frame = this.getFrame(frameNum);
-    if (!frame) {
-      this.props.onEnd();
-      return;
-    }
-
-    const { delay } = frame.props;
-
-    clearTimeout(this.delayTimer);
-    this.delayTimer = setTimeout(() => {
-      if (0 === frameNum) {
-        this.props.onStart();
+    this.waitForDelay(() => {
+      const frameNum = this.state.frameNum + 1;
+      if (this.props.children.length <= frameNum) {
+        this.props.onEnd();
+        return;
       }
+
       this.setState({ frameNum });
-    }, delay);
+    });
+  }
+
+  waitForDelay (fn) {
+    const currentFrame = this.getFrame();
+    const delay = currentFrame ? currentFrame.props.duration : this.props.delay;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(fn, delay);
   }
 
-  getFrame (frameNum = this.state.frameNum) {
-    return this.props.children[frameNum];
+  getFrame () {
+    return this.props.children[this.state.frameNum];
   }
 }

test/index.js

@@ -14,13 +14,13 @@ test.after((t) => {
   clock.uninstall();
 });
 
-test('return value', (t) => {
+test('animate', (t) => {
   const container = document.createElement('div');
   const component = render(
     <Keyframes>
-      <Frame>foo</Frame>
-      <Frame delay={100}>bar</Frame>
-      <Frame delay={200}>baz</Frame>
+      <Frame duration={100}>foo</Frame>
+      <Frame duration={200}>bar</Frame>
+      <Frame>baz</Frame>
     </Keyframes>,
     container
   );