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

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

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

var _Datepicker = _interopRequireDefault(require("../Datepicker/Datepicker.Day"));

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

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

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

var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
  displayName: "DatepickerMonth___StyledDiv",
  componentId: "sc-1uo2un5-0"
})({
  textAlign: 'center'
});

function Month(_ref) {
  var year = _ref.year,
      month = _ref.month,
      firstDayOfWeek = _ref.firstDayOfWeek;

  var _useMonth = (0, _hooks.useMonth)({
    year: year,
    month: month,
    firstDayOfWeek: firstDayOfWeek,
    dayLabelFormat: function dayLabelFormat(date) {
      return date.getDate();
    }
  }),
      days = _useMonth.days,
      weekdayLabels = _useMonth.weekdayLabels;

  var currentMonthDate = new Date(year, month, 1);
  var leadingDays = (0, _Datepicker3.getLeadingDays)(currentMonthDate, firstDayOfWeek);
  var trailingDays = (0, _Datepicker3.getTrailingDays)(currentMonthDate, leadingDays, days);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "c-DatepickerMonth",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker2.WeekdaysRowUI, {
      className: "WeekdaysRow",
      children: weekdayLabels.map(function (dayLabel) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledDiv, {
          className: "WeekdayLabel",
          children: dayLabel
        }, dayLabel);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Datepicker2.DaysGridUI, {
      className: "DaysGrid",
      children: [leadingDays.map(function (day) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.default, {
          date: day.date,
          dayLabel: day.dayLabel,
          leading: true
        }, (0, _Datepicker3.getValidDateTimeString)(day.date));
      }), days.map(function (day) {
        if (typeof day === 'object') {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.default, {
            date: day.date,
            dayLabel: day.dayLabel
          }, (0, _Datepicker3.getValidDateTimeString)(day.date));
        }

        return null;
      }), trailingDays.map(function (day) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datepicker.default, {
          date: day.date,
          dayLabel: day.dayLabel,
          trailing: true
        }, (0, _Datepicker3.getValidDateTimeString)(day.date));
      })]
    })]
  });
}

var _default = Month;
exports.default = _default;