Add test, CI config and updates to component

Author: ryanhefner

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["./tools/babel-preset.js"]
+}

.circleci/config.yml

@@ -0,0 +1,45 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:7.10
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: ./node_modules/.bin/greenkeeper-lockfile-update
+      - run: yarn build
+
+      # run tests!
+      - run: yarn test
+
+      # send code coverage info to coveralls
+      - run: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+      - run: ./node_modules/.bin/greenkeeper-lockfile-upload

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+coverage
 es
 node_modules
 umd

.npmignore

@@ -1,4 +1,7 @@
+coverage
 tools
+src/.babelrc
+src/index.test.js
 rollup.config.js
 *.sublime-project
 *.sublime-workspace

README.md

@@ -1,4 +1,10 @@
-# react-timer-wrapper
+# ⏳ react-timer-wrapper
+
+[![npm version](https://badge.fury.io/js/react-timer-wrapper.svg)](https://badge.fury.io/js/clean-react-props)
+[![npm](https://img.shields.io/npm/l/express.svg)](LICENSE)
+[![Coverage Status](https://coveralls.io/repos/github/ryanhefner/react-timer-wrapper/badge.svg?branch=master)](https://coveralls.io/github/ryanhefner/react-timer-wrapper?branch=master)
+[![CircleCI](https://circleci.com/gh/ryanhefner/react-timer-wrapper.svg?style=shield)](https://circleci.com/gh/ryanhefner/react-timer-wrapper)
+[![Greenkeeper badge](https://badges.greenkeeper.io/ryanhefner/react-timer-wrapper.svg)](https://greenkeeper.io/)
 
 Composable React Timer component that passes status props to children, in addition
 to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track

src/index.js

@@ -8,15 +8,34 @@ class TimerWrapper extends Component {
 
     this.state = {
       duration: props.duration,
-      startTime: props.active ? Date.now() : null,
+      startTime: props.active ? Date.now() - props.time : null,
       time: props.time,
     };
 
     this.tick = this.tick.bind(this);
   }
 
   componentDidMount() {
-    if (this.props.active) {
+    const {
+      duration,
+      startTime,
+      time,
+    } = this.state;
+
+    const {
+      active,
+      onStart,
+    } = this.props;
+
+    if (active) {
+      const progress = Math.max(0, Math.min(1, time / duration));
+
+      onStart({
+        duration,
+        progress: this.getProgress(time),
+        time,
+      });
+
       this.animationFrame = requestAnimationFrame(this.tick);
     }
   }
@@ -37,8 +56,6 @@ class TimerWrapper extends Component {
     }
 
     if (active !== this.props.active) {
-      let progress;
-
       switch (active) {
         case true:
           const nextTime = duration !== null && this.state.time >= duration
@@ -50,13 +67,9 @@ class TimerWrapper extends Component {
             time: nextTime,
           });
 
-          progress = duration !== null
-            ? Math.max(0, Math.min(1, nextTime / duration))
-            : null;
-
           onStart({
             duration,
-            progress,
+            progress: this.getProgress(nextTime),
             time: nextTime,
           });
 
@@ -66,10 +79,9 @@ class TimerWrapper extends Component {
         case false:
           cancelAnimationFrame(this.animationFrame);
 
-          progress = Math.max(0, Math.min(1, this.state.time / duration));
           onStop({
             duration,
-            progress,
+            progress: this.getProgress(this.state.time),
             time: this.state.time,
           });
           break;
@@ -81,6 +93,18 @@ class TimerWrapper extends Component {
     cancelAnimationFrame(this.animationFrame);
   }
 
+  getProgress(time) {
+    const {
+      duration,
+    } = this.state;
+
+    if (!duration) {
+      return null;
+    }
+
+    return Math.max(0, Math.min(1, time / duration));
+  }
+
   tick() {
     const {
       duration,
@@ -95,47 +119,43 @@ class TimerWrapper extends Component {
       startTime,
     } = this.state;
 
-
-    const diff = Date.now() - startTime;
-    let nextTime = this.props.time + diff;
-
-    const progress = Math.max(0, Math.min(1, (nextTime / duration)));
+    let nextTime = Date.now() - startTime;
 
     onTimeUpdate({
       duration,
-      progress,
+      progress: this.getProgress(nextTime),
       time: nextTime,
     });
 
     this.setState({
       time: nextTime,
-    });
-
-    if (duration !== null && this.state.time >= duration) {
-      onFinish({
-        duration,
-        progress,
-        time: nextTime,
-      });
-
-      if (!loop) {
-        cancelAnimationFrame(this.animationFrame);
-        return;
+    }, () => {
+      if (duration !== null && nextTime >= duration) {
+        onFinish({
+          duration,
+          progress: this.getProgress(nextTime),
+          time: nextTime,
+        });
+
+        if (!loop) {
+          cancelAnimationFrame(this.animationFrame);
+          return;
+        }
+
+        nextTime = 0;
+        onStart({
+          duration,
+          progress: 0,
+          time: nextTime,
+        });
+
+        this.setState({
+          startTime: Date.now(),
+        });
       }
 
-      nextTime = 0;
-      onStart({
-        duration,
-        progress: 0,
-        time: nextTime,
-      });
-
-      this.setState({
-        startTime: Date.now(),
-      });
-    }
-
-    this.animationFrame = requestAnimationFrame(this.tick);
+      this.animationFrame = requestAnimationFrame(this.tick);
+    });
   }
 
   render() {
@@ -172,7 +192,7 @@ class TimerWrapper extends Component {
 TimerWrapper.propTypes = {
   active: PropTypes.bool,
   component: PropTypes.oneOfType([
-    PropTypes.element,
+    PropTypes.func,
     PropTypes.string,
   ]),
   duration: PropTypes.number,