react-interval - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

build/react-interval.js

@@ -79,4 +79,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
-	var _ReactComponentWithPureRenderMixin = __webpack_require__(3);
-	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -99,5 +97,2 @@
 	  },
-	  getInitialState: function getInitialState() {
-	    return { enabled: this.props.enabled };
-	  },
 	  componentDidMount: function componentDidMount() {
@@ -108,11 +103,20 @@ if (this.props.enabled) {
 	  },
-	  componentWillReceiveProps: function componentWillReceiveProps(_ref) {
+	  shouldComponentUpdate: function shouldComponentUpdate(_ref) {
+	    var timeout = _ref.timeout;
+	    var callback = _ref.callback;
 	    var enabled = _ref.enabled;
 	
-	    this.setState({ enabled: enabled });
+	    return this.props.timeout !== timeout || this.props.callback !== callback || this.props.enabled !== enabled;
 	  },
+	  componentDidUpdate: function componentDidUpdate(_ref2) {
+	    var enabled = _ref2.enabled;
 	
-	
-	  shouldComponentUpdate: _ReactComponentWithPureRenderMixin.shouldComponentUpdate,
-	
+	    if (this.props.enabled !== enabled) {
+	      if (this.props.enabled) {
+	        this.start();
+	      } else {
+	        this.stop();
+	      }
+	    }
+	  },
 	  componentWillUnmount: function componentWillUnmount() {
@@ -122,4 +126,6 @@ this.stop();
 	  callback: function callback() {
-	    this.props.callback();
-	    this.start();
+	    if (this.timer) {
+	      this.props.callback();
+	      this.start();
+	    }
 	  },
@@ -132,9 +138,5 @@ start: function start() {
 	    clearTimeout(this.timer);
+	    this.timer = null;
 	  },
 	  render: function render() {
-	    if (this.state.enabled) {
-	      this.start();
-	    } else {
-	      this.stop();
-	    }
 	    return false;
@@ -152,153 +154,2 @@ }
 
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
-
-	/**
-	 * Copyright 2013-present, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 *
-	 * @providesModule ReactComponentWithPureRenderMixin
-	 */
-	
-	'use strict';
-	
-	var shallowCompare = __webpack_require__(4);
-	
-	/**
-	 * If your React component's render function is "pure", e.g. it will render the
-	 * same result given the same props and state, provide this mixin for a
-	 * considerable performance boost.
-	 *
-	 * Most React components have pure render functions.
-	 *
-	 * Example:
-	 *
-	 *   var ReactComponentWithPureRenderMixin =
-	 *     require('ReactComponentWithPureRenderMixin');
-	 *   React.createClass({
-	 *     mixins: [ReactComponentWithPureRenderMixin],
-	 *
-	 *     render: function() {
-	 *       return <div className={this.props.className}>foo</div>;
-	 *     }
-	 *   });
-	 *
-	 * Note: This only checks shallow equality for props and state. If these contain
-	 * complex data structures this mixin may have false-negatives for deeper
-	 * differences. Only mixin to components which have simple props and state, or
-	 * use `forceUpdate()` when you know deep data structures have changed.
-	 */
-	var ReactComponentWithPureRenderMixin = {
-	  shouldComponentUpdate: function (nextProps, nextState) {
-	    return shallowCompare(this, nextProps, nextState);
-	  }
-	};
-	
-	module.exports = ReactComponentWithPureRenderMixin;
-
-/***/ },
-/* 4 */
-/***/ function(module, exports, __webpack_require__) {
-
-	/**
-	 * Copyright 2013-present, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 *
-	* @providesModule shallowCompare
-	*/
-	
-	'use strict';
-	
-	var shallowEqual = __webpack_require__(5);
-	
-	/**
-	 * Does a shallow comparison for props and state.
-	 * See ReactComponentWithPureRenderMixin
-	 */
-	function shallowCompare(instance, nextProps, nextState) {
-	  return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
-	}
-	
-	module.exports = shallowCompare;
-
-/***/ },
-/* 5 */
-/***/ function(module, exports) {
-
-	/**
-	 * Copyright (c) 2013-present, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 *
-	 * @typechecks
-	 * 
-	 */
-	
-	/*eslint-disable no-self-compare */
-	
-	'use strict';
-	
-	var hasOwnProperty = Object.prototype.hasOwnProperty;
-	
-	/**
-	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-	 */
-	function is(x, y) {
-	  // SameValue algorithm
-	  if (x === y) {
-	    // Steps 1-5, 7-10
-	    // Steps 6.b-6.e: +0 != -0
-	    return x !== 0 || 1 / x === 1 / y;
-	  } else {
-	    // Step 6.a: NaN == NaN
-	    return x !== x && y !== y;
-	  }
-	}
-	
-	/**
-	 * Performs equality by iterating through keys on an object and returning false
-	 * when any key has values which are not strictly equal between the arguments.
-	 * Returns true when the values of all keys are strictly equal.
-	 */
-	function shallowEqual(objA, objB) {
-	  if (is(objA, objB)) {
-	    return true;
-	  }
-	
-	  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-	    return false;
-	  }
-	
-	  var keysA = Object.keys(objA);
-	  var keysB = Object.keys(objB);
-	
-	  if (keysA.length !== keysB.length) {
-	    return false;
-	  }
-	
-	  // Test for A's keys different from B.
-	  for (var i = 0; i < keysA.length; i++) {
-	    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-	      return false;
-	    }
-	  }
-	
-	  return true;
-	}
-	
-	module.exports = shallowEqual;
-
 /***/ }
@@ -305,0 +156,0 @@ /******/ ])

build/react-interval.min.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.ReactInterval=e(require("react")):t.ReactInterval=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var o=n(1)["default"];t.exports=o},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var r=n(2),s=o(r),u=n(3),i=s["default"].createClass({displayName:"ReactInterval",propTypes:{callback:s["default"].PropTypes.func.isRequired,enabled:s["default"].PropTypes.bool,timeout:s["default"].PropTypes.number},getDefaultProps:function(){return{enabled:!1,timeout:1e3}},getInitialState:function(){return{enabled:this.props.enabled}},componentDidMount:function(){this.props.enabled&&this.start()},componentWillReceiveProps:function(t){var e=t.enabled;this.setState({enabled:e})},shouldComponentUpdate:u.shouldComponentUpdate,componentWillUnmount:function(){this.stop()},callback:function(){this.props.callback(),this.start()},start:function(){this.stop(),this.timer=setTimeout(this.callback,this.props.timeout)},stop:function(){clearTimeout(this.timer)},render:function(){return this.state.enabled?this.start():this.stop(),!1}});e["default"]=i},function(e,n){e.exports=t},function(t,e,n){"use strict";var o=n(4),r={shouldComponentUpdate:function(t,e){return o(this,t,e)}};t.exports=r},function(t,e,n){"use strict";function o(t,e,n){return!r(t.props,e)||!r(t.state,n)}var r=n(5);t.exports=o},function(t,e){"use strict";function n(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function o(t,e){if(n(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var o=Object.keys(t),s=Object.keys(e);if(o.length!==s.length)return!1;for(var u=0;u<o.length;u++)if(!r.call(e,o[u])||!n(t[o[u]],e[o[u]]))return!1;return!0}var r=Object.prototype.hasOwnProperty;t.exports=o}])});
+!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.ReactInterval=e(require("react")):t.ReactInterval=e(t.React)}(this,function(t){return function(t){function e(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){"use strict";var n=o(1)["default"];t.exports=n},function(t,e,o){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var r=o(2),i=n(r),s=i["default"].createClass({displayName:"ReactInterval",propTypes:{callback:i["default"].PropTypes.func.isRequired,enabled:i["default"].PropTypes.bool,timeout:i["default"].PropTypes.number},getDefaultProps:function(){return{enabled:!1,timeout:1e3}},componentDidMount:function(){this.props.enabled&&this.start()},shouldComponentUpdate:function(t){var e=t.timeout,o=t.callback,n=t.enabled;return this.props.timeout!==e||this.props.callback!==o||this.props.enabled!==n},componentDidUpdate:function(t){var e=t.enabled;this.props.enabled!==e&&(this.props.enabled?this.start():this.stop())},componentWillUnmount:function(){this.stop()},callback:function(){this.timer&&(this.props.callback(),this.start())},start:function(){this.stop(),this.timer=setTimeout(this.callback,this.props.timeout)},stop:function(){clearTimeout(this.timer),this.timer=null},render:function(){return!1}});e["default"]=s},function(e,o){e.exports=t}])});
 //# sourceMappingURL=react-interval.min.js.map

lib/ReactInterval.js

@@ -11,4 +11,2 @@ 'use strict';
 
-var _ReactComponentWithPureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,5 +29,2 @@
   },
-  getInitialState: function getInitialState() {
-    return { enabled: this.props.enabled };
-  },
   componentDidMount: function componentDidMount() {
@@ -40,11 +35,20 @@ if (this.props.enabled) {
   },
-  componentWillReceiveProps: function componentWillReceiveProps(_ref) {
+  shouldComponentUpdate: function shouldComponentUpdate(_ref) {
+    var timeout = _ref.timeout;
+    var callback = _ref.callback;
     var enabled = _ref.enabled;
 
-    this.setState({ enabled: enabled });
+    return this.props.timeout !== timeout || this.props.callback !== callback || this.props.enabled !== enabled;
   },
+  componentDidUpdate: function componentDidUpdate(_ref2) {
+    var enabled = _ref2.enabled;
 
-
-  shouldComponentUpdate: _ReactComponentWithPureRenderMixin.shouldComponentUpdate,
-
+    if (this.props.enabled !== enabled) {
+      if (this.props.enabled) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+  },
   componentWillUnmount: function componentWillUnmount() {
@@ -54,4 +58,6 @@ this.stop();
   callback: function callback() {
-    this.props.callback();
-    this.start();
+    if (this.timer) {
+      this.props.callback();
+      this.start();
+    }
   },
@@ -64,9 +70,5 @@ start: function start() {
     clearTimeout(this.timer);
+    this.timer = null;
   },
   render: function render() {
-    if (this.state.enabled) {
-      this.start();
-    } else {
-      this.stop();
-    }
     return false;
@@ -73,0 +75,0 @@ }

package.json

 {
   "name": "react-interval",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Safe React wrapper for setInterval",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/ReactInterval.js

 import React from 'react';
-import {shouldComponentUpdate} from 'react/lib/ReactComponentWithPureRenderMixin';
 
@@ -21,7 +20,2 @@
 
-  getInitialState() {
-    return {enabled: this.props.enabled};
-  },
-
-
   componentDidMount() {
@@ -34,8 +28,20 @@ if (this.props.enabled) {
 
-  componentWillReceiveProps({enabled}) {
-    this.setState({enabled});
+  shouldComponentUpdate({timeout, callback, enabled}) {
+    return (
+      this.props.timeout !== timeout ||
+      this.props.callback !== callback ||
+      this.props.enabled !== enabled
+    );
   },
 
 
-  shouldComponentUpdate,
+  componentDidUpdate({enabled}) {
+    if (this.props.enabled !== enabled) {
+      if (this.props.enabled) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+  },
 
@@ -49,4 +55,6 @@
   callback() {
-    this.props.callback();
-    this.start();
+    if (this.timer) {
+      this.props.callback();
+      this.start();
+    }
   },
@@ -63,2 +71,3 @@
     clearTimeout(this.timer);
+    this.timer = null;
   },
@@ -68,7 +77,2 @@
   render() {
-    if (this.state.enabled) {
-      this.start();
-    } else {
-      this.stop();
-    }
     return false;
@@ -75,0 +79,0 @@ }

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

32942

decreased by-41.61%

Number of package files

13

decreased by-7.14%

Lines of code

308

decreased by-26.67%

Number of medium quality alerts

1

increased byInfinity%

Number of lines in readme file

0

decreased by-100%

No dependency changes