docs: add invert() docs

Author: streamich

README.md

@@ -25,6 +25,7 @@ const MyComponent = mock();
      - [`loadable()`](./docs/loadable.md)
      - [`lazy()`](./docs/lazy.md)
      - [`delayed()`](./docs/delayed.md)
+     - [`invert()`](./docs/invert.md)
   - Sensors
      - [`<SizeSensor>`](./docs/SizeSensor.md)
      - [`<WidthSensor>`](./docs/WidthSensor.md)

docs/invert.md

@@ -0,0 +1,83 @@
+# `invert()`
+
+A utility function that inverts DOM element by creating a FaCC out of it. Allows you to easily
+create stateless DOM compnents with reference to a DOM element and invertd control flow.
+
+## Usage
+
+```jsx
+import {invert} from 'mol-fe-react/lib/invert';
+
+const Div = invert('div');
+const Audio = invert('audio');
+const Video = invert('video');
+// etc...
+
+<Div
+  onClick={(event, comp) => {
+
+  }}
+  render={(div, comp) => div}
+>{(comp) =>
+
+}</Div>
+```
+
+
+## Reference
+
+```tsx
+invert: (tag: string) => React.ComponentClass;
+```
+
+, where
+
+  - `tag` - a DOM element tag name.
+
+Returns an inverted FaCC of that tag, whose props are passed through to the DOM element and
+it has these additional props:
+
+  - `render` - optional, wrapper renderer that you can use to wrap your element in extra markup,
+  defaults to `(element) => element`.
+  - `onMounted(el, comp)` - called when component mounts; `el` - DOM element reference; `comp` - React
+  component instance.
+  - `onUnmount(comp)` - called when component unmounts; `comp` - React component instance.
+
+Children of the created component can be a function that recieves a React component as its only argument.
+
+The created react component instance has `.el` property which is a reference to the DOM element.
+
+
+## Example
+
+```jsx
+import {invert} from 'mol-fe-react/lib/invert';
+
+const Audio = invert('audio');
+
+<Audio
+  src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
+  onTimeUpdate={() => {}}
+  render={(element, comp) =>
+    <div>
+      {element}
+      <button onClick={() => comp.el.play()}>Play</button>
+      <button onClick={() => comp.el.pause()}>Pause</button>
+      <button onClick={() => comp.el.currentTime -= 5}>Seek -</button>
+      <button onClick={() => comp.el.currentTime += 5}>Seek +</button>
+      <button onClick={() => comp.el.volume -= 0.05}>Volume -</button>
+      <button onClick={() => comp.el.volume += 0.05}>Volume +</button>
+      <button onClick={() => comp.el.muted = true}>Mute</button>
+      <button onClick={() => comp.el.muted = false}>Unmute</button>
+      <pre style={{fontFamily: 'monospace'}}>
+        {JSON.stringify({
+          duration: comp.el && comp.el.duration,
+          time: comp.el && comp.el.currentTime,
+          volume: comp.el && comp.el.volume,
+          muted: comp.el && comp.el.muted
+        }, null, 4)}
+      </pre>
+    </div>
+  }
+/>
+```

src/index.ts

@@ -5,6 +5,7 @@ export * from './mock';
 export * from './loadable';
 export * from './lazy';
 export * from './delayed';
+export * from './invert';
 
 // Sensors
 export * from './SizeSensor';

src/invert.story.tsx

@@ -5,8 +5,10 @@ import {linkTo} from '@storybook/addon-links';
 import {invert} from './invert';
 
 const Audio = invert('audio');
+import ShowDocs from '../.storybook/ShowDocs'
 
-storiesOf('invert()', module)
+storiesOf('Dummies/invert()', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'invert'}))
   .add('<audio>', () =>
     <Audio
       src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'

src/invert.ts

@@ -4,6 +4,7 @@ import {h, noop} from './util';
 export interface IInvertedProps {
   children?: (...args) => React.ReactElement<any>;
   onMounted: (el: HTMLElement, comp: React.Component<any>) => void;
+  onUnmount: (comp: React.Component<any>) => void;
   render: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
 }
 
@@ -25,10 +26,12 @@ export const invert: TInvert = (tag: keyof React.ReactHTML) => {
 
     componentDidMount () {
       (this.props.onMounted || noop)(this.el, this);
+      this.forceUpdate();
     }
 
     compnentWillUnmount () {
       this.el = null;
+      (this.props.onUnmount || noop)(this);
     }
 
     event (name: string, handler: (...args) => void) {