pouncejs/dist/cjs/components/DateInput/Month.js

A collection of UI components from Panther labs

"use strict";

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

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

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

var _dayjs = _interopRequireDefault(require("dayjs"));

var _chunk = _interopRequireDefault(require("lodash/chunk"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _Box = _interopRequireDefault(require("../Box"));

var _Day = _interopRequireDefault(require("./Day"));

var _helpers = require("../../utils/helpers");

var DAYS = [{
  abbr: 'Mo',
  name: 'Monday'
}, {
  abbr: 'Tu',
  name: 'Tuesday'
}, {
  abbr: 'We',
  name: 'Wednesday'
}, {
  abbr: 'Th',
  name: 'Thursday'
}, {
  abbr: 'Fr',
  name: 'Friday'
}, {
  abbr: 'Sa',
  name: 'Saturday'
}, {
  abbr: 'Su',
  name: 'Sunday'
}];

var getWeekCount = function getWeekCount(year, month) {
  var firstDay = (0, _dayjs.default)().month(month).year(year).date(1);
  var daysCount = firstDay.daysInMonth();
  var add = firstDay.day() === 0 ? 7 : firstDay.day();
  return Math.ceil((daysCount + add) / 7);
};

var Month = function Month(_ref) {
  var year = _ref.year,
      month = _ref.month,
      daysSelected = _ref.daysSelected,
      timezone = _ref.timezone,
      _ref$onDaySelect = _ref.onDaySelect,
      onDaySelect = _ref$onDaySelect === void 0 ? _helpers.noop : _ref$onDaySelect;

  var weeks = _react.default.useMemo(function () {
    var weekCount = getWeekCount(year, month);
    var monthDate = (0, _dayjs.default)().month(month).year(year).date(1);
    var daysCount = monthDate.daysInMonth();
    var start = monthDate.day();
    var days = Array(weekCount * 7);
    var step = start === 0 ? 7 : start;

    for (var index = 0; index <= daysCount; index++) {
      days[index + step - 2] = index;
    }

    return (0, _chunk.default)(days, 7);
  }, [year, month]);

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Flex.default, {
    role: "row",
    justify: "space-around",
    mb: 2,
    py: 2,
    borderTop: "1px solid",
    borderBottom: "1px solid",
    borderColor: "navyblue-300"
  }, DAYS.map(function (day) {
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      role: "columnheader",
      key: day.abbr
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      as: "abbr",
      textDecoration: "none",
      fontWeight: "bold",
      fontSize: "small",
      title: day.name
    }, day.abbr));
  }))), /*#__PURE__*/_react.default.createElement(_Box.default, {
    display: "table",
    sx: {
      borderCollapse: 'separate',
      borderSpacing: '0 2px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    display: "table-row-group"
  }, weeks.map(function (week, monthIndex) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line
      _react.default.createElement(_Box.default, {
        display: "table-row",
        key: year + "-" + month + "-" + monthIndex + "-week"
      }, week.map(function (day, dayIndex) {
        return /*#__PURE__*/_react.default.createElement(_Day.default, {
          onDaySelect: onDaySelect,
          daysSelected: daysSelected,
          year: year,
          month: month,
          day: day,
          isLastRow: weeks.length === monthIndex + 1,
          timezone: timezone,
          key: // eslint-disable-next-line
          year + "-" + month + "-" + monthIndex + "-" + dayIndex + "-week"
        });
      }))
    );
  }))));
};

var _default = Month;
exports.default = _default;