bge-ui 1.3.4 → 1.3.6

package/src/datePicker/style/main.scss

@@ -0,0 +1,259 @@
+@import "components/DatepickerInput";
+@import "components/DatepickerMenu";
+@import "components/Calendar";
+@import "components/MonthYearInput";
+@import "components/SelectionOverlay";
+@import "components/TimeInput";
+@import "components/ActionRow";
+@import "components/QuarterPicker";
+@import "components/shared";
+
+:root {
+  --dp-common-transition: all 0.1s ease-in;
+  --dp-menu-padding: 0;
+  --dp-animation-duration: 0.1s;
+  --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);
+  --dp-transition-timing: ease-out;
+  --dp-action-row-transtion: all 0.2s ease-in;
+  --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans",
+  "Helvetica Neue", sans-serif;
+  --dp-border-radius: 4px;
+  --dp-cell-border-radius: 4px;
+  --dp-transition-length: 22px;
+  --dp-transition-timing-general: 0.1s;
+  --dp-button-height: 35px;
+  --dp-month-year-row-height: 22px;
+  --dp-month-year-row-button-size: 25px;
+  --dp-button-icon-height: 20px;
+  --dp-calendar-wrap-padding: 0 5px;
+  --dp-cell-size: 32px;
+  --dp-cell-padding: 5px;
+  --dp-common-padding: 10px;
+  --dp-input-icon-padding: 35px;
+  --dp-input-padding: 6px 30px 6px 12px;
+  --dp-menu-min-width: 260px;
+  --dp-action-buttons-padding: 1px 6px;
+  --dp-row-margin: 5px 0;
+  --dp-calendar-header-cell-padding: 0.5rem;
+  --dp-multi-calendars-spacing: 10px;
+  --dp-overlay-col-padding: 3px;
+  --dp-time-inc-dec-button-size: 32px;
+  --dp-font-size: 14px;
+  --dp-preview-font-size: 0.8rem;
+  --dp-time-font-size: 2rem;
+  --dp-action-button-height: 22px;
+  --dp-action-row-padding: 8px;
+  --dp-direction: ltr;
+}
+
+.dp__theme_dark {
+  --dp-background-color: var(--bg-float);
+  --dp-text-color: var(--tc-secondary);
+  --dp-hover-color: var(--bg-opacity);
+  --dp-hover-text-color: var(--tc-title);
+  --dp-hover-icon-color: #959595;
+  --dp-primary-color: var(--persistent-bg-theme);
+  --dp-primary-disabled-color: #61a8ea;
+  --dp-primary-text-color: var(--persistent-black);
+  --dp-secondary-color: var(--tc-quaternary);
+  --dp-border-color: #2d2d2d;
+  --dp-menu-border-color: #2d2d2d;
+  --dp-border-color-hover: #aaaeb7;
+  --dp-border-color-focus: #aaaeb7;
+  --dp-disabled-color: #737373;
+  --dp-disabled-color-text: #d0d0d0;
+  --dp-scroll-bar-background: #212121;
+  --dp-scroll-bar-color: #484848;
+  --dp-success-color: #00701a;
+  --dp-success-color-disabled: #428f59;
+  --dp-icon-color: var(--tc-tertiary);
+  --dp-danger-color: #e53935;
+  --dp-marker-color: #e53935;
+  --dp-tooltip-color: #3e3e3e;
+  --dp-highlight-color: rgb(0 92 178 / 20%);
+  --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
+  --dp-range-between-border-color: transparent;
+  --dp-loader: 5px solid #005cb2;
+}
+
+.dp__theme_light {
+  --dp-background-color: #fff;
+  --dp-text-color: #212121;
+  --dp-hover-color: #f3f3f3;
+  --dp-hover-text-color: #212121;
+  --dp-hover-icon-color: #959595;
+  --dp-primary-color: var(--persistent-bg-theme);
+  --dp-primary-disabled-color: #6bacea;
+  --dp-primary-text-color: #fff;
+  --dp-secondary-color: var(--tc-quaternary);
+  --dp-border-color: #ddd;
+  --dp-menu-border-color: #ddd;
+  --dp-border-color-hover: #aaaeb7;
+  --dp-border-color-focus: #aaaeb7;
+  --dp-disabled-color: #f6f6f6;
+  --dp-scroll-bar-background: #f3f3f3;
+  --dp-scroll-bar-color: #959595;
+  --dp-success-color: #76d275;
+  --dp-success-color-disabled: #a3d9b1;
+  --dp-icon-color: var(--tc-tertiary);;
+  --dp-danger-color: #ff6f60;
+  --dp-marker-color: #ff6f60;
+  --dp-tooltip-color: #fafafa;
+  --dp-disabled-color-text: #8e8e8e;
+  --dp-highlight-color: rgb(25 118 210 / 10%);
+  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
+  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
+  --dp-range-between-border-color: transparent;
+  --dp-loader: 5px solid #1976d2;
+}
+
+.dp__flex {
+  display: flex;
+  align-items: center;
+}
+
+.dp__btn {
+  @extend %dp--btn-placeholder;
+
+  background: none;
+}
+
+.dp__main {
+  font-family: var(--dp-font-family);
+  user-select: none;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+}
+
+.dp__main * {
+  direction: var(--dp-direction, ltr);
+}
+
+.dp__pointer {
+  cursor: pointer;
+}
+
+// Allow control of color property on icons
+.dp__icon {
+  stroke: currentcolor;
+  fill: currentcolor;
+}
+
+// Div style that is displayed on the bottom of the menu for switching layouts
+.dp__button {
+  width: 100%;
+  text-align: center;
+  color: var(--dp-icon-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  place-content: center center;
+  padding: var(--dp-common-padding);
+  box-sizing: border-box;
+  height: var(--dp-button-height);
+
+  &.dp__overlay_action {
+    position: absolute;
+    bottom: 0;
+  }
+
+  &:hover {
+    background: var(--dp-hover-color);
+    color: var(--dp-hover-icon-color);
+  }
+
+  svg {
+    height: var(--dp-button-icon-height);
+    width: auto;
+  }
+}
+
+.dp__button_bottom {
+  border-bottom-left-radius: var(--dp-border-radius);
+  border-bottom-right-radius: var(--dp-border-radius);
+}
+
+.dp__flex_display {
+  display: flex;
+}
+
+.dp__flex_display_with_input {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.dp__relative {
+  position: relative;
+}
+
+.calendar-next-enter-active,
+.calendar-next-leave-active,
+.calendar-prev-enter-active,
+.calendar-prev-leave-active {
+  transition: all var(--dp-transition-timing-general) ease-out;
+}
+
+.calendar-next-enter-from {
+  opacity: 0;
+  transform: translateX(var(--dp-transition-length));
+}
+
+.calendar-next-leave-to {
+  opacity: 0;
+  transform: translateX(calc(var(--dp-transition-length) * -1));
+}
+
+.calendar-prev-enter-from {
+  opacity: 0;
+  transform: translateX(calc(var(--dp-transition-length) * -1));
+}
+
+.calendar-prev-leave-to {
+  opacity: 0;
+  transform: translateX(var(--dp-transition-length));
+}
+
+.dp-menu-appear-bottom-enter-active,
+.dp-menu-appear-bottom-leave-active,
+.dp-menu-appear-top-enter-active,
+.dp-menu-appear-top-leave-active,
+.dp-slide-up-enter-active,
+.dp-slide-up-leave-active,
+.dp-slide-down-enter-active,
+.dp-slide-down-leave-active {
+  transition: all var(--dp-animation-duration) var(--dp-transition-timing);
+}
+
+.dp-menu-appear-top-enter-from,
+.dp-menu-appear-top-leave-to,
+.dp-slide-down-leave-to,
+.dp-slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(var(--dp-transition-length));
+}
+
+.dp-menu-appear-bottom-enter-from,
+.dp-menu-appear-bottom-leave-to,
+.dp-slide-down-enter-from,
+.dp-slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(calc(var(--dp-transition-length) * -1));
+}
+
+.dp--arrow-btn-nav {
+  transition: var(--dp-common-transition);
+
+  svg {
+    font-size: 12px !important;
+  }
+}
+
+.dp--highlighted {
+  background-color: var(--dp-highlight-color);
+}
+
+.dp--hidden-el {
+  visibility: hidden;
+}

package/src/datePicker/utils/date-utils.ts

@@ -0,0 +1,440 @@
+import {
+    parse,
+    isDate,
+    isValid,
+    setHours,
+    setMinutes,
+    setSeconds,
+    setMilliseconds,
+    isBefore,
+    isEqual,
+    isAfter,
+    set,
+    getHours,
+    getMinutes,
+    getSeconds,
+    getYear,
+    getMonth,
+    eachDayOfInterval,
+    addMonths,
+    startOfWeek,
+    endOfWeek,
+    setMonth,
+    setYear,
+    subMonths,
+    format,
+    startOfMonth,
+} from 'date-fns';
+import { errors } from '../utils/util';
+
+import type {
+    DateTimeSetter,
+    DateValue,
+    TimeModel,
+    TimeType,
+    TimeObj,
+    PossibleDate,
+    WeekStartNum,
+    IFormat,
+    Highlight,
+    HighlightFn,
+    MaybeDate,
+} from '../interfaces';
+
+import type { Duration, Locale } from 'date-fns';
+
+const parseTextToDate = (
+    value: string,
+    pattern: string,
+    time: TimeModel,
+    inputVal?: string,
+    onPaste?: boolean,
+    locale?: Locale,
+): Date | null => {
+    const parsedDate = parse(value, pattern.slice(0, value.length), new Date(), { locale });
+    if (isValid(parsedDate) && isDate(parsedDate)) {
+        if (inputVal || onPaste) return parsedDate;
+        return set(parsedDate, {
+            hours: +time.hours,
+            minutes: +time?.minutes,
+            seconds: +time?.seconds,
+            milliseconds: 0,
+        });
+    }
+    return null;
+};
+
+export const parseFreeInput = (
+    value: string,
+    pattern: string | string[] | ((value: string) => Date | null),
+    time: TimeModel | TimeModel[],
+    inputVal?: string,
+    onPaste?: boolean,
+    locale?: Locale,
+): Date | null => {
+    const defaultTime = Array.isArray(time) ? time[0] : time;
+    if (typeof pattern === 'string') {
+        return parseTextToDate(value, pattern, defaultTime, inputVal, onPaste, locale);
+    }
+
+    if (Array.isArray(pattern)) {
+        let parsedDate = null;
+        for (const textVal of pattern) {
+            parsedDate = parseTextToDate(value, textVal, defaultTime, inputVal, onPaste, locale);
+            if (parsedDate) {
+                break;
+            }
+        }
+        return parsedDate;
+    }
+
+    if (typeof pattern === 'function') {
+        return pattern(value);
+    }
+
+    return null;
+};
+
+export const getDate = (value?: PossibleDate) => (value ? new Date(value) : new Date());
+
+export const dateToUtc = (date: Date, preserve: boolean, enableSeconds: boolean) => {
+    if (preserve) {
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = enableSeconds ? date.getSeconds().toString().padStart(2, '0') : '00';
+
+        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}:${seconds}.000Z`;
+    }
+    const utcDate = Date.UTC(
+        date.getUTCFullYear(),
+        date.getUTCMonth(),
+        date.getUTCDate(),
+        date.getUTCHours(),
+        date.getUTCMinutes(),
+        date.getUTCSeconds(),
+    );
+
+    return new Date(utcDate).toISOString();
+};
+
+// Reset date time
+export const resetDateTime = (value: Date | string, beginning?: boolean): Date => {
+    const dateParse = getDate(JSON.parse(JSON.stringify(value)));
+    const timeReset = set(dateParse, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 });
+    return beginning ? startOfMonth(timeReset) : timeReset;
+};
+
+export const setDateTime = (
+    date: Date | null,
+    hours?: DateTimeSetter,
+    minutes?: DateTimeSetter,
+    seconds?: DateTimeSetter,
+): Date => {
+    let dateCopy = date ? getDate(date) : getDate();
+    if (hours || hours === 0) {
+        dateCopy = setHours(dateCopy, +hours);
+    }
+    if (minutes || minutes === 0) {
+        dateCopy = setMinutes(dateCopy, +minutes);
+    }
+    if (seconds || seconds === 0) {
+        dateCopy = setSeconds(dateCopy, +seconds);
+    }
+    return setMilliseconds(dateCopy, 0);
+};
+
+export const isDateBefore = (date: DateValue, dateToCompare: DateValue): boolean => {
+    if (!date || !dateToCompare) {
+        return false;
+    }
+    return isBefore(resetDateTime(date), resetDateTime(dateToCompare));
+};
+
+export const isDateEqual = (date: DateValue, dateToCompare: DateValue): boolean => {
+    if (!date || !dateToCompare) {
+        return false;
+    }
+    return isEqual(resetDateTime(date), resetDateTime(dateToCompare));
+};
+
+export const isDateAfter = (date: DateValue, dateToCompare: DateValue): boolean => {
+    if (!date || !dateToCompare) {
+        return false;
+    }
+    return isAfter(resetDateTime(date), resetDateTime(dateToCompare));
+};
+
+export const isDateBetween = (range: Date[], hoverDate: Date | null, dateToCheck: Date): boolean => {
+    if (range?.[0] && range?.[1]) {
+        return isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, range[1]);
+    }
+    if (range?.[0] && hoverDate) {
+        return (
+            (isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, hoverDate)) ||
+            (isDateBefore(dateToCheck, range[0]) && isDateAfter(dateToCheck, hoverDate))
+        );
+    }
+    return false;
+};
+
+export const resetDate = (date: Date | string): Date => {
+    const onFirst = set(new Date(date), { date: 1 });
+    return resetDateTime(onFirst);
+};
+
+export const sanitizeTime = (time: TimeModel, type?: TimeType, value?: number): Duration => {
+    if (type && (value || value === 0)) {
+        return Object.fromEntries(
+            (['hours', 'minutes', 'seconds'] as TimeType[]).map((timeType) => {
+                if (timeType === type) return [timeType, value];
+                return [timeType, !isNaN(+time[timeType]) ? +time[timeType] : undefined];
+            }),
+        );
+    }
+    return {
+        hours: !isNaN(+time.hours) ? +time.hours : undefined,
+        minutes: !isNaN(+time.minutes) ? +time.minutes : undefined,
+        seconds: !isNaN(+time.seconds) ? +time.seconds : undefined,
+    };
+};
+
+export const getTimeObj = (date: Date): TimeObj => {
+    return {
+        hours: getHours(date),
+        minutes: getMinutes(date),
+        seconds: getSeconds(date),
+    };
+};
+
+export const getMinMonth = (year: number, minDate?: PossibleDate) => {
+    if (minDate) {
+        const minYear = getYear(getDate(minDate));
+        if (minYear > year) return 12;
+        if (minYear === year) return getMonth(getDate(minDate));
+    }
+};
+
+export const getMaxMonth = (year: number, maxDate?: PossibleDate) => {
+    if (maxDate) {
+        const maxYear = getYear(getDate(maxDate));
+        if (maxYear < year) return -1;
+        if (maxYear === year) return getMonth(getDate(maxDate));
+        return undefined;
+    }
+    return undefined;
+};
+
+export const getMinMaxYear = (minMaxDate: PossibleDate) => {
+    if (minMaxDate) return getYear(getDate(minMaxDate));
+    return undefined;
+};
+
+export const getDaysInBetween = (dateOne: Date, dateTwo: Date) => {
+    // Check if selection is backwards
+    const start = isDateAfter(dateOne, dateTwo) ? dateTwo : dateOne;
+    const end = isDateAfter(dateTwo, dateOne) ? dateTwo : dateOne;
+    return eachDayOfInterval({ start, end });
+};
+
+// Add one month to a given date
+export const getNextMonthYear = (date: Date): { month: number; year: number } => {
+    const newDate = addMonths(date, 1);
+    return { month: getMonth(newDate), year: getYear(newDate) };
+};
+
+export const getWeekFromDate = (date: Date, weekStart: string | number): [Date, Date] => {
+    const start = startOfWeek(date, { weekStartsOn: +weekStart as WeekStartNum });
+    const end = endOfWeek(date, { weekStartsOn: +weekStart as WeekStartNum });
+    return [start, end];
+};
+
+export const assignDefaultTime = (
+    obj: TimeModel | Record<string, string | number>,
+    enableSeconds: boolean,
+): TimeModel => {
+    const defaultTime = {
+        hours: getHours(getDate()),
+        minutes: getMinutes(getDate()),
+        seconds: enableSeconds ? getSeconds(getDate()) : 0,
+    };
+    return Object.assign(defaultTime, obj);
+};
+
+export const getDateForCompare = (date: MaybeDate, month: number, year: number): [Date, Date] => {
+    return [set(getDate(date), { date: 1 }), set(getDate(), { month, year, date: 1 })];
+};
+
+export const setDateMonthOrYear = (date: DateValue, month?: number | null, year?: number | null): Date => {
+    let dateCopy = date ? getDate(date) : getDate();
+    if (month || month === 0) {
+        dateCopy = setMonth(dateCopy, month);
+    }
+    if (year) {
+        dateCopy = setYear(dateCopy, year);
+    }
+    return dateCopy;
+};
+
+export const validateMonthYear = (
+    date: Date,
+    maxDate: DateValue,
+    minDate: DateValue,
+    preventMinMaxNavigation: boolean,
+    next: boolean,
+) => {
+    if (!preventMinMaxNavigation) return false;
+    if (next && !maxDate) return false;
+    if (!next && !minDate) return false;
+    const compareDate = next ? addMonths(date, 1) : subMonths(date, 1);
+    const monthYear: [number, number] = [getMonth(compareDate), getYear(compareDate)];
+    return next ? !validateMaxDate(...monthYear, maxDate as Date) : !validateMinDate(...monthYear, minDate as Date);
+};
+
+export const validateMinDate = (month: number, year: number, minDate: Date): boolean => {
+    return (
+        isDateBefore(...getDateForCompare(minDate, month, year)) ||
+        isDateEqual(...getDateForCompare(minDate, month, year))
+    );
+};
+
+export const validateMaxDate = (month: number, year: number, maxDate: Date): boolean => {
+    return (
+        isDateAfter(...getDateForCompare(maxDate, month, year)) ||
+        isDateEqual(...getDateForCompare(maxDate, month, year))
+    );
+};
+
+export const formatDate = (
+    value: Date | Date[],
+    formatProp: IFormat | null,
+    formatLocale: Locale | null,
+    rangeSeparator: string,
+    modelAuto: boolean,
+    pattern: string,
+    parser?: boolean,
+) => {
+    if (typeof formatProp === 'function' && !parser) return formatProp(value);
+    const options = formatLocale ? { locale: formatLocale } : undefined;
+    if (Array.isArray(value)) {
+      let result = ''
+      if (isValidDate(value[0])) {
+        result += `${format(value[0], pattern, options)}`
+      }
+      result += `${modelAuto && !value[1] ? '' : rangeSeparator}`
+      if (isValidDate(value[1])) {
+        result += `${format(value[1], pattern, options)}`
+      }
+      return result
+        // return `${format(value[0], pattern, options)}${modelAuto && !value[1] ? '' : rangeSeparator}${
+        //     value[1] ? format(value[1], pattern, options) : ''
+        // }`;
+    }
+
+    return format(value, pattern, options);
+};
+
+export const checkPartialRangeValue = (isPartial: boolean): Date => {
+    if (isPartial) return null as unknown as Date;
+    throw new Error(errors.prop('partial-range'));
+};
+
+// Execute some code depending on the range prop, if not, throw error
+export const checkRangeEnabled = <T>(fn: () => T, range: boolean): T => {
+    if (range) return fn();
+    throw new Error(errors.prop('range'));
+};
+
+export const isValidDate = (value: Date | Date[] | null | (Date | null)[]): boolean => {
+    if (Array.isArray(value)) {
+        return isValid(value[0]) || (value[1] ? isValid(value[1]) : true);
+    }
+    return value ? isValid(value) : false;
+};
+
+export const setDateTimeFromObj = (time: TimeModel, date?: Date | null) => {
+    return set(date ?? getDate(), {
+        hours: +time.hours || 0,
+        minutes: +time.minutes || 0,
+        seconds: +time.seconds || 0,
+    });
+};
+
+/**
+ * Depending on the time or full date validation, validate if the selected time is valid
+ * Extracted logic from isValidTime fn
+ */
+export const validateTime = (
+    date: Date | null,
+    dateToCompare: Date,
+    compare: 'max' | 'min',
+    full: boolean,
+): boolean => {
+    if (!date) return true;
+    if (full) {
+        const valid = compare === 'max' ? isBefore(date, dateToCompare) : isAfter(date, dateToCompare);
+        const setOptions = { seconds: 0, milliseconds: 0 };
+        return valid || isEqual(set(date, setOptions), set(dateToCompare, setOptions));
+    }
+    return compare === 'max' ? date.getTime() <= dateToCompare.getTime() : date.getTime() >= dateToCompare.getTime();
+};
+
+const getDateForCompareValidation = (
+    minOrMax: TimeModel | null,
+    selected: Date,
+    minOrMaxDate: Date | string | null,
+) => {
+    return minOrMax ? setDateTimeFromObj(minOrMax, selected) : getDate(minOrMaxDate ?? selected);
+};
+
+export const checkTimeMinMax = (
+    minOrMax: TimeModel | null,
+    dateCompare: Date | string | null,
+    map: 'min' | 'max',
+    selectedDateTime: Date | Date[],
+    isValid: boolean,
+) => {
+    if (Array.isArray(selectedDateTime)) {
+        const dateOne = getDateForCompareValidation(minOrMax, selectedDateTime[0], dateCompare);
+        const dateTwo = getDateForCompareValidation(minOrMax, selectedDateTime[1], dateCompare);
+        return (
+            validateTime(selectedDateTime[0], dateOne, map, !!dateCompare) &&
+            validateTime(selectedDateTime[1], dateTwo, map, !!dateCompare) &&
+            isValid
+        );
+    }
+    const date = getDateForCompareValidation(minOrMax, selectedDateTime, dateCompare);
+    return validateTime(selectedDateTime, date, map, !!dateCompare) && isValid;
+};
+
+// Returns a getDate object with a set of time from a provided date
+export const setTimeValue = (date: Date): Date => set(getDate(), getTimeObj(date));
+
+export const getDisabledMonths = (
+    disabledDates: Map<string, Date | null> | null | ((date: Date) => boolean),
+    year: number,
+) => {
+    if (disabledDates instanceof Map) {
+        return Array.from(disabledDates.values())
+            .filter((date) => getYear(getDate(date)) === year)
+            .map((date) => getMonth(date as Date));
+    }
+    return [];
+};
+
+export const checkHighlightMonth = (defaultedHighlight: Highlight | HighlightFn, month: number, year: number) => {
+    return typeof defaultedHighlight === 'function'
+        ? defaultedHighlight({ month: month, year })
+        : !!defaultedHighlight.months.find((value) => value.month === month && value.year === year);
+};
+
+export const checkHighlightYear = (defaultedHighlight: Highlight | HighlightFn, year: number) => {
+    return typeof defaultedHighlight === 'function'
+        ? defaultedHighlight(year)
+        : defaultedHighlight.years.includes(year);
+};
+
+export const getCellId = (date: Date) => {
+    return format(date, 'yyyy-MM-dd');
+};