feat: add stories for Unmount and Mount

yeojz · Apr 7, 2019 · 8427710 · 8427710
1 parent fc82c35
commit 8427710
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/stories/UseMount.story.tsx b/stories/UseMount.story.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import withState from './withState';
+import UseMount from '../src/UseMount';
+
+const { Fragment } = React;
+
+function Example(props) {
+  const { mounted, setMounted } = props;
+
+  return (
+    <div>
+      {!mounted && (
+        <Fragment>
+          <button onClick={() => setMounted(true)}>Mount the component.</button>
+          <p>Upon mounting, an action will fire.</p>
+        </Fragment>
+      )}
+
+      {mounted && (
+        <UseMount
+          fn={() => {
+            action('UseMount')('mounted');
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+const Demo = withState('mounted', 'setMounted', false)(Example);
+
+storiesOf('2. Additional|UseMount', module).add('Demo', () => <Demo />);
diff --git a/stories/UseUnmount.story.tsx b/stories/UseUnmount.story.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import withState from './withState';
+import UseUnmount from '../src/UseUnmount';
+
+const { Fragment } = React;
+
+function Example(props) {
+  const { mounted, setMounted } = props;
+
+  return (
+    <div>
+      {mounted && (
+        <Fragment>
+          <button onClick={() => setMounted(false)}>Unmount the component.</button>
+          <p>Upon mounting, an action will fire.</p>
+        </Fragment>
+      )}
+
+      {mounted && (
+        <UseUnmount
+          fn={() => {
+            action('UseUnmount')('unmounted');
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+const Demo = withState('mounted', 'setMounted', true)(Example);
+
+storiesOf('2. Additional|UseUnmount', module).add('Demo', () => <Demo />);