@alfalab/core-components-calendar-range 7.1.5 → 7.2.0

package/src/components/divider/index.module.css

@@ -0,0 +1,41 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-calendar/src/vars.css';
+
+.component {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs);
+
+    &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+}
+
+.outer {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+
+.s {
+    height: var(--size-s-height);
+}
+
+.m {
+    height: var(--size-m-height);
+}
+
+.l {
+    height: var(--size-l-height);
+}
+
+.xl {
+    height: var(--size-xl-height);
+}

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/hooks.ts

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import addMonths from 'date-fns/addMonths';
+import isEqual from 'date-fns/isEqual';
+import max from 'date-fns/max';
+import min from 'date-fns/min';
+import startOfMonth from 'date-fns/startOfMonth';
+import subMonths from 'date-fns/subMonths';
+
+export function usePopoverViewMonthes({
+    dateFrom,
+    dateTo,
+    defaultMonth,
+    resetKey,
+}: {
+    defaultMonth: number;
+    dateFrom: number | null;
+    dateTo: number | null;
+    resetKey?: number;
+}) {
+    const [monthFrom, setMonthFrom] = useState<number>();
+    const [monthTo, setMonthTo] = useState<number>();
+
+    const handleMonthFromChange = useCallback(
+        (newMonthFrom: number) => {
+            setMonthFrom(newMonthFrom);
+
+            if (!dateTo) {
+                setMonthTo(newMonthFrom);
+            }
+        },
+        [dateTo],
+    );
+
+    const handleMonthToChange = useCallback(
+        (newMonthTo: number) => {
+            setMonthTo(newMonthTo);
+
+            if (!dateFrom) {
+                setMonthFrom(newMonthTo);
+            }
+        },
+        [dateFrom],
+    );
+
+    useEffect(() => {
+        setMonthFrom(dateFrom ? startOfMonth(dateFrom).getTime() : defaultMonth);
+    }, [defaultMonth, dateFrom, resetKey]);
+
+    useEffect(() => {
+        setMonthTo(dateTo ? startOfMonth(dateTo).getTime() : monthFrom);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dateTo, resetKey]);
+
+    return {
+        monthFrom,
+        monthTo,
+        handleMonthFromChange,
+        handleMonthToChange,
+    };
+}
+
+export function useStaticViewMonthes({
+    selectedFrom,
+    selectedTo,
+    defaultMonth,
+    defaultMonthPosition,
+}: {
+    selectedFrom?: number;
+    selectedTo?: number;
+    defaultMonth: number;
+    defaultMonthPosition?: 'left' | 'right';
+}) {
+    /**
+     * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
+     * Если обе даты не указаны, то используется дефолтный месяц
+     */
+    let initialMonthFrom = useMemo(
+        () => startOfMonth(selectedFrom || selectedTo || defaultMonth).getTime(),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+
+    /**
+     * Правый месяц должен быть как минимум на 1 месяц больше левого
+     */
+    let initialMonthTo = useMemo(
+        () =>
+            max([
+                selectedTo ? startOfMonth(selectedTo) : 0,
+                addMonths(initialMonthFrom, 1),
+            ]).getTime(),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+
+    if (defaultMonthPosition === 'right') {
+        initialMonthTo = initialMonthFrom;
+        initialMonthFrom = subMonths(initialMonthFrom, 1).getTime();
+    }
+
+    const [monthFrom, setMonthFrom] = useState<number>(initialMonthFrom);
+    const [monthTo, setMonthTo] = useState<number>(initialMonthTo);
+
+    const handleMonthFromChange = useCallback(
+        (newMonthFrom: number) => {
+            setMonthFrom(newMonthFrom);
+
+            if (monthTo && isEqual(newMonthFrom, monthTo)) {
+                const nextMonth = addMonths(newMonthFrom, 1).getTime();
+
+                setMonthTo(nextMonth);
+            }
+        },
+        [monthTo],
+    );
+
+    const handleMonthToChange = useCallback(
+        (newMonthTo: number) => {
+            setMonthTo(newMonthTo);
+
+            if (monthFrom && isEqual(newMonthTo, monthFrom)) {
+                const prevMonth = subMonths(newMonthTo, 1).getTime();
+
+                setMonthFrom(prevMonth);
+            }
+        },
+        [monthFrom],
+    );
+
+    // eslint-disable-next-line complexity
+    useEffect(() => {
+        const selectedFromMonth = selectedFrom ? startOfMonth(selectedFrom).getTime() : undefined;
+        const selectedToMonth = selectedTo ? startOfMonth(selectedTo).getTime() : undefined;
+
+        // Проверяем, показываются ли выбранные месяцы в левой или правой части компонента
+        const fromMonthOnLeft = selectedFromMonth && selectedFromMonth === monthFrom;
+        const fromMonthOnRight = selectedFromMonth && selectedFromMonth === monthTo;
+        const toMonthOnRight = selectedToMonth && selectedToMonth === monthTo;
+        const toMonthOnLeft = selectedToMonth && selectedToMonth === monthFrom;
+        const fromMonthOnScreen = fromMonthOnLeft || fromMonthOnRight;
+        const toMonthOnScreen = toMonthOnLeft || toMonthOnRight;
+
+        if (fromMonthOnLeft && toMonthOnLeft) {
+            setMonthTo(max([addMonths(selectedFromMonth as number, 1), monthTo]).getTime());
+
+            return;
+        }
+
+        if (fromMonthOnRight && toMonthOnRight) {
+            setMonthFrom(min([subMonths(selectedToMonth as number, 1), monthFrom]).getTime());
+
+            return;
+        }
+
+        if (selectedFromMonth && selectedToMonth) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max([addMonths(selectedFromMonth, 1), selectedToMonth]).getTime());
+
+            return;
+        }
+
+        if (selectedFromMonth && !selectedToMonth && !fromMonthOnScreen) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+        }
+
+        if (selectedToMonth && !selectedFromMonth && !toMonthOnScreen) {
+            setMonthTo(selectedToMonth);
+            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFrom, selectedTo]);
+
+    return {
+        monthFrom,
+        monthTo,
+        handleMonthFromChange,
+        handleMonthToChange,
+    };
+}
+
+export function useSelectionProps(from?: number, to?: number, highlighted?: number) {
+    return useMemo(() => {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min([from, to]).getTime(),
+                selectedTo: max([from, to]).getTime(),
+            };
+        }
+
+        const dates = [from, to, highlighted].filter((date) => date !== undefined) as number[];
+
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/utils.ts

@@ -0,0 +1,2 @@
+export const isDayButton = (node: HTMLElement | null) =>
+    node && node.tagName === 'BUTTON' && node.dataset.date;

package/src/views/index.module.css

@@ -0,0 +1,28 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-calendar/src/vars.css';
+
+.component {
+    display: flex;
+
+    & button[aria-selected='true'] {
+        cursor: pointer;
+    }
+
+    & *[class*='errorIcon_'] {
+        display: none;
+    }
+
+    & *[class*='calendarIcon_'] {
+        margin-right: 0;
+    }
+}
+
+.static {
+    & .calendar {
+        width: var(--calendar-inner-width);
+
+        & > div:first-child {
+            padding: var(--gap-m) 0 var(--gap-s);
+        }
+    }
+}

package/src/views/popover.tsx

@@ -0,0 +1,223 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import cn from 'classnames';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { CalendarInput, CalendarInputProps } from '@alfalab/core-components-calendar-input';
+import { isValidInputValue, parseDateString } from '@alfalab/core-components-calendar-input/shared';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+
+import { CalendarRangeProps } from '../Component';
+import { Divider } from '../components/divider';
+import { usePopoverViewMonthes } from '../hooks';
+
+import styles from './index.module.css';
+
+export type CalendarRangePopoverProps = Omit<CalendarRangeProps, 'calendarPosition'>;
+
+export const CalendarRangePopover: FC<CalendarRangePopoverProps> = ({
+    className,
+    defaultMonth = startOfMonth(new Date()).getTime(),
+    minDate,
+    maxDate,
+    valueFrom = '',
+    valueTo = '',
+    onDateFromChange = () => null,
+    onDateToChange = () => null,
+    onChange = () => null,
+    onError,
+    inputFromProps = {},
+    inputToProps = {},
+    offDays,
+    events,
+    returnInvalidDates = false,
+    dataTestId,
+}) => {
+    const [inputFromValue, setInputFromValue] = useState<string>(valueFrom);
+    const [inputToValue, setInputToValue] = useState<string>(valueTo);
+
+    /**
+     * Ключ для сброса календарей
+     * Пользователь открыл календарь, изменил месяц, но ничего не выбрал
+     * — при следующем открытии в календаре будет установлен начальный месяц
+     */
+    const [resetKey, setResetKey] = useState<number>(0);
+
+    const dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? parseDateString(inputFromValue).getTime()
+        : null;
+
+    const dateTo = isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? parseDateString(inputToValue).getTime()
+        : null;
+
+    const [inputFromInvalid, setInputFromInvalid] = useState<boolean>(
+        isCompleteDateInput(inputFromValue) && dateFrom === null,
+    );
+    const [inputToInvalid, setInputToInvalid] = useState<boolean>(
+        isCompleteDateInput(inputToValue) && dateTo === null,
+    );
+
+    const bothInvalid =
+        isCompleteDateInput(inputFromValue) &&
+        isCompleteDateInput(inputToValue) &&
+        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
+
+    const hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
+
+    const { monthFrom, monthTo, handleMonthFromChange, handleMonthToChange } =
+        usePopoverViewMonthes({
+            dateFrom,
+            dateTo,
+            defaultMonth,
+            resetKey,
+        });
+
+    const handleValidInputFrom = useCallback(() => {
+        setInputFromInvalid(
+            inputFromValue !== '' && !isValidInputValue(inputFromValue, minDate, maxDate, offDays),
+        );
+    }, [inputFromValue, maxDate, minDate, offDays]);
+
+    const handleValidInputTo = useCallback(() => {
+        setInputToInvalid(
+            inputToValue !== '' &&
+                !isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays),
+        );
+    }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
+
+    const handleInputFromChange: Required<CalendarInputProps>['onInputChange'] = (
+        event,
+        payload,
+    ) => {
+        setInputFromValue(payload.value);
+        inputFromProps.onInputChange?.(event, payload);
+    };
+
+    const handleInputToChange: Required<CalendarInputProps>['onInputChange'] = (event, payload) => {
+        setInputToValue(payload.value);
+        inputToProps.onInputChange?.(event, payload);
+    };
+
+    const handleInputFromBlur = useCallback(() => {
+        handleValidInputFrom();
+        setResetKey(+new Date());
+    }, [handleValidInputFrom]);
+
+    const handleInputToBlur = useCallback(() => {
+        handleValidInputTo();
+        setResetKey(+new Date());
+    }, [handleValidInputTo]);
+
+    const handleFromChange: Required<CalendarInputProps>['onChange'] = useCallback((_, payload) => {
+        setInputFromValue(payload.value);
+    }, []);
+
+    const handleToChange: Required<CalendarInputProps>['onChange'] = useCallback((_, payload) => {
+        setInputToValue(payload.value);
+    }, []);
+
+    useEffect(() => {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+
+    useEffect(() => {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+
+    useDidUpdateEffect(() => {
+        onDateFromChange({ value: inputFromValue, date: dateFrom });
+
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom,
+            dateTo,
+        });
+
+        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+
+    useDidUpdateEffect(() => {
+        onDateToChange({ value: inputToValue, date: dateTo });
+
+        // eslint-disable-next-line no-nested-ternary
+        const inputDateTo = returnInvalidDates
+            ? isCompleteDateInput(inputToValue)
+                ? parseDateString(inputToValue).getTime()
+                : null
+            : dateTo;
+
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom,
+            dateTo: inputDateTo,
+        });
+
+        if (!inputToValue || isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+
+    useEffect(() => {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
+
+    return (
+        <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+            <CalendarInput
+                {...inputFromProps}
+                useAnchorWidth={false}
+                calendarPosition='popover'
+                popoverPosition='bottom-start'
+                error={inputFromInvalid || bothInvalid || inputFromProps.error}
+                onChange={handleFromChange}
+                onInputChange={handleInputFromChange}
+                onBlur={handleInputFromBlur}
+                value={inputFromValue}
+                minDate={minDate}
+                maxDate={maxDate}
+                offDays={offDays}
+                events={events}
+                calendarProps={{
+                    ...inputFromProps.calendarProps,
+                    month: monthFrom,
+                    onMonthChange: handleMonthFromChange,
+                    selectorView: 'full',
+                }}
+            />
+
+            <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />
+
+            <CalendarInput
+                {...inputToProps}
+                useAnchorWidth={false}
+                calendarPosition='popover'
+                popoverPosition='bottom-end'
+                error={inputToInvalid || bothInvalid || inputToProps.error}
+                onChange={handleToChange}
+                onInputChange={handleInputToChange}
+                onBlur={handleInputToBlur}
+                value={inputToValue}
+                minDate={dateFrom || minDate}
+                maxDate={maxDate}
+                offDays={offDays}
+                events={events}
+                calendarProps={{
+                    ...inputToProps.calendarProps,
+                    month: monthTo,
+                    onMonthChange: handleMonthToChange,
+                    selectorView: 'full',
+                }}
+            />
+        </div>
+    );
+};