docs: add <IdleSensor> docs

Author: streamich

README.md

@@ -52,6 +52,7 @@ const MyComponent = mock();
      - [`<FocusSensor>`](./docs/en/FocusSensor.md), [`withFocus()`](./docs/en/FocusSensor.md#withfocus-hoc), and [`@withFocus`](./docs/en/FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./docs/en/GeoLocationSensor.md), [`withGeoLocation()`](./docs/en/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/en/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./docs/en/HoverSensor.md), [`withHover()`](./docs/en/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/en/HoverSensor.md#withhover-decorator)
+     - [`<IdleSensor>`](./docs/en/IdleSensor.md), [`withIdle()`](./docs/en/IdleSensor.md#withidle-hoc), and [`@withIdle`](./docs/en/IdleSensor.md#withidle-decorator)
      - [`<MediaDeviceSensor>`](./docs/en/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/en/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/en/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/en/MediaSensor.md), [`withMedia()`](./docs/en/MediaSensor.md#withmedia), and [`@withMedia`](./docs/en/MediaSensor.md#withmedia-1)
      - [`<MotionSensor>`](./docs/en/MotionSensor.md), [`withMotion()`](./docs/en/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/en/MotionSensor.md#withmotion-decorator)

docs/en/IdleSensor.md

@@ -0,0 +1,59 @@
+# `<IdleSensor>`
+
+Tracks if use is active on the page. If user does not perform any events on the page
+during a specified timeout, `IdleSensor` fires an event and changes its state.
+
+Uses these events to track user activity:
+
+```js
+['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel', 'visibilitychange']
+```
+
+All events, except `visibilitychange`, are fired by `window` object and the list can
+be set in props.
+
+
+## Usage
+
+```jsx
+import {IdleSensor} from 'libreact/lib/IdleSensor';
+
+<IdleSensor ms={10000} onChange={(idle) => console.log(idle)}>
+  {({idle}) =>
+    <div>
+      User is idle: {idle ? 'TRUE' : 'FALSE'}
+    </div>
+  }
+</IdleSensor>
+```
+
+
+## Props
+
+Signature
+
+```ts
+interface IIdleSensorProps {
+  events?: string[];
+  ms?: number;
+  onChange?: (idle: boolean) => void;
+  throttle?: number;
+}
+```
+
+, where
+
+- `events` &mdash; optional, list of `window` events to listen to.
+- `ms` &mdash; optional, number, time in milliseconds after which to consider user idle, defaults to `1000 * 60 * 2`.
+- `onChange` &mdash; optional, callback, fires when `IdleSensor` changes its state, receives a single boolean argument.
+- `throttle` &mdash; optional, number, time in milliseconds used to throttle events, defaults to `50`. This prop cannot be changed dynamically.
+
+
+## `withIdle()` HOC
+
+Enhancer that injects `idle` prop into your component.
+
+
+## `@withIdle` decorator
+
+Stateful component class decorator that injects `idle` prop.

docs/en/README.md

@@ -21,6 +21,7 @@
      - [`<FocusSensor>`](./FocusSensor.md), [`withFocus()`](./FocusSensor.md#withfocus-hoc), and [`@withFocus`](./FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./GeoLocationSensor.md), [`withGeoLocation()`](./GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./HoverSensor.md), [`withHover()`](./HoverSensor.md#withhover-hoc), and [`@withHover`](./HoverSensor.md#withhover-decorator)
+     - [`<IdleSensor>`](./IdleSensor.md), [`withIdle()`](./IdleSensor.md#withidle-hoc), and [`@withIdle`](./IdleSensor.md#withidle-decorator)
      - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md), [`withMediaDevices()`](./MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./MediaSensor.md), [`withMedia()`](./MediaSensor.md#withmedia), and [`@withMedia`](./MediaSensor.md#withmedia-1)
      - [`<MotionSensor>`](./MotionSensor.md), [`withMotion()`](./MotionSensor.md#withmotion-hoc), and [`@withMotion`](./MotionSensor.md#withmotion-decorator)

docs/en/SUMMARY.md

@@ -29,6 +29,7 @@
   * [FocusSensor](FocusSensor.md)
   * [GeoLocationSensor](GeoLocationSensor.md)
   * [HoverSensor](HoverSensor.md)
+  * [IdleSensor](IdleSensor.md)
   * [MediaDeviceSensor](MediaDeviceSensor.md)
   * [MediaSensor](MediaSensor.md)
   * [MotionSensor](MotionSensor.md)

docs/en/Sensors.md

@@ -18,6 +18,7 @@ For example, the below `<div>` will be re-rendered every time mouse position cha
   - [`<FocusSensor>`](./FocusSensor.md) &mdash; tracks element has focus.
   - [`<GeoLocationSensor>`](./GeoLocationSensor.md) &mdash; tracks device geographical location.
   - [`<HoverSensor>`](./HoverSensor.md) &mdash; tracks element's hover status.
+  - [`<IdleSensor>`](./IdleSensor.md) &mdash; tracks is user is active on the page.
   - [`<MediaDeviceSensor>`](./MediaDeviceSensor.md) &mdash; tracks media devices connected to your device.
   - [`<MediaSensor>`](./MediaSensor.md) &mdash; tracks matches of a media query.
   - [`<MotionSensor>`](./MotionSensor.md) &mdash; tracks physical motion of your device.

src/IdleSensor/__story__/story.tsx

@@ -13,7 +13,7 @@ const Print = ({idle}) =>
 const Hoc1 = withIdle(Print, '', {ms: 3000});
 
 storiesOf('Sensors/IdleSensor', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/IdleSensor.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/IdleSensor.md')}))
   .add('FaCC - 2 sec', () =>
     <IdleSensor ms={2000}>{({idle}) =>
       <div>

src/IdleSensor/index.ts

@@ -24,6 +24,7 @@ export interface IIdleSensorProps {
   events?: string[];
   ms?: number;
   onChange?: (idle: boolean) => void;
+  throttle?: number;
 }
 
 export interface IIdleSensorState {
@@ -32,8 +33,9 @@ export interface IIdleSensorState {
 
 export class IdleSensor extends Component<IIdleSensorProps, IIdleSensorState> {
   static defaultProps = {
-    events: ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'scroll'],
+    events: ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'],
     ms: 1000 * 60 * 2,
+    throttle: 50
   }
 
   state = {
@@ -85,7 +87,7 @@ export class IdleSensor extends Component<IIdleSensorProps, IIdleSensorState> {
     }
   };
 
-  onEvent = throttle(50, false, () => {
+  onEvent = throttle(this.props.throttle, false, () => {
     if (this.state.idle) {
       this.change(false);
     }