frame: fix onRender is not called

Author: nkzawa

lib/frame.js

@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react';
 export default class Frame extends React.Component {
   static propTypes = {
     children: PropTypes.any,
+    component: PropTypes.any,
     duration: PropTypes.number,
     onRender: PropTypes.func
   };
@@ -21,6 +22,7 @@ export default class Frame extends React.Component {
   }
 
   render () {
-    return null;
+    const { component } = this.props;
+    return React.createElement(component, this.props, this.props.children);
   }
 }

lib/keyframes.js

@@ -58,11 +58,8 @@ export default class Keyframes extends React.Component {
     const frame = this.getFrame();
     if (!frame) return null;
 
-    return React.createElement(
-      this.props.component,
-      this.props,
-      frame.props.children
-    );
+    const props = { ...this.props, ...frame.props };
+    return React.cloneElement(frame, props);
   }
 
   requestNextFrame () {

package.json

@@ -12,6 +12,7 @@
     "babel-plugin-syntax-async-functions": "6.5.0",
     "babel-plugin-transform-async-to-generator": "6.7.0",
     "babel-plugin-transform-class-properties": "6.6.0",
+    "babel-plugin-transform-object-rest-spread": "6.6.5",
     "babel-plugin-transform-runtime": "6.6.0",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
@@ -42,7 +43,8 @@
       "react"
     ],
     "plugins": [
-      "transform-class-properties"
+      "transform-class-properties",
+      "transform-object-rest-spread"
     ]
   },
   "ava": {
@@ -63,6 +65,7 @@
         "syntax-async-functions",
         "transform-async-to-generator",
         "transform-class-properties",
+        "transform-object-rest-spread",
         "transform-runtime"
       ]
     }

test/index.js

@@ -59,6 +59,22 @@ test('Keyframes events', (t) => {
   t.ok(onEnd.called);
 });
 
+test('Frame event', (t) => {
+  const container = document.createElement('div');
+  const onRender = () => onRender.called = true;
+  render(
+    <Keyframes>
+      <Frame duration={100}>foo</Frame>
+      <Frame duration={100} onRender={onRender}>bar</Frame>
+    </Keyframes>,
+    container
+  );
+
+  t.notOk(onRender.called);
+  clock.tick(100);
+  t.ok(onRender.called);
+});
+
 test('set component', (t) => {
   const container = document.createElement('div');
   const component = render(