fix(DateField): correctly manage format changing

ValeraS · ValeraS · commit cad9a7e5a1e4 · 2024-02-26T21:40:19.000+01:00
diff --git a/src/components/DateField/hooks/useDateFieldProps.ts b/src/components/DateField/hooks/useDateFieldProps.ts
@@ -9,6 +9,7 @@ import type {
     TextInputProps as DateFieldTextInputProps,
     DomProps,
     FocusableProps,
+    InputDOMProps,
     KeyboardEvents,
     StyleProps,
     TextInputExtendProps,
@@ -22,6 +23,7 @@ export interface DateFieldProps<T = DateTime>
         DateFieldTextInputProps,
         TextInputExtendProps,
         DomProps,
+        InputDOMProps,
         FocusableProps,
         KeyboardEvents,
         StyleProps,
@@ -58,14 +60,16 @@ export function useDateFieldProps<T = DateTime>(
 
         const firstSelectedSection = state.sections[state.selectedSectionIndexes.startIndex];
         const lastSelectedSection = state.sections[state.selectedSectionIndexes.endIndex];
-        const selectionStart = firstSelectedSection.start;
-        const selectionEnd = lastSelectedSection.end;
-
-        if (
-            selectionStart !== inputElement.selectionStart ||
-            selectionEnd !== inputElement.selectionEnd
-        ) {
-            inputElement.setSelectionRange(selectionStart, selectionEnd);
+        if (firstSelectedSection && lastSelectedSection) {
+            const selectionStart = firstSelectedSection.start;
+            const selectionEnd = lastSelectedSection.end;
+
+            if (
+                selectionStart !== inputElement.selectionStart ||
+                selectionEnd !== inputElement.selectionEnd
+            ) {
+                inputElement.setSelectionRange(selectionStart, selectionEnd);
+            }
         }
     });
 
@@ -221,10 +225,11 @@ export function useDateFieldProps<T = DateTime>(
                         const digitsOnly = /^\d+$/.test(pastedValue);
                         const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
 
-                        const isValidValue =
-                            Boolean(activeSection) &&
-                            ((activeSection.contentType === 'digit' && digitsOnly) ||
-                                (activeSection.contentType === 'letter' && lettersOnly));
+                        const isValidValue = Boolean(
+                            activeSection &&
+                                ((activeSection.contentType === 'digit' && digitsOnly) ||
+                                    (activeSection.contentType === 'letter' && lettersOnly)),
+                        );
                         if (isValidValue) {
                             state.onInput(pastedValue);
                             return;
diff --git a/src/components/DateField/hooks/useDateFieldState.ts b/src/components/DateField/hooks/useDateFieldState.ts
@@ -12,9 +12,10 @@ import {
     EDITABLE_SEGMENTS,
     addSegment,
     getEditableSections,
+    isAllSegmentsValid,
     parseDateFromString,
     setSegment,
-    splitFormatIntoSections,
+    useFormatSections,
 } from '../utils';
 
 import {useBaseDateFieldState} from './useBaseDateFieldState';
@@ -64,13 +65,13 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     let validSegments = validSegmentsState[0];
     const setValidSegments = validSegmentsState[1];
 
-    if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
+    if (value && !isAllSegmentsValid(allSegments, validSegments)) {
         setValidSegments({...allSegments});
     }
 
     if (
         !value &&
-        Object.keys(validSegments).length > 0 &&
+        isAllSegmentsValid(allSegments, validSegments) &&
         Object.keys(validSegments).length === Object.keys(allSegments).length
     ) {
         validSegments = {};
@@ -84,9 +85,7 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     }
 
     const displayValue =
-        value &&
-        isValid(value) &&
-        Object.keys(validSegments).length >= Object.keys(allSegments).length
+        value && isValid(value) && isAllSegmentsValid(allSegments, validSegments)
             ? value.timeZone(timeZone)
             : placeholderDate.timeZone(timeZone);
     const sectionsState = useSectionsState(sections, displayValue, validSegments);
@@ -128,7 +127,7 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
             return;
         }
 
-        if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        if (isAllSegmentsValid(allSegments, validSegments)) {
             if (!value || !newValue.isSame(value)) {
                 handleUpdateDate(newValue);
             }
@@ -153,24 +152,31 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
 
     function setSection(sectionIndex: number, amount: number) {
         const section = sectionsState.editableSections[sectionIndex];
-        markValid(section.type);
-        setValue(setSegment(section, displayValue, amount));
+        if (section) {
+            markValid(section.type);
+            setValue(setSegment(section, displayValue, amount));
+        }
     }
 
     function adjustSection(sectionIndex: number, amount: number) {
         const section = sectionsState.editableSections[sectionIndex];
-        if (validSegments[section.type]) {
-            setValue(addSegment(section, displayValue, amount));
-        } else {
-            markValid(section.type);
-            if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
-                setValue(displayValue);
+        if (section) {
+            if (validSegments[section.type]) {
+                setValue(addSegment(section, displayValue, amount));
+            } else {
+                markValid(section.type);
+                if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+                    setValue(displayValue);
+                }
             }
         }
     }
 
     function flushValidSection(sectionIndex: number) {
-        delete validSegments[sectionsState.editableSections[sectionIndex].type];
+        const section = sectionsState.editableSections[sectionIndex];
+        if (section) {
+            delete validSegments[section.type];
+        }
         setValidSegments({...validSegments});
     }
 
@@ -208,7 +214,7 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
         (isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
         (value && props.isDateUnavailable?.(value) ? 'invalid' : undefined);
 
-    return useBaseDateFieldState<DateTime>({
+    return useBaseDateFieldState({
         value,
         displayValue,
         placeholderValue: props.placeholderValue,
@@ -234,19 +240,6 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     });
 }
 
-function useFormatSections(format: string) {
-    const usedFormat = format;
-    const [sections, setSections] = React.useState(() => splitFormatIntoSections(usedFormat));
-
-    const [previousFormat, setFormat] = React.useState(usedFormat);
-    if (usedFormat !== previousFormat) {
-        setFormat(usedFormat);
-        setSections(splitFormatIntoSections(usedFormat));
-    }
-
-    return sections;
-}
-
 function useSectionsState(
     sections: DateFieldSectionWithoutPosition[],
     value: DateTime,
diff --git a/src/components/DateField/utils.ts b/src/components/DateField/utils.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {dateTime, isValid, settings} from '@gravity-ui/date-utils';
 import type {DateTime} from '@gravity-ui/date-utils';
 
@@ -414,7 +416,7 @@ export function splitFormatIntoSections(format: string) {
     let isSeparator = false;
     let isInEscapeBoundary = false;
     for (let i = 0; i < expandedFormat.length; i++) {
-        const char = expandedFormat[i];
+        const char = expandedFormat[i] || '';
         if (isInEscapeBoundary) {
             if (char === escapedCharacters.end) {
                 isInEscapeBoundary = false;
@@ -541,6 +543,9 @@ export function getEditableSections(
     let previousEditableSection = -1;
     for (let i = 0; i < sections.length; i++) {
         const section = sections[i];
+        if (!section) {
+            continue;
+        }
 
         const newSection = toEditableSection(
             section,
@@ -652,3 +657,25 @@ export function parseDateFromString(str: string, format: string, timeZone?: stri
 
     return date;
 }
+
+export function isAllSegmentsValid(
+    allSegments: typeof EDITABLE_SEGMENTS,
+    validSegments: typeof EDITABLE_SEGMENTS,
+) {
+    return Object.keys(allSegments).every(
+        (key) => validSegments[key as keyof typeof EDITABLE_SEGMENTS],
+    );
+}
+
+export function useFormatSections(format: string) {
+    const usedFormat = format;
+    const [sections, setSections] = React.useState(() => splitFormatIntoSections(usedFormat));
+
+    const [previousFormat, setFormat] = React.useState(usedFormat);
+    if (usedFormat !== previousFormat) {
+        setFormat(usedFormat);
+        setSections(splitFormatIntoSections(usedFormat));
+    }
+
+    return sections;
+}
diff --git a/src/components/DatePicker/hooks/useDatePickerProps.ts b/src/components/DatePicker/hooks/useDatePickerProps.ts
@@ -41,15 +41,6 @@ export function useDatePickerProps(
 
     const {inputProps} = useDateFieldProps(state.dateFieldState, props);
 
-    let error: string | boolean | undefined;
-    let validationState = props.validationState;
-    if (validationState) {
-        error = validationState === 'invalid' ? (props.errorMessage as string) || true : undefined;
-    } else {
-        validationState = state.dateFieldState.validationState;
-        error = validationState === 'invalid';
-    }
-
     const inputRef = React.useRef<HTMLInputElement>(null);
 
     const handleRef = useForkRef(inputRef, inputProps.controlRef);
@@ -85,7 +76,7 @@ export function useDatePickerProps(
             state.dateFieldState.isEmpty && !isActive && props.placeholder
                 ? {value: ''}
                 : undefined,
-            {controlRef: handleRef, error},
+            {controlRef: handleRef},
         ),
         calendarButtonProps: {
             ref: calendarButtonRef,
diff --git a/src/components/DatePicker/hooks/useDatePickerState.ts b/src/components/DatePicker/hooks/useDatePickerState.ts
@@ -142,10 +142,17 @@ export function useDatePickerState(props: DatePickerStateOptions): DatePickerSta
             return;
         }
 
-        if (selectedDate && newValue) {
-            commitValue(selectedDate, newValue);
+        const newTime =
+            newValue ??
+            createPlaceholderValue({
+                placeholderValue: props.placeholderValue,
+                timeZone,
+            });
+
+        if (selectedDate) {
+            commitValue(selectedDate, newTime);
         } else {
-            setSelectedTime(newValue);
+            setSelectedTime(newTime);
         }
     };
 
diff --git a/src/components/RangeDateField/hooks/useRangeDateFieldState.ts b/src/components/RangeDateField/hooks/useRangeDateFieldState.ts
@@ -11,9 +11,10 @@ import type {DateFieldSectionType, DateFieldSectionWithoutPosition} from '../../
 import {
     EDITABLE_SEGMENTS,
     addSegment,
+    isAllSegmentsValid,
     parseDateFromString,
     setSegment,
-    splitFormatIntoSections,
+    useFormatSections,
 } from '../../DateField/utils';
 import type {DateFieldBase} from '../../types/datePicker';
 import type {RangeValue} from '../../types/inputs';
@@ -71,17 +72,17 @@ export function useRangeDateFieldState(props: RangeDateFieldStateOptions): Range
 
     if (
         value &&
-        (Object.keys(validSegments.start).length < Object.keys(allSegments).length ||
-            Object.keys(validSegments.end).length < Object.keys(allSegments).length)
+        (!isAllSegmentsValid(allSegments, validSegments.start) ||
+            !isAllSegmentsValid(allSegments, validSegments.end))
     ) {
         setValidSegments({start: {...allSegments}, end: {...allSegments}});
     }
 
     if (
         !value &&
-        Object.keys(validSegments.start).length > 0 &&
+        isAllSegmentsValid(allSegments, validSegments.start) &&
         Object.keys(validSegments.start).length === Object.keys(allSegments).length &&
-        Object.keys(validSegments.end).length > 0 &&
+        isAllSegmentsValid(allSegments, validSegments.end) &&
         Object.keys(validSegments.end).length === Object.keys(allSegments).length
     ) {
         validSegments = {start: {}, end: {}};
@@ -145,8 +146,8 @@ export function useRangeDateFieldState(props: RangeDateFieldStateOptions): Range
         }
 
         if (
-            Object.keys(validSegments.start).length >= Object.keys(allSegments).length &&
-            Object.keys(validSegments.end).length >= Object.keys(allSegments).length
+            isAllSegmentsValid(allSegments, validSegments.start) &&
+            isAllSegmentsValid(allSegments, validSegments.end)
         ) {
             if (!value || !(newValue.start.isSame(value.start) && newValue.end.isSame(value.end))) {
                 handleUpdateRange(newValue);
@@ -249,7 +250,7 @@ export function useRangeDateFieldState(props: RangeDateFieldStateOptions): Range
         (value && props.isDateUnavailable?.(value.start) ? 'invalid' : undefined) ||
         (value && props.isDateUnavailable?.(value.end) ? 'invalid' : undefined);
 
-    return useBaseDateFieldState<RangeValue<DateTime>>({
+    return useBaseDateFieldState({
         value,
         displayValue,
         placeholderValue: props.placeholderValue,
@@ -277,19 +278,6 @@ export function useRangeDateFieldState(props: RangeDateFieldStateOptions): Range
     });
 }
 
-function useFormatSections(format: string) {
-    const usedFormat = format;
-    const [sections, setSections] = React.useState(() => splitFormatIntoSections(usedFormat));
-
-    const [previousFormat, setFormat] = React.useState(usedFormat);
-    if (usedFormat !== previousFormat) {
-        setFormat(usedFormat);
-        setSections(splitFormatIntoSections(usedFormat));
-    }
-
-    return sections;
-}
-
 function useSectionsState(
     sections: DateFieldSectionWithoutPosition[],
     value: RangeValue<DateTime>,
