@helpscout/hsds-react/components/Datepicker/Datepicker.PeriodCalendar.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Datepicker = require("./Datepicker.utils");

var _Datepicker2 = _interopRequireDefault(require("./Datepicker.Navigator"));

var _Datepicker3 = require("./Datepicker.css");

var _Datepicker4 = require("./Datepicker.constants");

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function noop() {}

function PeriodCalendar(_ref) {
  var activeMonths = _ref.activeMonths,
      _ref$allowFutureDateP = _ref.allowFutureDatePick,
      allowFutureDatePick = _ref$allowFutureDateP === void 0 ? true : _ref$allowFutureDateP,
      _ref$goToDate = _ref.goToDate,
      goToDate = _ref$goToDate === void 0 ? noop : _ref$goToDate,
      _ref$goToPreviousYear = _ref.goToPreviousYear,
      goToPreviousYear = _ref$goToPreviousYear === void 0 ? noop : _ref$goToPreviousYear,
      _ref$goToNextYear = _ref.goToNextYear,
      goToNextYear = _ref$goToNextYear === void 0 ? noop : _ref$goToNextYear,
      startDate = _ref.startDate;
  var todaysDate = new Date();
  var todaysMonth = todaysDate.getMonth();
  var todaysYear = todaysDate.getFullYear();
  var activeMonth = activeMonths[0].month;
  var activeYear = activeMonths[0].year;
  var selectedYear = startDate ? startDate.getFullYear() : '';

  var _useState = (0, _react.useState)(_Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR),
      mode = _useState[0],
      setMode = _useState[1];

  var _useState2 = (0, _react.useState)((0, _Datepicker.getActiveYearRange)(activeYear, true)),
      yearRange = _useState2[0],
      setYearRange = _useState2[1];

  var firstYearInRange = yearRange[0];
  var lastYearInRange = yearRange[yearRange.length - 1];
  var navigatorLabel = mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR ? activeYear : firstYearInRange + "\u2013" + lastYearInRange; // note the 'en dash'

  function canNavigateForward() {
    if (mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR) {
      return allowFutureDatePick || activeYear < todaysYear;
    }

    return allowFutureDatePick || lastYearInRange < todaysYear;
  }

  function renderMonthsByYear() {
    return _Datepicker4.MONTHS.map(function (month, index) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker3.PeriodButtonUI, {
        className: (0, _classnames.default)(index === todaysMonth && activeYear === todaysYear && 'is-this-period', index === activeMonth && activeYear === selectedYear && 'is-selected'),
        "aria-selected": index === activeMonth && activeYear === selectedYear,
        disabled: !allowFutureDatePick && index > todaysMonth && activeYear >= todaysYear,
        onClick: function onClick() {
          goToDate(new Date(activeYear, index, 1), true);
        },
        type: "button",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
          dateTime: activeYear + "-" + (index + 1).toString().padStart(2, '0'),
          children: month.slice(0, 3)
        })
      }, month);
    });
  }

  function renderYearsByYearsRange() {
    return yearRange.map(function (year) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker3.PeriodButtonUI, {
        className: (0, _classnames.default)(year === todaysYear && 'is-this-period', year === selectedYear && 'is-selected'),
        "aria-selected": year === selectedYear,
        disabled: !allowFutureDatePick && year > todaysYear,
        onClick: function onClick() {
          setMode(_Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR);
          goToDate(new Date(year, 0, 1), false);
        },
        type: "button",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
          dateTime: "" + year,
          children: year
        })
      }, year);
    });
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "c-PeriodCalendar",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker2.default, {
      canNavigateForward: canNavigateForward(),
      navigationLevel: mode,
      label: navigatorLabel,
      goNext: function goNext() {
        if (mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR) {
          goToNextYear();
        } else {
          setYearRange((0, _Datepicker.getActiveYearRange)(lastYearInRange + 13, false));
        }
      },
      goPrevious: function goPrevious() {
        if (mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR) {
          goToPreviousYear();
        } else {
          setYearRange((0, _Datepicker.getActiveYearRange)(firstYearInRange, false));
        }
      },
      onDeepNavigationClick: function onDeepNavigationClick() {
        if (mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR) {
          setMode(_Datepicker4.NAVIGATION_LEVELS.YEAR_RANGES);
        }
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker3.PeriodUI, {
      role: "grid",
      className: (0, _classnames.default)('c-Period', mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR ? 'is-mode-months' : 'is-mode-years'),
      children: mode === _Datepicker4.NAVIGATION_LEVELS.YEAR_BY_YEAR ? renderMonthsByYear() : renderYearsByYearsRange()
    })]
  });
}

PeriodCalendar.propTypes = {
  /** The current month(s) active in the calendar */
  activeMonths: _propTypes.default.arrayOf(_propTypes.default.any),

  /** Whether is possible to pick a date in the future */
  allowFutureDatePick: _propTypes.default.bool,

  /** Callback to navigate to the previous year */
  goToPreviousYear: _propTypes.default.func,

  /** Callback to navigate to the next year */
  goToNextYear: _propTypes.default.func,

  /** Callback to set the calendar to a chosen year */
  goToDate: _propTypes.default.func
};
var _default = PeriodCalendar;
exports.default = _default;