react-idle-timer - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0

build/index.js

@@ -13,9 +13,9 @@ 'use strict';
 
-var _moment = require('moment');
+var _propTypes = require('prop-types');
 
-var _moment2 = _interopRequireDefault(_moment);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _lodash = require('lodash.bindall');
+var _format = require('date-fns/format');
 
-var _lodash2 = _interopRequireDefault(_lodash);
+var _format2 = _interopRequireDefault(_format);
 
@@ -39,8 +39,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  function IdleTimer(props) {
+  function IdleTimer() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, IdleTimer);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(IdleTimer).call(this, props));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IdleTimer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
       idle: false,
@@ -53,7 +59,93 @@ oldDate: +new Date(),
       pageY: null
-    };
+    }, _this._toggleIdleState = function () {
+      // Set the state
+      _this.setState({
+        idle: !_this.state.idle
+      });
 
-    (0, _lodash2.default)(_this, ['_toggleIdleState', '_handleEvent', 'reset', 'pause', 'resume', 'getRemainingTime', 'getElapsedTime', 'getLastActiveTime', 'isIdle']);
+      // Fire the appropriate action
+      if (!_this.state.idle) _this.props.activeAction();else _this.props.idleAction();
+    }, _this._handleEvent = function (e) {
 
-    return _this;
+      // Already idle, ignore events
+      if (_this.state.remaining) return;
+
+      // Mousemove event
+      if (e.type === 'mousemove') {
+        // if coord are same, it didn't move
+        if (e.pageX === _this.state.pageX && e.pageY === _this.state.pageY) return;
+        // if coord don't exist how could it move
+        if (typeof e.pageX === 'undefined' && typeof e.pageY === 'undefined') return;
+        // under 200 ms is hard to do, and you would have to stop, as continuous activity will bypass this
+        var elapsed = +new Date() - _this.state.oldDate;
+        if (elapsed < 200) return;
+      }
+
+      // clear any existing timeout
+      clearTimeout(_this.state.tId
+
+      // if the idle timer is enabled, flip
+      );if (_this.state.idle) _this._toggleIdleState(e);
+
+      _this.setState({
+        lastActive: +new Date(), // store when user was last active
+        pageX: e.pageX, // update mouse coord
+        pageY: e.pageY,
+        tId: setTimeout(_this._toggleIdleState, _this.props.timeout // set a new timeout
+        ) });
+    }, _this.reset = function () {
+      // reset timers
+      clearTimeout(_this.state.tId);
+
+      // reset settings
+      _this.setState({
+        idle: false,
+        oldDate: +new Date(),
+        lastActive: _this.state.oldDate,
+        remaining: null,
+        tId: setTimeout(_this._toggleIdleState, _this.props.timeout)
+      });
+    }, _this.pause = function () {
+      // this is already paused
+      if (_this.state.remaining !== null) return;
+
+      // clear any existing timeout
+      clearTimeout(_this.state.tId
+
+      // define how much is left on the timer
+      );_this.setState({
+        remaining: _this.props.timeout - (+new Date() - _this.state.oldDate)
+      });
+    }, _this.resume = function () {
+      // this isn't paused yet
+      if (_this.state.remaining === null) return;
+
+      // start timer and clear remaining
+      if (!_this.state.idle) {
+        _this.setState({
+          tId: setTimeout(_this._toggleIdleState, _this.state.remaining),
+          remaining: null
+        });
+      }
+    }, _this.getRemainingTime = function () {
+      // If idle there is no time remaining
+      if (_this.state.idle) return 0;
+
+      // If its paused just return that
+      if (_this.state.remaining != null) return _this.state.remaining;
+
+      // Determine remaining, if negative idle didn't finish flipping, just return 0
+      var remaining = _this.props.timeout - (+new Date() - _this.state.lastActive);
+      if (remaining < 0) remaining = 0;
+
+      // If this is paused return that number, else return current remaining
+      return remaining;
+    }, _this.getElapsedTime = function () {
+      return +new Date() - _this.state.oldDate;
+    }, _this.getLastActiveTime = function () {
+      if (_this.props.format) return (0, _format2.default)(_this.state.lastActive, _this.props.format);
+      return _this.state.lastActive;
+    }, _this.isIdle = function () {
+      return _this.state.idle;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -104,14 +196,2 @@
 
-  }, {
-    key: '_toggleIdleState',
-    value: function _toggleIdleState() {
-      // Set the state
-      this.setState({
-        idle: !this.state.idle
-      });
-
-      // Fire the appropriate action
-      if (!this.state.idle) this.props.activeAction();else this.props.idleAction();
-    }
-
     /**
@@ -125,36 +205,3 @@ * Event handler for supported event types
 
-  }, {
-    key: '_handleEvent',
-    value: function _handleEvent(e) {
 
-      // Already idle, ignore events
-      if (this.state.remaining) return;
-
-      // Mousemove event
-      if (e.type === 'mousemove') {
-        // if coord are same, it didn't move
-        if (e.pageX === this.state.pageX && e.pageY === this.state.pageY) return;
-        // if coord don't exist how could it move
-        if (typeof e.pageX === 'undefined' && typeof e.pageY === 'undefined') return;
-        // under 200 ms is hard to do, and you would have to stop, as continuous activity will bypass this
-        var elapsed = +new Date() - this.state.oldDate;
-        if (elapsed < 200) return;
-      }
-
-      // clear any existing timeout
-      clearTimeout(this.state.tId);
-
-      // if the idle timer is enabled, flip
-      if (this.state.idle) this._toggleIdleState(e);
-
-      this.setState({
-        lastActive: +new Date() // store when user was last active
-
-        , pageX: e.pageX // update mouse coord
-
-        , pageY: e.pageY,
-        tId: setTimeout(this._toggleIdleState, this.props.timeout) // set a new timeout
-      });
-    }
-
     ////////////////
@@ -171,18 +218,2 @@ // Public API //
 
-  }, {
-    key: 'reset',
-    value: function reset() {
-      // reset timers
-      clearTimeout(this.state.tId);
-
-      // reset settings
-      this.setState({
-        idle: false,
-        oldDate: +new Date(),
-        lastActive: this.state.oldDate,
-        remaining: null,
-        tId: setTimeout(this._toggleIdleState, this.props.timeout)
-      });
-    }
-
     /**
@@ -196,17 +227,3 @@ * Store remaining time and stop timer.
 
-  }, {
-    key: 'pause',
-    value: function pause() {
-      // this is already paused
-      if (this.state.remaining !== null) return;
 
-      // clear any existing timeout
-      clearTimeout(this.state.tId);
-
-      // define how much is left on the timer
-      this.setState({
-        remaining: this.props.timeout - (+new Date() - this.state.oldDate)
-      });
-    }
-
     /**
@@ -219,17 +236,3 @@ * Resumes a stopped timer
 
-  }, {
-    key: 'resume',
-    value: function resume() {
-      // this isn't paused yet
-      if (this.state.remaining === null) return;
 
-      // start timer and clear remaining
-      if (!this.state.idle) {
-        this.setState({
-          tId: setTimeout(this._toggleIdleState, this.state.remaining),
-          remaining: null
-        });
-      }
-    }
-
     /**
@@ -242,19 +245,3 @@ * Time remaining before idle
 
-  }, {
-    key: 'getRemainingTime',
-    value: function getRemainingTime() {
-      // If idle there is no time remaining
-      if (this.state.idle) return 0;
 
-      // If its paused just return that
-      if (this.state.remaining != null) return this.state.remaining;
-
-      // Determine remaining, if negative idle didn't finish flipping, just return 0
-      var remaining = this.props.timeout - (+new Date() - this.state.lastActive);
-      if (remaining < 0) remaining = 0;
-
-      // If this is paused return that number, else return current remaining
-      return remaining;
-    }
-
     /**
@@ -267,7 +254,2 @@ * How much time has elapsed
 
-  }, {
-    key: 'getElapsedTime',
-    value: function getElapsedTime() {
-      return +new Date() - this.state.oldDate;
-    }
 
@@ -281,8 +263,2 @@ /**
 
-  }, {
-    key: 'getLastActiveTime',
-    value: function getLastActiveTime() {
-      if (this.props.format) return (0, _moment2.default)(this.state.lastActive).format(this.props.format);
-      return this.state.lastActive;
-    }
 
@@ -296,7 +272,2 @@ /**
 
-  }, {
-    key: 'isIdle',
-    value: function isIdle() {
-      return this.state.idle;
-    }
   }]);
@@ -308,9 +279,9 @@
 IdleTimer.propTypes = {
-  timeout: _react.PropTypes.number, // Activity timeout
-  events: _react.PropTypes.arrayOf(_react.PropTypes.string), // Activity events to bind
-  idleAction: _react.PropTypes.func, // Action to call when user becomes inactive
-  activeAction: _react.PropTypes.func, // Action to call when user becomes active
-  element: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.string]), // Element ref to watch activty on
-  format: _react.PropTypes.string,
-  startOnLoad: _react.PropTypes.bool
+  timeout: _propTypes2.default.number, // Activity timeout
+  events: _propTypes2.default.arrayOf(_propTypes2.default.string), // Activity events to bind
+  idleAction: _propTypes2.default.func, // Action to call when user becomes inactive
+  activeAction: _propTypes2.default.func, // Action to call when user becomes active
+  element: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]), // Element ref to watch activty on
+  format: _propTypes2.default.string,
+  startOnLoad: _propTypes2.default.bool
 };
@@ -317,0 +288,0 @@ IdleTimer.defaultProps = {

examples/App.js

@@ -29,6 +29,2 @@ 'use strict';
 
-var _lodash = require('lodash.bindall');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,2 +72,28 @@
 
+    _this._onActive = function () {
+      _this.setState({ isIdle: false });
+    };
+
+    _this._onIdle = function () {
+      _this.setState({ isIdle: true });
+    };
+
+    _this._changeTimeout = function () {
+      _this.setState({
+        timeout: _this.refs.timeoutInput.state.value()
+      });
+    };
+
+    _this._reset = function () {
+      _this.refs.idleTimer.reset();
+    };
+
+    _this._pause = function () {
+      _this.refs.idleTimer.pause();
+    };
+
+    _this._resume = function () {
+      _this.refs.idleTimer.resume();
+    };
+
     _this.state = {
@@ -84,3 +106,2 @@ timeout: 3000,
     };
-    (0, _lodash2.default)(_this, ['_onActive', '_onIdle', '_changeTimeout', '_reset', '_pause', '_resume']);
     return _this;
@@ -181,34 +202,2 @@ }
     }
-  }, {
-    key: '_onActive',
-    value: function _onActive() {
-      this.setState({ isIdle: false });
-    }
-  }, {
-    key: '_onIdle',
-    value: function _onIdle() {
-      this.setState({ isIdle: true });
-    }
-  }, {
-    key: '_changeTimeout',
-    value: function _changeTimeout() {
-      this.setState({
-        timeout: this.refs.timeoutInput.state.value()
-      });
-    }
-  }, {
-    key: '_reset',
-    value: function _reset() {
-      this.refs.idleTimer.reset();
-    }
-  }, {
-    key: '_pause',
-    value: function _pause() {
-      this.refs.idleTimer.pause();
-    }
-  }, {
-    key: '_resume',
-    value: function _resume() {
-      this.refs.idleTimer.resume();
-    }
   }]);
@@ -215,0 +204,0 @@

package.json

 {
   "name": "react-idle-timer",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Activity detection for React.js",
@@ -37,11 +37,14 @@ "main": "build/index.js",
   "dependencies": {
-    "in-publish": "^2.0.0",
-    "lodash.bindall": "^3.1.0",
-    "moment": "^2.10.3"
+    "date-fns": "^1.28.5",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   },
   "peerDependencies": {
     "react": "^15.x.x",
-    "react-dom": "^15.x.x"
+    "react-dom": "^15.x.x",
+    "prop-types": "^15.x.x"
   },
   "devDependencies": {
+    "babel-cli": "^6.24.1",
     "babel-core": "^6.3.15",
@@ -48,0 +51,0 @@ "babel-eslint": "^5.0.0-beta4",

No alert changes

Improved metrics

Total package byte prevSize

27748

2.73%

Number of package files

9

12.5%

Worsened metrics

Dependency count

7

40%

Dev dependency count

29

3.57%

Lines of code

442

-8.3%

Dependency changes

• + Added

  date-fns@^1.28.5

• + Added

  prop-types@^15.5.10

• + Added

  react@^15.5.4

• + Added

  react-dom@^15.5.4

• + Added

  date-fns@1.30.1
  (transitive)

• - Removed

  in-publish@^2.0.0

• - Removed

  lodash.bindall@^3.1.0

• - Removed

  moment@^2.10.3

• - Removed

  in-publish@2.0.1
  (transitive)

• - Removed

  lodash._baseflatten@3.1.4
  (transitive)

• - Removed

  lodash._basefunctions@3.0.0
  (transitive)

• - Removed

  lodash._createwrapper@3.2.0
  (transitive)

• - Removed

  lodash._root@3.0.1
  (transitive)

• - Removed

  lodash.bindall@3.1.0
  (transitive)

• - Removed

  lodash.functions@3.0.0
  (transitive)

• - Removed

  lodash.isarguments@3.1.0
  (transitive)

• - Removed

  lodash.isarray@3.0.4
  (transitive)

• - Removed

  lodash.isfunction@3.0.9
  (transitive)

• - Removed

  lodash.keysin@3.0.8
  (transitive)

• - Removed

  lodash.restparam@3.6.1
  (transitive)

• - Removed

  moment@2.30.1
  (transitive)