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

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
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 _Text = require("../Text");
var _Day = require("./Day");
var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
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); }
// $FlowFixMe[untyped-import]
const Calendar = _ref => {
  let {
    value,
    marker,
    minDate,
    maxDate = (0, _utils.formatIsoDate)(),
    handlers,
    hoverDay,
    dateRange,
    inHoverRange,
    today,
    t
  } = _ref;
  return /*#__PURE__*/React.createElement("div", {
    className: _CalendarModule.default.calendar
  }, /*#__PURE__*/React.createElement("div", {
    className: _CalendarModule.default.calendarRow
  }, _utils.WEEKDAYS.map(day => /*#__PURE__*/React.createElement(_Text.BodySmall, {
    key: day,
    className: _CalendarModule.default.calendarRowItem,
    color: _Text.TEXT_COLORS.tertiary
  }, (0, _dateRangePicker.getTranslation)(t, day)))), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/React.createElement("div", {
    key: week[index],
    className: _CalendarModule.default.calendarRow
  }, 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__*/React.createElement(_Day.Day, {
      key: date,
      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(),
      hoverDay: hoverDay
    });
  }))));
};
exports.Calendar = Calendar;