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

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DateRangePicker = void 0;
var React = _interopRequireWildcard(require("react"));
var _lodash = require("lodash");
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
var _utils = require("../../utils");
var _dateRangePicker = require("../../utils/date-range-picker");
var _DateRangeWrapper = require("./DateRangeWrapper");
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 DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    minDate,
    maxDate,
    onApply,
    onError,
    onCancel,
    classNames,
    hideTimezone = false,
    selectedDateRange = {},
    startDateLabel,
    endDateLabel,
    t,
    locale,
    testId
  } = _ref;
  const localTimezone = _momentTimezone.default.tz.guess();
  const {
    timezone: inputTimezone = ''
  } = selectedDateRange;
  const validTimezone = (0, _lodash.isEmpty)(inputTimezone) ? localTimezone : inputTimezone;
  const [today, setToday] = React.useState(() => (0, _dateRangePicker.getTodayInTimezone)(validTimezone));
  const {
    validMinDate,
    validMaxDate,
    validDateRange
  } = React.useMemo(() => (0, _utils.getValidDates)({
    selectedDateRange,
    minDate,
    maxDate,
    today,
    onError,
    t
  }), [today]);
  const {
    startDate,
    endDate
  } = validDateRange;
  const validRangeEndMonth = endDate ? (0, _utils.getMonthEndDate)(endDate) : (0, _utils.getMonthEndDate)(today);
  const validRangeStartMonth = startDate && endDate && !(0, _dateRangePicker.isSame)(startDate, endDate, 'month') ? (0, _utils.getMonthEndDate)(startDate) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(validRangeEndMonth, 1, 'M'));
  const [dateRange, setDateRange] = React.useState(validDateRange);
  const [timezone, setTimezone] = React.useState(validTimezone);
  const [hoverDay, setHoverDay] = React.useState('');
  const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
  const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
  const [isMobileSyncedToStartMonth, setIsMobileSyncedToStartMonth] = React.useState(false);
  const setRangeStartMonthValidated = date => {
    if ((0, _dateRangePicker.isSameOrAfter)(date, validMinDate) && (0, _dateRangePicker.isBefore)(date, rangeEndMonth)) {
      setRangeStartMonth(date);
    } else {
      setRangeStartMonth((0, _utils.getMonthEndDate)(validMinDate));
    }
  };
  const setRangeEndMonthValidated = date => {
    if ((0, _dateRangePicker.isSameOrBefore)(date, validMaxDate) && (0, _dateRangePicker.isAfter)(date, rangeStartMonth)) {
      setRangeEndMonth(date);
    } else {
      setRangeEndMonth((0, _utils.getMonthEndDate)(validMaxDate));
    }
  };
  const onMonthNavigate = (marker, action) => {
    if (marker === _utils.MARKERS.DATE_RANGE_START) {
      const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeStartMonth, 1, 'M'));
      setRangeStartMonthValidated(newMonth);
      setIsMobileSyncedToStartMonth(true);
    } else {
      const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
      setRangeEndMonthValidated(newMonth);
      setIsMobileSyncedToStartMonth(false);
    }
  };
  const handleMobileCalendarMonthSelection = newMonth => {
    const {
      startDate,
      endDate
    } = dateRange;
    let start = rangeStartMonth,
      end = rangeEndMonth,
      syncToStart = isMobileSyncedToStartMonth;
    const isEndMonthBeforeStartDate = startDate ? (0, _dateRangePicker.isBefore)(rangeEndMonth, startDate) : false;
    if (startDate && endDate) {
      syncToStart = isEndMonthBeforeStartDate ? (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(rangeEndMonth)) : (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(endDate));
      if (syncToStart && (0, _dateRangePicker.isAfter)(newMonth, (0, _utils.getMonthEndDate)(startDate))) {
        syncToStart = false;
      }
      [start, end] = syncToStart ? [newMonth, endDate] : [startDate, newMonth];
    } else if (startDate) {
      syncToStart = isEndMonthBeforeStartDate ? (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(rangeEndMonth)) : (0, _dateRangePicker.isSameOrBefore)(newMonth, (0, _utils.getMonthEndDate)(startDate));
      [start, end] = syncToStart ? [newMonth, end] : [startDate, newMonth];
    } else {
      syncToStart = (0, _dateRangePicker.isBefore)(newMonth, rangeEndMonth);
      [start, end] = syncToStart ? [newMonth, validMaxDate] : [(0, _utils.getSubtractedDate)(newMonth, 1, 'M'), newMonth];
    }
    setRangeStartMonthValidated(start);
    setRangeEndMonthValidated(end);
    setIsMobileSyncedToStartMonth(syncToStart);
  };
  const handleMobileMonthSelection = date => {
    const newMonth = (0, _utils.getMonthEndDate)(date);
    handleMobileCalendarMonthSelection(newMonth);
  };
  const onMobileMonthNavigate = action => {
    const mobileMonth = isMobileSyncedToStartMonth ? rangeStartMonth : rangeEndMonth;
    const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(mobileMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(mobileMonth, 1, 'M'));
    handleMobileCalendarMonthSelection(newMonth);
  };
  const onDayClick = day => {
    const {
      startDate,
      endDate
    } = dateRange;
    if (startDate && !endDate && (0, _dateRangePicker.isSameOrAfter)(day, startDate)) {
      setDateRange({
        startDate,
        endDate: day
      });
    } else {
      setDateRange({
        startDate: day
      });
    }
    setIsMobileSyncedToStartMonth((0, _utils.getMonthEndDate)(day) === (0, _utils.getMonthEndDate)(rangeStartMonth));
    setHoverDay(day);
  };
  const inHoverRange = day => {
    const {
      startDate,
      endDate
    } = dateRange;
    return Boolean(startDate && !endDate && hoverDay && (0, _dateRangePicker.isAfter)(hoverDay, startDate) && (0, _dateRangePicker.isBetween)(day, startDate, hoverDay));
  };
  const handlers = {
    onDayClick,
    onDayHover: setHoverDay,
    onMonthNavigate
  };
  const mobileCalendarHandlers = {
    onDayClick,
    onDayHover: setHoverDay,
    onMonthNavigate: onMobileMonthNavigate
  };
  const handleTimeZone = newTimezone => {
    setToday((0, _dateRangePicker.getTodayInTimezone)(newTimezone));
    setTimezone(newTimezone);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRangeWrapper.DateRangeWrapper, {
    ref: ref,
    minDate: validMinDate,
    maxDate: validMaxDate,
    onApply: onApply,
    handlers: handlers,
    mobileCalendarHandlers: mobileCalendarHandlers,
    hoverDay: hoverDay,
    onCancel: onCancel,
    timezone: timezone,
    dateRange: dateRange,
    setTimezone: handleTimeZone,
    rangeStartMonth: rangeStartMonth,
    rangeEndMonth: rangeEndMonth,
    mobileCalendarMonth: isMobileSyncedToStartMonth ? rangeStartMonth : rangeEndMonth,
    inHoverRange: inHoverRange,
    setRangeStartMonth: setRangeStartMonthValidated,
    setRangeEndMonth: setRangeEndMonthValidated,
    setRangeMonth: handleMobileMonthSelection,
    hideTimezone: hideTimezone,
    cardWrapperClass: classNames?.wrapper,
    today: today,
    startDateLabel: startDateLabel,
    endDateLabel: endDateLabel,
    t: t,
    locale: locale,
    testId: testId
  });
});