diff --git a/.babelrc b/.babelrc index 32d6bcf..3c168bf 100644 --- a/.babelrc +++ b/.babelrc @@ -1 +1 @@ -{ "presets": ["es2015", "react", "stage-0"] } +{ "presets": ["es2015", "react", "stage-2"] } diff --git a/example/public/bundle.js b/example/public/bundle.js index 5f9b19c..af019da 100644 --- a/example/public/bundle.js +++ b/example/public/bundle.js @@ -149,7 +149,7 @@ key: 'componentDidMount', value: function componentDidMount() { this.tick(); - this.interval = setInterval(this.tick.bind(this), 1000); + this.interval = setInterval(this.tick.bind(this), this.props.tickInterval); } }, { key: 'componentWillUnmount', @@ -175,7 +175,8 @@ }, { key: 'render', value: function render() { - return _react2.default.createElement('div', { className: 'react-count-down' }, _react2.default.createElement('span', { className: 'date' }, ' ', this.state.remaining), _react2.default.createElement('span', { className: 'prefix' }, ' ', this.props.options.prefix)); + var html = { __html: this.state.remaining }; + return _react2.default.createElement('div', { className: 'react-count-down' }, _react2.default.createElement('span', { className: 'date', dangerouslySetInnerHTML: html }), _react2.default.createElement('span', { className: 'prefix' }, ' ', this.props.options.prefix)); } }]); @@ -184,6 +185,14 @@ exports.default = Countdown; + Countdown.defaultProps = { + tickInterval: 60000 + }; + + Countdown.propTypes = { + tickInterval: _react.PropTypes.number /* millisecond */ + }; + /***/ }, /* 2 */ /***/ function(module, exports) { @@ -208,10 +217,10 @@ var between = []; - days > 0 ? between.push(days + ' day' + (days > 1 ? 's' : '')) : false; - hours > 0 ? between.push(hours + ' hour' + (hours > 1 ? 's' : '')) : false; - minutes > 0 ? between.push(minutes + ' minute' + (minutes > 1 ? 's' : '')) : false; - seconds > 0 ? between.push(seconds + ' second' + (seconds > 1 ? 's' : '')) : false; + days > 0 ? between.push('
' + days + ' day' + (days > 1 ? 's' : '') + '
') : false; + hours > 0 ? between.push('
' + hours + ' hour' + (hours > 1 ? 's' : '') + '
') : false; + minutes > 0 ? between.push('
' + minutes + ' minute' + (minutes > 1 ? 's' : '') + '
') : false; + seconds > 0 ? between.push('
' + seconds + ' second' + (seconds > 1 ? 's' : '') + '
') : false; return between.join(' '); }; @@ -18453,10 +18462,10 @@ */ function getUnboundedScrollPosition(scrollable) { - if (scrollable === window) { + if (scrollable.Window && scrollable instanceof scrollable.Window) { return { - x: window.pageXOffset || document.documentElement.scrollLeft, - y: window.pageYOffset || document.documentElement.scrollTop + x: scrollable.pageXOffset || scrollable.document.documentElement.scrollLeft, + y: scrollable.pageYOffset || scrollable.document.documentElement.scrollTop }; } return { @@ -19205,7 +19214,9 @@ * @return {boolean} Whether or not the object is a DOM node. */ function isNode(object) { - return !!(object && (typeof Node === 'function' ? object instanceof Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string')); + var doc = object ? object.ownerDocument || object : document; + var defaultView = doc.defaultView || window; + return !!(object && (typeof defaultView.Node === 'function' ? object instanceof defaultView.Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string')); } module.exports = isNode; @@ -19235,15 +19246,19 @@ * * The activeElement will be null only if the document or document body is not * yet defined. + * + * @param {?DOMDocument} doc Defaults to current document. + * @return {?DOMElement} */ - function getActiveElement() /*?DOMElement*/{ - if (typeof document === 'undefined') { + function getActiveElement(doc) /*?DOMElement*/{ + doc = doc || (typeof document !== 'undefined' ? document : undefined); + if (typeof doc === 'undefined') { return null; } try { - return document.activeElement || document.body; + return doc.activeElement || doc.body; } catch (e) { - return document.body; + return doc.body; } } diff --git a/lib/Countdown.js b/lib/Countdown.js index 1c15504..2acc7b5 100644 --- a/lib/Countdown.js +++ b/lib/Countdown.js @@ -42,7 +42,7 @@ var Countdown = function (_Component) { key: 'componentDidMount', value: function componentDidMount() { this.tick(); - this.interval = setInterval(this.tick.bind(this), 1000); + this.interval = setInterval(this.tick.bind(this), this.props.tickInterval); } }, { key: 'componentWillUnmount', @@ -68,15 +68,11 @@ var Countdown = function (_Component) { }, { key: 'render', value: function render() { + var html = { __html: this.state.remaining }; return _react2.default.createElement( 'div', { className: 'react-count-down' }, - _react2.default.createElement( - 'span', - { className: 'date' }, - ' ', - this.state.remaining - ), + _react2.default.createElement('span', { className: 'date', dangerouslySetInnerHTML: html }), _react2.default.createElement( 'span', { className: 'prefix' }, @@ -90,4 +86,13 @@ var Countdown = function (_Component) { return Countdown; }(_react.Component); -exports.default = Countdown; \ No newline at end of file +exports.default = Countdown; + + +Countdown.defaultProps = { + tickInterval: 60000 +}; + +Countdown.propTypes = { + tickInterval: _react.PropTypes.number /* millisecond */ +}; \ No newline at end of file diff --git a/lib/DateBetween.js b/lib/DateBetween.js index adc0332..e359af2 100644 --- a/lib/DateBetween.js +++ b/lib/DateBetween.js @@ -18,10 +18,10 @@ var DateBetween = function DateBetween(startDate, endDate) { var between = []; - days > 0 ? between.push(days + ' day' + (days > 1 ? 's' : '')) : false; - hours > 0 ? between.push(hours + ' hour' + (hours > 1 ? 's' : '')) : false; - minutes > 0 ? between.push(minutes + ' minute' + (minutes > 1 ? 's' : '')) : false; - seconds > 0 ? between.push(seconds + ' second' + (seconds > 1 ? 's' : '')) : false; + days > 0 ? between.push('
' + days + ' day' + (days > 1 ? 's' : '') + '
') : false; + hours > 0 ? between.push('
' + hours + ' hour' + (hours > 1 ? 's' : '') + '
') : false; + minutes > 0 ? between.push('
' + minutes + ' minute' + (minutes > 1 ? 's' : '') + '
') : false; + seconds > 0 ? between.push('
' + seconds + ' second' + (seconds > 1 ? 's' : '') + '
') : false; return between.join(' '); }; diff --git a/package.json b/package.json index 02a00a9..daaaafa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-count-down", - "version": "1.1.0", + "version": "1.2.1", "description": "a simple count down clock component", "main": "lib/Countdown.js", "repository": { @@ -34,7 +34,7 @@ "build": "babel src --out-dir lib", "example": "webpack --config ./example/webpack.config.js", "serve": "node ./example/server.js", - "start": "npm run example && npm run serve", + "start": "npm run build && npm run example && npm run serve", "test": "tape test/index.js" }, "keywords": [ diff --git a/src/Countdown.js b/src/Countdown.js index 46d0e9e..386e45c 100644 --- a/src/Countdown.js +++ b/src/Countdown.js @@ -14,7 +14,7 @@ export default class Countdown extends Component { componentDidMount() { this.tick() - this.interval = setInterval(this.tick.bind(this), 1000) + this.interval = setInterval(this.tick.bind(this), this.props.tickInterval) } componentWillUnmount() { @@ -37,11 +37,20 @@ export default class Countdown extends Component { } render() { + const html = { __html: this.state.remaining }; return (
- {this.state.remaining} + {this.props.options.prefix}
) }; } + +Countdown.defaultProps = { + tickInterval: 60000 +} + +Countdown.propTypes = { + tickInterval: PropTypes.number /* millisecond */ +}; \ No newline at end of file diff --git a/src/DateBetween.js b/src/DateBetween.js index f62c818..5d640d2 100644 --- a/src/DateBetween.js +++ b/src/DateBetween.js @@ -17,10 +17,10 @@ let DateBetween = function(startDate, endDate) { let between = []; - days > 0 ? between.push(`${days} day${days > 1 ? 's' : ''}`) : false; - hours > 0 ? between.push(`${hours} hour${hours > 1 ? 's' : ''}`) : false; - minutes > 0 ? between.push(`${minutes} minute${minutes > 1 ? 's' : ''}`) : false; - seconds > 0 ? between.push(`${seconds} second${seconds > 1 ? 's' : ''}`) : false; + days > 0 ? between.push(`
${days} day${days > 1 ? 's' : ''}
`) : false; + hours > 0 ? between.push(`
${hours} hour${hours > 1 ? 's' : ''}
`) : false; + minutes > 0 ? between.push(`
${minutes} minute${minutes > 1 ? 's' : ''}
`) : false; + seconds > 0 ? between.push(`
${seconds} second${seconds > 1 ? 's' : ''}
`) : false; return between.join(' '); }