Add support for string value

Author: wojtekmaj

src/Clock.jsx

@@ -5,6 +5,12 @@ import mergeClassNames from 'merge-class-names';
 import Hand from './Hand';
 import Mark from './Mark';
 
+import {
+  getHours,
+  getMinutes,
+  getSeconds,
+} from './shared/dates';
+
 export default class Clock extends Component {
   renderFace() {
     const {
@@ -63,11 +69,11 @@ export default class Clock extends Component {
       value,
     } = this.props;
 
-    const angle = (
-      (value.getHours() * 30) +
-      (value.getMinutes() / 2) +
-      (value.getSeconds() / 600)
-    );
+    const angle = value ? (
+      (getHours(value) * 30) +
+      (getMinutes(value) / 2) +
+      (getSeconds(value) / 600)
+    ) : 0;
 
     return (
       <Hand
@@ -92,11 +98,11 @@ export default class Clock extends Component {
       value,
     } = this.props;
 
-    const angle = (
-      (value.getHours() * 360) +
-      (value.getMinutes() * 6) +
-      (value.getSeconds() / 10)
-    );
+    const angle = value ? (
+      (getHours(value) * 360) +
+      (getMinutes(value) * 6) +
+      (getSeconds(value) / 10)
+    ) : 0;
 
     return (
       <Hand
@@ -121,10 +127,10 @@ export default class Clock extends Component {
       value,
     } = this.props;
 
-    const angle = (
-      (value.getMinutes() * 360) +
-      (value.getSeconds() * 6)
-    );
+    const angle = value ? (
+      (getMinutes(value) * 360) +
+      (getSeconds(value) * 6)
+    ) : 0;
 
     return (
       <Hand
@@ -143,7 +149,7 @@ export default class Clock extends Component {
     return (
       <time
         className={mergeClassNames('react-clock', this.props.className)}
-        dateTime={value.toISOString()}
+        dateTime={value instanceof Date ? value.toISOString() : value}
         style={{
           width: `${size}px`,
           height: `${size}px`,
@@ -199,5 +205,8 @@ Clock.propTypes = {
   secondHandOppositeLength: PropTypes.number,
   secondHandWidth: PropTypes.number,
   size: PropTypes.number,
-  value: PropTypes.instanceOf(Date),
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.instanceOf(Date),
+  ]),
 };

src/Clock.less

@@ -1,4 +1,5 @@
 .react-clock {
+  display: block;
   position: relative;
 
   &, & *, & *:before, & *:after {

src/shared/dates.js

@@ -0,0 +1,45 @@
+const hourOptionalSecondsRegExp = /^(([0-1])?[0-9]|2[0-3]):[0-5][0-9](:([0-5][0-9]))?$/;
+const hourRegExp = /^(([0-1])?[0-9]|2[0-3]):[0-5][0-9]:([0-5][0-9])$/;
+
+export const getHours = (date) => {
+  if (date instanceof Date) {
+    return date.getHours();
+  }
+
+  if (typeof date === 'string' && hourOptionalSecondsRegExp.test(date)) {
+    const minuteString = date.split(':')[0];
+    return parseInt(minuteString, 10);
+  }
+
+  throw new Error(`Failed to get hours from date: ${date}.`);
+};
+
+export const getMinutes = (date) => {
+  if (date instanceof Date) {
+    return date.getMinutes();
+  }
+
+  if (typeof date === 'string' && hourOptionalSecondsRegExp.test(date)) {
+    const minuteString = date.split(':')[1];
+    return parseInt(minuteString, 10);
+  }
+
+  throw new Error(`Failed to get minutes from date: ${date}.`);
+};
+
+export const getSeconds = (date) => {
+  if (date instanceof Date) {
+    return date.getSeconds();
+  }
+
+  if (typeof date === 'string') {
+    if (hourRegExp.test(date)) {
+      const minuteString = date.split(':')[2];
+      return parseInt(minuteString, 10);
+    } else if (hourOptionalSecondsRegExp.test(date)) {
+      return 0;
+    }
+  }
+
+  throw new Error(`Failed to get seconds from date: ${date}.`);
+};