DayPicker.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
import DayPicker from '../src/components/DayPicker';

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

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

const TestNextIcon = () => (
  <div
    style={{
      border: '1px solid #dce0e0',
      backgroundColor: '#fff',
      color: '#484848',
      padding: '3px',
      position: 'absolute',
      right: '22px',
      top: '20px',
      width: '40px',
    }}
    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 &rsaquo;
    </button>
  );
}

storiesOf('DayPicker', module)
  .add('default', withInfo()(() => (
    <DayPicker />
  )))
  .add('with custom day size', withInfo()(() => (
    <DayPicker daySize={50} />
  )))
  .add('single month', withInfo()(() => (
    <DayPicker numberOfMonths={1} />
  )))
  .add('3 months', withInfo()(() => (
    <DayPicker numberOfMonths={3} />
  )))
  .add('vertical', withInfo()(() => (
    <DayPicker
      numberOfMonths={2}
      orientation={VERTICAL_ORIENTATION}
    />
  )))
  .add('vertically scrollable with 12 months', withInfo()(() => (
    <div
      style={{
        height: 568,
        width: 320,
      }}
    >
      <DayPicker
        numberOfMonths={12}
        orientation={VERTICAL_SCROLLABLE}
      />
    </div>
  )))
  .add('vertical with custom day size', withInfo()(() => (
    <DayPicker
      numberOfMonths={2}
      orientation={VERTICAL_ORIENTATION}
      daySize={50}
    />
  )))
  .add('vertical with custom height', withInfo()(() => (
    <DayPicker
      numberOfMonths={2}
      orientation={VERTICAL_ORIENTATION}
      verticalHeight={568}
    />
  )))
  .add('vertical with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <DayPicker
        numberOfMonths={2}
        orientation={VERTICAL_ORIENTATION}
        isRTL
      />
    </DirectionProvider>
  )))
  .add('vertically scrollable with DirectionProvider', withInfo()(() => (
    <DirectionProvider direction={DIRECTIONS.RTL}>
      <div
        style={{
          height: 568,
          width: 320,
        }}
      >
        <DayPicker
          numberOfMonths={12}
          orientation={VERTICAL_SCROLLABLE}
        />
      </div>
    </DirectionProvider>
  )))
  .add('with custom arrows', withInfo()(() => (
    <DayPicker
      navPrev={<TestPrevIcon />}
      navNext={<TestNextIcon />}
    />
  )))
  .add('with custom navigation buttons', withInfo()(() => (
    <DayPicker
      renderNavPrevButton={renderNavPrevButton}
      renderNavNextButton={renderNavNextButton}
    />
  )))
  .add('with custom details', withInfo()(() => (
    <DayPicker
      renderDayContents={(day) => (day.day() % 6 === 5 ? '😻' : day.format('D'))}
    />
  )))
  .add('vertical with fixed-width container', withInfo()(() => (
    <div style={{ width: '400px' }}>
      <DayPicker
        numberOfMonths={2}
        orientation={VERTICAL_ORIENTATION}
      />
    </div>
  )))
  .add('with info panel', withInfo()(() => (
    <DayPicker
      renderCalendarInfo={() => (
        <TestCustomInfoPanel />
      )}
    />
  )))
  .add('with custom week header text', withInfo()(() => (
    <DayPicker
      renderWeekHeaderElement={(day) => (
        <strong style={{ color: '#FE01E5' }}><small>{day.toUpperCase()}</small></strong>
      )}
    />
  )))
  .add('with custom week day format', withInfo()(() => (
    <DayPicker
      weekDayFormat="ddd"
    />
  )))
  .add('with no animation', withInfo()(() => (
    <DayPicker
      transitionDuration={0}
    />
  )))
  .add('noBorder', withInfo()(() => (
    <DayPicker noBorder />
  )));