Merge pull request #2 from kennethormandy/ko-looping

Adds support for looping

Author: nkzawa

lib/keyframes.js

@@ -7,20 +7,29 @@ export default class Keyframes extends React.Component {
     children: PropTypes.arrayOf(PropTypes.element).isRequired,
     component: PropTypes.any,
     delay: PropTypes.number,
+    loop: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.bool
+    ]),
     onStart: PropTypes.func,
     onEnd: PropTypes.func
   };
 
   static defaultProps = {
     component: 'span',
     delay: 0,
+    loop: 1,
     onStart: noop,
     onEnd: noop
   };
 
   constructor (props) {
     super(props);
-    this.state = { frameNum: this.props.delay ? -1 : 0 };
+    this.state = {
+      frameNum: this.props.delay ? -1 : 0,
+      loopNum: 0
+    };
     this.timer = null;
   }
 
@@ -65,9 +74,19 @@ export default class Keyframes extends React.Component {
   requestNextFrame () {
     this.waitForDelay(() => {
       const frameNum = this.state.frameNum + 1;
+      const loopNum = this.state.loopNum + 1;
       if (this.props.children.length <= frameNum) {
-        this.props.onEnd();
-        return;
+        if (this.props.loop === true || this.props.loop === 'infinite' || loopNum < this.props.loop) {
+          this.setState({
+            frameNum: 0,
+            loopNum
+          });
+          this.requestNextFrame();
+          return;
+        } else {
+          this.props.onEnd();
+          return;
+        }
       }
 
       this.setState({ frameNum });

test/index.js

@@ -88,3 +88,43 @@ test('set component', (t) => {
   t.same(node.tagName, 'PRE');
   t.same(node.className, 'woot');
 });
+
+test('Infinite loop', (t) => {
+  const container = document.createElement('div');
+  const onStart = () => onStart.called = true;
+  const onEnd = () => onEnd.called = true;
+  render(
+    <Keyframes onStart={onStart} onEnd={onEnd} loop>
+      <Frame duration={100}>foo</Frame>
+      <Frame duration={100}>bar</Frame>
+    </Keyframes>,
+    container
+  );
+
+  t.ok(onStart.called);
+  clock.tick(100);
+  t.notOk(onEnd.called);
+  clock.tick(200);
+  t.notOk(onEnd.called);
+});
+
+test('Finite loop', (t) => {
+  const container = document.createElement('div');
+  const onStart = () => onStart.called = true;
+  const onEnd = () => onEnd.called = true;
+  render(
+    <Keyframes onStart={onStart} onEnd={onEnd} loop={3}>
+      <Frame duration={100}>foo</Frame>
+      <Frame duration={100}>bar</Frame>
+    </Keyframes>,
+    container
+  );
+
+  t.ok(onStart.called);
+  clock.tick(100);
+  t.notOk(onEnd.called);
+  clock.tick(200);
+  t.notOk(onEnd.called);
+  clock.tick(300);
+  t.ok(onEnd.called);
+});