stories.js

/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2017 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { weekDays, formatMonth, formatDateFull } from 'bpk-component-calendar/test-utils';
import { format, dateToBoundaries, addMonths, addDays, startOfDay } from 'bpk-component-calendar/src/date-utils';
import BpkDatepicker from './index';

const formatDate = date => format(date, 'DD/MM/YYYY');

const inputProps = {
  onChange: () => null,
  placeholder: 'placeholder',
  large: true,
  docked: true,
};

const inputPropsWithEventHandlers = {
  onClick: action('input onClick'),
  onFocus: action('input onFocus'),
  onBlur: action('input onBlur'),
  onTouchEnd: action('input onTouchEnd'),
  onKeyDown: action('input onKeyDown'),
  onKeyUp: action('input onKeyUp'),
  onChange: () => null,
  placeholder: 'placeholder',
  large: true,
};

/* eslint-disable react/no-multi-comp */
class CalendarContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: props.date,
    };
  }
  render() {
    return (
      <BpkDatepicker
        {...this.props}
        date={this.state.date}
        onDateSelect={(date) => {
          this.setState({ date });
          action('Selected date')(date);
        }}
        onMonthChange={action('Changed month')}
      />
    );
  }
}

CalendarContainer.propTypes = {
  date: PropTypes.instanceOf(Date),
};

CalendarContainer.defaultProps = {
  date: null,
};

class ReturnDatepicker extends Component {
  constructor() {
    super();

    this.minDate = startOfDay(new Date());
    this.maxDate = startOfDay(addMonths(new Date(), 12));
    this.state = {
      departDate: startOfDay(addDays(new Date(), 1)),
      returnDate: startOfDay(addDays(new Date(), 4)),
    };
  }
  render() {
    return (
      <div style={{ display: 'flex' }} id="application-element">
        <BpkDatepicker
          id="depart"
          closeButtonText="Close"
          daysOfWeek={weekDays}
          changeMonthLabel="Change month"
          title="Departure date"
          getApplicationElement={() => document.getElementById('application-element')}
          formatDate={formatDate}
          formatMonth={formatMonth}
          formatDateFull={formatDateFull}
          inputProps={inputProps}
          date={this.state.departDate}
          onDateSelect={(departDate) => {
            this.setState({
              departDate,
              returnDate: dateToBoundaries(this.state.returnDate, departDate, this.maxDate),
            });
            action('Selected departure date')(departDate);
          }}
          onMonthChange={action('Changed month')}
        />
        <BpkDatepicker
          id="return"
          closeButtonText="Close"
          daysOfWeek={weekDays}
          changeMonthLabel="Change month"
          title="Return date"
          getApplicationElement={() => document.getElementById('application-element')}
          formatDate={formatDate}
          formatMonth={formatMonth}
          formatDateFull={formatDateFull}
          inputProps={inputProps}
          date={this.state.returnDate}
          onDateSelect={(returnDate) => {
            this.setState({
              returnDate,
              departDate: dateToBoundaries(this.state.departDate, this.minDate, returnDate),
            });
            action('Selected return date')(returnDate);
          }}
          onMonthChange={action('Changed month')}
        />
      </div>
    );
  }
}
/* eslint-enable react/no-multi-comp */

storiesOf('bpk-component-datepicker', module)
  .add('Default', () => (
    <div id="application-element">
      <CalendarContainer
        id="myDatepicker"
        closeButtonText="Close"
        daysOfWeek={weekDays}
        changeMonthLabel="Change month"
        title="Departure date"
        getApplicationElement={() => document.getElementById('application-element')}
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        date={new Date()}
      />
    </div>
  ))
  .add('Min date in the past', () => (
    <div id="application-element">
      <CalendarContainer
        id="myDatepicker"
        closeButtonText="Close"
        daysOfWeek={weekDays}
        changeMonthLabel="Change month"
        title="Departure date"
        getApplicationElement={() => document.getElementById('application-element')}
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        minDate={new Date(2011, 1, 2)}
        initiallyFocusedDate={new Date()}
      />
    </div>
  ))
  .add('Without date set', () => (
    <div id="application-element">
      <CalendarContainer
        id="myDatepicker"
        closeButtonText="Close"
        daysOfWeek={weekDays}
        changeMonthLabel="Change month"
        title="Departure date"
        getApplicationElement={() => document.getElementById('application-element')}
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
      />
    </div>
  ))
  .add('Passing through props to underlying input', () => (
    <div id="application-element">
      <CalendarContainer
        id="myDatepicker"
        closeButtonText="Close"
        daysOfWeek={weekDays}
        changeMonthLabel="Change month"
        title="Departure date"
        getApplicationElement={() => document.getElementById('application-element')}
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        inputProps={inputPropsWithEventHandlers}
      />
    </div>
  ))
  .add('Depart & Return', () => (
    <ReturnDatepicker />
  ));