react-idle-timer - npm Package Compare versions

Comparing version 4.0.9 to 4.1.0

CHANGELOG.md

@@ -0,2 +1,14 @@
+# 4.1.0
+
+Version `4.1.0` adds support for some commonly requested features:
+
+## Features
+
+- Added property `stopOnIdle` defaults to `false`. Setting to `true` will prevent user activity from restarting the `IdleTimer` once it has gone idle.  This useful if you want to do some custom async stuff before the `IdleTimer` gets restarted.  In order to restart the `IdleTimer` call `reset()` on your ref.
+- Added event handler `onActive` which enables reporting of all user activity from `IdleTimer`.  The built in `debounce` or `throttle` properties will help increase performance if you are using the `onActive` event. By default `debounce` and `throttle` are off.  Only one can be enabled at a time.
+- Added property `debounce` defaults to 0.  Set the `onActive` debounce delay in milliseconds. The `throttle` property cannot be set if this property is set.
+- Added property `throttle` defaults to 0.  Set the `onActive` throttle delay in milliseconds.  The `debounce` property cannot be set if this property is set.
+
 ### 4.0.9
+
 - Fixes a memory leak when IdleTimer is unmounted.  Events need to be removed exactly the same way they are added. See [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Matching_event_listeners_for_removal)
@@ -3,0 +15,0 @@

dist/index.es.js

@@ -1,2 +0,2 @@
-import{Component}from"react";import PropTypes from"prop-types";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},IS_BROWSER="object"===("undefined"==typeof window?"undefined":"undefined"==typeof window?"undefined":_typeof(window)),DEFAULT_ELEMENT=IS_BROWSER?document:{},DEFAULT_EVENTS=["mousemove","keydown","wheel","DOMMouseScroll","mouseWheel","mousedown","touchstart","touchmove","MSPointerDown","MSPointerMove"],IdleTimer=function(e){function t(e){classCallCheck(this,t);var n=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={idle:!1,oldDate:+new Date,lastActive:+new Date,remaining:null,pageX:null,pageY:null},n.tId=null,n._handleEvent=function(e){var t=n.state,i=t.remaining,o=t.pageX,r=t.pageY;if(!i){if("mousemove"===e.type){if(e.pageX===o&&e.pageY===r)return;if(void 0===e.pageX&&void 0===e.pageY)return;if(n.getElapsedTime()<200)return}clearTimeout(n.tId),n.state.idle&&n._toggleIdleState(e),n.setState({lastActive:+new Date,pageX:e.pageX,pageY:e.pageY});var s=n.props.timeout;n.tId=setTimeout(n._toggleIdleState.bind(n),s)}},e.startOnMount||(n.state.idle=!0),n.toggleIdleState=n._toggleIdleState.bind(n),n.reset=n._reset.bind(n),n.pause=n._pause.bind(n),n.resume=n._resume.bind(n),n.getRemainingTime=n._getRemainingTime.bind(n),n.getElapsedTime=n._getElapsedTime.bind(n),n.getLastActiveTime=n._getLastActiveTime.bind(n),n.isIdle=n._isIdle.bind(n),n}return inherits(t,Component),createClass(t,[{key:"componentWillMount",value:function(){var e=this;if(IS_BROWSER){var t=this.props,n=t.element,i=t.events,o=t.passive,r=t.capture;i.forEach(function(t){n.addEventListener(t,e._handleEvent,{capture:r,passive:o})})}}},{key:"componentDidMount",value:function(){this.props.startOnMount&&this.reset()}},{key:"componentWillUnmount",value:function(){var e=this;if(clearTimeout(this.tId),IS_BROWSER){var t=this.props,n=t.element,i=t.events,o=t.passive,r=t.capture;i.forEach(function(t){n.removeEventListener(t,e._handleEvent,{capture:r,passive:o})})}}},{key:"render",value:function(){return this.props.children||null}},{key:"_toggleIdleState",value:function(e){var t=this.state.idle;this.setState({idle:!t});var n=this.props,i=n.onActive,o=n.onIdle;t?i(e):o(e)}},{key:"_reset",value:function(){clearTimeout(this.tId),this.setState({idle:!1,oldDate:+new Date,lastActive:this.state.oldDate,remaining:null});var e=this.props.timeout;this.tId=setTimeout(this._toggleIdleState.bind(this),e)}},{key:"_pause",value:function(){null===this.state.remaining&&(clearTimeout(this.tId),this.tId=null,this.setState({remaining:this.getRemainingTime()}))}},{key:"_resume",value:function(){var e=this.state,t=e.remaining,n=e.idle;null!==t&&(n||(this.setState({remaining:null}),this.tId=setTimeout(this._toggleIdleState.bind(this),t)))}},{key:"_getRemainingTime",value:function(){var e=this.state,t=e.remaining,n=e.idle,i=e.lastActive;if(n)return 0;if(null!==t)return t;var o=this.props.timeout-(+new Date-i);return o<0&&(o=0),o}},{key:"_getElapsedTime",value:function(){var e=this.state.oldDate;return+new Date-e}},{key:"_getLastActiveTime",value:function(){return this.state.lastActive}},{key:"_isIdle",value:function(){return this.state.idle}}]),t}();IdleTimer.propTypes={timeout:PropTypes.number,events:PropTypes.arrayOf(PropTypes.string),onIdle:PropTypes.func,onActive:PropTypes.func,element:PropTypes.oneOfType([PropTypes.object,PropTypes.element]),startOnMount:PropTypes.bool,passive:PropTypes.bool,capture:PropTypes.bool},IdleTimer.defaultProps={timeout:12e5,element:DEFAULT_ELEMENT,events:DEFAULT_EVENTS,onIdle:function(){},onActive:function(){},startOnMount:!0,capture:!0,passive:!0};export default IdleTimer;
+import{Component}from"react";import PropTypes from"prop-types";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},IS_BROWSER="object"===("undefined"==typeof window?"undefined":"undefined"==typeof window?"undefined":_typeof(window)),DEFAULT_ELEMENT=IS_BROWSER?document:{},DEFAULT_EVENTS=["mousemove","keydown","wheel","DOMMouseScroll","mouseWheel","mousedown","touchstart","touchmove","MSPointerDown","MSPointerMove"],IdleTimer=function(e){function t(e){classCallCheck(this,t);var n=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));if(n.state={idle:!1,oldDate:+new Date,lastActive:+new Date,remaining:null,pageX:null,pageY:null},n.tId=null,n._handleEvent=function(e){var t=n.state,o=t.remaining,i=t.pageX,r=t.pageY,a=t.idle,s=n.props,l=s.timeout,u=s.onAction,p=s.debounce,c=s.throttle,d=s.stopOnIdle;if(!o){if("mousemove"===e.type){if(e.pageX===i&&e.pageY===r)return;if(void 0===e.pageX&&void 0===e.pageY)return;if(n.getElapsedTime()<200)return}p>0?n.debouncedAction(e):c>0?n.throttledAction(e):u(e),clearTimeout(n.tId),n.tId=null,a&&!d&&n.toggleIdleState(e),n.setState({lastActive:+new Date,pageX:e.pageX,pageY:e.pageY}),d||(n.tId=setTimeout(n.toggleIdleState,l))}},e.debounce>0&&e.throttle>0)throw new Error("onAction can either be throttled or debounced (not both)");return e.debounce>0&&(n.debouncedAction=debounced(e.onAction,e.debounce)),e.throttle>0&&(n.throttledAction=throttled(e.onAction,e.throttle)),e.startOnMount||(n.state.idle=!0),n.toggleIdleState=n._toggleIdleState.bind(n),n.reset=n._reset.bind(n),n.pause=n._pause.bind(n),n.resume=n._resume.bind(n),n.getRemainingTime=n._getRemainingTime.bind(n),n.getElapsedTime=n._getElapsedTime.bind(n),n.getLastActiveTime=n._getLastActiveTime.bind(n),n.isIdle=n._isIdle.bind(n),n}return inherits(t,Component),createClass(t,[{key:"componentWillMount",value:function(){var e=this;if(IS_BROWSER){var t=this.props,n=t.element,o=t.events,i=t.passive,r=t.capture;o.forEach(function(t){n.addEventListener(t,e._handleEvent,{capture:r,passive:i})})}}},{key:"componentDidMount",value:function(){this.props.startOnMount&&this.reset()}},{key:"componentWillUnmount",value:function(){var e=this;if(clearTimeout(this.tId),IS_BROWSER){var t=this.props,n=t.element,o=t.events,i=t.passive,r=t.capture;o.forEach(function(t){n.removeEventListener(t,e._handleEvent,{capture:r,passive:i})})}}},{key:"render",value:function(){return this.props.children||null}},{key:"_toggleIdleState",value:function(e){var t=this.state.idle;this.setState({idle:!t});var n=this.props,o=n.onActive,i=n.onIdle;t?o(e):i(e)}},{key:"_reset",value:function(){clearTimeout(this.tId),this.setState({idle:!1,oldDate:+new Date,lastActive:this.state.oldDate,remaining:null});var e=this.props.timeout;this.tId=setTimeout(this.toggleIdleState,e)}},{key:"_pause",value:function(){null===this.state.remaining&&(clearTimeout(this.tId),this.tId=null,this.setState({remaining:this.getRemainingTime()}))}},{key:"_resume",value:function(){var e=this.state,t=e.remaining,n=e.idle;null!==t&&(n||(this.setState({remaining:null}),this.tId=setTimeout(this.toggleIdleState,t)))}},{key:"_getRemainingTime",value:function(){var e=this.state,t=e.remaining,n=e.idle,o=e.lastActive;if(n)return 0;if(null!==t)return t;var i=this.props.timeout-(+new Date-o);return i<0&&(i=0),i}},{key:"_getElapsedTime",value:function(){var e=this.state.oldDate;return+new Date-e}},{key:"_getLastActiveTime",value:function(){return this.state.lastActive}},{key:"_isIdle",value:function(){return this.state.idle}}]),t}();function debounced(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){e.apply(void 0,i),n=null},t)}}function throttled(e,t){var n=0;return function(){var o=(new Date).getTime();if(!(o-n<t))return n=o,e.apply(void 0,arguments)}}IdleTimer.propTypes={timeout:PropTypes.number,events:PropTypes.arrayOf(PropTypes.string),onIdle:PropTypes.func,onActive:PropTypes.func,onAction:PropTypes.func,debounce:PropTypes.number,throttle:PropTypes.number,element:PropTypes.oneOfType([PropTypes.object,PropTypes.element]),startOnMount:PropTypes.bool,stopOnIdle:PropTypes.bool,passive:PropTypes.bool,capture:PropTypes.bool},IdleTimer.defaultProps={timeout:12e5,element:DEFAULT_ELEMENT,events:DEFAULT_EVENTS,onIdle:function(){},onActive:function(){},onAction:function(){},debounce:0,throttle:0,startOnMount:!0,stopOnIdle:!1,capture:!0,passive:!0};export default IdleTimer;
 //# sourceMappingURL=index.es.js.map

dist/index.min.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var react=require("react"),PropTypes=_interopDefault(require("prop-types")),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},IS_BROWSER="object"===("undefined"==typeof window?"undefined":"undefined"==typeof window?"undefined":_typeof(window)),DEFAULT_ELEMENT=IS_BROWSER?document:{},DEFAULT_EVENTS=["mousemove","keydown","wheel","DOMMouseScroll","mouseWheel","mousedown","touchstart","touchmove","MSPointerDown","MSPointerMove"],IdleTimer=function(e){function t(e){classCallCheck(this,t);var n=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={idle:!1,oldDate:+new Date,lastActive:+new Date,remaining:null,pageX:null,pageY:null},n.tId=null,n._handleEvent=function(e){var t=n.state,i=t.remaining,o=t.pageX,r=t.pageY;if(!i){if("mousemove"===e.type){if(e.pageX===o&&e.pageY===r)return;if(void 0===e.pageX&&void 0===e.pageY)return;if(n.getElapsedTime()<200)return}clearTimeout(n.tId),n.state.idle&&n._toggleIdleState(e),n.setState({lastActive:+new Date,pageX:e.pageX,pageY:e.pageY});var a=n.props.timeout;n.tId=setTimeout(n._toggleIdleState.bind(n),a)}},e.startOnMount||(n.state.idle=!0),n.toggleIdleState=n._toggleIdleState.bind(n),n.reset=n._reset.bind(n),n.pause=n._pause.bind(n),n.resume=n._resume.bind(n),n.getRemainingTime=n._getRemainingTime.bind(n),n.getElapsedTime=n._getElapsedTime.bind(n),n.getLastActiveTime=n._getLastActiveTime.bind(n),n.isIdle=n._isIdle.bind(n),n}return inherits(t,e),createClass(t,[{key:"componentWillMount",value:function(){var e=this;if(IS_BROWSER){var t=this.props,n=t.element,i=t.events,o=t.passive,r=t.capture;i.forEach(function(t){n.addEventListener(t,e._handleEvent,{capture:r,passive:o})})}}},{key:"componentDidMount",value:function(){this.props.startOnMount&&this.reset()}},{key:"componentWillUnmount",value:function(){var e=this;if(clearTimeout(this.tId),IS_BROWSER){var t=this.props,n=t.element,i=t.events,o=t.passive,r=t.capture;i.forEach(function(t){n.removeEventListener(t,e._handleEvent,{capture:r,passive:o})})}}},{key:"render",value:function(){return this.props.children||null}},{key:"_toggleIdleState",value:function(e){var t=this.state.idle;this.setState({idle:!t});var n=this.props,i=n.onActive,o=n.onIdle;t?i(e):o(e)}},{key:"_reset",value:function(){clearTimeout(this.tId),this.setState({idle:!1,oldDate:+new Date,lastActive:this.state.oldDate,remaining:null});var e=this.props.timeout;this.tId=setTimeout(this._toggleIdleState.bind(this),e)}},{key:"_pause",value:function(){null===this.state.remaining&&(clearTimeout(this.tId),this.tId=null,this.setState({remaining:this.getRemainingTime()}))}},{key:"_resume",value:function(){var e=this.state,t=e.remaining,n=e.idle;null!==t&&(n||(this.setState({remaining:null}),this.tId=setTimeout(this._toggleIdleState.bind(this),t)))}},{key:"_getRemainingTime",value:function(){var e=this.state,t=e.remaining,n=e.idle,i=e.lastActive;if(n)return 0;if(null!==t)return t;var o=this.props.timeout-(+new Date-i);return o<0&&(o=0),o}},{key:"_getElapsedTime",value:function(){var e=this.state.oldDate;return+new Date-e}},{key:"_getLastActiveTime",value:function(){return this.state.lastActive}},{key:"_isIdle",value:function(){return this.state.idle}}]),t}(react.Component);IdleTimer.propTypes={timeout:PropTypes.number,events:PropTypes.arrayOf(PropTypes.string),onIdle:PropTypes.func,onActive:PropTypes.func,element:PropTypes.oneOfType([PropTypes.object,PropTypes.element]),startOnMount:PropTypes.bool,passive:PropTypes.bool,capture:PropTypes.bool},IdleTimer.defaultProps={timeout:12e5,element:DEFAULT_ELEMENT,events:DEFAULT_EVENTS,onIdle:function(){},onActive:function(){},startOnMount:!0,capture:!0,passive:!0},module.exports=IdleTimer;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var react=require("react"),PropTypes=_interopDefault(require("prop-types")),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},IS_BROWSER="object"===("undefined"==typeof window?"undefined":"undefined"==typeof window?"undefined":_typeof(window)),DEFAULT_ELEMENT=IS_BROWSER?document:{},DEFAULT_EVENTS=["mousemove","keydown","wheel","DOMMouseScroll","mouseWheel","mousedown","touchstart","touchmove","MSPointerDown","MSPointerMove"],IdleTimer=function(e){function t(e){classCallCheck(this,t);var n=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));if(n.state={idle:!1,oldDate:+new Date,lastActive:+new Date,remaining:null,pageX:null,pageY:null},n.tId=null,n._handleEvent=function(e){var t=n.state,o=t.remaining,i=t.pageX,r=t.pageY,a=t.idle,s=n.props,u=s.timeout,l=s.onAction,p=s.debounce,c=s.throttle,d=s.stopOnIdle;if(!o){if("mousemove"===e.type){if(e.pageX===i&&e.pageY===r)return;if(void 0===e.pageX&&void 0===e.pageY)return;if(n.getElapsedTime()<200)return}p>0?n.debouncedAction(e):c>0?n.throttledAction(e):l(e),clearTimeout(n.tId),n.tId=null,a&&!d&&n.toggleIdleState(e),n.setState({lastActive:+new Date,pageX:e.pageX,pageY:e.pageY}),d||(n.tId=setTimeout(n.toggleIdleState,u))}},e.debounce>0&&e.throttle>0)throw new Error("onAction can either be throttled or debounced (not both)");return e.debounce>0&&(n.debouncedAction=debounced(e.onAction,e.debounce)),e.throttle>0&&(n.throttledAction=throttled(e.onAction,e.throttle)),e.startOnMount||(n.state.idle=!0),n.toggleIdleState=n._toggleIdleState.bind(n),n.reset=n._reset.bind(n),n.pause=n._pause.bind(n),n.resume=n._resume.bind(n),n.getRemainingTime=n._getRemainingTime.bind(n),n.getElapsedTime=n._getElapsedTime.bind(n),n.getLastActiveTime=n._getLastActiveTime.bind(n),n.isIdle=n._isIdle.bind(n),n}return inherits(t,e),createClass(t,[{key:"componentWillMount",value:function(){var e=this;if(IS_BROWSER){var t=this.props,n=t.element,o=t.events,i=t.passive,r=t.capture;o.forEach(function(t){n.addEventListener(t,e._handleEvent,{capture:r,passive:i})})}}},{key:"componentDidMount",value:function(){this.props.startOnMount&&this.reset()}},{key:"componentWillUnmount",value:function(){var e=this;if(clearTimeout(this.tId),IS_BROWSER){var t=this.props,n=t.element,o=t.events,i=t.passive,r=t.capture;o.forEach(function(t){n.removeEventListener(t,e._handleEvent,{capture:r,passive:i})})}}},{key:"render",value:function(){return this.props.children||null}},{key:"_toggleIdleState",value:function(e){var t=this.state.idle;this.setState({idle:!t});var n=this.props,o=n.onActive,i=n.onIdle;t?o(e):i(e)}},{key:"_reset",value:function(){clearTimeout(this.tId),this.setState({idle:!1,oldDate:+new Date,lastActive:this.state.oldDate,remaining:null});var e=this.props.timeout;this.tId=setTimeout(this.toggleIdleState,e)}},{key:"_pause",value:function(){null===this.state.remaining&&(clearTimeout(this.tId),this.tId=null,this.setState({remaining:this.getRemainingTime()}))}},{key:"_resume",value:function(){var e=this.state,t=e.remaining,n=e.idle;null!==t&&(n||(this.setState({remaining:null}),this.tId=setTimeout(this.toggleIdleState,t)))}},{key:"_getRemainingTime",value:function(){var e=this.state,t=e.remaining,n=e.idle,o=e.lastActive;if(n)return 0;if(null!==t)return t;var i=this.props.timeout-(+new Date-o);return i<0&&(i=0),i}},{key:"_getElapsedTime",value:function(){var e=this.state.oldDate;return+new Date-e}},{key:"_getLastActiveTime",value:function(){return this.state.lastActive}},{key:"_isIdle",value:function(){return this.state.idle}}]),t}(react.Component);function debounced(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){e.apply(void 0,i),n=null},t)}}function throttled(e,t){var n=0;return function(){var o=(new Date).getTime();if(!(o-n<t))return n=o,e.apply(void 0,arguments)}}IdleTimer.propTypes={timeout:PropTypes.number,events:PropTypes.arrayOf(PropTypes.string),onIdle:PropTypes.func,onActive:PropTypes.func,onAction:PropTypes.func,debounce:PropTypes.number,throttle:PropTypes.number,element:PropTypes.oneOfType([PropTypes.object,PropTypes.element]),startOnMount:PropTypes.bool,stopOnIdle:PropTypes.bool,passive:PropTypes.bool,capture:PropTypes.bool},IdleTimer.defaultProps={timeout:12e5,element:DEFAULT_ELEMENT,events:DEFAULT_EVENTS,onIdle:function(){},onActive:function(){},onAction:function(){},debounce:0,throttle:0,startOnMount:!0,stopOnIdle:!1,capture:!0,passive:!0},module.exports=IdleTimer;
 //# sourceMappingURL=index.min.js.map

DOCS.md

@@ -10,14 +10,23 @@ <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 -   [onActive][5]
--   [element][6]
--   [startOnMount][7]
--   [passive][8]
--   [capture][9]
--   [methods][10]
--   [reset][11]
--   [pause][12]
--   [resume][13]
--   [getRemainingTime][14]
--   [getElapsedTime][15]
--   [getLastActiveTime][16]
--   [isIdle][17]
+-   [onAction][6]
+-   [debounce][7]
+-   [throttle][8]
+-   [element][9]
+-   [startOnMount][10]
+-   [stopOnIdle][11]
+-   [passive][12]
+-   [capture][13]
+-   [methods][14]
+-   [reset][15]
+-   [pause][16]
+-   [resume][17]
+-   [getRemainingTime][18]
+-   [getElapsedTime][19]
+-   [getLastActiveTime][20]
+-   [isIdle][21]
+-   [utilities][22]
+-   [debounced][23]
+    -   [Parameters][24]
+-   [throttled][25]
+    -   [Parameters][26]
 
@@ -34,3 +43,3 @@ ## props
 
-Type: [Number][18]
+Type: [Number][27]
 
@@ -40,5 +49,5 @@ ## events
 DOM events to listen to
-default: see [default events][19]
+default: see [default events][28]
 
-Type: [Array][20]
+Type: [Array][29]
 
@@ -50,3 +59,3 @@ ## onIdle
 
-Type: [Function][21]
+Type: [Function][30]
 
@@ -58,4 +67,25 @@ ## onActive
 
-Type: [Function][21]
+Type: [Function][30]
 
+## onAction
+
+Function to call on user actions
+default: () => {}
+
+Type: [Function][30]
+
+## debounce
+
+Debounce the onAction function by setting delay in milliseconds
+default: 0
+
+Type: [Number][27]
+
+## throttle
+
+Throttle the onAction function by setting delay in milliseconds
+default: 0
+
+Type: [Boolean][31]
+
 ## element
@@ -66,3 +96,3 @@
 
-Type: [Object][22]
+Type: [Object][32]
 
@@ -74,4 +104,13 @@ ## startOnMount
 
-Type: [Boolean][23]
+Type: [Boolean][31]
 
+## stopOnIdle
+
+Once the user goes idle the IdleTimer will not
+reset on user input instead, reset() must be
+called manually to restart the timer
+default: false
+
+Type: [Boolean][31]
+
 ## passive
@@ -82,3 +121,3 @@
 
-Type: [Boolean][23]
+Type: [Boolean][31]
 
@@ -90,3 +129,3 @@ ## capture
 
-Type: [Boolean][23]
+Type: [Boolean][31]
 
@@ -114,3 +153,3 @@ ## methods
 
-Returns **[Number][18]** Milliseconds remaining
+Returns **[Number][27]** Milliseconds remaining
 
@@ -133,4 +172,36 @@ ## getElapsedTime
 
-Returns **[Boolean][23]** 
+Returns **[Boolean][31]** 
 
+## utilities
+
+
+
+
+## debounced
+
+Creates a debounced function that delays invoking func until
+after delay milliseconds has elapsed since the last time the
+debounced function was invoked.
+
+### Parameters
+
+-   `fn` **[Function][30]** Function to debounce
+-   `delay` **[Number][27]** How long to wait
+
+Returns **[Function][30]** Executed Function
+\*
+
+## throttled
+
+Creates a throttled function that only invokes func at most
+once per every wait milliseconds.
+
+### Parameters
+
+-   `fn` **[Function][30]** Function to debounce
+-   `delay` **[Number][27]** How long to wait
+
+Returns **[Function][30]** Executed Function
+\*
+
 [1]: #props
@@ -146,36 +217,54 @@
 
-[6]: #element
+[6]: #onaction
 
-[7]: #startonmount
+[7]: #debounce
 
-[8]: #passive
+[8]: #throttle
 
-[9]: #capture
+[9]: #element
 
-[10]: #methods
+[10]: #startonmount
 
-[11]: #reset
+[11]: #stoponidle
 
-[12]: #pause
+[12]: #passive
 
-[13]: #resume
+[13]: #capture
 
-[14]: #getremainingtime
+[14]: #methods
 
-[15]: #getelapsedtime
+[15]: #reset
 
-[16]: #getlastactivetime
+[16]: #pause
 
-[17]: #isidle
+[17]: #resume
 
-[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[18]: #getremainingtime
 
-[19]: https://github.com/SupremeTechnopriest/react-idle-timer#default-events
+[19]: #getelapsedtime
 
-[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[20]: #getlastactivetime
 
-[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[21]: #isidle
 
-[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[22]: #utilities
 
-[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[23]: #debounced
+
+[24]: #parameters
+
+[25]: #throttled
+
+[26]: #parameters-1
+
+[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[28]: https://github.com/SupremeTechnopriest/react-idle-timer#default-events
+
+[29]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[30]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[31]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[32]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

package.json

 {
   "name": "react-idle-timer",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "description": "Activity detection for React.js",
@@ -5,0 +5,0 @@ "main": "dist/index.min.js",

README.md

@@ -9,3 +9,2 @@ # React Idle Timer
 
-
 [![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
@@ -18,11 +17,9 @@
 
-Welcome to version 4 of IdleTimer! We have performed a complete rewrite of our build system and a refactor/ clean up of the source code. After accepting many pull requests things started to get ugly. We added test coverage and continuous integration tools (travis and codeclimate) that will automatically enforce style and test future pull requests.  
+Version `4.1.0` brings two of the most requested features to `IdleTimer`: 
 
-There are a few breaking changes in version 4:
+☝️ You can now use `IdleTimer` as a generic activity monitor via the new `onAction` event handler.  We recommend using one of the built in `debounce` or `throttle` properties if you dont need every single update.  It really improves performance. 
 
-- The property `startOnLoad` has been renamed to `startOnMount` in order to make more sense in a react context.
-- The property `activeAction` has been renamed to `onActive`.
-- The property `idleAction` has been renamed to `onIdle`.
+✌️ Added a property `stopOnIdle` that allows developer intervention between the idle and active states.  Good for waiting for an async task to complete before restarting the `IdleTimer`.  If this option is set, you will have to call `reset()` manually to restart `IdleTimer`.
 
-For the full patch notes please refer to the [CHANGELOG](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/CHANGELOG.md)
+>  For the full patch notes please refer to the [CHANGELOG](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/CHANGELOG.md)
 
@@ -41,2 +38,3 @@ ## Installation
 import IdleTimer from 'react-idle-timer'
+import App from './App'
 
@@ -47,2 +45,3 @@ export default class YourApp extends Component {
     this.idleTimer = null
+    this.onAction = this._onAction.bind(this)
     this.onActive = this._onActive.bind(this)
@@ -54,15 +53,20 @@ this.onIdle = this._onIdle.bind(this)
     return (
-      <IdleTimer
-        ref={ref => { this.idleTimer = ref }}
-        element={document}
-        onActive={this.onActive}
-        onIdle={this.onIdle}
-        timeout={1000 * 60 * 15}>
-
-        <h1>Child Components</h1>
-
-      </IdleTimer>
+      <div>
+        <IdleTimer
+          ref={ref => { this.idleTimer = ref }}
+          element={document}
+		  onActive={this.onActive}
+          onIdle={this.onIdle}
+          onAction={this.onAction}
+		  debounce={250}
+          timeout={1000 * 60 * 15} />
+		{/* your app here */}
+      </div>
     )
   }
 
+  _onAction(e) {
+    console.log('user did something', e)
+  }
+  
   _onActive(e) {
@@ -80,2 +84,11 @@ console.log('user is active', e)
 
+## Migration from v3 to v4
+
+There are a few breaking changes in version 4:
+
+- Although still capable of rendering children, as of version 4 we dont pass children to `IdleTimer`. Unless you are really good with `shouldComponentUpdate` you should avoid using `IdleTimer` as a wrapper component.
+- The property `startOnLoad` has been renamed to `startOnMount` in order to make more sense in a React context.
+- The property `activeAction` has been renamed to `onActive`.
+- The property `idleAction` has been renamed to `onIdle`.
+
 ## Documentation
@@ -101,8 +114,12 @@
 - **events** {*Array*} - Events to bind. See [default events](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/src/index.js#L36-L47) for list of defaults.
-- **onIdle** {*Function*} - Function to call on idle.
-- **onActive** {*Function*} - Function to call on active.
+- **onIdle** {*Function*} - Function to call when user is now idle.
+- **onActive** {*Function*} - Function to call when user is no longer idle.
+- **onActive** {*Function*} - Function to call on user action.
+- **debounce** {Number} - Debounce the `onActive` function with delay in milliseconds.  Defaults to `0`. Cannot be set if `throttle` is set.
+- **throttle** {Number} - Throttle the `onActive` function with delay in milliseconds. Defaults to `0`. Cannot be set if `debounce` is set.
 - **element** {*Object*} - Defaults to document, may pass a ref to another element.
-- **startOnMount** {*Boolean*} - Start the timer on component load.  Defaults to `true`. Set to false to wait for user action before starting timer.
-- **passive** {*Boolean*} - Bind events in [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. Defaults to `true`.
-- **capture** {*Boolean*} - Bind events in [capture](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. Defaults to `true`.
+- **startOnMount** {*Boolean*} - Start the timer when the component mounts.  Defaults to `true`. Set to `false` to wait for user action before starting timer.
+- **stopOnIdle** {Boolean} - Stop the timer when user goes idle. Defaults to `false`.  If set to true you will need to manually call `reset()` to restart the timer.
+- **passive** {*Boolean*} - Bind events in [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. Defaults to  `true`.
+- **capture** {*Boolean*} - Bind events in [capture](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. Defaults to  `true`.
 
@@ -109,0 +126,0 @@ ### Methods

No alert changes

Improved metrics

Total package byte prevSize

60859

25.43%

Lines of code

46

17.95%

Number of lines in readme file

127

15.45%

No dependency changes