@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 {
    changeMode: mode = "instant",
    trigger: labelType = "text",
    saveButtonText = "Save",
    cancelButtonText = "Cancel",
    clearButtonText = "Clear",
    modalHeaderText = "Discard changes?",
    modalDiscardMessage = "All unsaved changes will be lost.",
    modalDiscardBtnText = "OK",
    modalCancelBtnText = "Cancel",
    onDayClick,
    onSave,
    onCancel,
    onToggleDatePicker,
    required: dateRequired = false,
    longDateFormat = false,
    defaultShowDatePicker = false,
    firstDayOfWeek = 0,
    selectedDays,
    selectionMode = "custom",
    menuClassName,
    targetClassName,
    icon,
    defaultLabelText = "Set...",
    targetTextClassName,
    targetIconClassName,
    backgroundElementClass,
    dateFormat,
    forceClose,
    defaultMonth,
    daysToModify = [],
    weekends = [],
    weekendLabel = "Weekend",
    nonWorkingDaysOfWeek = [],
    nonWorkingDaysOfWeekLabel = "Unavailable",
    weekendIsSelectable = false,
    tooltipText,
    popperTooltipClassName,
    popperClassName,
    popperTooltipStyle,
    position,
    disableDaysBefore,
    enableYearPicker,
    disableAnimations,
    disabledDaysAfter,
    onChange
  } = _ref;
  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,
    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.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,
    showControls: true,
    open: true
  }));
};
SelectDate.displayName = "SelectDate";
//# sourceMappingURL=SelectDate.js.map