From 8d9f0dbf7c622d47a00330318534c952da4b3055 Mon Sep 17 00:00:00 2001
From: zouxuoz <zouxuoz@gmail.com>
Date: Wed, 19 Dec 2018 12:46:56 +0300
Subject: [PATCH] fix(DateInput): fix stories

---
 src/components/DateInput/DateInput.stories.js | 43 +++++++------------
 .../DateInputField/DateInputField.stories.js  | 43 +++++++------------
 storybook/StateContainer.js                   | 30 +++++++++++++
 storybook/utils.js                            |  6 ++-
 4 files changed, 66 insertions(+), 56 deletions(-)
 create mode 100644 storybook/StateContainer.js

diff --git a/src/components/DateInput/DateInput.stories.js b/src/components/DateInput/DateInput.stories.js
index d2fc79fc..9c6133f1 100644
--- 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
index e3fa34de..09cf857b 100644
--- 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
new file mode 100644
index 00000000..720826b3
--- /dev/null
+++ 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
index 12591918..21c62da5 100644
--- 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 },
   );
 };