wix-style-react/dist/stories/Calendar/index.story.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _add_days = require('date-fns/add_days');

var _add_days2 = _interopRequireDefault(_add_days);

var _Calendar = require('../../src/Calendar');

var _Calendar2 = _interopRequireDefault(_Calendar);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _ExampleStandard = require('!raw-loader!./ExampleStandard');

var _ExampleStandard2 = _interopRequireDefault(_ExampleStandard);

var _ExampleStandard3 = require('./ExampleStandard');

var _ExampleStandard4 = _interopRequireDefault(_ExampleStandard3);

var _ExampleYearMonths = require('./ExampleYearMonths');

var _ExampleYearMonths2 = _interopRequireDefault(_ExampleYearMonths);

var _ExampleYearMonths3 = require('!raw-loader!./ExampleYearMonths');

var _ExampleYearMonths4 = _interopRequireDefault(_ExampleYearMonths3);

var _ExampleTooltip = require('./ExampleTooltip');

var _ExampleTooltip2 = _interopRequireDefault(_ExampleTooltip);

var _ExampleTooltip3 = require('!raw-loader!./ExampleTooltip');

var _ExampleTooltip4 = _interopRequireDefault(_ExampleTooltip3);

var _Grid = require('wix-style-react/Grid');

var _storySettings = require('./storySettings');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = {
  category: _storySettings.storySettings.category,
  storyName: _storySettings.storySettings.storyName,

  component: _Calendar2.default,
  componentPath: '../../src/Calendar',

  componentProps: function componentProps(setState) {
    return {
      onChange: function onChange(value) {
        return setState({ value: value });
      },
      showYearDropdown: false,
      showMonthDropdown: false,
      shouldCloseOnSelect: true,
      locale: 'en',
      excludePastDates: false,
      selectionMode: 'day',
      dataHook: _storySettings.storySettings.dataHook
    };
  },
  exampleProps: {
    value: [{
      label: '1st of Today\'s month',
      value: new Date(new Date().getFullYear(), new Date().getMonth(), 1)
    }, {
      label: 'Today',
      value: new Date()
    }, {
      label: 'Next Week (Range)',
      value: { from: new Date(), to: (0, _add_days2.default)(new Date(), 6) }
    }, {
      label: 'Last Week (Range)',
      value: { from: (0, _add_days2.default)(new Date(), -6), to: new Date() }
    }]
  },
  examples: _react2.default.createElement(
    _Grid.Container,
    null,
    _react2.default.createElement(
      _Grid.Row,
      null,
      _react2.default.createElement(
        _Grid.Col,
        { span: 4 },
        _react2.default.createElement(
          _CodeExample2.default,
          { title: 'Standard', code: _ExampleStandard2.default },
          _react2.default.createElement(_ExampleStandard4.default, null)
        )
      ),
      _react2.default.createElement(
        _Grid.Col,
        { span: 4 },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'With Years and Months selection',
            code: _ExampleYearMonths4.default
          },
          _react2.default.createElement(_ExampleYearMonths2.default, null)
        )
      ),
      _react2.default.createElement(
        _Grid.Col,
        { span: 4 },
        _react2.default.createElement(
          _CodeExample2.default,
          { title: 'Within a Tooltip', code: _ExampleTooltip4.default },
          _react2.default.createElement(_ExampleTooltip2.default, null)
        )
      )
    )
  )
};