feat: add support for synchronizeWith property

Author: troch

modules/timer.js

@@ -18,27 +18,36 @@ function timer(delay) {
                 this.delay = delay;
                 this.state = { tick: 0 };
 
+                this.synchronizeWith = props.synchronizeWith;
+                this.synchronized = props.synchronizeWith !== undefined;
+
                 this.setTimeout = ::this.setTimeout;
                 this.stop = ::this.stop;
                 this.resume = ::this.resume;
                 this.setDelay = ::this.setDelay;
             }
 
             setTimeout() {
-                const { delay, startTime } = this;
-                const duration = delay - (startTime - Date.now()) % delay;
+                const { delay, synchronizeWith } = this;
+                const duration = delay - Math.abs(synchronizeWith - Date.now()) % delay;
 
                 this.timer = setTimeout(() => {
                     this.setState({ tick: this.state.tick + 1 });
                     if (!this.stopped) this.setTimeout();
-                }, delay);
+                }, duration);
+            }
+
+            start() {
+                this.stopped = false;
+                if (!this.synchronized) {
+                    this.synchronizeWith = Date.now();
+                }
+                this.setTimeout();
             }
 
             resume() {
                 if (this.stopped) {
-                    this.stopped = false;
-                    this.startTime = Date.now();
-                    this.setTimeout();
+                    this.start();
                 }
             }
 
@@ -57,9 +66,7 @@ function timer(delay) {
             }
 
             componentDidMount() {
-                this.stopped = false;
-                this.startTime = Date.now();
-                this.setTimeout();
+                this.start();
             }
 
             componentWillUnmount() {

modules/timer.test.js

@@ -19,18 +19,17 @@ class Counter extends Component {
     }
 }
 
+const WrappedCounter = timer(1000)(Counter);
+
 describe('Timer', function() {
     let clock, wrappedCounter, counter;
 
     before(() => clock = sinon.useFakeTimers());
     after(() => clock.restore());
 
     it('should pass down a timer property alongside other props', function() {
-        const WrappedCounter = timer(1000)(Counter);
         expect(WrappedCounter.displayName).to.equal('Timer@1000[Counter]');
-
-        const wrappedCounter = renderIntoDocument(h(WrappedCounter, { customProp: 1 }));
-
+        wrappedCounter = renderIntoDocument(h(WrappedCounter, { customProp: 1 }));
         counter = findRenderedComponentWithType(wrappedCounter, Counter);
 
         expect(counter.props.timer.tick).to.equal(0);
@@ -63,4 +62,18 @@ describe('Timer', function() {
         expect(counter.props.timer.tick).to.equal(3);
         counter.props.timer.stop();
     });
+
+    it('should be synchronized with a provided value', function() {
+        clock.restore();
+        clock = sinon.useFakeTimers(500);
+
+        wrappedCounter = renderIntoDocument(h(WrappedCounter, { synchronizeWith: 0 }));
+        counter = findRenderedComponentWithType(wrappedCounter, Counter);
+
+        expect(counter.props.timer.tick).to.equal(0);
+        clock.tick(600);
+        expect(counter.props.timer.tick).to.equal(1);
+        clock.tick(1000);
+        expect(counter.props.timer.tick).to.equal(2);
+    });
 });