Add hours parameter to toggle hours

.gitignore

@@ -1,3 +1,4 @@
 # node.js
 #
-node_modules/
+node_modules/
+.idea

lib/stopwatch.js

@@ -9,9 +9,11 @@ class StopWatch extends Component {
     start: PropTypes.bool,
     reset: PropTypes.bool,
     msecs: PropTypes.bool,
+    hours: PropTypes.bool,
     options: PropTypes.object,
     laps: PropTypes.bool,
     getTime: PropTypes.func,
+    getTimeToParent: PropTypes.func,
     startTime: PropTypes.number,
     getMsecs: PropTypes.func,
   }
@@ -30,6 +32,7 @@ class StopWatch extends Component {
     this.stop = this.stop.bind(this);
     this.reset = this.reset.bind(this);
     this.formatTime = this.formatTime.bind(this);
+    this.handleGetTimeToParent = this.handleGetTimeToParent.bind(this);
     const width = props.msecs ? 220 : 150;
     this.defaultStyles = {
       container: {
@@ -52,7 +55,7 @@ class StopWatch extends Component {
     }
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps, nextContext) {
     if(newProps.start) {
       this.start();
     } else {
@@ -94,6 +97,8 @@ class StopWatch extends Component {
       this.interval = null;
     }
     this.setState({started: false});
+
+    this.handleGetTimeToParent();
   }
 
   reset() {
@@ -106,10 +111,10 @@ class StopWatch extends Component {
     });
   }
 
-  formatTime() {
-    const { getTime, getMsecs, msecs } = this.props;
+  formatTime() {    
+    const { getTime, getMsecs, msecs, hours } = this.props;
     const now = this.state.elapsed;
-    const formatted = formatTimeString(now, msecs);
+    const formatted = formatTimeString(now, msecs, hours);
     if (typeof getTime === "function") {
       getTime(formatted);
     }
@@ -119,6 +124,11 @@ class StopWatch extends Component {
     return formatted;
   }
 
+  handleGetTimeToParent() {
+    if (typeof this.props.getTimeToParent === 'function') {
+      this.props.getTimeToParent(this.formatTime());
+    }
+  }
 
   render() {
 

lib/utils.js

@@ -1,4 +1,4 @@
-function formatTimeString(time, showMsecs) {
+function formatTimeString(time, showMsecs, showHours) {
   let msecs = time % 1000;
 
   if (msecs < 10) {
@@ -11,19 +11,14 @@ function formatTimeString(time, showMsecs) {
   let minutes = Math.floor(time / 60000);
   let hours = Math.floor(time / 3600000);
   seconds = seconds - minutes * 60;
-  minutes = minutes - hours * 60;
-  let formatted;
-  if (showMsecs) {
-    formatted = `${hours < 10 ? 0 : ""}${hours}:${
-      minutes < 10 ? 0 : ""
-    }${minutes}:${seconds < 10 ? 0 : ""}${seconds}:${msecs}`;
-  } else {
-    formatted = `${hours < 10 ? 0 : ""}${hours}:${
-      minutes < 10 ? 0 : ""
-    }${minutes}:${seconds < 10 ? 0 : ""}${seconds}`;
-  }
-
-  return formatted;
+  minutes = minutes - hours * 60;  
+
+  let formattedHours = showHours ? `${hours < 10 ? 0 : ""}${hours}:` : '';
+  let formattedMinutes = `${minutes < 10 ? 0 : ""}${minutes}:`;
+  let formattedSeconds = `${seconds < 10 ? 0 : ""}${seconds}`; 
+  let formattedMsecs = showMsecs ? `:${msecs}` : '';
+
+  return `${formattedHours}${formattedMinutes}${formattedSeconds}${formattedMsecs}`;  
 }
 
 export { formatTimeString };