@prefect9/ui/components/DatePickerRangeModal/Month.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _datetime = _interopRequireDefault(require("@prefect9/datetime"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Month = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  let {
    month,
    daysOfWeek,
    rangeStartDay
  } = _ref;
  const [daysContent, setDaysContent] = (0, _react.useState)([]);
  const [nameOfMonth, setNameOfMonth] = (0, _react.useState)('');
  (0, _react.useEffect)(() => {
    setNameOfMonth(month.getMonthName());
    const newDaysContent = [];
    const firstDateOfMonth = month.getFirstDayOfMonth();
    const {
      weekDay: firstWeekDay,
      month: monthNumber,
      year
    } = firstDateOfMonth.getDate();
    const lastDateOfMonth = month.getLastDayOfMonth();
    const {
      day: daysInMonth
    } = lastDateOfMonth.getDate();

    // padding before first day
    for (let weekDayIndex in daysOfWeek.scheme) {
      const weekDay = daysOfWeek.scheme[weekDayIndex];
      if (weekDay === firstWeekDay) break;
      newDaysContent.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}, "fp_".concat(weekDayIndex)));
    }
    for (let day = 1; day <= daysInMonth; day++) {
      const date = new _datetime.default(year, monthNumber, day);
      newDaysContent.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-day": true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: day
        })
      }, "d_".concat(day)));
    }
    setDaysContent(newDaysContent);
  }, [month]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: ref,
    className: "prefect9-modal-calendar__modal-month",
    "data-range-started": !!rangeStartDay,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-modal-calendar__modal-month__name",
      children: nameOfMonth
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-modal-calendar__modal-month__days",
      children: daysContent
    })]
  });
});
var _default = exports.default = Month;