feat: create invert() function

Author: streamich

src/invert.story.tsx

@@ -0,0 +1,36 @@
+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 {invert} from './invert';
+
+const Audio = invert('audio');
+
+storiesOf('invert()', module)
+  .add('<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/invert.ts

@@ -0,0 +1,65 @@
+import {Component} from 'react';
+import {h, noop} from './util';
+
+export interface IInvertedProps {
+  children?: (...args) => React.ReactElement<any>;
+  onMounted: (el: HTMLElement, comp: React.Component<any>) => void;
+  render: (element: React.ReactElement<any>, comp: React.Component<any>) => React.ReactElement<any>;
+}
+
+export type TInvert = (tag: string) => React.ComponentClass<any>;
+
+const defaultRenderProp = (element) => element;
+
+export const invert: TInvert = (tag: keyof React.ReactHTML) => {
+  const Inverted = class Inverted extends Component<IInvertedProps, any> {
+    static defaultProps = {
+      render: defaultRenderProp
+    };
+
+    el: HTMLElement = null;
+
+    ref = (el) => {
+      this.el = el;
+    };
+
+    componentDidMount () {
+      (this.props.onMounted || noop)(this.el, this);
+    }
+
+    compnentWillUnmount () {
+      this.el = null;
+    }
+
+    event (name: string, handler: (...args) => void) {
+      return (event) => {
+        handler(event, this);
+        this.forceUpdate();
+      };
+    }
+
+    render () {
+      const {event} = this;
+      const {children, render, ...rest} = this.props;
+      const props = {
+        ref: this.ref
+      };
+
+      for (const name in rest) {
+        const value = rest[name];
+
+        if ((name[0] === 'o') && (name[1] === 'n') && (typeof value === 'function')) {
+          props[name] = this.event(name, value);
+        } else {
+          props[name] = value;
+        }
+      }
+
+      const element = h(tag, props, typeof children === 'function' ? children(this) : children);
+
+      return render(element, this);
+    }
+  }
+
+  return Inverted;
+};