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

ActiveCollab Components

import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
import moment from "moment-timezone";
import { StyledCalendarDate, StyledCalendarDates, StyledCalendarHeader, StyledCalendarSelector, StyledCaption, StyledClearInstantButton, StyledConfirmDialog, StyledControls, StyledControlsLeft, StyledDatePickerContainerInner, StyledDatePickerWrapper, StyledDayName, StyledDaysOfWeek, StyledMonthOption, StyledMonthSelect, StyledMonthSelector, StyledYearOption, StyledYearSelect } from "./Styles";
import { Button } from "../Button";
import { IconButton } from "../IconButton";
import { ArrowLeftIcon, ArrowRightIcon, CancelCrossIcon } from "../Icons";
import { Menu } from "../Menu";
import { Tooltip } from "../Tooltip";
export const toMoment = date => {
  if (moment.isMoment(date)) {
    return date;
  } else if (typeof date === "number") {
    return moment.utc(date * 1000);
  } else if (typeof date === "string") {
    return moment.utc(date);
  }
  return null;
};
export const DatePicker = _ref => {
  let defaultSelected = _ref.selected,
    onChange = _ref.onChange,
    onSave = _ref.onSave,
    onClear = _ref.onClear,
    onClose = _ref.onClose,
    _ref$instant = _ref.instant,
    instant = _ref$instant === void 0 ? true : _ref$instant,
    target = _ref.target,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? "daily" : _ref$mode,
    _ref$saveLabel = _ref.saveLabel,
    saveLabel = _ref$saveLabel === void 0 ? "Save" : _ref$saveLabel,
    _ref$cancelLabel = _ref.cancelLabel,
    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
    _ref$clearLabel = _ref.clearLabel,
    clearLabel = _ref$clearLabel === void 0 ? "Clear" : _ref$clearLabel,
    disabledDaysBefore = _ref.disabledDaysBefore,
    disabledDaysAfter = _ref.disabledDaysAfter,
    _ref$disabled = _ref.disabled,
    disabledDays = _ref$disabled === void 0 ? [] : _ref$disabled,
    maxRange = _ref.maxRange,
    modifiers = _ref.modifiers,
    disableAnimations = _ref.disableAnimations,
    _ref$firstDayOfWeek = _ref.firstDayOfWeek,
    firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
    forceClose = _ref.forceClose,
    required = _ref.required,
    month = _ref.month,
    disableYearPicker = _ref.disableYearPicker,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "bottom-start" : _ref$position,
    menuClassName = _ref.menuClassName,
    popperClassName = _ref.popperClassName,
    _ref$enableConfirmMod = _ref.enableConfirmModal,
    enableConfirmModal = _ref$enableConfirmMod === void 0 ? false : _ref$enableConfirmMod,
    _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,
    backgroundElementClass = _ref.backgroundElementClass,
    popperTooltipClassName = _ref.popperTooltipClassName,
    popperTooltipStyle = _ref.popperTooltipStyle,
    open = _ref.open,
    onCalendarToggle = _ref.onCalendarToggle,
    onDayClick = _ref.onDayClick,
    showControls = _ref.showControls;
  const _useState = useState(open),
    isOpen = _useState[0],
    setIsOpen = _useState[1];
  const _useState2 = useState(false),
    isYearSelectOpen = _useState2[0],
    setIsYearSelectOpen = _useState2[1];
  const _useState3 = useState(false),
    showDiscardModal = _useState3[0],
    setShowDiscardModal = _useState3[1];
  const _useState4 = useState(mode === "monthly" || mode === "quarterly"),
    isMonthSelectOpen = _useState4[0],
    setIsMonthSelectOpen = _useState4[1];
  const _useState5 = useState(null),
    monthTransitionDirection = _useState5[0],
    setMonthTransitionDirection = _useState5[1];
  const _useState6 = useState(() => {
      if (defaultSelected && defaultSelected.from) {
        return toMoment(defaultSelected.from);
      }
      if (month) {
        return toMoment(month);
      }
      return moment.utc();
    }),
    currentDate = _useState6[0],
    setCurrentDate = _useState6[1];
  const _useState7 = useState(() => {
      if (defaultSelected && defaultSelected.from) {
        return toMoment(defaultSelected.from);
      } else if (month) {
        return toMoment(month);
      }
      return moment.utc();
    }),
    targetDate = _useState7[0],
    setTargetDate = _useState7[1];
  const _useState8 = useState(() => {
      if (!defaultSelected) {
        return null;
      }
      if (!defaultSelected.from) {
        return null;
      }
      return {
        from: toMoment(defaultSelected.from),
        to: defaultSelected.to ? toMoment(defaultSelected.to) : null
      };
    }),
    selected = _useState8[0],
    setSelected = _useState8[1];
  const _useState9 = useState(null),
    hoveredDate = _useState9[0],
    setHoveredDate = _useState9[1];
  const timezone = moment.defaultZone ? moment.defaultZone.name : moment.tz.guess();
  const currentDateInTimezone = moment().tz(timezone).format("YYYY-MM-DD");
  const today = moment.utc(currentDateInTimezone);
  const selectedYearRef = useRef(null);
  const datePickerRef = useRef(null);
  useEffect(() => {
    if (maxRange && defaultSelected != null && defaultSelected.from && defaultSelected != null && defaultSelected.to) {
      const from = toMoment(defaultSelected.from);
      const to = toMoment(defaultSelected.to);
      if (from && to) {
        const daysDiff = to.diff(from, "days") + 1;
        if (daysDiff > maxRange) {
          console.warn("DatePicker: selected range (" + daysDiff + " days) exceeds maxRange (" + maxRange + ").");
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const effectiveDisabledDaysBefore = useMemo(() => {
    if (maxRange && mode === "custom" && selected != null && selected.from && !(selected != null && selected.to)) {
      const maxRangeBefore = selected.from.clone().subtract(maxRange - 1, "days");
      if (!disabledDaysBefore || maxRangeBefore.isAfter(disabledDaysBefore)) {
        return maxRangeBefore;
      }
    }
    return disabledDaysBefore;
  }, [maxRange, mode, selected, disabledDaysBefore]);
  const effectiveDisabledDaysAfter = useMemo(() => {
    if (maxRange && mode === "custom" && selected != null && selected.from && !(selected != null && selected.to)) {
      const maxRangeAfter = selected.from.clone().add(maxRange - 1, "days");
      if (!disabledDaysAfter || maxRangeAfter.isBefore(disabledDaysAfter)) {
        return maxRangeAfter;
      }
    }
    return disabledDaysAfter;
  }, [maxRange, mode, selected, disabledDaysAfter]);
  const handleSelection = useCallback(range => {
    if (!range) {
      setSelected(null);
      if (onChange) onChange(undefined);
      if (instant && onSave) {
        onSave(undefined);
      }
    } else {
      setSelected(range);
      if (onChange) onChange({
        from: range.from.utc().unix(),
        to: range != null && range.to ? moment(range.to).utc().unix() : null
      });
      if (instant && onSave) {
        onSave({
          from: range.from.utc().unix(),
          to: range != null && range.to ? moment(range.to).utc().unix() : null
        });
      }
    }
  }, [onChange, onSave, instant]);
  const toggleCalendar = useCallback(() => {
    if (target) {
      setIsOpen(!isOpen);
      if (onCalendarToggle) onCalendarToggle(!isOpen);
    }
  }, [isOpen, onCalendarToggle, target]);
  const toggleYearSelect = useCallback(() => {
    setIsYearSelectOpen(!isYearSelectOpen);
    setIsMonthSelectOpen(true);
  }, [isYearSelectOpen]);
  const toggleMonthSelect = useCallback(() => {
    if (mode !== "monthly" && mode !== "quarterly") {
      setIsMonthSelectOpen(!isMonthSelectOpen);
    }
  }, [isMonthSelectOpen, mode]);
  useEffect(() => {
    if (defaultSelected && defaultSelected.from) {
      setSelected({
        from: toMoment(defaultSelected.from),
        to: defaultSelected.to ? toMoment(defaultSelected.to) : null
      });
      setCurrentDate(toMoment(defaultSelected.from) || moment.utc());
      setTargetDate(toMoment(defaultSelected.from) || moment.utc());
    } else {
      setSelected(null);
    }
  }, [defaultSelected, month]);
  const handleDateSelect = date => {
    const isSameMonth = date.isSame(currentDate, "month");
    if (isSameMonth || disableAnimations) {
      setCurrentDate(date);
      setTargetDate(date);
    } else {
      const direction = date.isBefore(currentDate, "month") ? "prev" : "next";
      setTargetDate(date);
      setMonthTransitionDirection(direction);
    }
    switch (mode) {
      case "daily":
        handleDailySelection(date);
        break;
      case "weekly":
        handleWeeklySelection(date);
        break;
      case "custom":
        handleCustomSelection(date);
        break;
      default:
        console.warn("Unhandled mode: " + mode);
    }
    if (instant && mode !== "custom" && forceClose) toggleCalendar();
  };
  const handleDailySelection = date => {
    if (!date.isSame(selected == null ? void 0 : selected.from)) {
      handleSelection({
        from: date,
        to: date
      });
    } else if (!required) {
      handleSelection(undefined);
    }
  };
  const handleWeeklySelection = date => {
    var _selected$from;
    const currentDayOfWeek = date.day();
    const daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
    const startOfWeek = date.clone().subtract(daysToSubtract, "days").startOf("day");
    const endOfWeek = startOfWeek.clone().add(6, "days");
    if (!startOfWeek.isSame(selected == null || (_selected$from = selected.from) == null ? void 0 : _selected$from.startOf("day"))) {
      handleSelection({
        from: startOfWeek,
        to: endOfWeek
      });
    } else if (!required) {
      handleSelection(undefined);
    }
  };
  const handleCustomSelection = date => {
    if (!selected || (selected == null ? void 0 : selected.from) === moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.from) * 1000)) {
      setSelected({
        from: date.utc(),
        to: null
      });
      handleSelection({
        from: date,
        to: null
      });
      return;
    }
    if (moment.isMoment(selected == null ? void 0 : selected.from) && !(selected != null && selected.to) && !(selected != null && selected.from.isSame(date.utc(), "day"))) {
      const newSelection = selected != null && selected.from.isBefore(date) ? {
        from: selected.from,
        to: date.utc()
      } : {
        from: date.utc(),
        to: selected.from
      };
      setSelected(newSelection);
      handleSelection({
        from: newSelection.from,
        to: newSelection.to
      });
    } else if (moment.isMoment(selected == null ? void 0 : selected.from) && moment.isMoment(selected == null ? void 0 : selected.to)) {
      setSelected({
        from: date,
        to: null
      });
      handleSelection({
        from: date,
        to: null
      });
    } else if (moment.isMoment(selected == null ? void 0 : selected.from) && selected != null && selected.from.isSame(date.utc(), "day") && !required) {
      setSelected(null);
      handleSelection(undefined);
    } else if (selected.from === null && selected.to === null) {
      setSelected({
        from: date.utc(),
        to: null
      });
      handleSelection({
        from: date,
        to: date
      });
    }
  };
  const handleSave = () => {
    if (onSave) {
      toggleCalendar();
      if (mode === "custom" && !(selected != null && selected.to)) {
        setSelected({
          from: moment.utc(selected == null ? void 0 : selected.from),
          to: moment.utc(selected == null ? void 0 : selected.from)
        });
      }
      if (selected) {
        onSave({
          from: moment.utc(selected == null ? void 0 : selected.from).unix(),
          to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
        });
      } else {
        if (!required) {
          onSave(undefined);
          setCurrentDate(moment.utc());
          setTargetDate(moment.utc());
        }
      }
    }
  };
  const handleMonthChange = useCallback(direction => {
    setMonthTransitionDirection(direction);
    if (isMonthSelectOpen) {
      setTargetDate(prevDate => {
        if (prevDate) {
          return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
        }
        return prevDate;
      });
      if (disableAnimations) {
        setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
      }
    } else {
      setTargetDate(prevDate => {
        if (prevDate) {
          return direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month");
        }
        return prevDate;
      });
      if (disableAnimations) {
        setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "month") : prevDate.clone().add(1, "month"));
      }
    }
  }, [disableAnimations, isMonthSelectOpen]);
  const handleYearChange = useCallback(direction => {
    if (isMonthSelectOpen && !disableAnimations) {
      setMonthTransitionDirection(direction);
    } else {
      setCurrentDate(prevDate => direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year"));
    }
    setTargetDate(prevDate => {
      if (prevDate) {
        return direction === "prev" ? prevDate.clone().subtract(1, "year") : prevDate.clone().add(1, "year");
      }
      return prevDate;
    });
  }, [disableAnimations, isMonthSelectOpen]);
  const onAnimationEnd = () => {
    if (targetDate) {
      setCurrentDate(targetDate);
      setMonthTransitionDirection(null);
    }
  };
  const handleYearSelect = year => {
    setCurrentDate(currentDate.clone().year(year));
    setTargetDate(currentDate.clone().year(year));
    setIsYearSelectOpen(false);
    setIsMonthSelectOpen(true);
  };
  const handleMonthSelect = month => {
    const newDate = currentDate.clone().utc().month(month);
    setCurrentDate(newDate);
    setTargetDate(newDate);
    if (mode === "monthly") {
      var _selected$to;
      const range = {
        from: newDate.clone().startOf("month"),
        to: newDate.clone().endOf("month").startOf("day")
      };
      const isSameMonth = (selected == null ? void 0 : selected.from.isSame(range.from, "month")) && (selected == null || (_selected$to = selected.to) == null ? void 0 : _selected$to.isSame(range.to, "month"));
      if (isSameMonth) {
        if (!required) {
          handleSelection(undefined);
          if (instant && onSave) {
            setCurrentDate(moment.utc());
            setTargetDate(moment.utc());
          }
        }
      } else {
        handleSelection(range);
      }
    }
    if (mode === "quarterly") {
      var _selected$to2;
      const quarterRange = {
        from: newDate.clone().startOf("quarter"),
        to: newDate.clone().endOf("quarter").startOf("day")
      };
      const isSameQuarter = (selected == null ? void 0 : selected.from.isSame(quarterRange.from, "quarter")) && (selected == null || (_selected$to2 = selected.to) == null ? void 0 : _selected$to2.isSame(quarterRange.to, "quarter"));
      if (isSameQuarter) {
        if (!required) {
          handleSelection(undefined);
          if (instant && onSave) {
            setCurrentDate(moment.utc());
            setTargetDate(moment.utc());
          }
        }
      } else {
        handleSelection(quarterRange);
      }
    }
    if (mode !== "monthly" && mode !== "quarterly") {
      setIsMonthSelectOpen(false);
    }
    if (instant && (mode === "monthly" || mode === "quarterly") && forceClose) toggleCalendar();
  };
  useEffect(() => {
    if (isYearSelectOpen && selectedYearRef.current) {
      var _selectedYearRef$curr;
      selectedYearRef == null || (_selectedYearRef$curr = selectedYearRef.current) == null || _selectedYearRef$curr.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  }, [isYearSelectOpen]);
  const renderDaysOfWeek = () => {
    const daysOfWeek = moment.weekdaysShort();
    const orderedDays = [...daysOfWeek.slice(firstDayOfWeek), ...daysOfWeek.slice(0, firstDayOfWeek)];
    return orderedDays.map(day => /*#__PURE__*/React.createElement(StyledDayName, {
      key: day
    }, day[0]));
  };
  const animationClass = useMemo(() => {
    return monthTransitionDirection && !disableAnimations ? monthTransitionDirection === "next" ? "slide-down" : "slide-up" : "";
  }, [disableAnimations, monthTransitionDirection]);
  const handleDayClick = (day, modifiers) => {
    if (modifiers.some(mod => mod === "day_disabled")) {
      return;
    }
    if (onDayClick) onDayClick(day, modifiers);
    handleDateSelect(day);
  };
  const getHoverRange = () => {
    if (!hoveredDate) return null;
    if (mode === "quarterly") {
      const startMonth = hoveredDate.clone().startOf("quarter");
      const endMonth = hoveredDate.clone().endOf("quarter");
      return {
        from: startMonth,
        to: endMonth
      };
    }
    if (mode === "weekly") {
      const currentDayOfWeek = hoveredDate.day();
      const daysToSubtract = (currentDayOfWeek - firstDayOfWeek + 7) % 7;
      const startOfWeek = hoveredDate.clone().subtract(daysToSubtract, "days").startOf("day");
      const endOfWeek = startOfWeek.clone().add(6, "days");
      return {
        from: startOfWeek,
        to: endOfWeek
      };
    }
    if (mode === "custom" && selected != null && selected.from && !(selected != null && selected.to)) {
      const from = selected.from.isBefore(hoveredDate) ? selected.from : hoveredDate;
      const to = selected.from.isAfter(hoveredDate) ? selected.from : hoveredDate;
      return {
        from,
        to
      };
    }
    return null;
  };
  const renderCalendarDates = () => {
    const startOfMonth = currentDate.clone().startOf("month");
    const startDate = startOfMonth.clone().isoWeekday(firstDayOfWeek);
    const endDate = startDate.clone().add(6, "weeks");
    const date = startDate.clone();
    const dates = [];
    const hoverRange = getHoverRange();
    while (date.isBefore(endDate)) {
      const clonedDate = date.clone();
      const isToday = clonedDate.isSame(today, "day");
      const isSelected = selected && (clonedDate.isBetween(selected.from, selected.to, "day", "[]") || clonedDate.isSame(selected.from, "day") || clonedDate.isSame(selected.to, "day"));
      const isHovered = hoverRange && (mode === "weekly" || mode === "custom") && clonedDate.isBetween(hoverRange.from, hoverRange.to, "day", "[]");
      const isDisabled = effectiveDisabledDaysBefore && clonedDate.isBefore(effectiveDisabledDaysBefore, "day") || effectiveDisabledDaysAfter && clonedDate.isAfter(effectiveDisabledDaysAfter, "day") || disabledDays.includes(clonedDate.day());
      const modifierClasses = [];
      const modifierTitles = [];
      let titles;
      if (modifiers) Object.keys(modifiers || {}).forEach(modifier => {
        const _modifiers$modifier = modifiers[modifier](clonedDate),
          matched = _modifiers$modifier.matched,
          title = _modifiers$modifier.title;
        if (matched) {
          modifierClasses.push(modifier);
          if (title) modifierTitles.push(title);
        }
      });
      if (modifierTitles.length) {
        titles = /*#__PURE__*/React.createElement("div", {
          key: "title-wrapper-" + clonedDate.toString()
        }, modifierTitles.map((title, index) => /*#__PURE__*/React.createElement("div", {
          key: "title-text-" + index
        }, title)));
      }
      const isOutside = !clonedDate.isSame(currentDate, "month");
      dates.push(/*#__PURE__*/React.createElement(Tooltip, {
        title: titles,
        disable: !modifierTitles.length,
        key: clonedDate.toString(),
        popperTooltipClassName: popperTooltipClassName,
        popperTooltipStyle: popperTooltipStyle
      }, /*#__PURE__*/React.createElement(StyledCalendarDate, {
        className: (isSelected ? "selected" : "") + " " + (isToday ? "today-day" : "") + "\n          " + (isDisabled ? "disabled" : "") + " " + (isHovered ? "hovered" : "") + " " + modifierClasses.join(" ") + "\n          " + (isOutside ? "outside" : ""),
        onClick: () => handleDayClick(clonedDate, modifierClasses),
        onMouseEnter: mode === "weekly" || mode === "custom" ? () => setHoveredDate(clonedDate) : undefined,
        onMouseLeave: mode === "weekly" || mode === "custom" ? () => setHoveredDate(null) : undefined
      }, clonedDate.date())));
      date.add(1, "day");
    }
    return dates;
  };
  const renderYearSelect = () => {
    const years = Array.from({
      length: 200
    }, (_, i) => 1900 + i);
    return /*#__PURE__*/React.createElement(StyledYearSelect, null, years.map(year => {
      const isSelected = selected && ((selected == null ? void 0 : selected.to) && year >= selected.from.year() && year <= selected.to.year() || year === selected.from.year() || (selected == null ? void 0 : selected.to) && year === selected.to.year());
      const isDisabledYear = disabledDaysBefore && year < disabledDaysBefore.year() || disabledDaysAfter && year > disabledDaysAfter.year();
      return /*#__PURE__*/React.createElement(StyledYearOption, {
        key: year,
        ref: year === currentDate.year() ? selectedYearRef : null,
        className: (isSelected ? "selected" : "") + " " + (year === today.year() ? "today-year" : "") + " " + (isDisabledYear ? "disabled" : ""),
        onClick: () => handleYearSelect(year)
      }, year);
    }));
  };
  const renderMonthSelect = () => {
    const months = moment.months();
    const hoverRange = getHoverRange();
    return /*#__PURE__*/React.createElement(StyledMonthSelect, null, months.map((month, index) => {
      const monthDate = currentDate.clone().month(index);
      const isSelected = selected && (monthDate.isBetween(selected.from, selected.to, "month", "[]") || monthDate.isSame(selected.from, "month") || monthDate.isSame(selected.to, "month"));
      const isDisabledMonth = disabledDaysBefore && monthDate.isBefore(disabledDaysBefore, "month") || disabledDaysAfter && monthDate.isAfter(disabledDaysAfter, "month");
      const isHoveredQuarter = hoverRange && mode === "quarterly" && monthDate.isBetween(hoverRange.from, hoverRange.to, "month", "[]");
      return /*#__PURE__*/React.createElement(StyledMonthOption, {
        key: month,
        className: (isSelected ? "selected" : "") + " " + (index === today.month() && currentDate.year() === today.year() ? "today-month" : "") + " " + (isDisabledMonth ? "disabled" : "") + " " + (isHoveredQuarter ? "hovered" : ""),
        onClick: () => handleMonthSelect(index),
        onMouseEnter: mode === "quarterly" ? () => setHoveredDate(monthDate) : undefined,
        onMouseLeave: mode === "quarterly" ? () => setHoveredDate(null) : undefined
      }, month.substring(0, 3));
    }));
  };
  const captionText = useMemo(() => {
    const isCurrentYear = currentDate.isSame(today, "year");
    return !isMonthSelectOpen && !isYearSelectOpen ? "" + currentDate.format("MMMM") + (isCurrentYear ? "" : " " + currentDate.format("YYYY")) : currentDate.format("YYYY");
  }, [currentDate, isMonthSelectOpen, isYearSelectOpen, today]);
  const handleClear = useCallback(() => {
    if (typeof onClear === "function") onClear();
    handleSelection(undefined);
  }, [handleSelection, onClear]);
  const handleClose = useCallback(() => {
    var _selected$to3;
    if (mode === "custom" && instant && selected) {
      setSelected({
        from: moment.utc(selected == null ? void 0 : selected.from),
        to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to) : moment.utc(selected == null ? void 0 : selected.from)
      });
    }
    if (instant && onSave && mode === "custom" && selected && (!(selected != null && selected.from.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.from) * 1000))) || !(selected != null && (_selected$to3 = selected.to) != null && _selected$to3.isSame(moment.utc(Number(defaultSelected == null ? void 0 : defaultSelected.to) * 1000))))) {
      onSave({
        from: moment.utc(selected == null ? void 0 : selected.from).unix(),
        to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
      });
    }
    if (mode === "custom" && instant && !selected && onSave) {
      onSave(undefined);
    }
    setCurrentDate(defaultSelected != null && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment.utc());
    setTargetDate(defaultSelected != null && defaultSelected.from ? toMoment(defaultSelected.from) : month ? toMoment(month) : moment.utc());
    setSelected(defaultSelected != null && defaultSelected.from ? {
      from: toMoment(defaultSelected.from),
      to: defaultSelected.to ? toMoment(defaultSelected.to) : null
    } : null);
    toggleCalendar();
    setIsYearSelectOpen(false);
    setIsMonthSelectOpen(mode === "monthly" || mode === "quarterly");
    setMonthTransitionDirection(null);
    if (typeof onClose === "function") onClose();
  }, [defaultSelected, instant, mode, month, onClose, onSave, selected, toggleCalendar]);
  const handleBeforeClose = useCallback(() => {
    let shouldClose = true;
    if (!target || !enableConfirmModal || instant || required) {
      shouldClose = true;
    }
    if (target && enableConfirmModal && !instant && !required && (selected && !defaultSelected || !selected && defaultSelected || selected != null && selected.from && defaultSelected != null && defaultSelected.from && !selected.from.isSame(toMoment(defaultSelected.from)) || selected != null && selected.to && defaultSelected != null && defaultSelected.to && !selected.to.isSame(toMoment(defaultSelected.to)))) {
      shouldClose = false;
      setShowDiscardModal(true);
    }
    if (shouldClose) handleClose();
    return shouldClose;
  }, [defaultSelected, enableConfirmModal, handleClose, instant, required, selected, target]);
  const Wrapper = target ? Menu : "div";
  const handleCaptionClick = useCallback(() => {
    isMonthSelectOpen && !disableYearPicker ? toggleYearSelect() : toggleMonthSelect();
  }, [disableYearPicker, isMonthSelectOpen, toggleMonthSelect, toggleYearSelect]);
  const handleSaveDiscardModal = useCallback(() => {
    if (selected) {
      if (onChange) {
        onChange({
          from: moment.utc(selected == null ? void 0 : selected.from).unix(),
          to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
        });
      }
      if (onSave) {
        onSave({
          from: moment.utc(selected == null ? void 0 : selected.from).unix(),
          to: selected != null && selected.to ? moment.utc(selected == null ? void 0 : selected.to).unix() : moment.utc(selected == null ? void 0 : selected.from).unix()
        });
      }
    } else {
      if (onChange) onChange(undefined);
      if (onSave) onSave(undefined);
    }
    setShowDiscardModal(false);
    if (target) {
      setIsOpen(false);
      if (onCalendarToggle) onCalendarToggle(false);
    }
  }, [selected, target, onChange, onSave, onCalendarToggle]);
  const handleDiscardModal = useCallback(() => {
    setSelected(defaultSelected != null && defaultSelected.from ? {
      from: toMoment(defaultSelected.from),
      to: defaultSelected.to ? toMoment(defaultSelected.to) : null
    } : null);
    setShowDiscardModal(false);
    if (target) {
      setIsOpen(false);
      if (onCalendarToggle) onCalendarToggle(false);
    }
  }, [defaultSelected == null ? void 0 : defaultSelected.from, defaultSelected == null ? void 0 : defaultSelected.to, onCalendarToggle, target]);
  const wrapperProps = target ? {
    className: "c-date-picker--calendar",
    target,
    onBeforeClose: handleBeforeClose,
    onClose: handleClose,
    open: isOpen,
    active: isOpen,
    onOpen: toggleCalendar,
    position,
    menuClassName,
    popperClassName,
    backgroundElementClass
  } : {
    className: "c-date-picker--calendar"
  };
  useEffect(() => {
    const handleKeyDown = event => {
      if (event.key === "ArrowRight") {
        handleMonthChange("next");
      } else if (event.key === "ArrowLeft") {
        handleMonthChange("prev");
      } else if (event.key === "ArrowUp") {
        handleYearChange("next");
      } else if (event.key === "ArrowDown") {
        handleYearChange("prev");
      }
    };
    if (isOpen) {
      window.addEventListener("keydown", handleKeyDown);
    } else {
      window.removeEventListener("keydown", handleKeyDown);
    }
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen, handleMonthChange, handleYearChange]);
  const saveIsDisabled = () => {
    if (!target) return false;
    if (!defaultSelected && !selected) {
      return true;
    }
    if (defaultSelected && selected && defaultSelected.from && selected.from.isSame(toMoment(defaultSelected.from)) && defaultSelected.to && selected.to && selected.to.isSame(toMoment(defaultSelected.to))) {
      return true;
    }
    return false;
  };
  return /*#__PURE__*/React.createElement(StyledDatePickerWrapper, {
    ref: datePickerRef
  }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(StyledDatePickerContainerInner, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isYearSelectOpen ? null : /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => handleMonthChange("prev"),
    variant: "text gray",
    size: "small"
  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React.createElement(StyledCaption, {
    className: animationClass + " " + (isYearSelectOpen ? "year-caption" : ""),
    key: isMonthSelectOpen ? currentDate.year() : currentDate.month(),
    onClick: handleCaptionClick,
    onAnimationEnd: onAnimationEnd
  }, captionText), isYearSelectOpen ? null : /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => handleMonthChange("next"),
    variant: "text gray",
    size: "small"
  }, /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(StyledCalendarSelector, null, isYearSelectOpen ? renderYearSelect() : isMonthSelectOpen ? /*#__PURE__*/React.createElement(StyledMonthSelector, {
    className: animationClass,
    key: currentDate.year(),
    onAnimationEnd: onAnimationEnd
  }, renderMonthSelect()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledDaysOfWeek, null, renderDaysOfWeek()), /*#__PURE__*/React.createElement(StyledCalendarDates, {
    className: animationClass,
    key: currentDate.month()
  }, renderCalendarDates()))), (target || showControls) && (!instant ? /*#__PURE__*/React.createElement(StyledControls, null, /*#__PURE__*/React.createElement(StyledControlsLeft, null, /*#__PURE__*/React.createElement(Button, {
    size: "small",
    variant: "primary",
    onClick: handleSave,
    disabled: saveIsDisabled()
  }, saveLabel), /*#__PURE__*/React.createElement(Tooltip, {
    title: cancelLabel,
    popperTooltipStyle: {
      zIndex: 1301
    }
  }, /*#__PURE__*/React.createElement(IconButton, {
    size: "small",
    variant: "text gray",
    onClick: handleBeforeClose
  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))), !required ? /*#__PURE__*/React.createElement(Button, {
    size: "small",
    onClick: handleClear,
    variant: "text gray"
  }, clearLabel) : null) : !required ? /*#__PURE__*/React.createElement(StyledControls, null, /*#__PURE__*/React.createElement(StyledClearInstantButton, {
    size: "small",
    onClick: handleClear,
    variant: "text gray"
  }, clearLabel)) : null))), !instant && target && !required && enableConfirmModal ? /*#__PURE__*/React.createElement(StyledConfirmDialog, {
    className: "modal-select-date",
    open: showDiscardModal,
    onCancel: handleDiscardModal,
    onConfirm: handleSaveDiscardModal,
    dialogTitle: modalTitle,
    dialogContent: modalDescription,
    cancelBtnText: modalCancelBtnText,
    confirmBtnText: modalSaveBtnText
  }) : null);
};
//# sourceMappingURL=DatePicker.js.map