@gravity-ui/date-components 1.5.0 → 2.0.1

package/dist/esm/components/DateField/hooks/useDateFieldState.js

@@ -1,62 +1,48 @@
 import React from 'react';
-import { dateTime, isValid } from '@gravity-ui/date-utils';
-import { useControlledState } from '../../hooks/useControlledState';
-import { createPlaceholderValue, isInvalid, mergeDateTime } from '../../utils/dates';
-import { addSegment, getDurationUnitFromSectionType, getSectionLimits, getSectionValue, setSegment, splitFormatIntoSections, } from '../utils';
-const EDITABLE_SEGMENTS = {
-    year: true,
-    month: true,
-    day: true,
-    hour: true,
-    minute: true,
-    second: true,
-    dayPeriod: true,
-    weekday: true,
-};
-const PAGE_STEP = {
-    year: 5,
-    month: 2,
-    weekday: 3,
-    day: 7,
-    hour: 2,
-    minute: 15,
-    second: 15,
-};
+import { isValid } from '@gravity-ui/date-utils';
+import { useControlledState } from '@gravity-ui/uikit';
+import { createPlaceholderValue, isInvalid } from '../../utils/dates';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
+import { EDITABLE_SEGMENTS, addSegment, getEditableSections, isAllSegmentsValid, parseDateFromString, setSegment, useFormatSections, } from '../utils';
+import { useBaseDateFieldState } from './useBaseDateFieldState';
 export function useDateFieldState(props) {
-    var _a;
-    const [value, setDate] = useControlledState(props.value, props.defaultValue, props.onUpdate);
+    var _a, _b;
+    const [value, setDate] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+    const inputTimeZone = useDefaultTimeZone(props.value || props.defaultValue || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const handleUpdateDate = (v) => {
+        setDate(v ? v.timeZone(inputTimeZone) : v);
+    };
     const [placeholderDate, setPlaceholderDate] = React.useState(() => {
         return createPlaceholderValue({
             placeholderValue: props.placeholderValue,
-            timeZone: props.timeZone,
+            timeZone,
         });
     });
     const format = props.format || 'L';
     const sections = useFormatSections(format);
     const allSegments = React.useMemo(() => sections
         .filter((seg) => EDITABLE_SEGMENTS[seg.type])
-        .reduce((p, seg) => {
-        p[seg.type] = true;
-        return p;
-    }, {}), [sections]);
-    const validSegmentsState = React.useState(() => props.value || props.defaultValue ? Object.assign({}, allSegments) : {});
+        .reduce((p, seg) => (Object.assign(Object.assign({}, p), { [seg.type]: true })), {}), [sections]);
+    const validSegmentsState = React.useState(() => value ? Object.assign({}, allSegments) : {});
     let validSegments = validSegmentsState[0];
     const setValidSegments = validSegmentsState[1];
-    if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
+    if (value && !isAllSegmentsValid(allSegments, validSegments)) {
         setValidSegments(Object.assign({}, allSegments));
     }
     if (!value &&
-        Object.keys(validSegments).length > 0 &&
+        isAllSegmentsValid(allSegments, validSegments) &&
         Object.keys(validSegments).length === Object.keys(allSegments).length) {
         validSegments = {};
         setValidSegments(validSegments);
-        setPlaceholderDate(createPlaceholderValue({ timeZone: props.timeZone }));
+        setPlaceholderDate(createPlaceholderValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        }));
     }
-    const displayValue = value &&
-        isValid(value) &&
-        Object.keys(validSegments).length >= Object.keys(allSegments).length
-        ? value
-        : placeholderDate;
+    const displayValue = value && isValid(value) && isAllSegmentsValid(allSegments, validSegments)
+        ? value.timeZone(timeZone)
+        : placeholderDate.timeZone(timeZone);
     const sectionsState = useSectionsState(sections, displayValue, validSegments);
     const [selectedSections, setSelectedSections] = React.useState(-1);
     const selectedSectionIndexes = React.useMemo(() => {
@@ -82,14 +68,14 @@ export function useDateFieldState(props) {
         if (props.disabled || props.readOnly) {
             return;
         }
-        if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+        if (isAllSegmentsValid(allSegments, validSegments)) {
             if (!value || !newValue.isSame(value)) {
-                setDate(newValue);
+                handleUpdateDate(newValue);
             }
         }
         else {
             if (value) {
-                setDate(null);
+                handleUpdateDate(null);
             }
             setPlaceholderDate(newValue);
         }
@@ -104,348 +90,85 @@ export function useDateFieldState(props) {
         }
         setValidSegments(Object.assign({}, validSegments));
     }
-    function setSection(section, amount) {
-        markValid(section.type);
-        setValue(setSegment(section, displayValue, amount));
+    function setSection(sectionIndex, amount) {
+        const section = sectionsState.editableSections[sectionIndex];
+        if (section) {
+            markValid(section.type);
+            setValue(setSegment(section, displayValue, amount));
+        }
     }
     function adjustSection(sectionIndex, amount) {
         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);
+                }
             }
         }
     }
-    const enteredKeys = React.useRef('');
+    function flushValidSection(sectionIndex) {
+        const section = sectionsState.editableSections[sectionIndex];
+        if (section) {
+            delete validSegments[section.type];
+        }
+        setValidSegments(Object.assign({}, validSegments));
+    }
+    function flushAllValidSections() {
+        validSegments = {};
+        setValidSegments({});
+    }
+    function getSectionValue(_sectionIndex) {
+        return displayValue;
+    }
+    function setSectionValue(_sectionIndex, currentValue) {
+        setValue(currentValue);
+    }
+    function createPlaceholder() {
+        return createPlaceholderValue({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        }).timeZone(timeZone);
+    }
+    function setValueFromString(str) {
+        const date = parseDateFromString(str, props.format || 'L', timeZone);
+        if (isValid(date)) {
+            handleUpdateDate(date);
+            return true;
+        }
+        return false;
+    }
     const validationState = props.validationState ||
         (isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : undefined) ||
-        (value && ((_a = props.isDateUnavailable) === null || _a === void 0 ? void 0 : _a.call(props, value)) ? 'invalid' : undefined);
-    return {
-        value: value !== null && value !== void 0 ? value : null,
-        isEmpty: Object.keys(validSegments).length === 0,
+        (value && ((_b = props.isDateUnavailable) === null || _b === void 0 ? void 0 : _b.call(props, value)) ? 'invalid' : undefined);
+    return useBaseDateFieldState({
+        value,
         displayValue,
-        setValue,
-        // use ltr direction context to get predictable navigation inside input
-        text: '\u2066' + sectionsState.editableSections.map((s) => s.textValue).join('') + '\u2069',
+        placeholderValue: props.placeholderValue,
+        timeZone,
+        validationState,
+        editableSections: sectionsState.editableSections,
         readOnly: props.readOnly,
         disabled: props.disabled,
-        sections: sectionsState.editableSections,
         selectedSectionIndexes,
-        validationState,
-        setSelectedSections(position) {
-            enteredKeys.current = '';
-            setSelectedSections(position);
-        },
-        focusSectionInPosition(position) {
-            const nextSectionIndex = this.sections.findIndex((s) => s.end >= position);
-            const index = nextSectionIndex === -1 ? 0 : nextSectionIndex;
-            const nextSection = this.sections[index];
-            if (nextSection) {
-                this.setSelectedSections(EDITABLE_SEGMENTS[nextSection.type] ? index : nextSection.nextEditableSection);
-            }
-        },
-        focusNextSection() {
-            var _a, _b;
-            const currentIndex = selectedSections === 'all' ? 0 : selectedSections;
-            const newIndex = (_b = (_a = this.sections[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextEditableSection) !== null && _b !== void 0 ? _b : -1;
-            if (newIndex !== -1) {
-                this.setSelectedSections(newIndex);
-            }
-        },
-        focusPreviousSection() {
-            var _a, _b;
-            const currentIndex = selectedSections === 'all' ? 0 : selectedSections;
-            const newIndex = (_b = (_a = this.sections[currentIndex]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
-            if (newIndex !== -1) {
-                this.setSelectedSections(newIndex);
-            }
-        },
-        focusFirstSection() {
-            var _a, _b;
-            const newIndex = (_b = (_a = this.sections[0]) === null || _a === void 0 ? void 0 : _a.previousEditableSection) !== null && _b !== void 0 ? _b : -1;
-            if (newIndex !== -1) {
-                setSelectedSections(newIndex);
-            }
-        },
-        focusLastSection() {
-            var _a, _b;
-            const newIndex = (_b = (_a = this.sections[this.sections.length - 1]) === null || _a === void 0 ? void 0 : _a.nextEditableSection) !== null && _b !== void 0 ? _b : -1;
-            if (newIndex !== -1) {
-                this.setSelectedSections(newIndex);
-            }
-        },
-        increment() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                adjustSection(sectionIndex, 1);
-            }
-        },
-        decrement() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                adjustSection(sectionIndex, -1);
-            }
-        },
-        incrementPage() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                adjustSection(sectionIndex, PAGE_STEP[this.sections[sectionIndex].type] || 1);
-            }
-        },
-        decrementPage() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                adjustSection(sectionIndex, -(PAGE_STEP[this.sections[sectionIndex].type] || 1));
-            }
-        },
-        incrementToMax() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                const section = this.sections[sectionIndex];
-                if (typeof section.maxValue === 'number') {
-                    setSection(section, section.maxValue);
-                }
-            }
-        },
-        decrementToMin() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex !== -1) {
-                const section = this.sections[sectionIndex];
-                if (typeof section.minValue === 'number') {
-                    setSection(section, section.minValue);
-                }
-            }
-        },
-        clearSection() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            if (selectedSections === 'all') {
-                this.clearAll();
-                return;
-            }
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex === -1) {
-                return;
-            }
-            const section = this.sections[sectionIndex];
-            delete validSegments[section.type];
-            setValidSegments(Object.assign({}, validSegments));
-            const placeholder = createPlaceholderValue({
-                placeholderValue: props.placeholderValue,
-                timeZone: props.timeZone,
-            });
-            let currentValue = displayValue;
-            // Reset day period to default without changing the hour.
-            if (section.type === 'dayPeriod') {
-                const isPM = displayValue.hour() >= 12;
-                const shouldBePM = placeholder.hour() >= 12;
-                if (isPM && !shouldBePM) {
-                    currentValue = displayValue.set('hour', displayValue.hour() - 12);
-                }
-                else if (!isPM && shouldBePM) {
-                    currentValue = displayValue.set('hour', displayValue.hour() + 12);
-                }
-            }
-            else {
-                const type = getDurationUnitFromSectionType(section.type);
-                currentValue = displayValue.set(type, placeholder[type]());
-            }
-            setValue(currentValue);
-        },
-        clearAll() {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            enteredKeys.current = '';
-            validSegments = {};
-            setValidSegments({});
-            if (value !== null) {
-                setDate(null);
-            }
-            setValue(createPlaceholderValue({
-                placeholderValue: props.placeholderValue,
-                timeZone: props.timeZone,
-            }));
-        },
-        onInput(key) {
-            if (this.readOnly || this.disabled) {
-                return;
-            }
-            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
-            if (sectionIndex === -1) {
-                return;
-            }
-            const section = this.sections[sectionIndex];
-            let newValue = enteredKeys.current + key;
-            const onInputNumber = (numberValue) => {
-                var _a, _b, _c;
-                let sectionValue = section.type === 'month' ? numberValue - 1 : numberValue;
-                const allowsZero = section.minValue === 0;
-                if (section.type === 'hour' &&
-                    (section.minValue === 12 || section.maxValue === 11)) {
-                    if (numberValue > 12) {
-                        sectionValue = Number(key);
-                    }
-                    if (section.minValue === 12 && sectionValue > 1) {
-                        sectionValue += 12;
-                    }
-                }
-                else if (sectionValue > ((_a = section.maxValue) !== null && _a !== void 0 ? _a : 0)) {
-                    sectionValue = Number(key) - (section.type === 'month' ? 1 : 0);
-                    newValue = key;
-                    if (sectionValue > ((_b = section.maxValue) !== null && _b !== void 0 ? _b : 0)) {
-                        enteredKeys.current = '';
-                        return;
-                    }
-                }
-                const shouldSetValue = sectionValue > 0 || (sectionValue === 0 && allowsZero);
-                if (shouldSetValue) {
-                    setSection(section, sectionValue);
-                }
-                if (Number(numberValue + '0') > ((_c = section.maxValue) !== null && _c !== void 0 ? _c : 0) ||
-                    newValue.length >= String(section.maxValue).length) {
-                    enteredKeys.current = '';
-                    if (shouldSetValue) {
-                        this.focusNextSection();
-                    }
-                }
-                else {
-                    enteredKeys.current = newValue;
-                }
-            };
-            const onInputString = (stringValue) => {
-                var _a;
-                const options = (_a = section.options) !== null && _a !== void 0 ? _a : [];
-                let sectionValue = stringValue.toLocaleUpperCase();
-                let foundOptions = options.filter((v) => v.startsWith(sectionValue));
-                if (foundOptions.length === 0) {
-                    if (stringValue !== key) {
-                        sectionValue = key.toLocaleUpperCase();
-                        foundOptions = options.filter((v) => v.startsWith(sectionValue));
-                    }
-                    if (foundOptions.length === 0) {
-                        enteredKeys.current = '';
-                        return;
-                    }
-                }
-                const foundValue = foundOptions[0];
-                const index = options.indexOf(foundValue);
-                if (section.type === 'dayPeriod') {
-                    setSection(section, index === 1 ? 12 : 0);
-                }
-                else {
-                    setSection(section, index);
-                }
-                if (foundOptions.length > 1) {
-                    enteredKeys.current = newValue;
-                }
-                else {
-                    enteredKeys.current = '';
-                    this.focusNextSection();
-                }
-            };
-            switch (section.type) {
-                case 'day':
-                case 'hour':
-                case 'minute':
-                case 'second':
-                case 'year': {
-                    if (!Number.isInteger(Number(newValue))) {
-                        return;
-                    }
-                    const numberValue = Number(newValue);
-                    onInputNumber(numberValue);
-                    break;
-                }
-                case 'dayPeriod': {
-                    onInputString(newValue);
-                    break;
-                }
-                case 'weekday':
-                case 'month': {
-                    if (Number.isInteger(Number(newValue))) {
-                        const numberValue = Number(newValue);
-                        onInputNumber(numberValue);
-                    }
-                    else {
-                        onInputString(newValue);
-                    }
-                    break;
-                }
-            }
-        },
-        setValueFromString(str) {
-            enteredKeys.current = '';
-            let date = parseDate({ input: str, format, timeZone: props.timeZone });
-            if (isValid(date)) {
-                if (props.timeZone && !isDateStringWithTimeZone(str)) {
-                    const time = parseDate({ input: str, format });
-                    date = mergeDateTime(date, time);
-                }
-                setDate(date);
-                return true;
-            }
-            return false;
-        },
-    };
-}
-function parseDate(options) {
-    let date = dateTime(options);
-    if (!isValid(date)) {
-        date = dateTime(Object.assign(Object.assign({}, options), { format: undefined }));
-    }
-    return date;
-}
-function isDateStringWithTimeZone(str) {
-    return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
-}
-function getCurrentEditableSectionIndex(sections, selectedSections) {
-    const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
-    const section = sections[currentIndex];
-    if (section && !EDITABLE_SEGMENTS[section.type]) {
-        return section.nextEditableSection;
-    }
-    return section ? currentIndex : -1;
-}
-function useFormatSections(format) {
-    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;
+        selectedSections,
+        isEmpty: Object.keys(validSegments).length === 0,
+        flushAllValidSections,
+        flushValidSection,
+        setSelectedSections,
+        setValue,
+        setDate: handleUpdateDate,
+        adjustSection,
+        setSection,
+        getSectionValue,
+        setSectionValue,
+        createPlaceholder,
+        setValueFromString,
+    });
 }
 function useSectionsState(sections, value, validSegments) {
     const [state, setState] = React.useState(() => {
@@ -458,7 +181,8 @@ function useSectionsState(sections, value, validSegments) {
     });
     if (sections !== state.sections ||
         validSegments !== state.validSegments ||
-        !value.isSame(state.value)) {
+        !value.isSame(state.value) ||
+        value.timeZone() !== state.value.timeZone()) {
         setState({
             value,
             sections,
@@ -468,39 +192,3 @@ function useSectionsState(sections, value, validSegments) {
     }
     return state;
 }
-function getEditableSections(sections, value, validSegments) {
-    let position = 1;
-    const newSections = [];
-    let previousEditableSection = -1;
-    for (let i = 0; i < sections.length; i++) {
-        const section = sections[i];
-        const isEditable = EDITABLE_SEGMENTS[section.type];
-        let renderedValue = section.placeholder;
-        if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
-            renderedValue = value.format(section.format);
-            if (section.contentType === 'digit' &&
-                renderedValue.length < section.placeholder.length) {
-                renderedValue = renderedValue.padStart(section.placeholder.length, '0');
-            }
-        }
-        // use bidirectional context to allow the browser autodetect text direction
-        renderedValue = '\u2068' + renderedValue + '\u2069';
-        const sectionLength = renderedValue.length;
-        const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getSectionValue(section, value), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(section, value));
-        newSections.push(newSection);
-        if (isEditable) {
-            for (let j = Math.max(0, previousEditableSection); j <= i; j++) {
-                const prevSection = newSections[j];
-                if (prevSection) {
-                    prevSection.nextEditableSection = i;
-                    if (prevSection.previousEditableSection === -1) {
-                        prevSection.previousEditableSection = i;
-                    }
-                }
-            }
-            previousEditableSection = i;
-        }
-        position += sectionLength;
-    }
-    return newSections;
-}

package/dist/esm/components/DateField/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DateField';
 export * from './hooks/useDateFieldState';
 export * from './hooks/useDateFieldProps';
+export * from './hooks/useBaseDateFieldState';

package/dist/esm/components/DateField/index.js

@@ -1,3 +1,4 @@
 export * from './DateField';
 export * from './hooks/useDateFieldState';
 export * from './hooks/useDateFieldProps';
+export * from './hooks/useBaseDateFieldState';

package/dist/esm/components/DateField/utils.d.ts

@@ -1,5 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DateFieldSection, DateFieldSectionType, DateFieldSectionWithoutPosition } from './types';
+export declare const EDITABLE_SEGMENTS: Partial<Record<DateFieldSectionType, boolean>>;
 export declare function expandFormat(format: string): string;
 export declare function getSectionLimits(section: DateFieldSectionWithoutPosition, date: DateTime): {
     minValue: number;
@@ -9,8 +10,16 @@ export declare function getSectionLimits(section: DateFieldSectionWithoutPositio
     maxValue?: undefined;
 };
 export declare function getSectionValue(sections: DateFieldSectionWithoutPosition, date: DateTime): number | undefined;
-export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "date" | "hour" | "minute" | "second";
+export declare function getDurationUnitFromSectionType(type: DateFieldSectionType): "year" | "month" | "day" | "hour" | "minute" | "second" | "date";
 export declare function addSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function setSegment(section: DateFieldSection, date: DateTime, amount: number): DateTime;
 export declare function splitFormatIntoSections(format: string): DateFieldSectionWithoutPosition[];
 export declare function cleanString(dirtyString: string): string;
+export declare function getEditableSections(sections: DateFieldSectionWithoutPosition[], value: DateTime, validSegments: typeof EDITABLE_SEGMENTS): DateFieldSection[];
+export declare function isEditableSection(section: DateFieldSectionWithoutPosition): boolean;
+export declare function toEditableSection(section: DateFieldSectionWithoutPosition, value: DateTime, validSegments: typeof EDITABLE_SEGMENTS, position: number, previousEditableSection: number): DateFieldSection;
+export declare function getCurrentEditableSectionIndex(sections: DateFieldSection[], selectedSections: 'all' | number): number;
+export declare function formatSections(sections: DateFieldSection[]): string;
+export declare function parseDateFromString(str: string, format: string, timeZone?: string): DateTime;
+export declare function isAllSegmentsValid(allSegments: typeof EDITABLE_SEGMENTS, validSegments: typeof EDITABLE_SEGMENTS): boolean;
+export declare function useFormatSections(format: string): DateFieldSectionWithoutPosition[];