wix-style-react/dist/es/stories/components/CalendarPanel/CalendarPanelPlaygroundConfig.js

wix-style-react

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); } }

import React from 'react';
import addDays from 'date-fns/add_days';
import addMonths from 'date-fns/add_months';
import startOfMonth from 'date-fns/start_of_month';
import endOfMonth from 'date-fns/end_of_month';

import CalendarPanelFooter, { defaultDateToStringOptions } from '../../../src/CalendarPanelFooter';

// 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: addDays(TODAY, -1) }, { id: 3, value: 'Silvester', selectedDays: new Date(2018, 11, 31) }];

var rangePresets = [{
  id: 1,
  value: 'Next 7 Days',
  selectedDays: { from: TODAY, to: addDays(TODAY, 6) }
}, {
  id: 2,
  value: 'Last 7 Days',
  selectedDays: { from: addDays(TODAY, -6), to: TODAY }
}, {
  id: 3,
  value: 'Full Month',
  selectedDays: { from: startOfMonth(TODAY), to: endOfMonth(TODAY) }
}, {
  id: 4,
  value: '2 Full Month',
  selectedDays: {
    from: startOfMonth(TODAY),
    to: endOfMonth(addMonths(TODAY, 1))
  }
}, {
  id: 5,
  value: 'Partial Month',
  selectedDays: { from: TODAY, to: addMonths(TODAY, 1) }
}, {
  id: 6,
  value: 'Month In Past',
  selectedDays: {
    from: startOfMonth(addMonths(TODAY, -3)),
    to: endOfMonth(addMonths(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: addDays(TODAY, offset - 1) }
  };
})));

export 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 React.createElement(CalendarPanelFooter, {
            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', defaultDateToStringOptions);
            }
          });
        }
      };
    },

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