react-countdown-clock - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

build/react-countdown-clock.js

@@ -55,20 +55,14 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/*!**************************************!*\
-  !*** ./react-countdown-clock.coffee ***!
-  \**************************************/
 /***/ function(module, exports, __webpack_require__) {
 
-	var React, _canvas, _context, _fraction, _radius;
+	var React;
 	
-	React = __webpack_require__(/*! react */ 1);
+	React = __webpack_require__(1);
 	
-	_radius = null;
-	
-	_fraction = null;
-	
-	_context = null;
-	
-	_canvas = null;
-	
 	module.exports = React.createClass({
+	  _seconds: 0,
+	  _radius: null,
+	  _fraction: null,
+	  _content: null,
+	  _canvas: null,
 	  propTypes: {
@@ -83,3 +77,2 @@ seconds: React.PropTypes.number,
 	    return {
-	      seconds: 60,
 	      size: 300,
@@ -90,40 +83,31 @@ color: '#000',
 	  },
-	  getInitialState: function() {
-	    return {
-	      seconds: this.props.seconds
-	    };
-	  },
 	  componentWillReceiveProps: function(props) {
-	    return this.setState({
-	      seconds: props.seconds
-	    });
+	    this._seconds = props.seconds;
+	    return this._setupTimer();
 	  },
-	  componentWillMount: function() {
-	    return this._setScale();
+	  componentDidMount: function() {
+	    this._seconds = this.props.seconds;
+	    return this._setupTimer();
 	  },
-	  componentDidMount: function() {
-	    if (!_canvas) {
-	      this._setupCanvas();
-	    }
+	  _setupTimer: function() {
+	    this._setScale();
+	    this._setupCanvas();
 	    this._drawTimer();
 	    return this._startTimer();
 	  },
-	  componentDidUpdate: function() {
-	    this._setScale();
+	  _updateCanvas: function() {
 	    this._clearTimer();
-	    this._drawTimer();
-	    if (this.state.seconds <= 0) {
-	      return this._handleComplete();
-	    }
+	    return this._drawTimer();
 	  },
 	  _setScale: function() {
-	    _radius = this.props.size / 2;
-	    return _fraction = 2 / this.props.seconds;
+	    this._radius = this.props.size / 2;
+	    this._fraction = 2 / this._seconds;
+	    return this._tickPeriod = this._seconds * 1.8;
 	  },
 	  _setupCanvas: function() {
-	    _canvas = this.getDOMNode();
-	    _context = _canvas.getContext('2d');
-	    _context.textAlign = 'center';
-	    _context.textBaseline = 'middle';
-	    return _context.font = "bold " + (_radius / 2) + "px Arial";
+	    this._canvas = this.getDOMNode();
+	    this._context = this._canvas.getContext('2d');
+	    this._context.textAlign = 'center';
+	    this._context.textBaseline = 'middle';
+	    return this._context.font = "bold " + (this._radius / 2) + "px Arial";
 	  },
@@ -143,16 +127,16 @@ _startTimer: function() {
 	        var duration;
-	        duration = Date.now() - start;
-	        _this.setState({
-	          seconds: _this.state.seconds - duration / 1000
-	        });
-	        if (!(_this.state.seconds <= 0)) {
+	        duration = (Date.now() - start) / 1000;
+	        _this._seconds -= duration;
+	        if (_this._seconds <= 0) {
+	          _this._seconds = 0;
+	          _this._handleComplete();
+	          return _this._clearTimer();
+	        } else {
+	          _this._updateCanvas();
 	          return _this._tick();
 	        }
 	      };
-	    })(this)), 30);
+	    })(this)), this._tickPeriod);
 	  },
 	  _handleComplete: function() {
-	    this.setState({
-	      seconds: 0
-	    });
 	    if (this.props.onComplete) {
@@ -163,25 +147,25 @@ return this.props.onComplete();
 	  _clearTimer: function() {
-	    _context.clearRect(0, 0, _canvas.width, _canvas.height);
+	    this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
 	    return this._drawBackground();
 	  },
 	  _drawBackground: function() {
-	    _context.beginPath();
-	    _context.globalAlpha = this.props.alpha / 3;
-	    _context.arc(_radius, _radius, _radius, 0, Math.PI * 2, false);
-	    _context.arc(_radius, _radius, _radius / 1.8, Math.PI * 2, 0, true);
-	    return _context.fill();
+	    this._context.beginPath();
+	    this._context.globalAlpha = this.props.alpha / 3;
+	    this._context.arc(this._radius, this._radius, this._radius, 0, Math.PI * 2, false);
+	    this._context.arc(this._radius, this._radius, this._radius / 1.8, Math.PI * 2, 0, true);
+	    return this._context.fill();
 	  },
 	  _drawTimer: function() {
-	    var decimals, percent, _ref;
-	    percent = _fraction * this.state.seconds + 1.5;
-	    decimals = (_ref = this.state.seconds <= 9.9) != null ? _ref : {
+	    var decimals, percent, ref;
+	    percent = this._fraction * this._seconds + 1.5;
+	    decimals = (ref = this._seconds <= 9.9) != null ? ref : {
 	      1: 0
 	    };
-	    _context.globalAlpha = this.props.alpha;
-	    _context.fillStyle = this.props.color;
-	    _context.fillText(this.state.seconds.toFixed(decimals), _radius, _radius);
-	    _context.beginPath();
-	    _context.arc(_radius, _radius, _radius, Math.PI * 1.5, Math.PI * percent, false);
-	    _context.arc(_radius, _radius, _radius / 1.8, Math.PI * percent, Math.PI * 1.5, true);
-	    return _context.fill();
+	    this._context.globalAlpha = this.props.alpha;
+	    this._context.fillStyle = this.props.color;
+	    this._context.fillText(this._seconds.toFixed(decimals), this._radius, this._radius);
+	    this._context.beginPath();
+	    this._context.arc(this._radius, this._radius, this._radius, Math.PI * 1.5, Math.PI * percent, false);
+	    this._context.arc(this._radius, this._radius, this._radius / 1.8, Math.PI * percent, Math.PI * 1.5, true);
+	    return this._context.fill();
 	  },
@@ -200,5 +184,2 @@ render: function() {
 /* 1 */
-/*!**************************************************************************************!*\
-  !*** external {"root":"React","commonjs":"react","commonjs2":"react","amd":"react"} ***!
-  \**************************************************************************************/
 /***/ function(module, exports, __webpack_require__) {
@@ -211,3 +192,3 @@
 });
-
+;
 //# sourceMappingURL=react-countdown-clock.js.map

package.json

 {
   "name": "react-countdown-clock",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "HTML5 canvas countdown clock React component",
@@ -28,3 +28,6 @@ "main": "build/react-countdown-clock.js",
     "webpack": "^1.4.15"
+  },
+  "dependencies": {
+    "react": "^0.13.3"
   }
 }

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

NPM Shrinkwrap

Supply chain risk

Package contains a shrinkwrap file. This may allow the package to bypass normal install procedures.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

29343

increased by41.01%

Number of package files

9

increased by12.5%

Lines of code

442

increased by99.1%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact@^0.13.3

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.13.3(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsource-map@0.4.40.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedwrappy@1.0.2(transitive)