react-countdown-clock - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

build/react-countdown-clock.js

@@ -1,2 +0,7 @@
-!function(t,s){"object"==typeof exports&&"object"==typeof module?module.exports=s(require("react")):"function"==typeof define&&define.amd?define(["react"],s):"object"==typeof exports?exports.ReactCountdownClock=s(require("react")):t.ReactCountdownClock=s(t.React)}(this,function(t){return function(t){function s(i){if(e[i])return e[i].exports;var r=e[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,s),r.loaded=!0,r.exports}var e={};return s.m=t,s.c=e,s.p="/build/",s(0)}([function(t,s,e){var i;i=e(1),t.exports=i.createClass({_seconds:0,_radius:null,_fraction:null,_content:null,_canvas:null,_timeoutIds:[],displayName:"ReactCountdownClock",propTypes:{seconds:i.PropTypes.number,size:i.PropTypes.number,weight:i.PropTypes.number,color:i.PropTypes.string,fontSize:i.PropTypes.string,font:i.PropTypes.string,alpha:i.PropTypes.number,timeFormat:i.PropTypes.string,onComplete:i.PropTypes.func,onClick:i.PropTypes.func,showMilliseconds:i.PropTypes.bool,paused:i.PropTypes.bool,pausedText:i.PropTypes.string},getDefaultProps:function(){return{seconds:60,size:300,color:"#000",alpha:1,timeFormat:"hms",fontSize:"auto",font:"Arial",showMilliseconds:!0,paused:!1}},componentDidUpdate:function(t){if(t.seconds!==this.props.seconds&&(this._seconds=t.seconds,this._setupTimer()),t.color!==this.props.color&&(this._clearBackground(),this._drawBackground(),this._updateCanvas()),t.paused!==this.props.paused&&(this.props.paused||this._startTimer(),this.props.paused))return this._pauseTimer()},componentDidMount:function(){return this._seconds=this.props.seconds,this._setupTimer()},componentWillUnmount:function(){return this._cancelTimer()},_setupTimer:function(){if(this._setScale(),this._setupCanvases(),this._drawBackground(),this._drawTimer(),!this.props.paused)return this._startTimer()},_updateCanvas:function(){return this._clearTimer(),this._drawTimer()},_setScale:function(){return this._radius=this.props.size/2,this._fraction=2/this._seconds,this._tickPeriod=this._calculateTick(),this._innerRadius=this.props.weight?this._radius-this.props.weight:this._radius/1.8},_calculateTick:function(){var t,s;return s=1.8,t=this._seconds*s,t>1e3?1e3:t},_setupCanvases:function(){if(this._background=this.refs.background.getContext("2d"),this._timer=this.refs.timer.getContext("2d"),this._timer.textAlign="center",this._timer.textBaseline="middle",null!=this.props.onClick)return this.refs.component.addEventListener("click",this.props.onClick)},_startTimer:function(){return this._timeoutIds.push(setTimeout(function(t){return function(){return t._tick()}}(this),200))},_pauseTimer:function(){return this._stopTimer(),this._updateCanvas()},_stopTimer:function(){var t,s,e,i,r;for(e=this._timeoutIds,i=[],t=0,s=e.length;t<s;t++)r=e[t],i.push(clearTimeout(r));return i},_cancelTimer:function(){if(this._stopTimer(),null!=this.props.onClick)return this.refs.component.removeEventListener("click",this.props.onClick)},_tick:function(){var t;return t=Date.now(),this._timeoutIds.push(setTimeout(function(s){return function(){var e;return e=(Date.now()-t)/1e3,s._seconds-=e,s._seconds<=0?(s._seconds=0,s._handleComplete(),s._clearTimer()):(s._updateCanvas(),s._tick())}}(this),this._tickPeriod))},_handleComplete:function(){if(this.props.onComplete)return this.props.onComplete()},_clearBackground:function(){return this._background.clearRect(0,0,this.refs.timer.width,this.refs.timer.height)},_clearTimer:function(){return this._timer.clearRect(0,0,this.refs.timer.width,this.refs.timer.height)},_drawBackground:function(){return this._background.beginPath(),this._background.globalAlpha=this.props.alpha/3,this._background.fillStyle=this.props.color,this._background.arc(this._radius,this._radius,this._radius,0,2*Math.PI,!1),this._background.arc(this._radius,this._radius,this._innerRadius,2*Math.PI,0,!0),this._background.closePath(),this._background.fill()},_formattedTime:function(){var t,s,e,i,r,o;return t=null!=(i=this._seconds<=9.9&&this.props.showMilliseconds)?i:{1:0},"hms"===this.props.timeFormat?(s=parseInt(this._seconds/3600)%24,e=parseInt(this._seconds/60)%60,r=(this._seconds%60).toFixed(t),s<10&&(s="0"+s),e<10&&(e="0"+e),r<10&&e>=1&&(r="0"+r),o=[],s>0&&o.push(s),e>0&&o.push(e),o.push(r),o.join(":")):this._seconds.toFixed(t)},_fontSize:function(t){var s,e;return"auto"===this.props.fontSize?(s=function(){switch(t.length){case 8:return 4;case 5:return 3;default:return 2}}(),e=this._radius/s,e+"px"):this.props.fontSize},_drawTimer:function(){var t,s,e;return s=this._fraction*this._seconds+1.5,t=this._formattedTime(),e=this.props.paused&&null!=this.props.pausedText?this.props.pausedText:t,this._timer.globalAlpha=this.props.alpha,this._timer.fillStyle=this.props.color,this._timer.font="bold "+this._fontSize(t)+" "+this.props.font,this._timer.fillText(e,this._radius,this._radius),this._timer.beginPath(),this._timer.arc(this._radius,this._radius,this._radius,1.5*Math.PI,Math.PI*s,!1),this._timer.arc(this._radius,this._radius,this._innerRadius,Math.PI*s,1.5*Math.PI,!0),this._timer.closePath(),this._timer.fill()},render:function(){return i.createElement("div",{ref:"component",className:"react-countdown-clock"},i.createElement("canvas",{ref:"background",style:{position:"absolute"},width:this.props.size,height:this.props.size}),i.createElement("canvas",{ref:"timer",style:{position:"absolute"},width:this.props.size,height:this.props.size}))}})},function(s,e){s.exports=t}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCountdownClock=e(require("react")):t.ReactCountdownClock=e(t.React)}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/Users/hugh/Dropbox/Development/Web/react-countdown-clock/build",e(e.s=2)}([function(e,n){e.exports=t},function(t,e,n){"use strict";function r(t,e,n,r,o,s,a,u){if(i(e),!t){var c;if(void 0===e)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[n,r,o,s,a,u],h=0;c=new Error(e.replace(/%s/g,function(){return p[h++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var i=function(t){};t.exports=r},function(t,e,n){var r,i,o,s;o=n(0),i=n(3),r=n(7),s=r({_seconds:0,_radius:null,_fraction:null,_content:null,_canvas:null,_timeoutIds:[],displayName:"ReactCountdownClock",componentDidUpdate:function(t){if(t.seconds!==this.props.seconds&&(this._seconds=t.seconds,this._setupTimer()),t.color!==this.props.color&&(this._clearBackground(),this._drawBackground(),this._updateCanvas()),t.paused!==this.props.paused&&(this.props.paused||this._startTimer(),this.props.paused))return this._pauseTimer()},componentDidMount:function(){return this._seconds=this.props.seconds,this._setupTimer()},componentWillUnmount:function(){return this._cancelTimer()},_setupTimer:function(){if(this._setScale(),this._setupCanvases(),this._drawBackground(),this._drawTimer(),!this.props.paused)return this._startTimer()},_updateCanvas:function(){return this._clearTimer(),this._drawTimer()},_setScale:function(){return this._radius=this.props.size/2,this._fraction=2/this._seconds,this._tickPeriod=this._calculateTick(),this._innerRadius=this.props.weight?this._radius-this.props.weight:this._radius/1.8},_calculateTick:function(){var t,e;return e=1.8,t=this._seconds*e,t>1e3?1e3:t},_setupCanvases:function(){if(this._background=this.refs.background.getContext("2d"),this._timer=this.refs.timer.getContext("2d"),this._timer.textAlign="center",this._timer.textBaseline="middle",null!=this.props.onClick)return this.refs.component.addEventListener("click",this.props.onClick)},_startTimer:function(){return this._timeoutIds.push(setTimeout(function(t){return function(){return t._tick()}}(this),200))},_pauseTimer:function(){return this._stopTimer(),this._updateCanvas()},_stopTimer:function(){var t,e,n,r,i;for(n=this._timeoutIds,r=[],t=0,e=n.length;t<e;t++)i=n[t],r.push(clearTimeout(i));return r},_cancelTimer:function(){if(this._stopTimer(),null!=this.props.onClick)return this.refs.component.removeEventListener("click",this.props.onClick)},_tick:function(){var t;return t=Date.now(),this._timeoutIds.push(setTimeout(function(e){return function(){var n;return n=(Date.now()-t)/1e3,e._seconds-=n,e._seconds<=0?(e._seconds=0,e._handleComplete(),e._clearTimer()):(e._updateCanvas(),e._tick())}}(this),this._tickPeriod))},_handleComplete:function(){if(this.props.onComplete)return this.props.onComplete()},_clearBackground:function(){return this._background.clearRect(0,0,this.refs.timer.width,this.refs.timer.height)},_clearTimer:function(){return this._timer.clearRect(0,0,this.refs.timer.width,this.refs.timer.height)},_drawBackground:function(){return this._background.beginPath(),this._background.globalAlpha=this.props.alpha/3,this._background.fillStyle=this.props.color,this._background.arc(this._radius,this._radius,this._radius,0,2*Math.PI,!1),this._background.arc(this._radius,this._radius,this._innerRadius,2*Math.PI,0,!0),this._background.closePath(),this._background.fill()},_formattedTime:function(){var t,e,n,r,i,o,s,a,u;return t=null!=(o=this._seconds<=9.9&&this.props.showMilliseconds)?o:{1:0},"hms"===this.props.timeFormat?(e=parseInt(this._seconds/3600)%24,r=parseInt(this._seconds/60)%60,s=(this._seconds%60).toFixed(t),n=""+e,i=""+r,a=""+s,e<10&&(n="0"+e),r<10&&e>=1&&(i="0"+r),s<10&&(r>=1||e>=1)&&(a="0"+s),u=[],e>0&&u.push(n),(r>0||e>0)&&u.push(i),u.push(a),u.join(":")):this._seconds.toFixed(t)},_fontSize:function(t){var e;return"auto"===this.props.fontSize?(e=function(){switch(t.length){case 8:return 4;case 5:return 3;default:return 2}}(),this._radius/e+"px"):this.props.fontSize},_drawTimer:function(){var t,e,n;return e=this._fraction*this._seconds+1.5,t=this._formattedTime(),n=this.props.paused&&null!=this.props.pausedText?this.props.pausedText:t,this._timer.globalAlpha=this.props.alpha,this._timer.fillStyle=this.props.color,this._timer.font="bold "+this._fontSize(t)+" "+this.props.font,this._timer.fillText(n,this._radius,this._radius),this._timer.beginPath(),this._timer.arc(this._radius,this._radius,this._radius,1.5*Math.PI,Math.PI*e,!1),this._timer.arc(this._radius,this._radius,this._innerRadius,Math.PI*e,1.5*Math.PI,!0),this._timer.closePath(),this._timer.fill()},render:function(){return o.createElement("div",{ref:"component",className:"react-countdown-clock"},o.createElement("canvas",{ref:"background",style:{position:"absolute"},width:this.props.size,height:this.props.size}),o.createElement("canvas",{ref:"timer",style:{position:"absolute"},width:this.props.size,height:this.props.size}))}}),s.propTypes={seconds:i.number,size:i.number,weight:i.number,color:i.string,fontSize:i.string,font:i.string,alpha:i.number,timeFormat:i.string,onComplete:i.func,onClick:i.func,showMilliseconds:i.bool,paused:i.bool,pausedText:i.string},s.defaultProps={seconds:60,size:300,color:"#000",alpha:1,timeFormat:"hms",fontSize:"auto",font:"Arial",showMilliseconds:!0,paused:!1},t.exports=s},function(t,e,n){t.exports=n(4)()},function(t,e,n){"use strict";var r=n(5),i=n(1),o=n(6);t.exports=function(){function t(t,e,n,r,s,a){a!==o&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){"use strict";function r(t){return function(){return t}}var i=function(){};i.thatReturns=r,i.thatReturnsFalse=r(!1),i.thatReturnsTrue=r(!0),i.thatReturnsNull=r(null),i.thatReturnsThis=function(){return this},i.thatReturnsArgument=function(t){return t},t.exports=i},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e,n){"use strict";var r=n(0),i=n(8);if(void 0===r)throw Error("create-react-class could not find the React object. If you are using script tags, make sure that React is being loaded before create-react-class.");var o=(new r.Component).updater;t.exports=i(r.Component,r.isValidElement,o)},function(t,e,n){"use strict";function r(t){return t}function i(t,e,n){function i(t,e){var n=g.hasOwnProperty(e)?g[e]:null;T.hasOwnProperty(e)&&a("OVERRIDE_BASE"===n,"ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.",e),t&&a("DEFINE_MANY"===n||"DEFINE_MANY_MERGED"===n,"ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",e)}function c(t,n){if(n){a("function"!=typeof n,"ReactClass: You're attempting to use a component class or function as a mixin. Instead, just use a regular object."),a(!e(n),"ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object.");var r=t.prototype,o=r.__reactAutoBindPairs;n.hasOwnProperty(u)&&b.mixins(t,n.mixins);for(var s in n)if(n.hasOwnProperty(s)&&s!==u){var c=n[s],p=r.hasOwnProperty(s);if(i(p,s),b.hasOwnProperty(s))b[s](t,c);else{var h=g.hasOwnProperty(s),d="function"==typeof c,m=d&&!h&&!p&&!1!==n.autobind;if(m)o.push(s,c),r[s]=c;else if(p){var _=g[s];a(h&&("DEFINE_MANY_MERGED"===_||"DEFINE_MANY"===_),"ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.",_,s),"DEFINE_MANY_MERGED"===_?r[s]=l(r[s],c):"DEFINE_MANY"===_&&(r[s]=f(r[s],c))}else r[s]=c}}}else;}function p(t,e){if(e)for(var n in e){var r=e[n];if(e.hasOwnProperty(n)){var i=n in b;a(!i,'ReactClass: You are attempting to define a reserved property, `%s`, that shouldn\'t be on the "statics" key. Define it as an instance property instead; it will still be accessible on the constructor.',n);var o=n in t;a(!o,"ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",n),t[n]=r}}}function h(t,e){a(t&&e&&"object"==typeof t&&"object"==typeof e,"mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.");for(var n in e)e.hasOwnProperty(n)&&(a(void 0===t[n],"mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",n),t[n]=e[n]);return t}function l(t,e){return function(){var n=t.apply(this,arguments),r=e.apply(this,arguments);if(null==n)return r;if(null==r)return n;var i={};return h(i,n),h(i,r),i}}function f(t,e){return function(){t.apply(this,arguments),e.apply(this,arguments)}}function d(t,e){var n=e.bind(t);return n}function m(t){for(var e=t.__reactAutoBindPairs,n=0;n<e.length;n+=2){var r=e[n],i=e[n+1];t[r]=d(t,i)}}function _(t){var e=r(function(t,r,i){this.__reactAutoBindPairs.length&&m(this),this.props=t,this.context=r,this.refs=s,this.updater=i||n,this.state=null;var o=this.getInitialState?this.getInitialState():null;a("object"==typeof o&&!Array.isArray(o),"%s.getInitialState(): must return an object or null",e.displayName||"ReactCompositeComponent"),this.state=o});e.prototype=new w,e.prototype.constructor=e,e.prototype.__reactAutoBindPairs=[],y.forEach(c.bind(null,e)),c(e,E),c(e,t),c(e,v),e.getDefaultProps&&(e.defaultProps=e.getDefaultProps()),a(e.prototype.render,"createClass(...): Class specification must implement a `render` method.");for(var i in g)e.prototype[i]||(e.prototype[i]=null);return e}var y=[],g={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},b={displayName:function(t,e){t.displayName=e},mixins:function(t,e){if(e)for(var n=0;n<e.length;n++)c(t,e[n])},childContextTypes:function(t,e){t.childContextTypes=o({},t.childContextTypes,e)},contextTypes:function(t,e){t.contextTypes=o({},t.contextTypes,e)},getDefaultProps:function(t,e){t.getDefaultProps?t.getDefaultProps=l(t.getDefaultProps,e):t.getDefaultProps=e},propTypes:function(t,e){t.propTypes=o({},t.propTypes,e)},statics:function(t,e){p(t,e)},autobind:function(){}},E={componentDidMount:function(){this.__isMounted=!0}},v={componentWillUnmount:function(){this.__isMounted=!1}},T={replaceState:function(t,e){this.updater.enqueueReplaceState(this,t,e)},isMounted:function(){return!!this.__isMounted}},w=function(){};return o(w.prototype,t.prototype,T),_}var o=n(9),s=n(10),a=n(1),u="mixins";t.exports=i},function(t,e,n){"use strict";function r(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var i=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;t.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,a,u=r(t),c=1;c<arguments.length;c++){n=Object(arguments[c]);for(var p in n)o.call(n,p)&&(u[p]=n[p]);if(i){a=i(n);for(var h=0;h<a.length;h++)s.call(n,a[h])&&(u[a[h]]=n[a[h]])}}return u}},function(t,e,n){"use strict";var r={};t.exports=r}])});
 //# sourceMappingURL=react-countdown-clock.js.map

CHANGELOG.md

 # Changelog
 
+## 2.0.0
+ * Fix deprecation warnings in React 15.6.0. Thanks @AaronKalair
+ * Fix Fixes missing minute components when hour is > 0. Thanks @KTachyon
+
 ## 1.1.0 - Dec 30, 2016
@@ -4,0 +8,0 @@ * Move to semantic versioning

package.json

 {
   "name": "react-countdown-clock",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "HTML5 canvas countdown clock React component",
   "main": "build/react-countdown-clock.js",
+  "scripts": {
+    "build": "webpack -p"
+  },
   "repository": {
@@ -24,11 +27,15 @@ "type": "git",
   "devDependencies": {
-    "cjsx-loader": "^2.1.0",
+    "cjsx-loader": "^3.0.0",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.8.0",
-    "webpack": "^1.13.1",
-    "react": "15.*"
+    "webpack": "^3.3.0",
+    "react": "^15.6.0"
   },
   "peerDependencies": {
-    "react": "15.*"
+    "react": "^15.6.0"
+  },
+  "dependencies": {
+    "create-react-class": "^15.5.2",
+    "prop-types": "^15.5.8"
   }
 }

webpack.config.js

@@ -0,1 +1,3 @@
+var path = require('path');
+
 module.exports = {
@@ -6,4 +8,4 @@ cache: true,
   output: {
-    path: './build',
-    publicPath: '/build/',
+    path: path.join(__dirname, 'build'),
+    publicPath: path.join(__dirname, 'build'),
     filename: 'react-countdown-clock.js',
@@ -26,3 +28,3 @@ library: 'ReactCountdownClock',
         test: /\.coffee$/, 
-        loader: 'coffee!cjsx' 
+        loader: 'coffee-loader!cjsx-loader' 
       }
@@ -29,0 +31,0 @@ ]

No alert changes

Improved metrics

Total package byte prevSize

277730

increased by55.27%

Lines of code

84

increased by68%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedcreate-react-class@^15.5.2

• + Addedprop-types@^15.5.8