DayPickerRangeController.js

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

import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';

import isSameDay from '../src/utils/isSameDay';
import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';

import CloseButton from '../src/components/CloseButton';
import KeyboardShortcutRow from '../src/components/KeyboardShortcutRow';

import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';

import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';

const dayPickerRangeControllerInfo = `The ${monospace('DayPickerRangeController')} component is a
  fully controlled version of the ${monospace('DayPicker')} that has built-in rules for selecting a
  date range. Unlike the ${monospace('DayPicker')}, which requires the consumer to explicitly define
  ${monospace('onDayMouseEnter')}, ${monospace('onDayMouseLeave')}, and ${monospace('onDayClick')}
  handlers, the consumer needs simply to maintain the ${monospace('focusedInput')},
  ${monospace('startDate')}, and ${monospace('endDate')} values in state and then pass these down as
  props along with ${monospace('onFocusChange')} and ${monospace('onDatesChange')} callbacks that
  update them appropriately. You can see an example of this implementation <a href=
  "https://github.com/react-dates/react-dates/blob/HEAD/examples/DayPickerRangeControllerWrapper.jsx">
  here</a>. <br/><br/>
  Note that the ${monospace('focusedInput')} prop may be ${monospace('null')}, but if this is the
  case, dates are not selectable. As a result, in the example wrapper, we always force
  ${monospace('focusedInput')} to be truthy in the ${monospace('onFocusChange')} method. <br/><br/>
  The ${monospace('DayPickerRangeController')} is particularly useful if you are interested in the
  ${monospace('DateRangePicker')} functionality and calendar presentation, but would like to
  implement your own inputs.`;

const TestPrevIcon = () => (
  <div
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      left: '22px',
      padding: '3px',
      position: 'absolute',
      top: '20px',
    }}
    tabIndex="0"
  >
    Prev
  </div>
);

const TestNextIcon = () => (
  <div
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      padding: '3px',
      position: 'absolute',
      right: '22px',
      top: '20px',
    }}
    tabIndex="0"
  >
    Next
  </div>
);

const TestBottomPrevIcon = () => (
  <div
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      padding: '3px',
      margin: '-10px 22px 30px',
    }}
    tabIndex="0"
  >
    Prev
  </div>
);

const TestBottomNextIcon = () => (
  <div
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      padding: '3px',
      margin: '-10px 22px 30px',
    }}
    tabIndex="0"
  >
    Next
  </div>
);

const TestCustomInfoPanel = () => (
  <div
    style={{
      padding: '10px 21px',
      borderTop: '1px solid #dce0e0',
      color: '#484848',
    }}
  >
    &#x2755; Some useful info here
  </div>
);

function renderNavPrevButton(buttonProps) {
  const {
    ariaLabel,
    disabled,
    onClick,
    onKeyUp,
    onMouseUp,
  } = buttonProps;

  return (
    <button
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={onClick}
      onKeyUp={onKeyUp}
      onMouseUp={onMouseUp}
      style={{ position: 'absolute', top: 23, left: 22 }}
      type="button"
    >
      &lsaquo; Prev
    </button>
  );
}

function renderNavNextButton(buttonProps) {
  const {
    ariaLabel,
    disabled,
    onClick,
    onKeyUp,
    onMouseUp,
  } = buttonProps;

  return (
    <button
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={onClick}
      onKeyUp={onKeyUp}
      onMouseUp={onMouseUp}
      style={{ position: 'absolute', top: 23, right: 22 }}
      type="button"
    >
      Next
    </button>
  );
}

function renderNavPrevButtonForVerticalScrollable(buttonProps) {
  const {
    ariaLabel,
    disabled,
    onClick,
    onKeyUp,
    onMouseUp,
  } = buttonProps;

  return (
    <button
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={onClick}
      onKeyUp={onKeyUp}
      onMouseUp={onMouseUp}
      style={{ width: '100%', textAlign: 'center' }}
      type="button"
    >
      Prev
    </button>
  );
}

function renderNavNextButtonForVerticalScrollable(buttonProps) {
  const {
    ariaLabel,
    disabled,
    onClick,
    onKeyUp,
    onMouseUp,
  } = buttonProps;

  return (
    <button
      aria-label={ariaLabel}
      disabled={disabled}
      onClick={onClick}
      onKeyUp={onKeyUp}
      onMouseUp={onMouseUp}
      style={{ width: '100%', textAlign: 'center' }}
      type="button"
    >
      Next &rsaquo;
    </button>
  );
}

function renderKeyboardShortcutsButton(buttonProps) {
  const { ref, onClick, ariaLabel } = buttonProps;

  const buttonStyle = {
    backgroundColor: '#914669',
    border: 0,
    borderRadius: 0,
    color: 'inherit',
    font: 'inherit',
    lineHeight: 'normal',
    overflow: 'visible',
    padding: 0,
    cursor: 'pointer',
    width: 26,
    height: 26,
    position: 'absolute',
    bottom: 0,
    right: 0,
  };

  const spanStyle = {
    color: 'white',
    position: 'absolute',
    bottom: 5,
    right: 9,
  };

  return (
    <button
      ref={ref}
      style={buttonStyle}
      type="button"
      aria-label={ariaLabel}
      onClick={onClick}
      onMouseUp={(e) => {
        e.currentTarget.blur();
      }}
    >
      <span style={spanStyle}>?</span>
    </button>
  );
}

function renderKeyboardShortcutsPanel(panelProps) {
  const {
    closeButtonAriaLabel,
    keyboardShortcuts,
    onCloseButtonClick,
    onKeyDown,
    title,
  } = panelProps;

  const PANEL_PADDING_PX = 50;

  return (
    <div style={{
      position: 'fixed',
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      zIndex: 2,
    }}
    >
      <div style={{
        backgroundColor: '#000000',
        opacity: 0.5,
        width: '100%',
        height: '100%',
      }}
      />
      <div style={{
        backgroundColor: '#ffffff',
        padding: PANEL_PADDING_PX,
        width: '50%',
        height: '50%',
        position: 'absolute',
        top: '25%',
        left: '25%',
      }}
      >
        <button
          aria-label={closeButtonAriaLabel}
          onClick={onCloseButtonClick}
          onKeyDown={onKeyDown}
          style={{
            height: 25,
            width: 25,
            position: 'absolute',
            top: PANEL_PADDING_PX,
            right: PANEL_PADDING_PX,
          }}
          type="button"
        >
          <CloseButton />
        </button>
        <div style={{
          fontSize: 16,
          fontWeight: 'bold',
          marginBottom: 16,
        }}
        >
          {title}
        </div>
        {keyboardShortcuts.map(({ action: keyboardShortcutAction, label, unicode }) => (
          <KeyboardShortcutRow
            action={keyboardShortcutAction}
            key={label}
            label={label}
            unicode={unicode}
          />
        ))}
      </div>
    </div>
  );
}

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)
  .addDecorator(InfoPanelDecorator(dayPickerRangeControllerInfo))
  .add('default', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
    />
  )))
  .add('with 7 days range selection', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      startDateOffset={(day) => day.subtract(3, 'days')}
      endDateOffset={(day) => day.add(3, 'days')}
    />
  )))
  .add('with 45 days range selection', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      startDateOffset={(day) => day.subtract(22, 'days')}
      endDateOffset={(day) => day.add(22, 'days')}
    />
  )))
  .add('with 4 days after today range selection', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      endDateOffset={(day) => day.add(4, 'days')}
    />
  )))
  .add('with current week range selection', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      startDateOffset={(day) => day.startOf('week')}
      endDateOffset={(day) => day.endOf('week')}
    />
  )))
  .add('with custom inputs', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      showInputs
    />
  )))
  .add('non-english locale', withInfo()(() => {
    moment.locale('zh-cn');
    return (
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        monthFormat="YYYY[年]MMMM"
      />
    );
  }))
  .add('single month', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      numberOfMonths={1}
    />
  )))
  .add('single month, custom caption', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
      numberOfMonths={1}
      renderMonthElement={({ month, onMonthSelect, onYearSelect }) => (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div>
            <select
              value={month.month()}
              onChange={(e) => { onMonthSelect(month, e.target.value); }}
            >
              {moment.months().map((label, value) => (
                <option value={value}>{label}</option>
              ))}
            </select>
          </div>
          <div>
            <select
              value={month.year()}
              onChange={(e) => { onYearSelect(month, e.target.value); }}
            >
              <option value={moment().year() - 1}>Last year</option>
              <option value={moment().year()}>{moment().year()}</option>
              <option value={moment().year() + 1}>Next year</option>
            </select>
          </div>
        </div>
      )}
    />
  )))
  .add('3 months', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      numberOfMonths={3}
    />
  )))
  .add('vertical', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      orientation={VERTICAL_ORIENTATION}
    />
  )))
  .add('vertical scrollable', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={6}
        verticalHeight={800}
      />
    </div>
  )))
  .add('vertical scrollable with custom month nav', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={3}
        verticalHeight={300}
        navNext={(
          <div style={{ position: 'relative' }}>
            <span
              style={{
                position: 'absolute',
                bottom: 20,
                left: 50,
                fontSize: 24,
                border: '1px solid gray',
                width: 200,
                padding: 10,
              }}
            >
              Show More Months
            </span>
          </div>
        )}
        navPrev={(
          <div style={{ position: 'relative' }}>
            <span
              style={{
                position: 'absolute',
                top: 20,
                left: 50,
                fontSize: 24,
                border: '1px solid gray',
                width: 200,
                padding: 10,
              }}
            >
              Show More Months
            </span>
          </div>
        )}
      />
    </div>
  )))
  .add('vertical scrollable with custom rendered month navigation', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={3}
        verticalHeight={300}
        renderNavPrevButton={renderNavPrevButtonForVerticalScrollable}
        renderNavNextButton={renderNavNextButtonForVerticalScrollable}
      />
    </div>
  )))
  .add('with custom month navigation icons', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      navPrev={<TestPrevIcon />}
      navNext={<TestNextIcon />}
    />
  )))
  .add('with custom month navigation buttons', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      renderNavPrevButton={renderNavPrevButton}
      renderNavNextButton={renderNavNextButton}
    />
  )))
  .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      minDate={moment().subtract(2, 'months').startOf('month')}
      maxDate={moment().add(2, 'months').endOf('month')}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      navPrev={<TestPrevIcon />}
      navNext={<TestNextIcon />}
    />
  )))
  .add('with month navigation positioned at the bottom', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      navPosition={NAV_POSITION_BOTTOM}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
    />
  )))
  .add('with custom month navigation positioned at the bottom', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      navPosition={NAV_POSITION_BOTTOM}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      navPrev={<TestBottomPrevIcon />}
      navNext={<TestBottomNextIcon />}
      dayPickerNavigationInlineStyles={{
        display: 'flex',
        justifyContent: 'space-between',
      }}
    />
  )))
  .add('with outside days enabled', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      numberOfMonths={1}
      enableOutsideDays
    />
  )))
  .add('with month specified on open', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      initialVisibleMonth={() => moment().add(10, 'months')}
    />
  )))
  .add('with minimum nights set', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      minimumNights={3}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      initialStartDate={moment().add(3, 'days')}
      autoFocusEndDate
    />
  )))
  .add('allows single day range', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      minimumNights={0}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      initialStartDate={moment().add(3, 'days')}
      autoFocusEndDate
    />
  )))
  .add('allows all days, including past days', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      isOutsideRange={() => false}
    />
  )))
  .add('allows next two weeks only', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
        || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))}
    />
  )))
  .add('with some blocked dates', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
    />
  )))
  .add('with some highlighted dates', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
    />
  )))
  .add('blocks fridays', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'}
    />
  )))
  .add('with navigation blocked (minDate and maxDate)', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      minDate={moment().subtract(2, 'months').startOf('month')}
      maxDate={moment().add(2, 'months').endOf('month')}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
    />
  )))
  .add('with custom daily details', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      renderDayContents={(day) => day.format('ddd')}
    />
  )))
  .add('with info panel', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      renderCalendarInfo={() => (
        <TestCustomInfoPanel />
      )}
    />
  )))
  .add('with no animation', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      transitionDuration={0}
    />
  )))
  .add('with vertical spacing applied', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      verticalBorderSpacing={16}
    />
  )))
  .add('with custom horizontal month spacing applied', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={6}
        verticalHeight={800}
        horizontalMonthPadding={0}
      />
    </div>
  )))
  .add('with no nav buttons', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      noNavButtons
    />
  )))
  .add('with no nav prev button', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={6}
        verticalHeight={800}
        noNavPrevButton
      />
    </div>
  )))
  .add('with no nav next button', withInfo()(() => (
    <div style={{ height: 500 }}>
      <DayPickerRangeControllerWrapper
        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
        orientation={VERTICAL_SCROLLABLE}
        numberOfMonths={6}
        verticalHeight={800}
        noNavNextButton
      />
    </div>
  )))
  .add('with minimum nights for the hovered date', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      getMinNightsForHoverDate={() => 2}
    />
  )))
  .add('with minimum nights for the hovered date and some blocked dates', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      getMinNightsForHoverDate={() => 2}
      isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))}
    />
  )))
  .add('with custom keyboard shortcuts button', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      renderKeyboardShortcutsButton={renderKeyboardShortcutsButton}
    />
  )))
  .add('with custom keyboard shortcuts panel', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      renderKeyboardShortcutsPanel={renderKeyboardShortcutsPanel}
    />
  )))
  .add('with minimum nights set and daysViolatingMinNightsCanBeClicked set to true', withInfo()(() => (
    <DayPickerRangeControllerWrapper
      daysViolatingMinNightsCanBeClicked
      minimumNights={3}
      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
      onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
      onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
      initialStartDate={moment().add(3, 'days')}
      autoFocusEndDate
    />
  )));