feat: add withMediaDevices()

Author: streamich

README.md

@@ -35,8 +35,8 @@ const MyComponent = mock();
      - [`delayed()`](./docs/delayed.md)
      - [`invert()`](./docs/invert.md)
   - Sensors
-     - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#@withbattery)
-     - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md)
+     - [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
+     - [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/MediaSensor.md)
      - [`<NetworkSensor>`](./docs/NetworkSensor.md) and [`withNetwork()`](./docs/NetworkSensor.md#withnetwork)
      - [`<LightSensor>`](./docs/LightSensor.md)

src/BatterySensor/__story__/story.ts

@@ -39,5 +39,14 @@ storiesOf('Sensors/BatterySensor', module)
       )
     )
   )
+  .add('Render prop', () =>
+    h(BatterySensor, {
+      render: (state) => h('pre', {style: {
+          fontFamily: 'monospace'
+        }},
+          JSON.stringify(state, null, 4)
+        )
+    })
+  )
   .add('HOC', () => h(PrintBattery))
   .add('Decorator', () => h(Printer));

src/BatterySensor/index.ts

@@ -1,9 +1,11 @@
 import {Component} from 'react';
 import {h, on, off, isClient} from '../util';
 import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 export interface IBatterySensorProps {
   children?: (INetworkState) => React.ReactElement<any>;
+  render?: (INetworkState) => React.ReactElement<any>;
 }
 
 export interface IBatterySensorState {
@@ -66,7 +68,7 @@ export class BatterySensor extends Component<IBatterySensorProps, IBatterySensor
   };
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
 

src/MediaDeviceSensor/__story__/story.tsx

@@ -0,0 +1,48 @@
+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 {MediaDeviceSensor, withMediaDevices} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Print = (props) => h('pre', {
+  style: {fontFamily: 'monospace'}
+},
+  JSON.stringify(props, null, 4)
+);
+
+const PrintWithDevices = withMediaDevices(Print);
+
+@withMediaDevices
+class Printer extends Component<any, any> {
+  render () {
+    return h('pre', {
+      style: {fontFamily: 'monospace'}
+    },
+      JSON.stringify(this.props, null, 4)
+    );
+  }
+}
+
+storiesOf('Sensors/MediaDeviceSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'MediaDeviceSensor'}))
+  .add('FaCC', () =>
+    <div>
+      <MediaDeviceSensor>{(state) =>
+        <pre style={{fontFamily: 'monospace'}}>
+          {JSON.stringify(state, null, 4)}
+        </pre>
+      }</MediaDeviceSensor>
+    </div>
+  )
+  .add('Render prop', () =>
+    <div>
+      <MediaDeviceSensor render={(state) =>
+        <pre style={{fontFamily: 'monospace'}}>
+          {JSON.stringify(state, null, 4)}
+        </pre>
+      } />
+    </div>
+  )
+  .add('HOC', () => <PrintWithDevices />)
+  .add('Decorator', () => <Printer />);

src/MediaDeviceSensor/index.ts

@@ -1,5 +1,7 @@
 import {Component} from 'react';
 import {on, off, noop} from '../util';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 export interface IMediaDevice {
   deviceId: string;
@@ -10,6 +12,7 @@ export interface IMediaDevice {
 
 export interface IMediaDeviceSensorProps {
   children?: (state: IMediaDeviceSensorState) => React.ReactElement<any>;
+  render?: (state: IMediaDeviceSensorState) => React.ReactElement<any>;
 }
 
 export interface IMediaDeviceSensorState {
@@ -49,6 +52,8 @@ export class MediaDeviceSensor extends Component<IMediaDeviceSensorProps, IMedia
   };
 
   render () {
-    return this.props.children(this.state);
+    return renderProp(this.props, this.state);
   }
 }
+
+export const withMediaDevices = faccToHoc(MediaDeviceSensor);