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

ActiveCollab Components

import React, { useMemo } from "react";
import classnames from "classnames";
import moment from "moment-timezone";
import { SelectDateTarget } from "./SelectDateTarget";
import { StyledSelectDate, StyledSelectDateButton } from "./Styles";
import { formatDate } from "../../utils/dateUtils";
import { DatePicker, toMoment } from "../DatePicker/DatePicker";
const isDayInRange = (day, data) => {
  const fromMoment = moment.unix(data.from).utc();
  const toMoment = moment.unix(data.to).utc();
  if (data.repeating) {
    const year = day.year();
    const from = moment.utc({
      year,
      month: fromMoment.month(),
      date: fromMoment.date()
    });
    const to = moment.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");
};
export const SelectDate = _ref => {
  let _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$modalTitle = _ref.modalTitle,
    modalTitle = _ref$modalTitle === void 0 ? "Save Changes" : _ref$modalTitle,
    _ref$modalDescription = _ref.modalDescription,
    modalDescription = _ref$modalDescription === void 0 ? "You updated the date. Would you like to save this change?" : _ref$modalDescription,
    _ref$modalSaveBtnText = _ref.modalSaveBtnText,
    modalSaveBtnText = _ref$modalSaveBtnText === void 0 ? "Save" : _ref$modalSaveBtnText,
    _ref$modalCancelBtnTe = _ref.modalCancelBtnText,
    modalCancelBtnText = _ref$modalCancelBtnTe === void 0 ? "Discard" : _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,
    maxRange = _ref.maxRange;
  const labelText = useMemo(() => {
    if (!selectedDays) {
      return defaultLabelText;
    } else if (!selectedDays.from && !selectedDays.to) {
      return defaultLabelText;
    } else {
      const formattedEndDate = selectedDays.to ? formatDate(toMoment(selectedDays.to), dateFormat, longDateFormat) : "";
      const formattedStartDate = selectedDays.from ? formatDate(toMoment(selectedDays == null ? void 0 : selectedDays.from), dateFormat, longDateFormat) : "";
      if (selectedDays.to && selectedDays.from && toMoment(selectedDays.from).isSame(toMoment(selectedDays.to))) {
        return formattedEndDate;
      }
      if (!selectedDays.to && selectedDays.from) {
        return formattedStartDate;
      }
      return formattedStartDate + " - " + formattedEndDate;
    }
  }, [selectedDays, dateFormat, defaultLabelText, longDateFormat]);
  const modifiers = useMemo(() => {
    const userAvailabilities = daysToModify.filter(data => data.type === "user_day_off");
    const globalDaysOff = daysToModify.filter(data => data.type === "global_day_off");
    const selectableGlobalDaysOff = daysToModify.filter(data => data.type === "selectable_global_day_off");
    return {
      userAvailability: day => {
        const matchedData = userAvailabilities.find(data => isDayInRange(day, data));
        return {
          matched: !!matchedData,
          title: matchedData ? matchedData.title : null
        };
      },
      weekend: day => {
        const isWeekend = weekends.includes(day.day());
        return {
          matched: isWeekend,
          title: isWeekend ? weekendLabel : null
        };
      },
      nonWorkingDay: day => {
        if (weekends.includes(day.day())) {
          return {
            matched: true,
            title: ""
          };
        }
        const nonWorkingDays = [...selectableGlobalDaysOff, ...globalDaysOff];
        const matchedData = nonWorkingDays.find(data => isDayInRange(day, data));
        return {
          matched: !!matchedData,
          title: matchedData ? matchedData.title : null
        };
      },
      nonWorkingDaysOfWeek: day => {
        const isNonWorkingDay = nonWorkingDaysOfWeek.includes(day.day());
        return {
          matched: isNonWorkingDay,
          title: isNonWorkingDay ? nonWorkingDaysOfWeekLabel : null
        };
      },
      day_disabled: day => {
        const globalDayOff = globalDaysOff.find(data => isDayInRange(day, data));
        return {
          matched: !!globalDayOff,
          title: null
        };
      }
    };
  }, [daysToModify, nonWorkingDaysOfWeek, nonWorkingDaysOfWeekLabel, weekendLabel, weekends]);
  const renderTargetEl = useMemo(() => {
    if (labelType === "icon" && icon) {
      return /*#__PURE__*/React.createElement(SelectDateTarget, {
        icon: icon,
        title: tooltipText,
        targetIconClassName: targetIconClassName,
        popperTooltipClassName: popperTooltipClassName,
        popperTooltipStyle: popperTooltipStyle
      });
    }
    if (typeof labelType === "function") {
      return labelType(labelText);
    }
    return /*#__PURE__*/React.createElement(StyledSelectDateButton, {
      type: "button",
      className: classnames("date-picker-target", targetClassName)
    }, /*#__PURE__*/React.createElement("span", {
      className: targetTextClassName
    }, labelText));
  }, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
  return /*#__PURE__*/React.createElement(StyledSelectDate, {
    className: "select-date"
  }, labelType !== "inline" ? /*#__PURE__*/React.createElement(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,
    modalTitle: modalTitle,
    modalDescription: modalDescription,
    modalSaveBtnText: modalSaveBtnText,
    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,
    maxRange: maxRange,
    showControls: true,
    forceClose: forceClose
  }) : /*#__PURE__*/React.createElement(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,
    maxRange: maxRange,
    showControls: true,
    open: true
  }));
};
SelectDate.displayName = "SelectDate";
//# sourceMappingURL=SelectDate.js.map