@activecollab/components/dist/cjs/components/SelectDate/SelectDate.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SelectDate = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
var _SelectDateTarget = require("./SelectDateTarget");
var _Styles = require("./Styles");
var _dateUtils = require("../../utils/dateUtils");
var _DatePicker = require("../DatePicker/DatePicker");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var isDayInRange = function isDayInRange(day, data) {
  var fromMoment = _momentTimezone.default.unix(data.from).utc();
  var toMoment = _momentTimezone.default.unix(data.to).utc();
  if (data.repeating) {
    var year = day.year();
    var from = _momentTimezone.default.utc({
      year,
      month: fromMoment.month(),
      date: fromMoment.date()
    });
    var to = _momentTimezone.default.utc({
      year,
      month: toMoment.month(),
      date: toMoment.date()
    });
    return day.isSameOrAfter(from, "day") && day.isSameOrBefore(to, "day");
  }
  return day.isSameOrAfter(fromMoment, "day") && day.isSameOrBefore(toMoment, "day");
};
var SelectDate = exports.SelectDate = function SelectDate(_ref) {
  var _ref$changeMode = _ref.changeMode,
    mode = _ref$changeMode === void 0 ? "instant" : _ref$changeMode,
    _ref$trigger = _ref.trigger,
    labelType = _ref$trigger === void 0 ? "text" : _ref$trigger,
    _ref$saveButtonText = _ref.saveButtonText,
    saveButtonText = _ref$saveButtonText === void 0 ? "Save" : _ref$saveButtonText,
    _ref$cancelButtonText = _ref.cancelButtonText,
    cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
    _ref$clearButtonText = _ref.clearButtonText,
    clearButtonText = _ref$clearButtonText === void 0 ? "Clear" : _ref$clearButtonText,
    _ref$modalHeaderText = _ref.modalHeaderText,
    modalHeaderText = _ref$modalHeaderText === void 0 ? "Discard changes?" : _ref$modalHeaderText,
    _ref$modalDiscardMess = _ref.modalDiscardMessage,
    modalDiscardMessage = _ref$modalDiscardMess === void 0 ? "All unsaved changes will be lost." : _ref$modalDiscardMess,
    _ref$modalDiscardBtnT = _ref.modalDiscardBtnText,
    modalDiscardBtnText = _ref$modalDiscardBtnT === void 0 ? "OK" : _ref$modalDiscardBtnT,
    _ref$modalCancelBtnTe = _ref.modalCancelBtnText,
    modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Cancel" : _ref$modalCancelBtnTe,
    onDayClick = _ref.onDayClick,
    onSave = _ref.onSave,
    onCancel = _ref.onCancel,
    onToggleDatePicker = _ref.onToggleDatePicker,
    _ref$required = _ref.required,
    dateRequired = _ref$required === void 0 ? false : _ref$required,
    _ref$longDateFormat = _ref.longDateFormat,
    longDateFormat = _ref$longDateFormat === void 0 ? false : _ref$longDateFormat,
    _ref$defaultShowDateP = _ref.defaultShowDatePicker,
    defaultShowDatePicker = _ref$defaultShowDateP === void 0 ? false : _ref$defaultShowDateP,
    _ref$firstDayOfWeek = _ref.firstDayOfWeek,
    firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
    selectedDays = _ref.selectedDays,
    _ref$selectionMode = _ref.selectionMode,
    selectionMode = _ref$selectionMode === void 0 ? "custom" : _ref$selectionMode,
    menuClassName = _ref.menuClassName,
    targetClassName = _ref.targetClassName,
    icon = _ref.icon,
    _ref$defaultLabelText = _ref.defaultLabelText,
    defaultLabelText = _ref$defaultLabelText === void 0 ? "Set..." : _ref$defaultLabelText,
    targetTextClassName = _ref.targetTextClassName,
    targetIconClassName = _ref.targetIconClassName,
    backgroundElementClass = _ref.backgroundElementClass,
    dateFormat = _ref.dateFormat,
    forceClose = _ref.forceClose,
    defaultMonth = _ref.defaultMonth,
    _ref$daysToModify = _ref.daysToModify,
    daysToModify = _ref$daysToModify === void 0 ? [] : _ref$daysToModify,
    _ref$weekends = _ref.weekends,
    weekends = _ref$weekends === void 0 ? [] : _ref$weekends,
    _ref$weekendLabel = _ref.weekendLabel,
    weekendLabel = _ref$weekendLabel === void 0 ? "Weekend" : _ref$weekendLabel,
    _ref$nonWorkingDaysOf = _ref.nonWorkingDaysOfWeek,
    _nonWorkingDaysOfWeek = _ref$nonWorkingDaysOf === void 0 ? [] : _ref$nonWorkingDaysOf,
    _ref$nonWorkingDaysOf2 = _ref.nonWorkingDaysOfWeekLabel,
    nonWorkingDaysOfWeekLabel = _ref$nonWorkingDaysOf2 === void 0 ? "Unavailable" : _ref$nonWorkingDaysOf2,
    _ref$weekendIsSelecta = _ref.weekendIsSelectable,
    weekendIsSelectable = _ref$weekendIsSelecta === void 0 ? false : _ref$weekendIsSelecta,
    tooltipText = _ref.tooltipText,
    popperTooltipClassName = _ref.popperTooltipClassName,
    popperClassName = _ref.popperClassName,
    popperTooltipStyle = _ref.popperTooltipStyle,
    position = _ref.position,
    disableDaysBefore = _ref.disableDaysBefore,
    enableYearPicker = _ref.enableYearPicker,
    disableAnimations = _ref.disableAnimations,
    disabledDaysAfter = _ref.disabledDaysAfter,
    onChange = _ref.onChange;
  var labelText = (0, _react.useMemo)(function () {
    if (!selectedDays) {
      return defaultLabelText;
    } else if (!selectedDays.from && !selectedDays.to) {
      return defaultLabelText;
    } else {
      var formattedEndDate = selectedDays.to ? (0, _dateUtils.formatDate)((0, _DatePicker.toMoment)(selectedDays.to), dateFormat, longDateFormat) : "";
      var formattedStartDate = selectedDays.from ? (0, _dateUtils.formatDate)((0, _DatePicker.toMoment)(selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from), dateFormat, longDateFormat) : "";
      if (selectedDays.to && selectedDays.from && (0, _DatePicker.toMoment)(selectedDays.from).isSame((0, _DatePicker.toMoment)(selectedDays.to))) {
        return formattedEndDate;
      }
      if (!selectedDays.to && selectedDays.from) {
        return formattedStartDate;
      }
      return "".concat(formattedStartDate, " - ").concat(formattedEndDate);
    }
  }, [selectedDays, dateFormat, defaultLabelText, longDateFormat]);
  var modifiers = (0, _react.useMemo)(function () {
    var userAvailabilities = daysToModify.filter(function (data) {
      return data.type === "user_day_off";
    });
    var globalDaysOff = daysToModify.filter(function (data) {
      return data.type === "global_day_off";
    });
    var selectableGlobalDaysOff = daysToModify.filter(function (data) {
      return data.type === "selectable_global_day_off";
    });
    return {
      userAvailability: function userAvailability(day) {
        var matchedData = userAvailabilities.find(function (data) {
          return isDayInRange(day, data);
        });
        return {
          matched: !!matchedData,
          title: matchedData ? matchedData.title : null
        };
      },
      weekend: function weekend(day) {
        var isWeekend = weekends.includes(day.day());
        return {
          matched: isWeekend,
          title: isWeekend ? weekendLabel : null
        };
      },
      nonWorkingDay: function nonWorkingDay(day) {
        if (weekends.includes(day.day())) {
          return {
            matched: true,
            title: ""
          };
        }
        var nonWorkingDays = [...selectableGlobalDaysOff, ...globalDaysOff];
        var matchedData = nonWorkingDays.find(function (data) {
          return isDayInRange(day, data);
        });
        return {
          matched: !!matchedData,
          title: matchedData ? matchedData.title : null
        };
      },
      nonWorkingDaysOfWeek: function nonWorkingDaysOfWeek(day) {
        var isNonWorkingDay = _nonWorkingDaysOfWeek.includes(day.day());
        return {
          matched: isNonWorkingDay,
          title: isNonWorkingDay ? nonWorkingDaysOfWeekLabel : null
        };
      },
      day_disabled: function day_disabled(day) {
        var globalDayOff = globalDaysOff.find(function (data) {
          return isDayInRange(day, data);
        });
        return {
          matched: !!globalDayOff,
          title: null
        };
      }
    };
  }, [daysToModify, _nonWorkingDaysOfWeek, nonWorkingDaysOfWeekLabel, weekendLabel, weekends]);
  var renderTargetEl = (0, _react.useMemo)(function () {
    if (labelType === "icon" && icon) {
      return /*#__PURE__*/_react.default.createElement(_SelectDateTarget.SelectDateTarget, {
        icon: icon,
        title: tooltipText,
        targetIconClassName: targetIconClassName,
        popperTooltipClassName: popperTooltipClassName,
        popperTooltipStyle: popperTooltipStyle
      });
    }
    if (typeof labelType === "function") {
      return labelType(labelText);
    }
    return /*#__PURE__*/_react.default.createElement(_Styles.StyledSelectDateButton, {
      type: "button",
      className: (0, _classnames.default)("date-picker-target", targetClassName)
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: targetTextClassName
    }, labelText));
  }, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledSelectDate, {
    className: "select-date"
  }, labelType !== "inline" ? /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
    target: renderTargetEl,
    position: position,
    menuClassName: menuClassName,
    popperClassName: popperClassName,
    month: defaultMonth,
    instant: mode === "instant",
    mode: selectionMode,
    required: dateRequired,
    selected: selectedDays,
    firstDayOfWeek: firstDayOfWeek,
    saveLabel: saveButtonText,
    cancelLabel: cancelButtonText,
    clearLabel: clearButtonText,
    onSave: onSave,
    onChange: onChange,
    onClose: onCancel,
    modifiers: modifiers,
    modalHeaderText: modalHeaderText,
    modalDiscardMessage: modalDiscardMessage,
    modalDiscardBtnText: modalDiscardBtnText,
    modalCancelBtnText: modalCancelBtnText,
    disabledDaysBefore: disableDaysBefore,
    disabledDaysAfter: disabledDaysAfter,
    backgroundElementClass: backgroundElementClass,
    disabled: weekendIsSelectable ? [] : weekends,
    popperTooltipClassName: popperTooltipClassName,
    popperTooltipStyle: popperTooltipStyle,
    open: defaultShowDatePicker,
    onCalendarToggle: onToggleDatePicker,
    onDayClick: onDayClick,
    enableConfirmModal: mode === "atomic" && !dateRequired,
    disableYearPicker: !enableYearPicker,
    disableAnimations: disableAnimations,
    showControls: true,
    forceClose: forceClose
  }) : /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
    month: defaultMonth,
    instant: mode === "instant",
    mode: selectionMode,
    required: dateRequired,
    selected: selectedDays,
    firstDayOfWeek: firstDayOfWeek,
    saveLabel: saveButtonText,
    cancelLabel: cancelButtonText,
    clearLabel: clearButtonText,
    disabledDaysBefore: disableDaysBefore,
    disabledDaysAfter: disabledDaysAfter,
    popperTooltipClassName: popperTooltipClassName,
    popperTooltipStyle: popperTooltipStyle,
    disabled: weekendIsSelectable ? [] : weekends,
    onSave: onSave,
    onChange: onChange,
    modifiers: modifiers,
    onDayClick: onDayClick,
    disableYearPicker: !enableYearPicker,
    disableAnimations: disableAnimations,
    showControls: true,
    open: true
  }));
};
SelectDate.displayName = "SelectDate";
//# sourceMappingURL=SelectDate.js.map