initial commit

Author: nkzawa

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["standard", "standard-react"],
+  "parser": "babel-eslint",
+  "plugins": ["react"],
+  "rules": {
+    "yoda": 0,
+    "semi": [2, "always"],
+    "no-extra-semi": 2,
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "no-shadow": [2, {"builtinGlobals": true, "hoist": "functions"}]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

Makefile

@@ -0,0 +1,14 @@
+# This is a dummy Makefile.
+# For cross-platform support, we use Gulp instead.
+# See:
+#  - List: $ npm run gulp help
+#  - Edit: $ vi gulpfile.js
+#  - Docs: https://github.com/gulpjs/gulp
+
+all:
+	@npm run gulp
+
+test:
+	@npm test
+
+.PHONY: test

Readme.md

@@ -0,0 +1,7 @@
+# React Keyframes
+
+## Credits
+
+- Copyright © 2016 Zeit, Inc and project authors.
+- Licensed under MIT.
+- ▲

gulpfile.js

@@ -0,0 +1,40 @@
+const gulp = require('gulp');
+const del = require('del');
+const babel = require('gulp-babel');
+const eslint = require('gulp-eslint');
+const help = require('gulp-task-listing');
+
+gulp.task('help', help);
+
+gulp.task('compile', function () {
+  return gulp.src('lib/**/*.js')
+  .pipe(babel({
+    presets: [
+      'es2015',
+      'react'
+    ],
+    plugins: [
+      'syntax-async-functions',
+      'transform-async-to-generator',
+      'transform-runtime'
+    ]
+  }))
+  .pipe(gulp.dest('build/lib'));
+});
+
+gulp.task('lint', function () {
+  return gulp.src([
+    'gulpfile.js',
+    'test/*.js',
+    'lib/**/*.js'
+  ])
+  .pipe(eslint())
+  .pipe(eslint.format())
+  .pipe(eslint.failAfterError());
+});
+
+gulp.task('clean', function () {
+  return del(['build']);
+});
+
+gulp.task('default', ['lint', 'compile']);

lib/frame.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+
+export default class Frame extends React.Component {
+  componentDidMount () {
+    this.props.onRender();
+  }
+
+  componentDidUpdate () {
+    this.props.onRender();
+  }
+
+  render () {
+    const { component } = this.props;
+    return React.createElement(component, null, this.props.children);
+  }
+}
+
+Frame.propTypes = {
+  children: PropTypes.element.isRequired,
+  component: PropTypes.string,
+  delay: PropTypes.number,
+  onRender: PropTypes.func
+};
+
+Frame.defaultProps = {
+  component: null,
+  delay: 0,
+  onRender: () => {}
+};

lib/index.js

@@ -0,0 +1,2 @@
+export { default as Keyframes } from './keyframes';
+export { default as Frame } from './frame';

lib/keyframes.js

@@ -0,0 +1,83 @@
+import React, { PropTypes } from 'react';
+
+const noop = () => {};
+
+export default class Keyframes extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = { frameNum: -1 };
+    this.delayTimer = null;
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    const { frameNum } = nextState;
+    if (this.state.frameNum === frameNum) return false;
+    return 0 <= frameNum && frameNum < this.props.children.length;
+  }
+
+  componentWillMount () {
+    const frameNum = this.state.frameNum + 1;
+    const frame = this.getFrame(frameNum);
+
+    // render the first frame if it has no delay
+    if (frame && !frame.props.delay) {
+      this.setState({ frameNum });
+    }
+  }
+
+  componentDidMount () {
+    this.requestNextFrame();
+  }
+
+  componentDidUpdate () {
+    this.requestNextFrame();
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.delayTimer);
+  }
+
+  render () {
+    const frame = this.getFrame();
+    if (!frame) return null;
+
+    const component = frame.props.component || this.props.component;
+    return React.cloneElement(frame, { 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.setState({ frameNum });
+    }, delay);
+  }
+
+  getFrame (frameNum = this.state.frameNum) {
+    return this.props.children[frameNum];
+  }
+}
+
+Keyframes.propTypes = {
+  children: PropTypes.element.isRequired,
+  component: PropTypes.string,
+  onStart: PropTypes.func,
+  onEnd: PropTypes.func
+};
+
+Keyframes.defaultProps = {
+  component: 'span',
+  onStart: noop,
+  onEnd: noop
+};

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "react-keyframes",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./build/lib",
+  "files": [
+    "build"
+  ],
+  "dependencies": {
+    "babel-runtime": "6.6.1"
+  },
+  "devDependencies": {
+    "ava": "0.13.0",
+    "babel-eslint": "5.0.0",
+    "babel-plugin-syntax-async-functions": "6.5.0",
+    "babel-plugin-transform-async-to-generator": "6.7.0",
+    "babel-plugin-transform-runtime": "6.6.0",
+    "babel-preset-es2015": "6.6.0",
+    "babel-preset-react": "6.5.0",
+    "babel-register": "6.7.2",
+    "del": "2.2.0",
+    "eslint-config-standard": "4.4.0",
+    "eslint-config-standard-jsx": "1.1.1",
+    "eslint-config-standard-react": "2.3.0",
+    "eslint-plugin-react": "4.2.1",
+    "eslint-plugin-standard": "1.3.2",
+    "gulp": "3.9.1",
+    "gulp-babel": "6.1.2",
+    "gulp-eslint": "1.1.1",
+    "gulp-task-listing": "1.0.1",
+    "jsdom": "8.1.0",
+    "lolex": "1.4.0",
+    "react": "0.14.7",
+    "react-dom": "0.14.7"
+  },
+  "scripts": {
+    "gulp": "gulp",
+    "test": "ava"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ],
+    "plugins": [
+      "transform-runtime",
+      "syntax-async-functions",
+      "transform-async-to-generator"
+    ]
+  },
+  "ava": {
+    "failFast": true,
+    "files": [
+      "test/*.js"
+    ],
+    "require": [
+      "babel-register",
+      "./test/helpers/setup-browser-env.js"
+    ],
+    "babel": "inherit"
+  }
+}

test/helpers/setup-browser-env.js

@@ -0,0 +1,5 @@
+import jsdom from 'jsdom';
+
+global.document = jsdom.jsdom('<body></body>');
+global.window = document.defaultView;
+global.navigator = window.navigator;