react-countdown-clock - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

build/react-countdown-clock.js

@@ -1,2 +0,2 @@
-!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(i){if(s[i])return s[i].exports;var n=s[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var s={};return e.m=t,e.c=s,e.p="/build/",e(0)}([function(t,e,s){var i;i=s(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,showMilliseconds:i.PropTypes.bool},getDefaultProps:function(){return{seconds:60,size:300,color:"#000",alpha:1,timeFormat:"hms",fontSize:"auto",font:"Arial",showMilliseconds:!0}},componentWillReceiveProps:function(t){return this._seconds=t.seconds,this._setupTimer()},componentDidMount:function(){return this._seconds=this.props.seconds,this._setupTimer()},componentWillUnmount:function(){return this._cancelTimer()},_setupTimer:function(){return this._setScale(),this._setupCanvas(),this._drawTimer(),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},_setupCanvas:function(){return this._canvas=this.refs.canvas,this._context=this._canvas.getContext("2d"),this._context.textAlign="center",this._context.textBaseline="middle"},_startTimer:function(){return this._timeoutIds.push(setTimeout(function(t){return function(){return t._tick()}}(this),200))},_cancelTimer:function(){var t,e,s,i,n;for(s=this._timeoutIds,i=[],t=0,e=s.length;t<e;t++)n=s[t],i.push(clearTimeout(n));return i},_tick:function(){var t;return t=Date.now(),this._timeoutIds.push(setTimeout(function(e){return function(){var s;return s=(Date.now()-t)/1e3,e._seconds-=s,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()},_clearTimer:function(){return this._context.clearRect(0,0,this._canvas.width,this._canvas.height),this._drawBackground()},_drawBackground:function(){return this._context.beginPath(),this._context.globalAlpha=this.props.alpha/3,this._context.arc(this._radius,this._radius,this._radius,0,2*Math.PI,!1),this._context.arc(this._radius,this._radius,this._innerRadius,2*Math.PI,0,!0),this._context.fill()},_formattedTime:function(){var t,e,s,i,n,o;return t=null!=(i=this._seconds<=9.9&&this.props.showMilliseconds)?i:{1:0},"hms"===this.props.timeFormat?(e=parseInt(this._seconds/3600)%24,s=parseInt(this._seconds/60)%60,n=(this._seconds%60).toFixed(t),e<10&&(e="0"+e),s<10&&(s="0"+s),n<10&&s>=1&&(n="0"+n),o=[],e>0&&o.push(e),s>0&&o.push(s),o.push(n),o.join(":")):this._seconds.toFixed(t)},_fontSize:function(t){var e,s;return"auto"===this.props.fontSize?(e=function(){switch(t.length){case 8:return 4;case 5:return 3;default:return 2}}(),s=this._radius/e,s+"px"):this.props.fontSize},_drawTimer:function(){var t,e;return e=this._fraction*this._seconds+1.5,t=this._formattedTime(),this._context.globalAlpha=this.props.alpha,this._context.fillStyle=this.props.color,this._context.font="bold "+this._fontSize(t)+" "+this.props.font,this._context.fillText(t,this._radius,this._radius),this._context.beginPath(),this._context.arc(this._radius,this._radius,this._radius,1.5*Math.PI,Math.PI*e,!1),this._context.arc(this._radius,this._radius,this._innerRadius,Math.PI*e,1.5*Math.PI,!0),this._context.fill()},render:function(){return i.createElement("canvas",{ref:"canvas",className:"react-countdown-clock",width:this.props.size,height:this.props.size})}})},function(e,s){e.exports=t}])});
+!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}])});
 //# sourceMappingURL=react-countdown-clock.js.map

CHANGELOG.md

 # Changelog
 
+## 1.1.0 - Dec 30, 2016
+  * Move to semantic versioning
+  * Reduce the ammount of canvas drawing
+  * Allow colour to be updated without resetting the timer
+  * Allow timer to be paused
+
 ## 1.0.9 - Aug 31, 2016
@@ -4,0 +10,0 @@ * Fix invalid react proptype for showMilliseconds. Thanks @sabazusi.

package.json

 {
   "name": "react-countdown-clock",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "HTML5 canvas countdown clock React component",
@@ -5,0 +5,0 @@ "main": "build/react-countdown-clock.js",

README.md

@@ -29,14 +29,16 @@ # React Countdown Clock
 
-| prop             | type           | default | description                                    |
-|------------------|----------------|---------|------------------------------------------------|
-| seconds          | integer        | 60      | Seconds to countdown                           |
-| color            | string         | #000    | Colour of counter                              |
-| alpha            | float          | 1.0     | Alpha transparency of counter                  |
-| size             | integer        | 300     | Width & height of canvas element               |
-| weight           | integer        |         | Weight of circle, in pixels                    |
-| fontSize         | integer/string | auto    | px size of font. `auto` for dynamic sizing.    |
-| font             | string         | Arial   | Font of counter                                |
-| timeFormat       | string         | seconds | Counter style; `seconds` or `hms`              |
-| showMilliseconds | boolean        | true    | Show milliseconds for last 10 seconds          |
-| onComplete       | func           |         | Callback when time completes                   |
+| prop             | type           | default | description                                               |
+|------------------|----------------|---------|-----------------------------------------------------------|
+| seconds          | integer        | 60      | Seconds to countdown                                      |
+| color            | string         | #000    | Colour of counter                                         |
+| alpha            | float          | 1.0     | Alpha transparency of counter                             |
+| size             | integer        | 300     | Width & height of canvas element                          |
+| weight           | integer        |         | Weight of circle, in pixels                               |
+| fontSize         | integer/string | auto    | px size of font. `auto` for dynamic sizing.               |
+| font             | string         | Arial   | Font of counter                                           |
+| timeFormat       | string         | seconds | Counter style; `seconds` or `hms`                         |
+| showMilliseconds | boolean        | true    | Show milliseconds for last 10 seconds                     |
+| onComplete       | func           |         | Callback when time completes                              |
+| paused           | boolean        | false   | Pause countdown of the timer                              |
+| pausedText       | string         |         | Text to display when paused, defaults to the current time |
 
@@ -43,0 +45,0 @@ ## Bugs & Contributions

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178864

increased by376.67%

Number of package files

12

increased by9.09%

Lines of code

50

increased by8.7%

Number of lines in readme file

54

increased by3.85%

No dependency changes