feat: add withBattery() and @withBattery

Author: streamich

README.md

@@ -7,14 +7,14 @@
 React standard library, must-have toolbox for any React project.
 
   - Collection of React sensors, FaCCs, HOCs, context providers, dummies, and [other goodies](#contents).
-  - Isomorphic - all components work in browser and Node.js (and some in `react-native`).
-  - [See demos and docs](https://mailonline.github.io/libreact/).
+  - Isomorphic - all components work in browser and on server (and some in `react-native`).
+  - See [demos](https://mailonline.github.io/libreact/) and [docs](#contents).
 
 ## Installation
 
-```shell
-npm install libreact --save
-```
+<pre>
+npm i <a href="https://www.npmjs.com/package/libreact">libreact</a> --save
+</pre>
 
 ## Usage
 
@@ -35,7 +35,7 @@ const MyComponent = mock();
      - [`delayed()`](./docs/delayed.md)
      - [`invert()`](./docs/invert.md)
   - Sensors
-     - [`<BatterySensor>`](./docs/BatterySensor.md)
+     - [`<BatterySensor>`](./docs/BatterySensor.md), `withBattery()`, and `@withBattery`
      - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md)
      - [`<MediaSensor>`](./docs/MediaSensor.md)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
@@ -44,7 +44,7 @@ const MyComponent = mock();
      - [`<OrientationSensor>`](./docs/OrientationSensor.md) and [`withOrientation()`](./docs/OrientationSensor.md#withorientation)
      - [`<ScrollSensor>`](./docs/ScrollSensor.md)
      - [`<SizeSensor>`](./docs/SizeSensor.md)
-     - [`<ViewportSensor>`](./docs/ViewportSensor.md), `<ViewportScrollSensor>`, and `<ViewportObserverSensor>`
+     - [`<ViewportSensor>`](./docs/ViewportSensor.md), [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor), and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
      - [`<WidthSensor>`](./docs/WidthSensor.md)
      - [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md)
      - [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md)

docs/ViewportSensor.md

@@ -46,7 +46,16 @@ interface IViewportSensorState {
 }
 ```
 
+
 ## `<ViewportScrollSensor>`
 
+Is the same as `<ViewportSensor>`, but uses only window `scroll` event to check for visibility changes.
+
 The `<ViewportScrollSensor>` has an additional prop `throttle`, which is a number in milliseconds specifying
 how much to throttle document's `scroll` event.
+
+
+## `<ViewportObserverSensor>`
+
+Is the same as `<ViewportSensor>`, but uses only `IntersectionObserver` to detect element's intersection
+with viewport.

docs/libreact.png

@@ -0,0 +1,43 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {BatterySensor, withBattery} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+const Print = (props) => h('pre', {
+  style: {
+    fontFamily: 'monospace'
+  }
+},
+  JSON.stringify(props, null, 4)
+);
+
+const PrintBattery = withBattery(Print);
+
+@withBattery
+class Printer extends Component<any, any> {
+  render () {
+    return h('pre', {
+      style: {
+        fontFamily: 'monospace'
+      }
+    },
+      JSON.stringify(this.props, null, 4)
+    );
+  }
+}
+
+storiesOf('Sensors/BatterySensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'BatterySensor'}))
+  .add('FaCC', () =>
+    h(BatterySensor, {}, (state) =>
+      h('pre', {style: {
+        fontFamily: 'monospace'
+      }},
+        JSON.stringify(state, null, 4)
+      )
+    )
+  )
+  .add('HOC', () => h(PrintBattery))
+  .add('Decorator', () => h(Printer));

src/BatterySensor/__story__/story.ts

@@ -1,5 +1,6 @@
 import {Component} from 'react';
-import {on, off, isClient} from '../util';
+import {h, on, off, isClient} from '../util';
+import addClassDecoratorSupport from '../util/addClassDecoratorSupport';
 
 export interface IBatterySensorProps {
   children?: (INetworkState) => React.ReactElement<any>;
@@ -68,3 +69,15 @@ export class BatterySensor extends Component<IBatterySensorProps, IBatterySensor
     return this.props.children(this.state);
   }
 }
+
+export const withBattery = (Comp) => {
+  const Enhanced = (props) =>
+    h(BatterySensor, null, (battery) =>
+      h(Comp, {
+        ...props,
+        battery
+      })
+    );
+
+  return addClassDecoratorSupport(Enhanced);
+};

src/BatterySensor/index.ts

@@ -101,7 +101,7 @@ export abstract class Media<P extends IMediaProps<M>, S extends IMediaState, M e
   play = () => {
     if (this.el) {
       // TODO: In some browsers `.play()` method returns a `Promise`, where you
-      // TODO: cannot call `pauer()` or `play()` again before that promise resolves.
+      // TODO: cannot call `pause()` or `play()` again before that promise resolves.
       const promise = this.el.play();
     }
   };