Merge pull request #11 from slorenzo/add/auto-start-prop

Added autoStart property

CHANGELOG.md

@@ -37,3 +37,7 @@
 ## v2.0.2
 
 * Added onChange property
+
+## v2.0.3
+
+* Added autoStart property

README.md

@@ -66,6 +66,7 @@ export default Stopwatch;
 - `hours`: Integer. Needs to be `0 >= hours`. (Required)
 - `limit`: String. Need to have the following format `XX:XX:XX`. (Optional)
 - `withLoop`: Boolean. If it is `true` when the watch is equal to `limit`, it makes a loop. (Optional)
+- `autoStart`: Boolean. Start counting time. Default: true (Optional)
 - `onCallback`: Function. If you need to do something when the watch is equal to `limit`. (Optional)
 - `onChange`: Function. It returns the values each second. (Optional)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stopwatch",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "React Stopwatch component using Render Props",
   "main": "dist/react-stopwatch.js",
   "umd:main": "dist/react-stopwatch.umd.js",

src/__tests__/__snapshots__/index.test.js.snap

@@ -4,6 +4,7 @@ exports[`ReactStopwatch It renders without breaking using render as children ele
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <ReactStopWatch
+    autoStart={true}
     hours={0}
     limit="00:00:10"
     minutes={0}
@@ -67,6 +68,7 @@ exports[`ReactStopwatch It renders without breaking using render as property 1`]
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <ReactStopWatch
+    autoStart={true}
     hours={0}
     limit="00:00:10"
     minutes={0}

src/__tests__/index.test.js

@@ -70,6 +70,28 @@ describe('ReactStopwatch', () => {
     }, ms('1.1s'));
   });
 
+  it('should not auto start', (done) => {
+    const wrapper = shallow(
+      <Stopwatch
+        seconds={0}
+        minutes={0}
+        hours={0}
+        autoStart={false}
+        limit="00:00:10"
+        render={noop}
+      />,
+    );
+
+    expect(wrapper.state().stateHours).toBe(0);
+    expect(wrapper.state().stateHours).toBe(0);
+    expect(wrapper.state().stateMinutes).toBe(0);
+
+    setTimeout(() => {
+      expect(wrapper.state().stateSeconds).toBe(0);
+      done();
+    }, ms('1.1s'));
+  });
+
   it('should call to onCallback function', (done) => {
     const handleCallback = () => {
       expect(true).toBe(true);

src/index.js

@@ -9,6 +9,7 @@ class ReactStopWatch extends PureComponent<Props, State> {
   static displayName = 'ReactStopWatch';
 
   static defaultProps = {
+    autoStart: true,
     withLoop: false,
     onCallback: () => {},
     onChange: () => {},
@@ -46,7 +47,10 @@ class ReactStopWatch extends PureComponent<Props, State> {
   }
 
   componentDidMount(): void {
-    this.timer();
+    const { autoStart } = this.props;
+    if (autoStart) {
+      this.timer();
+    }
   }
 
   componentWillUnmount(): void {

src/types/index.js

@@ -5,6 +5,7 @@ export type Props = {
   minutes: number,
   hours: number,
   limit?: string,
+  autoStart?: boolean,
   withLoop?: boolean,
   onChange?: () => void,
   onCallback: () => void,