Adds story for DayPickerRangeController

.storybook/config.js

@@ -17,6 +17,7 @@ function loadStories() {
   require('../stories/SingleDatePicker_input');
   require('../stories/SingleDatePicker_calendar');
   require('../stories/SingleDatePicker_day');
+  require('../stories/DayPickerRangeController');
   require('../stories/DayPicker');
 }
 

examples/DayPickerRangeControllerWrapper.jsx

+/* eslint-disable react/no-unused-prop-types */
+import React, { PropTypes } from 'react';
+import momentPropTypes from 'react-moment-proptypes';
+import { forbidExtraProps } from 'airbnb-prop-types';
+import moment from 'moment';
+import omit from 'lodash.omit';
+
+import DayPickerRangeController from '../src/components/DayPickerRangeController';
+
+import ScrollableOrientationShape from '../src/shapes/ScrollableOrientationShape';
+
+import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION } from '../constants';
+import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
+
+const propTypes = forbidExtraProps({
+  // example props for the demo
+  autoFocusEndDate: PropTypes.bool,
+  initialStartDate: momentPropTypes.momentObj,
+  initialEndDate: momentPropTypes.momentObj,
+
+  keepOpenOnDateSelect: PropTypes.bool,
+  minimumNights: PropTypes.number,
+  isOutsideRange: PropTypes.func,
+  isDayBlocked: PropTypes.func,
+  isDayHighlighted: PropTypes.func,
+
+  // DayPicker props
+  enableOutsideDays: PropTypes.bool,
+  numberOfMonths: PropTypes.number,
+  orientation: ScrollableOrientationShape,
+  withPortal: PropTypes.bool,
+  initialVisibleMonth: PropTypes.func,
+
+  navPrev: PropTypes.node,
+  navNext: PropTypes.node,
+
+  onPrevMonthClick: PropTypes.func,
+  onNextMonthClick: PropTypes.func,
+  onOutsideClick: PropTypes.func,
+  renderDay: PropTypes.func,
+
+  // i18n
+  monthFormat: PropTypes.string,
+});
+
+const defaultProps = {
+  // example props for the demo
+  autoFocusEndDate: false,
+  initialStartDate: null,
+  initialEndDate: null,
+
+  // day presentation and interaction related props
+  renderDay: null,
+  minimumNights: 1,
+  isDayBlocked: () => false,
+  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isDayHighlighted: () => false,
+  enableOutsideDays: false,
+
+  // calendar presentation and interaction related props
+  orientation: HORIZONTAL_ORIENTATION,
+  withPortal: false,
+  initialVisibleMonth: () => moment(),
+  numberOfMonths: 2,
+  onOutsideClick() {},
+  keepOpenOnDateSelect: false,
+
+  // navigation related props
+  navPrev: null,
+  navNext: null,
+  onPrevMonthClick() {},
+  onNextMonthClick() {},
+
+  // internationalization
+  monthFormat: 'MMMM YYYY',
+};
+
+class DayPickerRangeControllerWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      focusedInput: props.autoFocusEndDate ? END_DATE : START_DATE,
+      startDate: props.initialStartDate,
+      endDate: props.initialEndDate,
+    };
+
+    this.onDatesChange = this.onDatesChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
+  }
+
+  onDatesChange({ startDate, endDate }) {
+    this.setState({ startDate, endDate });
+  }
+
+  onFocusChange(focusedInput) {
+    this.setState({
+      focusedInput: !focusedInput ? START_DATE : focusedInput,
+    });
+  }
+
+  render() {
+    const { focusedInput, startDate, endDate } = this.state;
+
+    const props = omit(this.props, [
+      'autoFocus',
+      'autoFocusEndDate',
+      'initialStartDate',
+      'initialEndDate',
+    ]);
+
+    return (
+      <div>
+        <DayPickerRangeController
+          {...props}
+          onDatesChange={this.onDatesChange}
+          onFocusChange={this.onFocusChange}
+          focusedInput={focusedInput}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      </div>
+    );
+  }
+}
+
+DayPickerRangeControllerWrapper.propTypes = propTypes;
+DayPickerRangeControllerWrapper.defaultProps = defaultProps;
+
+export default DayPickerRangeControllerWrapper;

stories/DateRangePicker_day.js

@@ -75,4 +75,3 @@ storiesOf('DRP - Day Props', module)
       autoFocus
     />
   ));
-

stories/DayPickerRangeController.js

+import React from 'react';
+import moment from 'moment';
+import { storiesOf } from '@kadira/storybook';
+
+import isSameDay from '../src/utils/isSameDay';
+import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
+
+import { VERTICAL_ORIENTATION } from '../constants';
+
+import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
+
+const TestPrevIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+    }}
+  >
+    Prev
+  </span>
+);
+
+const TestNextIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+    }}
+  >
+    Next
+  </span>
+);
+
+const datesList = [
+  moment(),
+  moment().add(1, 'days'),
+  moment().add(3, 'days'),
+  moment().add(9, 'days'),
+  moment().add(10, 'days'),
+  moment().add(11, 'days'),
+  moment().add(12, 'days'),
+  moment().add(13, 'days'),
+];
+
+storiesOf('DayPickerRangeController', module)
+  .addWithInfo('default', () => (
+    <DayPickerRangeControllerWrapper />
+  ))
+  .addWithInfo('non-english locale', () => {
+    moment.locale('zh-cn');
+    return (
+      <DayPickerRangeControllerWrapper
+        monthFormat="YYYY[年]MMMM"
+      />
+    );
+  })
+  .addWithInfo('single month', () => (
+    <DayPickerRangeControllerWrapper numberOfMonths={1} />
+  ))
+  .addWithInfo('3 months', () => (
+    <DayPickerRangeControllerWrapper numberOfMonths={3} />
+  ))
+  .addWithInfo('vertical', () => (
+    <DayPickerRangeControllerWrapper
+      orientation={VERTICAL_ORIENTATION}
+    />
+  ))
+  .addWithInfo('with custom month navigation', () => (
+    <DayPickerRangeControllerWrapper
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
+    />
+  ))
+  .addWithInfo('with outside days enabled', () => (
+    <DayPickerRangeControllerWrapper
+      numberOfMonths={1}
+      enableOutsideDays
+    />
+  ))
+  .addWithInfo('with month specified on open', () => (
+    <DayPickerRangeControllerWrapper
+      initialVisibleMonth={() => moment('04 2017', 'MM YYYY')}
+    />
+  ))
+  .addWithInfo('with minimum nights set', () => (
+    <DayPickerRangeControllerWrapper
+      minimumNights={3}
+      initialStartDate={moment().add(3, 'days')}
+      autoFocusEndDate
+    />
+  ))
+  .addWithInfo('allows single day range', () => (
+    <DayPickerRangeControllerWrapper
+      minimumNights={0}
+      initialStartDate={moment().add(3, 'days')}
+      autoFocusEndDate
+    />
+  ))
+  .addWithInfo('allows all days, including past days', () => (
+    <DayPickerRangeControllerWrapper
+      isOutsideRange={() => false}
+    />
+  ))
+  .addWithInfo('allows next two weeks only', () => (
+    <DayPickerRangeControllerWrapper
+      isOutsideRange={day =>
+        !isInclusivelyAfterDay(day, moment()) ||
+        isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
+      }
+    />
+  ))
+  .addWithInfo('with some blocked dates', () => (
+    <DayPickerRangeControllerWrapper
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
+  ))
+  .addWithInfo('with some highlighted dates', () => (
+    <DayPickerRangeControllerWrapper
+      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
+  ))
+  .addWithInfo('blocks fridays', () => (
+    <DayPickerRangeControllerWrapper
+      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+    />
+  ))
+  .addWithInfo('with custom daily details', () => (
+    <DayPickerRangeControllerWrapper
+      renderDay={day => day.format('ddd')}
+    />
+  ));