@alfalab/core-components-calendar-range 9.0.14 → 9.1.0

package/src/views/static.tsx

@@ -1,35 +1,51 @@
 /* eslint-disable complexity */
-import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';
+import React, { type FC, type MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 import { addMonths, endOfMonth, isSameMonth, max, startOfMonth, subMonths } from 'date-fns';
 
 import { CalendarDesktop } from '@alfalab/core-components-calendar/desktop';
 import { usePeriodWithReset } from '@alfalab/core-components-calendar/shared';
+import { type CalendarInputProps } from '@alfalab/core-components-calendar-input';
 import {
     formatDate,
     isValidInputValue,
     parseDateString,
 } from '@alfalab/core-components-calendar-input/shared';
-import {
-    DateInput,
-    type DateInputProps,
-    isCompleteDateInput,
-} from '@alfalab/core-components-date-input';
+import { isCompleteDateInput } from '@alfalab/core-components-date-input';
 import { getDataTestId } from '@alfalab/core-components-shared';
+import {
+    UniversalDateInput,
+    type UniversalDateInputProps,
+} from '@alfalab/core-components-universal-date-input';
 
 import { type CalendarRangeProps } from '../Component';
 import { Divider } from '../components/divider';
-import { useSelectionProps, useStaticViewMonthes } from '../hooks';
+import { useSelectionProps, useStaticRangeAutoSwap, useStaticViewMonthes } from '../hooks';
 import { isDayButton } from '../utils';
 
 import styles from './index.module.css';
 
-export type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {
+type DateInputProps = Omit<CalendarInputProps, 'onCalendarOpen' | 'onCalendarClose' | 'onChange'>;
+
+interface CalendarRangeStaticProps
+    extends Omit<CalendarRangeProps, 'calendarPosition' | 'inputFromProps' | 'inputToProps'> {
     /**
      * Отображать начальный месяц слева или справа (влияет только на начальный рендер)
      */
     defaultMonthPosition?: 'left' | 'right';
-};
+
+    /**
+     * Пропсы для инпута начальной даты диапазона
+     */
+    inputFromProps?: DateInputProps;
+
+    /**
+     * Пропсы для инпута конечной даты диапазона
+     */
+    inputToProps?: DateInputProps;
+}
+
+type CorrectionToggleRef = { handleCorrection: () => void };
 
 export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
     className,
@@ -42,7 +58,6 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
     onDateFromChange = () => null,
     onDateToChange = () => null,
     onChange = () => null,
-    onError,
     inputFromProps = {},
     inputToProps = {},
     offDays,
@@ -50,10 +65,33 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
     returnInvalidDates = false,
     dataTestId,
     calendarContainerClassName,
+    autoSwap = false,
+    onError,
 }) => {
     const [inputFromValue, setInputFromValue] = useState<string>(valueFrom);
     const [inputToValue, setInputToValue] = useState<string>(valueTo);
 
+    const [inputFromError, setInputFromError] = useState(false);
+    const [inputToError, setInputToError] = useState(false);
+
+    const toggleCorrectionFromRef = useRef<CorrectionToggleRef>(null);
+    const toggleCorrectionToRef = useRef<CorrectionToggleRef>(null);
+
+    const inputToRef = useRef<HTMLInputElement>(null);
+    const inputFromRef = useRef<HTMLInputElement>(null);
+
+    const { swapDates, isInternalUpdate } = useStaticRangeAutoSwap({
+        autoSwap,
+        setInputFromValue,
+        setInputToValue,
+        toggleCorrectionFromRef,
+        toggleCorrectionToRef,
+        inputFromRef,
+        inputToRef,
+    });
+
+    const [rangeValidationError, setRangeValidationError] = useState(false);
+
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
         ? parseDateString(inputFromValue).getTime()
         : null;
@@ -66,11 +104,6 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
         dateFrom = null;
     }
 
-    const bothInvalid =
-        isCompleteDateInput(inputFromValue) &&
-        isCompleteDateInput(inputToValue) &&
-        parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
-
     const [highlightedDate, setHighlightedDate] = useState<number | undefined>(undefined);
 
     const period = usePeriodWithReset({
@@ -78,26 +111,6 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
         initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
     });
 
-    const validateInputFromValue = useCallback(
-        (value: string) => isValidInputValue(value, minDate, dateFrom || maxDate, offDays),
-        [dateFrom, maxDate, minDate, offDays],
-    );
-
-    const validateInputToValue = useCallback(
-        (value: string) => isValidInputValue(value, dateFrom || minDate, maxDate, offDays),
-
-        [dateFrom, minDate, maxDate, offDays],
-    );
-
-    const [inputFromInvalid, setInputFromInvalid] = useState<boolean>(
-        isCompleteDateInput(inputFromValue) && dateFrom === null,
-    );
-
-    const [inputToInvalid, setInputToInvalid] = useState<boolean>(
-        isCompleteDateInput(inputToValue) && dateTo === null,
-    );
-
-    const hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
     const {
         calendarProps: calendarFromProps,
         onInputChange: onInputChangeFrom,
@@ -118,22 +131,48 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
         },
     );
 
-    const handleValidInputFrom = useCallback(() => {
-        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));
-    }, [inputFromValue, validateInputFromValue]);
+    const handleInputFromChange: Required<UniversalDateInputProps>['onInputChange'] = (
+        event,
+        payload,
+    ) => {
+        const newValue = payload.value;
+
+        setInputFromValue(newValue);
 
-    const handleValidInputTo = useCallback(() => {
-        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
-    }, [inputToValue, validateInputToValue]);
+        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {
+            swapDates(newValue, inputFromValue, inputToValue);
+        }
 
-    const handleInputFromChange: Required<DateInputProps>['onChange'] = (event, payload) => {
-        setInputFromValue(payload.value);
-        onInputChangeFrom?.(event, payload);
+        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };
+
+        if (onInputChangeFrom) {
+            onInputChangeFrom(
+                event === null ? ({} as React.ChangeEvent<HTMLInputElement>) : event,
+                payloadWithDate,
+            );
+        }
     };
 
-    const handleInputToChange: Required<DateInputProps>['onChange'] = (event, payload) => {
-        setInputToValue(payload.value);
-        onInputChangeTo?.(event, payload);
+    const handleInputToChange: Required<UniversalDateInputProps>['onInputChange'] = (
+        event,
+        payload,
+    ) => {
+        const newValue = payload.value;
+
+        setInputToValue(newValue);
+
+        if (isValidInputValue(newValue, minDate, maxDate, offDays)) {
+            swapDates(newValue, inputFromValue, inputToValue);
+        }
+
+        const payloadWithDate = { date: parseDateString(payload.value), value: payload.value };
+
+        if (onInputChangeTo) {
+            onInputChangeTo(
+                event === null ? ({} as React.ChangeEvent<HTMLInputElement>) : event,
+                payloadWithDate,
+            );
+        }
     };
 
     const handleMouseOver = useCallback((event: MouseEvent<HTMLDivElement>) => {
@@ -180,22 +219,24 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
     }, [valueTo]);
 
     useEffect(() => {
-        if (!inputFromValue || isCompleteDateInput(inputFromValue)) {
-            handleValidInputFrom();
-        }
-
         period.setStart(dateFrom || undefined);
         if (dateTo) {
             period.setEnd(dateTo);
         }
 
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+
+            return;
+        }
+
         if (inputFromValue !== valueFrom) {
-            onDateFromChange({
+            onDateFromChange?.({
                 value: inputFromValue,
                 date: dateFrom,
             });
 
-            onChange({
+            onChange?.({
                 valueFrom: inputFromValue,
                 valueTo: inputToValue,
                 dateFrom,
@@ -206,15 +247,17 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
     }, [inputFromValue]);
 
     useEffect(() => {
-        if (!inputToValue || isCompleteDateInput(inputToValue)) {
-            handleValidInputTo();
-        }
-
         period.setEnd(dateTo || undefined);
         if (dateFrom) {
             period.setStart(dateFrom);
         }
 
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+
+            return;
+        }
+
         if (inputToValue !== valueTo) {
             // eslint-disable-next-line no-nested-ternary
             const inputDateTo = returnInvalidDates
@@ -223,12 +266,12 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
                     : null
                 : dateTo;
 
-            onDateToChange({
+            onDateToChange?.({
                 value: inputToValue,
                 date: inputDateTo,
             });
 
-            onChange({
+            onChange?.({
                 valueFrom: inputFromValue,
                 valueTo: inputToValue,
                 dateFrom,
@@ -238,12 +281,53 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
 
+    useEffect(() => {
+        const isInputFromValueComplete = isCompleteDateInput(inputFromValue);
+        const isInputToValueComplete = isCompleteDateInput(inputToValue);
+
+        let individualInputFromError = false;
+        let individualInputToError = false;
+
+        if (isInputFromValueComplete) {
+            individualInputFromError = !isValidInputValue(
+                inputFromValue,
+                minDate,
+                maxDate,
+                offDays,
+            );
+        }
+
+        if (isInputToValueComplete) {
+            individualInputToError = !isValidInputValue(inputToValue, minDate, maxDate, offDays);
+        }
+
+        let isRangeError = false;
+
+        const isValidInputFromValueStandalone =
+            isInputFromValueComplete && individualInputFromError === false;
+        const isValidInputToValueStandalone =
+            isInputToValueComplete && individualInputToError === false;
+
+        if (isValidInputFromValueStandalone && isValidInputToValueStandalone) {
+            const parsedDateFrom = parseDateString(inputFromValue).getTime();
+            const parsedDateTo = parseDateString(inputToValue).getTime();
+
+            if (parsedDateFrom > parsedDateTo) {
+                isRangeError = true;
+            }
+        }
+
+        setInputFromError(individualInputFromError || isRangeError);
+        setInputToError(individualInputToError || isRangeError);
+
+        setRangeValidationError(isRangeError);
+    }, [inputFromValue, inputToValue, minDate, maxDate, offDays]);
+
     useEffect(() => {
         if (onError) {
-            onError(hasValidateError);
+            onError(rangeValidationError);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasValidateError]);
+    }, [onError, rangeValidationError]);
 
     const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
 
@@ -260,22 +344,54 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
             onMouseOver={handleMouseOver}
             data-test-id={dataTestId}
         >
-            <div>
-                <DateInput
+            <div className={cn(styles.inputsContainer)}>
+                <UniversalDateInput
                     {...dateInputFromProps}
-                    mobileMode={
-                        dateInputFromProps.mobileMode === 'popover'
-                            ? 'input'
-                            : dateInputFromProps.mobileMode
-                    }
+                    Calendar={undefined}
+                    view='date'
+                    picker={false}
                     value={inputFromValue}
-                    onChange={handleInputFromChange}
+                    onInputChange={handleInputFromChange}
                     onClear={handleClearFrom}
-                    onBlur={handleValidInputFrom}
-                    error={bothInvalid || inputFromInvalid || dateInputFromProps.error}
+                    correctionRef={toggleCorrectionFromRef}
+                    error={inputFromError ? 'Укажите корректную дату' : dateInputFromProps.error}
                     clear={true}
                     block={true}
+                    minDate={minDate}
+                    autoCorrection={false}
+                    maxDate={
+                        minMaxInSameMonth
+                            ? maxDate
+                            : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime()
+                    }
+                    ref={inputFromRef}
                 />
+
+                <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />
+
+                <UniversalDateInput
+                    {...dateInputToProps}
+                    Calendar={undefined}
+                    view='date'
+                    picker={false}
+                    value={inputToValue}
+                    onInputChange={handleInputToChange}
+                    onClear={handleClearTo}
+                    error={inputToError ? 'Укажите корректную дату' : dateInputToProps.error}
+                    correctionRef={toggleCorrectionToRef}
+                    clear={true}
+                    block={true}
+                    autoCorrection={false}
+                    minDate={
+                        minMaxInSameMonth
+                            ? minDate
+                            : minDate && startOfMonth(addMonths(minDate, 1)).getTime()
+                    }
+                    maxDate={maxDate}
+                    ref={inputToRef}
+                />
+            </div>
+            <div className={cn(styles.calendarContainers)}>
                 <div
                     className={cn(styles.calendarContainer, calendarContainerClassName)}
                     data-test-id={getDataTestId(dataTestId, 'container-from')}
@@ -299,26 +415,6 @@ export const CalendarRangeStatic: FC<CalendarRangeStaticProps> = ({
                         {...rangeProps}
                     />
                 </div>
-            </div>
-
-            <Divider inputFromProps={inputFromProps} inputToProps={inputToProps} />
-
-            <div>
-                <DateInput
-                    {...dateInputToProps}
-                    mobileMode={
-                        dateInputToProps.mobileMode === 'popover'
-                            ? 'input'
-                            : dateInputToProps.mobileMode
-                    }
-                    value={inputToValue}
-                    onChange={handleInputToChange}
-                    onClear={handleClearTo}
-                    onBlur={handleValidInputTo}
-                    error={bothInvalid || inputToInvalid || dateInputToProps.error}
-                    clear={true}
-                    block={true}
-                />
                 <div data-test-id={getDataTestId(dataTestId, 'container-to')}>
                     <CalendarToComponent
                         {...calendarToProps}

package/views/index.css

@@ -1,32 +1,44 @@
 :root {
     --gap-s: 12px;
     --gap-m: 16px;
+    --gap-2xl: 32px;
     --gap-0: 0px;
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
+    --gap-32: var(--gap-2xl);
 }
 :root {
     --calendar-inner-width: 280px;
 }
-.calendar-range__component_cda4k {
+.calendar-range__component_q8vzh {
     display: flex;
 }
-.calendar-range__component_cda4k button[aria-selected='true'] {
+.calendar-range__component_q8vzh button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_cda4k *[class*='errorIcon_'] {
+.calendar-range__component_q8vzh *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_cda4k *[class*='calendarIcon_'] {
+.calendar-range__component_q8vzh *[class*='calendarIcon_'] {
         margin-right: var(--gap-0);
     }
-.calendar-range__static_cda4k .calendar-range__calendar_cda4k {
+.calendar-range__static_q8vzh {
+    flex-direction: column;
+}
+.calendar-range__static_q8vzh .calendar-range__calendar_q8vzh {
         width: var(--calendar-inner-width);
     }
-.calendar-range__static_cda4k .calendar-range__calendar_cda4k > div:first-child {
+.calendar-range__static_q8vzh .calendar-range__calendar_q8vzh > div:first-child {
             padding: var(--gap-16) var(--gap-0) var(--gap-12);
         }
-.calendar-range__calendarContainer_cda4k {
+.calendar-range__inputsContainer_q8vzh {
+    display: flex;
+}
+.calendar-range__calendarContainers_q8vzh {
+    display: flex;
+    gap: var(--gap-32);
+}
+.calendar-range__calendarContainer_q8vzh {
     width: var(--calendar-inner-width);
     display: flex;
     justify-content: center;

package/views/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"calendar-range__component_cda4k","static":"calendar-range__static_cda4k","calendar":"calendar-range__calendar_cda4k","calendarContainer":"calendar-range__calendarContainer_cda4k"};
+var styles = {"component":"calendar-range__component_q8vzh","static":"calendar-range__static_q8vzh","calendar":"calendar-range__calendar_q8vzh","inputsContainer":"calendar-range__inputsContainer_q8vzh","calendarContainers":"calendar-range__calendarContainers_q8vzh","calendarContainer":"calendar-range__calendarContainer_q8vzh"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/views/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../src/views/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../calendar/src/vars.css';\n\n.component {\n    display: flex;\n\n    & button[aria-selected='true'] {\n        cursor: pointer;\n    }\n\n    & *[class*='errorIcon_'] {\n        display: none;\n    }\n\n    & *[class*='calendarIcon_'] {\n        margin-right: var(--gap-0);\n    }\n}\n\n.static {\n    & .calendar {\n        width: var(--calendar-inner-width);\n\n        & > div:first-child {\n            padding: var(--gap-16) var(--gap-0) var(--gap-12);\n        }\n    }\n}\n\n.calendarContainer {\n    width: var(--calendar-inner-width);\n    display: flex;\n    justify-content: center;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,yCAAyC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../src/views/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../calendar/src/vars.css';\n\n.component {\n    display: flex;\n\n    & button[aria-selected='true'] {\n        cursor: pointer;\n    }\n\n    & *[class*='errorIcon_'] {\n        display: none;\n    }\n\n    & *[class*='calendarIcon_'] {\n        margin-right: var(--gap-0);\n    }\n}\n\n.static {\n    flex-direction: column;\n\n    & .calendar {\n        width: var(--calendar-inner-width);\n\n        & > div:first-child {\n            padding: var(--gap-16) var(--gap-0) var(--gap-12);\n        }\n    }\n}\n\n.inputsContainer {\n    display: flex;\n}\n\n.calendarContainers {\n    display: flex;\n    gap: var(--gap-32);\n}\n\n.calendarContainer {\n    width: var(--calendar-inner-width);\n    display: flex;\n    justify-content: center;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,iCAAiC,CAAC,QAAQ,CAAC,8BAA8B,CAAC,UAAU,CAAC,gCAAgC,CAAC,iBAAiB,CAAC,uCAAuC,CAAC,oBAAoB,CAAC,0CAA0C,CAAC,mBAAmB,CAAC,yCAAyC,CAAC;;;;"}

package/views/static.d.ts

@@ -1,9 +1,20 @@
 import { type FC } from 'react';
+import { type CalendarInputProps } from '@alfalab/core-components-calendar-input';
 import { type CalendarRangeProps } from '../Component';
-export type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {
+type DateInputProps = Omit<CalendarInputProps, 'onCalendarOpen' | 'onCalendarClose' | 'onChange'>;
+interface CalendarRangeStaticProps extends Omit<CalendarRangeProps, 'calendarPosition' | 'inputFromProps' | 'inputToProps'> {
     /**
      * Отображать начальный месяц слева или справа (влияет только на начальный рендер)
      */
     defaultMonthPosition?: 'left' | 'right';
-};
+    /**
+     * Пропсы для инпута начальной даты диапазона
+     */
+    inputFromProps?: DateInputProps;
+    /**
+     * Пропсы для инпута конечной даты диапазона
+     */
+    inputToProps?: DateInputProps;
+}
 export declare const CalendarRangeStatic: FC<CalendarRangeStaticProps>;
+export {};