@spaced-out/ui-design-system/lib/components/DateRangePicker/Calendar.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CalendarMobile = exports.Calendar = void 0;
var React = _interopRequireWildcard(require("react"));
var _moment = _interopRequireDefault(require("moment"));
var _utils = require("../../utils");
var _dateRangePicker = require("../../utils/date-range-picker");
var _qa = require("../../utils/qa");
var _Day = require("./Day");
var _Text = require("../Text");
var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const WeekDayHeader = _ref => {
  let {
    t,
    testId
  } = _ref;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: _CalendarModule.default.calendarRow,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: 'weekdays'
    }),
    children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
      className: _CalendarModule.default.calendarRowItem,
      color: _Text.TEXT_COLORS.tertiary,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: `weekday-${day}`
      }),
      children: (0, _dateRangePicker.getTranslation)(t, day)
    }, day))
  });
};
const Calendar = _ref2 => {
  let {
    value,
    minDate,
    maxDate = (0, _utils.formatIsoDate)(),
    handlers,
    hoverDay,
    dateRange,
    inHoverRange,
    today,
    t,
    testId
  } = _ref2;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _CalendarModule.default.calendar,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: `calendar-${value}`
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WeekDayHeader, {
      t: t,
      testId: testId
    }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _CalendarModule.default.calendarRow,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: `week-${index}`
      }),
      children: week.map(date => {
        const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
        const isStart = (0, _utils.isStartOfRange)(dateRange, date);
        const isEnd = (0, _utils.isEndOfRange)(dateRange, date);
        const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
        const {
          onDayClick,
          onDayHover
        } = handlers;
        const dateValue = _moment.default.utc(date);
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Day.Day, {
          date: date,
          filled: isStart || isEnd,
          onClick: () => onDayClick(date),
          onHover: () => onDayHover(date),
          outlined: (0, _dateRangePicker.isSame)(date, today, 'd'),
          disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || (0, _dateRangePicker.isAfter)(date, maxDate) || !(0, _dateRangePicker.isSame)(date, value, 'month'),
          endOfRange: isEnd && !isRangeValid,
          highlighted: highlighted && !isRangeValid,
          startOfRange: isStart && !isRangeValid,
          value: dateValue.date().toString(),
          hoverDay: hoverDay,
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: `day-${date}`
          }),
          inDateRange: Boolean(dateRange.startDate && dateRange.endDate && (0, _utils.inDateRange)(dateRange, date))
        }, date);
      })
    }, week[index]))]
  });
};
exports.Calendar = Calendar;
const CalendarMobile = _ref3 => {
  let {
    value,
    minDate,
    maxDate = (0, _utils.formatIsoDate)(),
    handlers,
    hoverDay,
    dateRange,
    inHoverRange,
    today,
    t,
    testId
  } = _ref3;
  const monthMoment = _moment.default.utc(value, 'YYYY-MM');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _CalendarModule.default.calendarMobile,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: `calendar-${value}`
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WeekDayHeader, {
      t: t,
      testId: testId
    }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _CalendarModule.default.calendarRow,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: `week-${index}`
      }),
      children: week.map(date => {
        const isStart = date === dateRange.startDate;
        const isEnd = date === dateRange.endDate;
        const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
        const {
          onDayClick,
          onDayHover
        } = handlers;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Day.Day, {
          date: date,
          filled: isStart || isEnd,
          startOfRange: isStart && !dateRange.endDate,
          endOfRange: isEnd && !dateRange.startDate,
          highlighted: highlighted,
          outlined: date === today,
          disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || maxDate && (0, _dateRangePicker.isAfter)(date, maxDate) || !monthMoment.isSame(_moment.default.utc(date), 'month'),
          value: _moment.default.utc(date).date().toString(),
          hoverDay: hoverDay,
          onClick: () => onDayClick(date),
          onHover: () => onDayHover(date),
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: `day-${date}`
          }),
          inDateRange: Boolean(dateRange.startDate && dateRange.endDate && (0, _utils.inDateRange)(dateRange, date))
        }, date);
      })
    }, week[0]))]
  });
};
exports.CalendarMobile = CalendarMobile;