fix(DateInput): fix stories

8base · Dec 19, 2018 · 8d9f0db · 8d9f0db
1 parent c5b2319
commit 8d9f0db
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 56 deletions.
diff --git a/src/components/DateInput/DateInput.stories.js b/src/components/DateInput/DateInput.stories.js
@@ -1,34 +1,23 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('Components/DateInput', module, (story, { DateInput }) => {
-    class DateInputContainer extends React.Component {
-      constructor(props) {
-        super(props);
-
-        this.state = { value: props.value };
-      }
-
-      onChange = (value) => {
-        // eslint-disable-next-line
-        console.log(value);
-        this.setState({ value });
-      };
-
-      render() {
-        const { value } = this.state;
-
-        return <DateInput { ...this.props } value={ value } onChange={ this.onChange } />;
-      }
-    }
-
+  asStory('Components/DateInput', module, (story, { DateInput, Column, StateContainer }) => {
     story
-      .add('default', () => (
-        <React.Fragment>
-          <DateInputContainer value={ null } />
-          <DateInputContainer value="2018-11-07" />
-          <DateInputContainer value={ null } withTime />
-        </React.Fragment>
+      .add('common', () => (
+        <Column>
+          <StateContainer value={ null }>
+            <DateInput />
+          </StateContainer>
+          <StateContainer value={ null }>
+            <DateInput withTime />
+          </StateContainer>
+          <StateContainer value="2018-11-07">
+            <DateInput />
+          </StateContainer>
+          <StateContainer value="2018-11-29T21:00:00.000Z">
+            <DateInput withTime />
+          </StateContainer>
+        </Column>
       ));
   });
 };

diff --git a/src/components/DateInputField/DateInputField.stories.js b/src/components/DateInputField/DateInputField.stories.js
@@ -1,34 +1,23 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('Components/DateInputField', module, (story, { DateInputField }) => {
-    class DateInputFieldContainer extends React.Component {
-      constructor(props) {
-        super(props);
-
-        this.state = { value: props.value };
-      }
-
-      onChange = (value) => {
-        // eslint-disable-next-line
-        console.log(value);
-        this.setState({ value });
-      };
-
-      render() {
-        const { value } = this.state;
-
-        return <DateInputField { ...this.props } input={{ value, onChange: this.onChange }} />;
-      }
-    }
-
+  asStory('Components/DateInputField', module, (story, { DateInputField, Column, StateContainer }) => {
     story
-      .add('default', () => (
-        <React.Fragment>
-          <DateInputFieldContainer label="Date" value={ null } />
-          <DateInputFieldContainer label="Date" value="2018-11-07" />
-          <DateInputFieldContainer label="Datetime" value={ null } withTime />
-        </React.Fragment>
+      .add('common', () => (
+        <Column>
+          <StateContainer value={ null } withForm>
+            <DateInputField label="Date" />
+          </StateContainer>
+          <StateContainer value={ null } withForm>
+            <DateInputField label="Datetime" withTime />
+          </StateContainer>
+          <StateContainer value="2018-11-07" withForm>
+            <DateInputField label="Date" />
+          </StateContainer>
+          <StateContainer value="2018-11-29T21:00:00.000Z" withForm>
+            <DateInputField label="Datetime" withTime />
+          </StateContainer>
+        </Column>
       ));
   });
 };

diff --git a/storybook/StateContainer.js b/storybook/StateContainer.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export class StateContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { value: props.value };
+  }
+
+  onChange = (value) => {
+    // eslint-disable-next-line
+    console.log(value);
+    this.setState({ value });
+  };
+
+  render() {
+    const { children, withForm } = this.props;
+    const { value } = this.state;
+
+    if (withForm) {
+      return React.Children.map(children, child =>
+        React.cloneElement(child, { input: { value, onChange: this.onChange }}),
+      );
+    }
+
+    return React.Children.map(children, child =>
+      React.cloneElement(child, { value, onChange: this.onChange }),
+    );
+  }
+}
diff --git a/storybook/utils.js b/storybook/utils.js
@@ -3,9 +3,11 @@
 import React from 'react';
 import styled from 'react-emotion';
 import { storiesOf } from '@storybook/react';
-import * as boost from '../src';
 import { withInfo } from '@storybook/addon-info';
 
+import * as boost from '../src';
+import { StateContainer } from './StateContainer';
+
 const { EightBaseBoostProvider, createTheme, ...components } = boost;
 
 const theme = createTheme({
@@ -27,6 +29,6 @@ export const asStory = (name: string, module: *, init: *) => {
       .addDecorator((story, context) => withInfo()(story)(context))
       .addDecorator(story => story())
       .addDecorator(ThemeDecorator)
-    , components,
+    , { ...components, StateContainer },
   );
 };