Allowing daySeparator for further customization

README.md

@@ -15,7 +15,7 @@ If you are using yarn,
 Below is an example of how this component might be used.
 
 ```js
-import Countdown fro 'react-cntdwn';
+import Countdown from 'react-cntdwn';
 
 const handleFinish = function () {
   console.log('Skynet has become self-aware!');
@@ -92,6 +92,14 @@ The callback function to be called when the countdown ends.
 
 The string used to separate the different parts of the time
 
+* type: `String`
+* optional
+* default: ` `
+
+### [daySeparator]
+
+The string used to separate day from time
+
 * type: `String`
 * optional
 * default: ` `

src/cntdwn.jsx

@@ -1,13 +1,13 @@
 import React, {Component, PropTypes} from 'react'
 import moment from 'moment'
 
-const COUNTDOWN_NOT_STARTED = 1
-const COUNTDOWN_STARTED = 2
-const COUNTDOWN_FINISHED = 3
+const COUNTDOWN_NOT_STARTED = 1;
+const COUNTDOWN_STARTED = 2;
+const COUNTDOWN_FINISHED = 3;
 
 export default class Countdown extends Component {
   constructor (props) {
-    super(props)
+    super(props);
     this.state = {
       remainingTime: 0,
       status: COUNTDOWN_NOT_STARTED,
@@ -19,68 +19,68 @@ export default class Countdown extends Component {
     setTimeout(() => {
       let timer = setInterval(() => {
         this.tick()
-      }, this.props.interval)
+      }, this.props.interval);
 
       this.setState({
         status: COUNTDOWN_STARTED,
         intervalId: timer
-      })
+      });
 
       this.tick()
     }, this.props.startDelay)
-  }
+  };
 
   componentWillUnmount = () => {
     clearInterval(this.state.intervalId)
-  }
+  };
 
   calculateRemainingTime = () => {
     return -1 * moment().diff(this.props.targetDate)
-  }
+  };
 
   addLeadingZero = (value) => {
     if (value < 10) {
       return '0' + value.toString()
     }
     return value
-  }
+  };
 
   tick = () => {
     this.setState({
       remainingTime: this.calculateRemainingTime()
-    })
+    });
 
     if (this.state.remainingTime <= 0) {
       this.setState({
         status: COUNTDOWN_FINISHED
-      })
+      });
 
       if (this.props.onFinished) {
         this.props.onFinished()
       }
       clearInterval(this.state.intervalId)
     }
-  }
+  };
 
   renderRemainingTime = () => {
-    let html = []
-    let { format, leadingZero, timeSeparator } = this.props
-    let { remainingTime } = this.state
+    let html = [];
+    let { format, leadingZero, timeSeparator, daySeparator } = this.props;
+    let { remainingTime } = this.state;
 
     if (format.day) {
-      let days = moment.duration(remainingTime).get('days')
+      let days = moment.duration(remainingTime).get('days');
       if (leadingZero) {
         days = this.addLeadingZero(days)
       }
       html.push(
         <span className='react-cntdwn-day' key='day'>
-          {days}&nbsp;
+          {days}{daySeparator}
         </span>
       )
     }
 
     if (format.hour) {
-      let hours = moment.duration(remainingTime).get('hours')
+      let hours = moment.duration(remainingTime).get('hours');
       if (leadingZero) {
         hours = this.addLeadingZero(hours)
       }
@@ -92,7 +92,7 @@ export default class Countdown extends Component {
     }
 
     if (format.minute) {
-      let minutes = moment.duration(remainingTime).get('minutes')
+      let minutes = moment.duration(remainingTime).get('minutes');
       if (leadingZero) {
         minutes = this.addLeadingZero(minutes)
       }
@@ -104,7 +104,7 @@ export default class Countdown extends Component {
     }
 
     if (format.second) {
-      let seconds = moment.duration(remainingTime).get('seconds')
+      let seconds = moment.duration(remainingTime).get('seconds');
       if (leadingZero) {
         seconds = this.addLeadingZero(seconds)
       }
@@ -116,7 +116,7 @@ export default class Countdown extends Component {
     }
 
     return html
-  }
+  };
 
   render = () => {
     if (this.state.status === COUNTDOWN_NOT_STARTED) {
@@ -139,8 +139,9 @@ Countdown.propTypes = {
   onFinished: PropTypes.func,
   format: PropTypes.object,
   timeSeparator: PropTypes.string,
+  daySeparator: PropTypes.string,
   leadingZero: PropTypes.bool
-}
+};
 
 Countdown.defaultProps = {
   interval: 1000,
@@ -151,5 +152,6 @@ Countdown.defaultProps = {
     second: 'SS'
   },
   timeSeparator: ' ',
+  daySeparator: ' ',
   leadingZero: false
-}
+};