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

A collection of UI components from Panther labs

import React from 'react';
import dayjs from 'dayjs';
import chunk from 'lodash/chunk';
import Flex from '../Flex';
import Box from '../Box';
import Day from './Day';
import { noop } from '../../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 = dayjs().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 ? noop : _ref$onDaySelect;
  var weeks = React.useMemo(function () {
    var weekCount = getWeekCount(year, month);
    var monthDate = dayjs().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 chunk(days, 7);
  }, [year, month]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
    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.createElement(Box, {
      role: "columnheader",
      key: day.abbr
    }, /*#__PURE__*/React.createElement(Box, {
      as: "abbr",
      textDecoration: "none",
      fontWeight: "bold",
      fontSize: "small",
      title: day.name
    }, day.abbr));
  }))), /*#__PURE__*/React.createElement(Box, {
    display: "table",
    sx: {
      borderCollapse: 'separate',
      borderSpacing: '0 2px'
    }
  }, /*#__PURE__*/React.createElement(Box, {
    display: "table-row-group"
  }, weeks.map(function (week, monthIndex) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line
      React.createElement(Box, {
        display: "table-row",
        key: year + "-" + month + "-" + monthIndex + "-week"
      }, week.map(function (day, dayIndex) {
        return /*#__PURE__*/React.createElement(Day, {
          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"
        });
      }))
    );
  }))));
};

export default Month;