@helpscout/hsds-react/components/Datepicker/Datepicker.DailyCalendar.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 = _interopRequireDefault(require("react"));

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

var _hooks = require("@datepicker-react/hooks");

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

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

var _Datepicker3 = _interopRequireDefault(require("./Datepicker.Month"));

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

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

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

function noop() {}

function DailyCalendar(_ref) {
  var activeMonths = _ref.activeMonths,
      _ref$allowFutureDateP = _ref.allowFutureDatePick,
      allowFutureDatePick = _ref$allowFutureDateP === void 0 ? true : _ref$allowFutureDateP,
      _ref$firstDayOfWeek = _ref.firstDayOfWeek,
      firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 1 : _ref$firstDayOfWeek,
      _ref$goToPreviousMont = _ref.goToPreviousMonth,
      goToPreviousMonth = _ref$goToPreviousMont === void 0 ? noop : _ref$goToPreviousMont,
      _ref$goToNextMonth = _ref.goToNextMonth,
      goToNextMonth = _ref$goToNextMonth === void 0 ? noop : _ref$goToNextMonth,
      _ref$numberOfMonths = _ref.numberOfMonths,
      numberOfMonths = _ref$numberOfMonths === void 0 ? 1 : _ref$numberOfMonths,
      _ref$onDeepNavigation = _ref.onDeepNavigationClick,
      onDeepNavigationClick = _ref$onDeepNavigation === void 0 ? noop : _ref$onDeepNavigation;

  var _useMonth = (0, _hooks.useMonth)({
    month: activeMonths[0].month,
    year: activeMonths[0].year
  }),
      monthLabel = _useMonth.monthLabel;

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "c-DailyCalendar",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker4.default, {
      label: monthLabel,
      goPrevious: goToPreviousMonth,
      goNext: goToNextMonth,
      navigationLevel: _Datepicker2.NAVIGATION_LEVELS.MONTH_BY_MONTH,
      canNavigateForward: allowFutureDatePick || (0, _Datepicker.isMonthInThePast)(new Date(activeMonths[0].year, activeMonths[0].month, 1)),
      onDeepNavigationClick: onDeepNavigationClick
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker5.DailyCalendarUI, {
      numberOfMonths: numberOfMonths,
      children: activeMonths.map(function (month) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker3.default, {
          year: month.year,
          month: month.month,
          firstDayOfWeek: firstDayOfWeek
        }, month.year + "-" + month.month);
      })
    })]
  });
}

DailyCalendar.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,

  /** Which day of the week is first in the calendar (0 -> sunday, 1 -> monday, etc) */
  firstDayOfWeek: _propTypes.default.number,

  /** Callback to navigate to the previous month */
  goToPreviousMonth: _propTypes.default.func,

  /** Callback to navigate to the next month */
  goToNextMonth: _propTypes.default.func,

  /** How many months to display at the same time. Note: Currently supported 1 */
  numberOfMonths: _propTypes.default.number,

  /** Callback to navigate to the next level of navigation */
  onDeepNavigationClick: _propTypes.default.func
};
var _default = DailyCalendar;
exports.default = _default;