@activecollab/components 2.0.212 → 2.0.213

package/dist/esm/components/SelectDate/SelectDate.d.ts

@@ -1,7 +1,8 @@
 import { ElementType, FC, CSSProperties } from "react";
-import { DayModifiers } from "react-day-picker";
 import { Placement } from "@popperjs/core";
-import { DaysToModifyV1 } from "./types";
+import { Moment } from "moment";
+import { DaysToModify } from "./types";
+import { ChangeMode, TimestampDateRange } from "../DatePicker/DatePicker";
 type TriggerStringType = "text" | "icon" | "inline";
 type TriggerFunctionType = (text: string) => JSX.Element;
 export interface ISelectDate {
@@ -26,35 +27,29 @@ export interface ISelectDate {
     /** Tooltip text */
     tooltipText?: string;
     /** Called when day is clicked */
-    onDayClick?: (day: Date, modifiers: DayModifiers) => void;
-    /** Save changes in atomic mode */
-    onSave?: (dates?: {
-        from: number;
-        to: number;
-    }) => void;
-    /** On cancel closes datepicker or opens disard modal in atomic mode */
+    onDayClick?: (day: Moment, modifiers: string[]) => void;
+    /** Save changes callback */
+    onSave?: (dates?: TimestampDateRange) => void;
+    /** Changing dates callback */
+    onChange?: (dates?: TimestampDateRange) => void;
+    /** On cancel closes datepicker or opens discard modal in atomic mode */
     onCancel?: () => void;
     /** Clear dates when they are not required */
     onClear?: () => void;
     /** Use this callback to get is picker visible */
     onToggleDatePicker?: (value: boolean) => void;
     /** Set selected day or days */
-    selectedDays?: {
-        from: number;
-        to: number;
-    };
+    selectedDays?: TimestampDateRange;
     /** Set month */
-    defaultMonth?: Date;
+    defaultMonth?: Moment;
     /** Set selection range */
-    selectionMode?: string;
+    selectionMode?: ChangeMode;
     /** Set is date required */
     required?: boolean;
     /** Set default show on date picker (only for text and icon mode) */
     defaultShowDatePicker?: boolean;
     /** Long date format (Always show year) */
     longDateFormat?: boolean;
-    /** Set is date required */
-    defaultTimezoneAware?: boolean;
     /** Set first day of week */
     firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /** One of icon types */
@@ -74,7 +69,7 @@ export interface ISelectDate {
     /** Background style for clickable element after the menu is open (opacity, color, etc...) */
     backgroundElementClass?: string;
     /** Days to modify */
-    daysToModify?: DaysToModifyV1[];
+    daysToModify?: DaysToModify[];
     /** Array of weekend days */
     weekends?: number[];
     /** Weekend label */
@@ -94,7 +89,13 @@ export interface ISelectDate {
     /** Position of selectDate menu */
     position?: Placement;
     /** Disable days before specified date */
-    disableDaysBefore?: Date;
+    disableDaysBefore?: Moment;
+    /** Disable days after specified date */
+    disabledDaysAfter?: Moment;
+    /** Enable year selector */
+    enableYearPicker?: boolean;
+    /** Disable aniamtions */
+    disableAnimations?: boolean;
 }
 export declare const SelectDate: FC<ISelectDate>;
 export {};

package/dist/esm/components/SelectDate/SelectDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDate.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectDate/SelectDate.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectDate.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectDate/SelectDate.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/SelectDate/SelectDate.js

@@ -1,23 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import classnames from "classnames";
-import moment from "moment";
-import { DatePickerForm } from "./DatePickerForm";
+import moment from "moment-timezone";
 import { SelectDateTarget } from "./SelectDateTarget";
-import { StyledConfirmDialog, StyledSelectDate, StyledSelectDateButton } from "./Styles";
+import { StyledSelectDate, StyledSelectDateButton } from "./Styles";
 import { formatDate } from "../../utils/dateUtils";
-import { useLocalization } from "../Localization";
-import { Menu } from "../Menu/Menu";
-import { Tooltip } from "../Tooltip/Tooltip";
-const getUtcTimestampFromDate = date => {
-  return moment.utc([date.getFullYear(), date.getMonth(), date.getDate()]).unix();
-};
+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 from = new Date(day.getFullYear(), data.from.getMonth(), data.from.getDate());
-    const to = new Date(day.getFullYear(), data.to.getMonth(), data.to.getDate());
-    return day >= from && day <= to;
+    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 >= data.from && day <= data.to;
+  return day.isSameOrAfter(fromMoment, "day") && day.isSameOrBefore(toMoment, "day");
 };
 export const SelectDate = _ref => {
   let {
@@ -35,7 +40,6 @@ export const SelectDate = _ref => {
     onCancel,
     onToggleDatePicker,
     required: dateRequired = false,
-    defaultTimezoneAware = false,
     longDateFormat = false,
     defaultShowDatePicker = false,
     firstDayOfWeek = 0,
@@ -48,7 +52,7 @@ export const SelectDate = _ref => {
     targetTextClassName,
     targetIconClassName,
     backgroundElementClass,
-    dateFormat: passedDateFormat,
+    dateFormat,
     defaultMonth,
     daysToModify = [],
     weekends = [],
@@ -61,251 +65,86 @@ export const SelectDate = _ref => {
     popperClassName,
     popperTooltipStyle,
     position,
-    disableDaysBefore
+    disableDaysBefore,
+    enableYearPicker,
+    disableAnimations,
+    disabledDaysAfter,
+    onChange
   } = _ref;
-  const [timezoneAware, setTimezoneAware] = useState(defaultTimezoneAware);
-  const localization = useLocalization();
-  const dateFormat = passedDateFormat ? passedDateFormat : localization.dateFormat;
   const labelText = useMemo(() => {
     if (!selectedDays) {
       return defaultLabelText;
+    } else if (!selectedDays.from && !selectedDays.to) {
+      return defaultLabelText;
     } else {
-      const endDate = timezoneAware ? moment.unix(selectedDays.to).local() : moment.unix(selectedDays.to).utc();
-      const startDate = timezoneAware ? moment.unix(selectedDays.from).local() : moment.unix(selectedDays.from).utc();
-      const formattedEndDate = formatDate(endDate, dateFormat, longDateFormat);
-      const formattedStartDate = formatDate(startDate, dateFormat, longDateFormat);
-      if (selectedDays.from === selectedDays.to) {
+      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;
       }
-      return formattedStartDate + " - " + formattedEndDate;
-    }
-  }, [selectedDays, dateFormat, timezoneAware, defaultLabelText, longDateFormat]);
-  const modifiedDates = useMemo(() => {
-    if (typeof selectedDays === "object" && !!selectedDays.from && !!selectedDays.to) {
-      if (timezoneAware) {
-        return {
-          from: moment.unix(selectedDays.from).toDate(),
-          to: moment.unix(selectedDays.to).toDate()
-        };
-      }
-      const offsetFrom = moment.unix(selectedDays.from).utcOffset() * 60;
-      const offsetTo = moment.unix(selectedDays.to).utcOffset() * 60;
-      return {
-        from: new Date((selectedDays.from - offsetFrom) * 1000),
-        to: new Date((selectedDays.to - offsetTo) * 1000)
-      };
-    }
-  }, [selectedDays, timezoneAware]);
-  const handleModifiedSave = useCallback(selectedDates => {
-    setTimezoneAware(false);
-    if (typeof onSave === "function") {
-      if (typeof selectedDates === "object" && Object.prototype.hasOwnProperty.call(selectedDates, "from") && Object.prototype.hasOwnProperty.call(selectedDates, "to")) {
-        onSave({
-          from: getUtcTimestampFromDate(selectedDates.from),
-          to: getUtcTimestampFromDate(selectedDates.to)
-        });
-      } else {
-        onSave(undefined);
-      }
-    }
-  }, [onSave]);
-  const getDefaultMonth = useCallback(() => {
-    let date = new Date();
-    if (typeof selectedDays === "object" && !!selectedDays.from) {
-      date = timezoneAware ? new Date(selectedDays.from * 1000) : new Date((selectedDays.from - moment.unix(selectedDays.from).utcOffset() * 60) * 1000);
-    } else if (defaultMonth) {
-      date = defaultMonth;
-    }
-
-    // forcing second day in month
-    return new Date(date.getFullYear(), date.getMonth(), 2);
-  }, [defaultMonth, selectedDays, timezoneAware]);
-  const [month, setMonth] = useState(getDefaultMonth);
-  const handleMonthChange = useCallback(month => {
-    setMonth(month);
-  }, [setMonth]);
-  const [newDates, setNewDates] = useState(modifiedDates);
-  const [showDiscardModal, setShowDiscardModal] = useState(false);
-  const [showDatePicker, setShowDatePicker] = useState(defaultShowDatePicker);
-  const disabledSaveButton = useMemo(() => {
-    return (modifiedDates == null ? void 0 : modifiedDates.from) === (newDates == null ? void 0 : newDates.from) && (modifiedDates == null ? void 0 : modifiedDates.to) === (newDates == null ? void 0 : newDates.to);
-  }, [modifiedDates, newDates]);
-  useEffect(() => {
-    setShowDatePicker(defaultShowDatePicker);
-  }, [defaultShowDatePicker]);
-  useEffect(() => {
-    setNewDates(modifiedDates);
-  }, [modifiedDates]);
-  useEffect(() => {
-    typeof onToggleDatePicker === "function" && onToggleDatePicker(showDatePicker);
-  }, [showDatePicker, onToggleDatePicker]);
-  useEffect(() => {
-    if (!showDatePicker) {
-      setMonth(getDefaultMonth());
-    }
-  }, [showDatePicker, getDefaultMonth]);
-  const handleSave = useCallback(() => {
-    handleModifiedSave(newDates);
-    setShowDatePicker(false);
-  }, [newDates, handleModifiedSave]);
-  const handleChange = useCallback(dates => {
-    if (mode !== "atomic") {
-      handleModifiedSave(dates);
-    }
-    setNewDates(dates);
-  }, [mode, handleModifiedSave]);
-  const handleBeforeCloseMenu = useCallback(() => {
-    let result = true;
-    if (modifiedDates && !newDates || !modifiedDates && newDates) {
-      result = false;
-    }
-    const selectedDaysFrom = modifiedDates == null ? void 0 : modifiedDates.from;
-    const selectedDaysTo = modifiedDates == null ? void 0 : modifiedDates.to;
-    const newDatesFrom = newDates == null ? void 0 : newDates.from;
-    const newDatesTo = newDates == null ? void 0 : newDates.to;
-    if (selectedDaysFrom && newDatesFrom && selectedDaysTo && newDatesTo && (moment(selectedDaysFrom).format("DD-MM-YYYY") !== moment(newDatesFrom).format("DD-MM-YYYY") || moment(selectedDaysTo).format("DD-MM-YYYY") !== moment(newDatesTo).format("DD-MM-YYYY"))) {
-      result = false;
-    }
-    if (!result) {
-      setShowDiscardModal(true);
-    }
-    return result;
-  }, [modifiedDates, newDates]);
-  const handleClose = useCallback(() => {
-    if (mode !== "atomic" || handleBeforeCloseMenu()) {
-      typeof onCancel === "function" && onCancel();
-      setShowDatePicker(false);
-    }
-  }, [mode, onCancel, handleBeforeCloseMenu]);
-  const handleCancel = useCallback(event => {
-    event && event.preventDefault();
-    return handleClose();
-  }, [handleClose]);
-  const handleShowDatePicker = useCallback(() => {
-    setShowDatePicker(!showDatePicker);
-  }, [showDatePicker]);
-  const handleCloseDiscardModal = useCallback(() => {
-    setShowDiscardModal(false);
-  }, []);
-  const handleClear = useCallback(() => {
-    if (!dateRequired) {
-      setNewDates(undefined);
-      if (mode === "instant") {
-        handleModifiedSave(undefined);
+      if (!selectedDays.to && selectedDays.from) {
+        return formattedStartDate;
       }
+      return formattedStartDate + " - " + formattedEndDate;
     }
-  }, [mode, dateRequired, handleModifiedSave]);
-  const handleSaveDiscardModal = useCallback(() => {
-    setNewDates(modifiedDates);
-    setShowDiscardModal(false);
-    setShowDatePicker(false);
-  }, [modifiedDates]);
+  }, [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 => {
-        // construct new date because react-day-picker returns date with hours set
-        const currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return userAvailabilities.some(data => isDayInRange(currentDay, data));
+        const matchedData = userAvailabilities.find(data => isDayInRange(day, data));
+        return {
+          matched: !!matchedData,
+          title: matchedData ? matchedData.title : null
+        };
       },
       weekend: day => {
-        return weekends.some(value => day.getDay() === value);
+        const isWeekend = weekends.includes(day.day());
+        return {
+          matched: isWeekend,
+          title: isWeekend ? weekendLabel : null
+        };
       },
       nonWorkingDay: day => {
-        // return true if day is weekend day
-        if (weekends.some(value => value === day.getDay())) {
-          return true;
+        if (weekends.includes(day.day())) {
+          return {
+            matched: true,
+            title: ""
+          };
         }
         const nonWorkingDays = [...selectableGlobalDaysOff, ...globalDaysOff];
-        const currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return nonWorkingDays.some(data => isDayInRange(currentDay, data));
+        const matchedData = nonWorkingDays.find(data => isDayInRange(day, data));
+        return {
+          matched: !!matchedData,
+          title: matchedData ? matchedData.title : null
+        };
       },
-      day_disabled: day => {
-        if (disableDaysBefore) {
-          if (day.toJSON().slice(0, 10) < disableDaysBefore.toJSON().slice(0, 10)) {
-            return true;
-          }
-        }
-        // return true if day is weekend day
-        if (!weekendIsSelectable && weekends.some(value => value === day.getDay())) {
-          return true;
-        }
-        // construct new date because react-day-picker returns date with hours set
-        const currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return globalDaysOff.some(data => isDayInRange(currentDay, data));
+      nonWorkingDaysOfWeek: day => {
+        const isNonWorkingDay = nonWorkingDaysOfWeek.includes(day.day());
+        return {
+          matched: isNonWorkingDay,
+          title: isNonWorkingDay ? nonWorkingDaysOfWeekLabel : null
+        };
       },
-      nonWorkingDaysOfWeek: {
-        dayOfWeek: nonWorkingDaysOfWeek
+      day_disabled: day => {
+        const globalDayOff = globalDaysOff.find(data => isDayInRange(day, data));
+        return {
+          matched: !!globalDayOff,
+          title: null
+        };
       }
     };
-  }, [daysToModify, nonWorkingDaysOfWeek, weekends, disableDaysBefore, weekendIsSelectable]);
-  const renderDay = useCallback(props => {
-    const titles = [];
-    if (weekends.some(value => props.date.getDay() === value)) {
-      titles.push(weekendLabel);
-    }
-    if (nonWorkingDaysOfWeek.includes(props.date.getDay())) {
-      titles.push(nonWorkingDaysOfWeekLabel);
-    }
-
-    // construct new date because react-day-picker returns date with hours set
-    const currentDay = new Date(props.date.getFullYear(), props.date.getMonth(), props.date.getDate());
-    daysToModify.forEach(data => {
-      if (isDayInRange(currentDay, data)) {
-        titles.push(data.title);
-      }
-    });
-    const child = /*#__PURE__*/React.createElement("div", {
-      className: "c-DayPicker-Day-Number"
-    }, props.date.getDate());
-    if (titles.length) {
-      const title = /*#__PURE__*/React.createElement("div", {
-        key: "title-wrapper-" + props.date.getDate()
-      }, titles.map((title, index) => /*#__PURE__*/React.createElement("div", {
-        key: "title-text-" + index
-      }, title)));
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        title: title,
-        popperTooltipClassName: popperTooltipClassName,
-        popperTooltipStyle: popperTooltipStyle
-      }, child);
-    }
-    return child;
-  }, [weekends, nonWorkingDaysOfWeek, daysToModify, weekendLabel, nonWorkingDaysOfWeekLabel, popperTooltipClassName, popperTooltipStyle]);
-  const renderDatePickerForm = useCallback(() => {
-    return /*#__PURE__*/React.createElement(DatePickerForm, {
-      onMonthChange: handleMonthChange,
-      month: month,
-      mode: mode,
-      selectionMode: selectionMode,
-      dateRequired: dateRequired,
-      selectedDays: newDates,
-      firstDayOfWeek: firstDayOfWeek,
-      saveButtonText: saveButtonText,
-      cancelButtonText: cancelButtonText,
-      clearButtonText: clearButtonText,
-      onDayClick: onDayClick,
-      onSave: handleSave,
-      onChange: handleChange,
-      onCancel: handleCancel,
-      onClear: handleClear,
-      disabledSaveButton: disabledSaveButton,
-      modifiers: modifiers,
-      renderDay: renderDay
-    });
-  }, [handleMonthChange, month, mode, selectionMode, dateRequired, newDates, firstDayOfWeek, saveButtonText, cancelButtonText, clearButtonText, onDayClick, handleSave, handleChange, handleCancel, handleClear, disabledSaveButton, modifiers, renderDay]);
+  }, [daysToModify, nonWorkingDaysOfWeek, nonWorkingDaysOfWeekLabel, weekendLabel, weekends]);
   const renderTargetEl = useMemo(() => {
     if (labelType === "icon" && icon) {
       return /*#__PURE__*/React.createElement(SelectDateTarget, {
         icon: icon,
         title: tooltipText,
         targetIconClassName: targetIconClassName,
-        forceHideTooltip: showDatePicker,
         popperTooltipClassName: popperTooltipClassName,
-        popperTooltipStyle: popperTooltipStyle,
-        active: showDatePicker
+        popperTooltipStyle: popperTooltipStyle
       });
     }
     if (typeof labelType === "function") {
@@ -317,29 +156,68 @@ export const SelectDate = _ref => {
     }, /*#__PURE__*/React.createElement("span", {
       className: targetTextClassName
     }, labelText));
-  }, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, showDatePicker, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
+  }, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
   return /*#__PURE__*/React.createElement(StyledSelectDate, {
     className: "select-date"
-  }, labelType !== "inline" ? /*#__PURE__*/React.createElement(Menu, {
+  }, labelType !== "inline" ? /*#__PURE__*/React.createElement(DatePicker, {
     target: renderTargetEl,
-    open: showDatePicker,
-    onOpen: handleShowDatePicker,
-    onBeforeClose: handleBeforeCloseMenu,
-    onClose: handleClose,
     position: position,
     menuClassName: menuClassName,
     popperClassName: popperClassName,
-    backgroundElementClass: backgroundElementClass
-  }, renderDatePickerForm()) : renderDatePickerForm(), mode === "atomic" ? /*#__PURE__*/React.createElement(StyledConfirmDialog, {
-    className: "modal-select-date",
-    open: showDiscardModal,
-    onCancel: handleCloseDiscardModal,
-    onConfirm: handleSaveDiscardModal,
-    dialogTitle: modalHeaderText,
-    dialogContent: modalDiscardMessage,
-    cancelBtnText: modalCancelBtnText,
-    confirmBtnText: modalDiscardBtnText
-  }) : null);
+    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
+  }) : /*#__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