feat: add withMedia() and @withmedia

Author: streamich

src/BatterySensor/__story__/story.ts

@@ -41,11 +41,12 @@ storiesOf('Sensors/BatterySensor', module)
   )
   .add('Render prop', () =>
     h(BatterySensor, {
-      render: (state) => h('pre', {style: {
-          fontFamily: 'monospace'
-        }},
-          JSON.stringify(state, null, 4)
-        )
+      render: (state) =>
+      h('pre', {style: {
+        fontFamily: 'monospace'
+      }},
+        JSON.stringify(state, null, 4)
+      )
     })
   )
   .add('HOC', () => h(PrintBattery))

src/MediaSensor/__story__/story.ts

@@ -0,0 +1,52 @@
+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 {MediaSensor, withMedia} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const IsBig = ({isBig}) => h('div', null, `WIDTH IS GREATED THAN 480PX: ${isBig}`);
+
+const IsBigWithMedia = withMedia(IsBig, 'isBig', {
+  query: '(min-width: 480px)'
+});
+
+@withMedia('isBig', {
+  query: '(min-width: 480px)'
+})
+class IsBigClass extends Component<any, any> {
+  render () {
+    return h('div', null, `WIDTH IS GREATED THAN 480PX: ${this.props.isBig}`);
+  }
+}
+
+storiesOf('Sensors/MediaSensor', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'MediaSensor'}))
+  .add('FaCC', () =>
+    h(MediaSensor, {
+      query: '(min-width: 480px)'
+    }, (matches) =>
+      h('div', {
+        style: {
+          border: '1px solid red'
+        }
+      },
+        `WIDTH IS GREATED THAN 480PX: ${matches}`
+      )
+    )
+  )
+  .add('Render prop', () =>
+    h(MediaSensor, {
+      query: '(min-width: 480px)',
+      render: (matches) =>
+        h('div', {
+          style: {
+            border: '1px solid red'
+          }
+        },
+          `WIDTH IS GREATED THAN 480PX: ${matches}`
+        )
+    })
+  )
+  .add('HOC', () => h(IsBigWithMedia))
+  .add('Decorator', () => h(IsBigClass));

src/MediaSensor/index.ts

@@ -1,4 +1,6 @@
 import {Component} from 'react';
+import faccToHoc from '../util/faccToHoc';
+import renderProp from '../util/renderProp';
 
 export interface IMediaSensorProps {
   matches?: boolean;
@@ -67,9 +69,8 @@ export class MediaSensor extends Component<IMediaSensorProps, IMediaSensorState>
   }
 
   render () {
-    const {children} = this.props;
-    const {matches} = this.state;
-
-    return children(matches);
+    return renderProp(this.props, this.state.matches);
   }
 }
+
+export const withMedia = faccToHoc(MediaSensor);

src/MediaSensor/story.ts

@@ -1,10 +1,16 @@
 import {h} from '../util';
 import addClassDecoratorSupport from './addClassDecoratorSupport';
 
-const faccToHoc = (Facc, prop?: string) =>
-  (Comp, propName: string = prop) => {
+const faccToHoc = (Facc, prop?: string) => {
+  const hoc = (Comp, propName: any = prop, faccProps: object = null) => {
+    const isClassDecoratorMethodCall = typeof Comp === 'string';
+
+    if (isClassDecoratorMethodCall) {
+      return (Klass) => hoc(Klass, Comp as any, propName as any);
+    }
+
     const Enhanced = (props) =>
-      h(Facc, null, (state) =>
+      h(Facc, faccProps, (state) =>
         h(Comp,
           propName ?
             {[propName]: state, ...props} :
@@ -15,4 +21,7 @@ const faccToHoc = (Facc, prop?: string) =>
     return addClassDecoratorSupport(Enhanced);
   };
 
+  return hoc;
+}
+
 export default faccToHoc;