feat: implement <ShouldUpdate>

README.md

@@ -37,6 +37,7 @@ const MyComponent = mock();
      - [`lazy()`](./docs/en/lazy.md), [`delayed()`](./docs/en/delayed.md), and [`viewport()`](./docs/en/viewport.md)
   - [Inversion](./docs/en/Inversion.md)
      - [`invert()`](./docs/en/invert.md) and [`<Inverted>`](./docs/en/invert.md#inverted)
+        - `<ShouldUpdate>`
      - [`<State>`](./docs/en/State.md) and [`withState()`](./docs/en/State.md#withstate-hoc)
         - [`<Toggle>`](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator)
         - [`<Flipflop>`](./docs/en/Flipflop.md), [`withFlipflop()`](./docs/en/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/en/Flipflop.md#withflipflop-decorator)

src/ShouldUpdate/__story__/Example1.tsx

@@ -0,0 +1,18 @@
+import {Component, createElement as h} from 'react';
+import {ShouldUpdate} from '..';
+
+export class Example1 extends Component {
+  state = {
+    cnt: 0
+  };
+
+  render () {
+    return (
+      <ShouldUpdate when={(props) => props.cnt > 3} props={this.state}>
+        <div onClick={() => this.setState({cnt: this.state.cnt + 1})}>
+          Click me ({this.state.cnt})
+        </div>
+      </ShouldUpdate>
+    );
+  }
+}

src/ShouldUpdate/__story__/story.tsx

@@ -0,0 +1,16 @@
+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 {ShouldUpdate} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+import {Example1} from './Example1';
+
+storiesOf('Inversion/ShouldUpdate', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/ShouldUpdate.md')}))
+  .add('Renders children', () =>
+    h(ShouldUpdate, {when: () => false, props: {}},
+      h('div', {}, 'Hello foobar!')
+    )
+  )
+  .add('When greater than 3', () => <Example1 />)

src/ShouldUpdate/index.ts

@@ -0,0 +1,20 @@
+import {Component} from 'react';
+import renderProp from '../util/renderProp';
+
+export interface IShouldUpdateProps {
+  props;
+  when: (newProps, oldProps) => boolean;
+}
+
+export interface IShouldUpdateState {
+}
+
+export class ShouldUpdate extends Component<IShouldUpdateProps, IShouldUpdateState> {
+  shouldComponentUpdate (props) {
+    return this.props.when(props.props, this.props.props);
+  }
+
+  render () {
+    return renderProp(this.props, this.props.props);
+  }
+}

src/Speak/story.ts → src/Speak/__story__/story.ts

@@ -2,8 +2,8 @@ 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 {Speak} from '.';
-import ShowDocs from '../../.storybook/ShowDocs'
+import {Speak} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
 
 class StorySpeakBasic extends Component<any, any> {
   state = {
@@ -26,7 +26,7 @@ class StorySpeakBasic extends Component<any, any> {
 }
 
 storiesOf('Generators/Speak', module)
-  .add('Documentation', () => h(ShowDocs, {md: require('../../docs/en/Speak.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Speak.md')}))
   .add('Example', () =>
     h(StorySpeakBasic)
   );