xchain-components/src/stories/XDatepickerStory.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import XDatePicker from 'components/XDatepicker';

type State = {
  date: string,
};

class XDatepickerWrapper extends React.Component<{}, State> {
  state ={
    date: '',
  };

  onSelectDate = (event, {name, value}) => {
    console.log('value'+ value);
    this.setState({ date: value });
  }

  render() {
    const { date } = this.state;
    return (
      <div style={{ backgroundColor: '#0000FF'}}>
        <XDatePicker
          dateFormat="YYYY-MM-DD HH:mm"
          width="150px"
          placeholder="Required Date"
          selectedDate={date}
          handleChange={this.onSelectDate}
          pickerType='date'
        />
    </div>
    );
  }
}


class XDateTimepickerWrapper extends React.Component<{}, State> {
  state ={
    date: '',
  };

  onSelectDate = (event, {name, value}) => {
    console.log('value'+ value);
    this.setState({ date: value });
  }

  render() {
    const { date } = this.state;
    return (
      <div style={{ backgroundColor: '#0000FF'}}>
        <XDatePicker
          dateFormat="YYYY-MM-DD HH:mm"
          width="120px"
          placeholder="Required Date"
          selectedDate={date}
          handleChange={this.onSelectDate}
          pickerType='datetime'
        />
    </div>
    );
  }
}

export default storiesOf('XDatepicker', module)
  .addDecorator(withInfo)
  .add('Date Picker with placeholder', () => (
   <XDatepickerWrapper />
 ))
 .add('DateTime Picker with placeholder', () => (
  <XDateTimepickerWrapper />
));