wix-style-react/dist/stories/components/CalendarPanel/CalendarPanelPlaygroundConfig.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 _add_months = require('date-fns/add_months');

var _add_months2 = _interopRequireDefault(_add_months);

var _start_of_month = require('date-fns/start_of_month');

var _start_of_month2 = _interopRequireDefault(_start_of_month);

var _end_of_month = require('date-fns/end_of_month');

var _end_of_month2 = _interopRequireDefault(_end_of_month);

var _CalendarPanelFooter = require('../../../src/CalendarPanelFooter');

var _CalendarPanelFooter2 = _interopRequireDefault(_CalendarPanelFooter);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

// We don't actually show today because tests are done on the auto-example and we want them to be consistent.
var TODAY = new Date(2018, 0, 10);

var dayPresets = [{ id: 1, value: 'Today', selectedDays: TODAY }, { id: 2, value: 'Yesterday', selectedDays: (0, _add_days2.default)(TODAY, -1) }, { id: 3, value: 'Silvester', selectedDays: new Date(2018, 11, 31) }];

var rangePresets = [{
  id: 1,
  value: 'Next 7 Days',
  selectedDays: { from: TODAY, to: (0, _add_days2.default)(TODAY, 6) }
}, {
  id: 2,
  value: 'Last 7 Days',
  selectedDays: { from: (0, _add_days2.default)(TODAY, -6), to: TODAY }
}, {
  id: 3,
  value: 'Full Month',
  selectedDays: { from: (0, _start_of_month2.default)(TODAY), to: (0, _end_of_month2.default)(TODAY) }
}, {
  id: 4,
  value: '2 Full Month',
  selectedDays: {
    from: (0, _start_of_month2.default)(TODAY),
    to: (0, _end_of_month2.default)((0, _add_months2.default)(TODAY, 1))
  }
}, {
  id: 5,
  value: 'Partial Month',
  selectedDays: { from: TODAY, to: (0, _add_months2.default)(TODAY, 1) }
}, {
  id: 6,
  value: 'Month In Past',
  selectedDays: {
    from: (0, _start_of_month2.default)((0, _add_months2.default)(TODAY, -3)),
    to: (0, _end_of_month2.default)((0, _add_months2.default)(TODAY, -3))
  }
}].concat(_toConsumableArray([1, 2, 3, 4, 5, 6, 8, 9].map(function (offset) {
  return {
    id: 6 + offset,
    value: 'Next ' + offset + ' days',
    selectedDays: { from: TODAY, to: (0, _add_days2.default)(TODAY, offset - 1) }
  };
})));

exports.default = function (_ref) {
  var dataHook = _ref.dataHook;
  return {
    componentProps: function componentProps(setState) {
      return {
        dataHook: dataHook,
        onChange: function onChange(value) {
          return setState({ value: value });
        },
        selectionMode: 'day',
        presets: rangePresets,
        value: rangePresets[0].selectedDays,
        footer: function footer(_ref2) {
          var selectedDays = _ref2.selectedDays,
              submitDisabled = _ref2.submitDisabled;
          return _react2.default.createElement(_CalendarPanelFooter2.default, {
            primaryActionLabel: 'Submit',
            primaryActionOnClick: function primaryActionOnClick() {
              return alert('Submit clicked');
            },
            primaryActionDisabled: submitDisabled,
            secondaryActionLabel: 'Cancel',
            secondaryActionOnClick: function secondaryActionOnClick() {
              return alert('Cancel clicked');
            },
            selectedDays: selectedDays,
            dateToString: function dateToString(date) {
              return date.toLocaleDateString('en-US', _CalendarPanelFooter.defaultDateToStringOptions);
            }
          });
        }
      };
    },

    exampleProps: {
      presets: [{
        label: 'Day Presets',
        value: dayPresets
      }, {
        label: 'Range Presets',
        value: rangePresets
      }]
    }
  };
};