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

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DateRangeWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _moment = _interopRequireDefault(require("moment"));
var _size = require("../../styles/variables/_size");
var _utils = require("../../utils");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _dateRangePicker = require("../../utils/date-range-picker");
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _Card = require("../Card");
var _Calendar = require("./Calendar");
var _Dropdown = require("../Dropdown");
var _FocusManager = require("../FocusManager");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.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 CalendarHeaderBase = _ref => {
  let {
    t,
    date,
    minDate,
    maxDate,
    availableYears,
    availableMonths,
    setMonth,
    onClickNext,
    onClickPrevious,
    nextDisabled,
    prevDisabled,
    testId,
    marker
  } = _ref;
  const MONTHS = (0, _utils.getMonths)(t);
  const baseSlot = marker ? `-${marker}` : '';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _DateRangeWrapperModule.default.calendarHeader,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: `header${baseSlot}`
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
      ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
      size: "small",
      name: "chevron-left",
      className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
        [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
      }),
      onClick: () => !prevDisabled && onClickPrevious(),
      color: prevDisabled ? 'disabled' : 'secondary',
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: `prev-button${baseSlot}`
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
      size: "small",
      disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
      menu: {
        selectedKeys: [_moment.default.utc(date).month().toString()],
        options: availableMonths,
        isFluid: false,
        classNames: {
          wrapper: _DateRangeWrapperModule.default.monthAndYearMenu
        }
      },
      onChange: event => {
        setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
      },
      dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
      scrollMenuToBottom: true,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: `month-dropdown${baseSlot}`
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
      disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
      menu: {
        selectedKeys: [_moment.default.utc(date).year().toString()],
        options: availableYears,
        isFluid: false,
        classNames: {
          wrapper: _DateRangeWrapperModule.default.monthAndYearMenu
        }
      },
      size: "small",
      onChange: event => {
        setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', Number(event.key))));
      },
      dropdownInputText: _moment.default.utc(date).year().toString(),
      scrollMenuToBottom: true,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: `year-dropdown${baseSlot}`
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
      size: "small",
      ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
      name: "chevron-right",
      className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
        [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
      }),
      onClick: () => !nextDisabled && onClickNext(),
      color: nextDisabled ? 'disabled' : 'secondary',
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: `next-button${baseSlot}`
      })
    })]
  });
};
const CalendarHeader = _ref2 => {
  let {
    t,
    date,
    marker,
    minDate,
    maxDate,
    setMonth,
    rangeStartMonth,
    rangeEndMonth,
    onClickNext,
    nextDisabled,
    prevDisabled,
    onClickPrevious,
    testId
  } = _ref2;
  const availableYears = (0, _utils.generateAvailableYears)({
    marker,
    minDate,
    maxDate,
    rangeStartMonth,
    rangeEndMonth
  });
  const availableMonths = (0, _utils.getAvailableMonths)({
    marker,
    minDate,
    maxDate,
    rangeStartMonth,
    rangeEndMonth,
    t
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeaderBase, {
    t: t,
    date: date,
    minDate: minDate,
    maxDate: maxDate,
    availableYears: availableYears,
    availableMonths: availableMonths,
    setMonth: setMonth,
    onClickNext: onClickNext,
    onClickPrevious: onClickPrevious,
    nextDisabled: nextDisabled,
    prevDisabled: prevDisabled,
    testId: testId,
    marker: marker
  });
};
const MobileCalendarHeader = _ref3 => {
  let {
    t,
    date,
    minDate,
    maxDate,
    setMonth,
    onClickNext,
    nextDisabled,
    prevDisabled,
    onClickPrevious,
    testId
  } = _ref3;
  const availableYears = (0, _utils.generateAvailableYears)({
    minDate,
    maxDate
  });
  const availableMonths = (0, _dateRangePicker.getAvailableMonthsSingleCalendar)({
    date,
    minDate,
    maxDate,
    t
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeaderBase, {
    t: t,
    date: date,
    minDate: minDate,
    maxDate: maxDate,
    availableYears: availableYears,
    availableMonths: availableMonths,
    setMonth: setMonth,
    onClickNext: onClickNext,
    onClickPrevious: onClickPrevious,
    nextDisabled: nextDisabled,
    prevDisabled: prevDisabled,
    testId: testId
  });
};
const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
  let {
    onApply,
    onCancel,
    handlers,
    mobileCalendarHandlers,
    hoverDay,
    minDate,
    maxDate,
    timezone,
    dateRange,
    rangeStartMonth,
    setTimezone,
    rangeEndMonth,
    mobileCalendarMonth,
    inHoverRange,
    setRangeStartMonth,
    setRangeEndMonth,
    setRangeMonth,
    cardWrapperClass,
    hideTimezone,
    today,
    startDateLabel,
    endDateLabel,
    t,
    locale,
    testId
  } = _ref4;
  const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
  const handleApplyClick = () => {
    const {
      startDate,
      endDate
    } = dateRange;
    const startDateUTC = startDate && (0, _dateRangePicker.addTimezoneStartOfDay)(startDate, timezone);
    const endDateUTC = endDate && (0, _dateRangePicker.addTimezoneEndOfDay)(endDate, timezone);
    onApply({
      startDate,
      endDate,
      startDateUTC,
      endDateUTC,
      timezone
    });
  };
  const {
    onMonthNavigate
  } = handlers;
  const {
    onMonthNavigate: onMonthNavigateSingle
  } = mobileCalendarHandlers;
  const commonProps = {
    inHoverRange,
    handlers,
    hoverDay,
    dateRange,
    minDate,
    maxDate,
    today,
    t,
    testId
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusManager.FocusManager, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MobileDateRangePicker, {
      ref: ref,
      cardWrapperClass: cardWrapperClass,
      t: t,
      dateRange: dateRange,
      locale: locale,
      mobileCalendarMonth: mobileCalendarMonth,
      setRangeMonth: setRangeMonth,
      minDate: minDate,
      maxDate: maxDate,
      onMonthNavigate: onMonthNavigateSingle,
      commonProps: {
        ...commonProps,
        handlers: mobileCalendarHandlers
      },
      hideTimezone: hideTimezone,
      timezone: timezone,
      setTimezone: setTimezone,
      onCancel: onCancel,
      handleApplyClick: handleApplyClick
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePicker, {
      ref: ref,
      cardWrapperClass: cardWrapperClass,
      startDateLabel: startDateLabel,
      t: t,
      dateRange: dateRange,
      locale: locale,
      endDateLabel: endDateLabel,
      rangeStartMonth: rangeStartMonth,
      rangeEndMonth: rangeEndMonth,
      setRangeStartMonth: setRangeStartMonth,
      canNavigateCloser: canNavigateCloser,
      minDate: minDate,
      maxDate: maxDate,
      onMonthNavigate: onMonthNavigate,
      setRangeEndMonth: setRangeEndMonth,
      commonProps: commonProps,
      hideTimezone: hideTimezone,
      timezone: timezone,
      setTimezone: setTimezone,
      onCancel: onCancel,
      handleApplyClick: handleApplyClick
    })]
  });
});
const DateRangeHeader = _ref5 => {
  let {
    testId,
    startDateLabel,
    endDateLabel
  } = _ref5;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
    className: _DateRangeWrapperModule.default.cardHeader,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: 'header'
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
      className: _DateRangeWrapperModule.default.selectedDate,
      color: _Text.TEXT_COLORS.secondary,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'start-date-label'
      }),
      children: startDateLabel
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
      name: "minus",
      size: _Icon.ICON_SIZE.small,
      type: _Icon.ICON_TYPE.regular,
      color: _Text.TEXT_COLORS.secondary,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'separator-icon'
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
      className: _DateRangeWrapperModule.default.selectedDate,
      color: _Text.TEXT_COLORS.secondary,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'end-date-label'
      }),
      children: endDateLabel
    })]
  });
};
const DateRangeFooter = _ref6 => {
  let {
    t,
    testId,
    hideTimezone,
    timezone,
    setTimezone,
    minDate,
    maxDate,
    onCancel,
    handleApplyClick,
    dateRange,
    small
  } = _ref6;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
    className: (0, _classify.default)(_DateRangeWrapperModule.default.cardFooter, {
      [_DateRangeWrapperModule.default.cardFooterSmall]: small
    }),
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: 'footer'
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
      className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'timezone-container'
      }),
      children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
        menu: {
          selectedKeys: [timezone],
          options: (0, _utils.getTimezones)(t),
          width: _size.size276,
          allowSearch: true,
          virtualization: {
            enable: true
          },
          staticLabels: {
            SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
            RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
            RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
          }
        },
        dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
        disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
        classNames: {
          box: _DateRangeWrapperModule.default.timezoneDropdown
        },
        onChange: event => setTimezone(event.key),
        size: "small",
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'timezone-dropdown'
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'actions'
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
        type: "ghost",
        onClick: onCancel,
        size: "small",
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'cancel-button'
        }),
        children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
        onClick: handleApplyClick,
        size: "small",
        disabled: !(dateRange.startDate && dateRange.endDate),
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'apply-button'
        }),
        children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
      })]
    })]
  });
};
const DateRangePicker = _ref7 => {
  let {
    ref,
    cardWrapperClass,
    startDateLabel,
    t,
    dateRange,
    locale,
    endDateLabel,
    rangeStartMonth,
    rangeEndMonth,
    setRangeStartMonth,
    canNavigateCloser,
    minDate,
    maxDate,
    onMonthNavigate,
    setRangeEndMonth,
    commonProps,
    hideTimezone,
    timezone,
    setTimezone,
    onCancel,
    handleApplyClick
  } = _ref7;
  const {
    testId
  } = commonProps;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
    classNames: {
      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, _DateRangeWrapperModule.default.dualCalendarWrapper, cardWrapperClass)
    },
    ref: ref,
    testId: (0, _qa.generateTestId)({
      base: testId,
      slot: 'card'
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeHeader, {
      testId: testId,
      startDateLabel: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`,
      endDateLabel: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _DateRangeWrapperModule.default.calendarMenuContainer,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'calendar-menu-container'
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
        t: t,
        marker: _utils.MARKERS.DATE_RANGE_START,
        rangeStartMonth: rangeStartMonth,
        rangeEndMonth: rangeEndMonth,
        date: rangeStartMonth,
        setMonth: setRangeStartMonth,
        nextDisabled: !canNavigateCloser,
        prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
        minDate: minDate,
        maxDate: maxDate,
        onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
        onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV),
        testId: testId
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
        t: t,
        marker: _utils.MARKERS.DATE_RANGE_END,
        rangeStartMonth: rangeStartMonth,
        rangeEndMonth: rangeEndMonth,
        date: rangeEndMonth,
        setMonth: setRangeEndMonth,
        nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
        prevDisabled: !canNavigateCloser,
        minDate: minDate,
        maxDate: maxDate,
        onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
        onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV),
        testId: testId
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
      className: _DateRangeWrapperModule.default.dateRangeCalendars,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'calendars'
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
        marker: _utils.MARKERS.DATE_RANGE_START,
        value: rangeStartMonth,
        ...commonProps,
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'start-calendar'
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _DateRangeWrapperModule.default.divider,
        "data-testid": (0, _qa.generateTestId)({
          base: testId,
          slot: 'divider'
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
        marker: _utils.MARKERS.DATE_RANGE_END,
        value: rangeEndMonth,
        ...commonProps,
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'end-calendar'
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeFooter, {
      t: t,
      testId: testId,
      hideTimezone: hideTimezone,
      timezone: timezone,
      setTimezone: setTimezone,
      minDate: minDate,
      maxDate: maxDate,
      onCancel: onCancel,
      handleApplyClick: handleApplyClick,
      dateRange: dateRange
    })]
  });
};
const MobileDateRangePicker = _ref8 => {
  let {
    ref,
    cardWrapperClass,
    t,
    dateRange,
    locale,
    mobileCalendarMonth,
    setRangeMonth,
    minDate,
    maxDate,
    onMonthNavigate,
    commonProps,
    hideTimezone,
    timezone,
    setTimezone,
    onCancel,
    handleApplyClick
  } = _ref8;
  const {
    testId
  } = commonProps;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
    classNames: {
      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapperSmall, _DateRangeWrapperModule.default.singleCalendarWrapper, cardWrapperClass)
    },
    ref: ref,
    testId: (0, _qa.generateTestId)({
      base: testId,
      slot: 'card'
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeHeader, {
      testId: testId,
      startDateLabel: `${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`,
      endDateLabel: `${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _DateRangeWrapperModule.default.calendarMenuContainer,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'calendar-menu-container'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileCalendarHeader, {
        t: t,
        date: mobileCalendarMonth,
        setMonth: setRangeMonth,
        nextDisabled: (0, _dateRangePicker.isSameOrAfter)(mobileCalendarMonth, maxDate, 'month'),
        prevDisabled: (0, _dateRangePicker.isSameOrBefore)(mobileCalendarMonth, minDate, 'month'),
        minDate: minDate,
        maxDate: maxDate,
        onClickNext: () => onMonthNavigate(_utils.NAVIGATION_ACTION.NEXT),
        onClickPrevious: () => onMonthNavigate(_utils.NAVIGATION_ACTION.PREV),
        testId: testId
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardContent, {
      className: _DateRangeWrapperModule.default.dateRangeCalendars,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'calendars'
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.CalendarMobile, {
        value: mobileCalendarMonth,
        ...commonProps,
        testId: (0, _qa.generateTestId)({
          base: testId,
          slot: 'calendar'
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeFooter, {
      t: t,
      testId: testId,
      hideTimezone: hideTimezone,
      timezone: timezone,
      setTimezone: setTimezone,
      minDate: minDate,
      maxDate: maxDate,
      onCancel: onCancel,
      handleApplyClick: handleApplyClick,
      dateRange: dateRange,
      small: true
    })]
  });
};