From c8f8dae545c2e2e4d15a72a62121185f406304ca Mon Sep 17 00:00:00 2001 From: Ernesto del Frade Date: Tue, 28 Nov 2017 11:53:39 -0500 Subject: [PATCH 1/2] removing static   from day and replacing it with option daySeparator --- src/cntdwn.jsx | 50 ++++++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/cntdwn.jsx b/src/cntdwn.jsx index 9dbb8b2..b4655bc 100644 --- a/src/cntdwn.jsx +++ b/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( - {days}  + {days}{daySeparator} ) } 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 -} +}; From 5712ab3e3a0af83c094ee0d942a7bb0ab46e9d2a Mon Sep 17 00:00:00 2001 From: Ernesto del Frade Date: Tue, 28 Nov 2017 11:53:57 -0500 Subject: [PATCH 2/2] Updating Readme to add daySeparator --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9f9f461..61aa08d 100644 --- a/README.md +++ b/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: ` `