@gravity-ui/date-components 3.4.1 → 4.0.0

package/dist/cjs/components/DateField/utils.js

@@ -1,24 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EDITABLE_SEGMENTS = void 0;
-exports.getSectionLimits = getSectionLimits;
-exports.getSectionValue = getSectionValue;
+exports.PAGE_STEP = void 0;
 exports.getDurationUnitFromSectionType = getDurationUnitFromSectionType;
 exports.addSegment = addSegment;
 exports.setSegment = setSegment;
 exports.splitFormatIntoSections = splitFormatIntoSections;
 exports.cleanString = cleanString;
 exports.getEditableSections = getEditableSections;
-exports.isEditableSection = isEditableSection;
+exports.isEditableSectionType = isEditableSectionType;
 exports.toEditableSection = toEditableSection;
-exports.getCurrentEditableSectionIndex = getCurrentEditableSectionIndex;
-exports.formatSections = formatSections;
 exports.parseDateFromString = parseDateFromString;
-exports.isAllSegmentsValid = isAllSegmentsValid;
 exports.useFormatSections = useFormatSections;
 exports.getFormatInfo = getFormatInfo;
 exports.adjustDateToFormat = adjustDateToFormat;
-exports.markValidSection = markValidSection;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
@@ -26,16 +20,16 @@ const index_js_1 = require("@gravity-ui/date-utils/build/dayjs/index.js");
 const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../utils/dates.js");
 const i18n_1 = require("./i18n/index.js");
-exports.EDITABLE_SEGMENTS = {
+const EDITABLE_SEGMENTS = {
     year: true,
     quarter: true,
     month: true,
     day: true,
+    weekday: true,
     hour: true,
     minute: true,
     second: true,
     dayPeriod: true,
-    weekday: true,
 };
 const escapedCharacters = { start: '[', end: ']' };
 const formatTokenMap = {
@@ -44,6 +38,7 @@ const formatTokenMap = {
     YYYY: 'year',
     // Quarter
     Q: 'quarter',
+    Qo: 'quarter',
     // Month
     M: 'month',
     MM: 'month',
@@ -78,6 +73,16 @@ const formatTokenMap = {
     Z: { sectionType: 'timeZoneName', contentType: 'letter' },
     ZZ: { sectionType: 'timeZoneName', contentType: 'letter' },
 };
+exports.PAGE_STEP = {
+    year: 5,
+    quarter: 2,
+    month: 2,
+    weekday: 3,
+    day: 7,
+    hour: 2,
+    minute: 15,
+    second: 15,
+};
 function getDateSectionConfigFromFormatToken(formatToken) {
     const config = formatTokenMap[formatToken];
     if (!config) {
@@ -107,7 +112,7 @@ function isFourDigitYearFormat(format) {
 function isHour12(format) {
     return (0, date_utils_1.dateTime)().set('hour', 15).format(format) !== '15';
 }
-function getSectionLimits(section, date) {
+function getSectionLimits(section, date, placeholder) {
     const { type, format } = section;
     switch (type) {
         case 'year': {
@@ -122,8 +127,8 @@ function getSectionLimits(section, date) {
         }
         case 'month': {
             return {
-                minValue: 0,
-                maxValue: 11,
+                minValue: 1,
+                maxValue: 12,
             };
         }
         case 'weekday': {
@@ -135,12 +140,12 @@ function getSectionLimits(section, date) {
         case 'day': {
             return {
                 minValue: 1,
-                maxValue: date ? date.daysInMonth() : 31,
+                maxValue: 31,
             };
         }
         case 'hour': {
             if (isHour12(format)) {
-                const isPM = date.hour() >= 12;
+                const isPM = (date.hour ?? placeholder.hour()) >= 12;
                 return {
                     minValue: isPM ? 12 : 0,
                     maxValue: isPM ? 23 : 11,
@@ -165,28 +170,25 @@ function getSectionValue(section, date) {
     const type = section.type;
     switch (type) {
         case 'year': {
+            if (date.year === null) {
+                return null;
+            }
             return isFourDigitYearFormat(section.format)
-                ? date.year()
-                : Number(date.format(section.format));
+                ? date.year
+                : Number((0, date_utils_1.dateTime)().set('year', date.year).format(section.format));
         }
         case 'quarter':
         case 'month':
+        case 'weekday':
         case 'hour':
         case 'minute':
-        case 'second': {
-            return date[type]();
-        }
-        case 'day': {
-            return date.date();
-        }
-        case 'weekday': {
-            return date.day();
-        }
+        case 'second':
+        case 'day':
         case 'dayPeriod': {
-            return date.hour() >= 12 ? 12 : 0;
+            return date[type];
         }
     }
-    return undefined;
+    return null;
 }
 const TYPE_MAPPING = {
     weekday: 'day',
@@ -194,7 +196,7 @@ const TYPE_MAPPING = {
     dayPeriod: 'hour',
 };
 function getDurationUnitFromSectionType(type) {
-    if (type === 'literal' || type === 'timeZoneName' || type === 'unknown') {
+    if (!isEditableSectionType(type)) {
         throw new Error(`${type} section does not have duration unit.`);
     }
     if (type in TYPE_MAPPING) {
@@ -202,11 +204,42 @@ function getDurationUnitFromSectionType(type) {
     }
     return type;
 }
-function addSegment(section, date, amount) {
-    var _a;
-    let val = (_a = section.value) !== null && _a !== void 0 ? _a : 0;
+function addSegment(section, date, amount, placeholder) {
+    if (!isEditableSectionType(section.type)) {
+        throw new Error();
+    }
+    let val = date[section.type];
+    if (val === null) {
+        let newDate;
+        if (section.type === 'quarter' || section.type === 'month') {
+            newDate = date.set('month', placeholder.month() + 1);
+        }
+        else if (section.type === 'dayPeriod') {
+            newDate = date.set('hour', placeholder.hour());
+        }
+        else if (section.type === 'weekday' && date.day && date.day !== placeholder.date()) {
+            newDate = date.set('weekday', placeholder.set({ date: date.day }).day());
+        }
+        else {
+            newDate = date.set(section.type, placeholder[getDurationUnitFromSectionType(section.type)]());
+        }
+        if (newDate.weekday !== null &&
+            (section.type === 'day' ||
+                section.type === 'month' ||
+                section.type === 'quarter' ||
+                section.type === 'year') &&
+            newDate.year !== null &&
+            newDate.month !== null &&
+            newDate.day !== null) {
+            newDate = newDate.set('weekday', placeholder
+                .set({ date: newDate.day, month: newDate.month, year: newDate.year })
+                .day());
+        }
+        return newDate;
+    }
     if (section.type === 'dayPeriod') {
-        val = date.hour() + (date.hour() >= 12 ? -12 : 12);
+        const hour = date.hour ?? placeholder.hour();
+        val = hour + (hour >= 12 ? -12 : 12);
     }
     else {
         val = val + amount;
@@ -217,48 +250,71 @@ function addSegment(section, date, amount) {
             val = ((val - min + length) % length) + min;
         }
     }
+    if (section.type === 'dayPeriod') {
+        return date.set('hour', val);
+    }
     if (section.type === 'year' && !isFourDigitYearFormat(section.format)) {
         val = (0, date_utils_1.dateTime)({ input: `${val}`.padStart(2, '0'), format: section.format }).year();
     }
-    if (section.type === 'quarter') {
-        return date.set(getDurationUnitFromSectionType('month'), val * 3 - 1);
+    const newDate = date.set(section.type, val);
+    if (newDate.year !== null && newDate.month !== null && newDate.day !== null) {
+        if (date.weekday !== null &&
+            (section.type === 'day' ||
+                section.type === 'month' ||
+                section.type === 'quarter' ||
+                section.type === 'year')) {
+            newDate.weekday = placeholder
+                .set({ date: newDate.day, month: newDate.month, year: newDate.year })
+                .day();
+        }
+        else if (section.type === 'weekday') {
+            const d = placeholder
+                .set({ date: newDate.day, month: newDate.month, year: newDate.year })
+                .set({ day: val });
+            newDate.year = d.year();
+            newDate.month = d.month();
+            newDate.day = d.date();
+        }
     }
-    const type = getDurationUnitFromSectionType(section.type);
-    return date.set(type, val);
+    return newDate;
 }
-function setSegment(section, date, amount) {
+function setSegment(section, date, amount, placeholder) {
     const type = section.type;
+    let newDate;
     switch (type) {
         case 'year': {
-            return date.set('year', isFourDigitYearFormat(section.format)
+            newDate = date.set('year', isFourDigitYearFormat(section.format)
                 ? amount
                 : (0, date_utils_1.dateTime)({
                     input: `${amount}`.padStart(2, '0'),
                     format: section.format,
                 }).year());
+            break;
         }
-        case 'quarter': {
-            return date.set(getDurationUnitFromSectionType('month'), amount * 3 - 1);
-        }
-        case 'day':
+        case 'quarter':
+        case 'month':
         case 'weekday':
-        case 'month': {
-            return date.set(getDurationUnitFromSectionType(type), amount);
+        case 'day': {
+            newDate = date.set(type, amount);
+            break;
         }
         case 'dayPeriod': {
-            const hours = date.hour();
+            const hours = date.hour ?? placeholder.hour();
             const wasPM = hours >= 12;
-            const isPM = amount >= 12;
+            const isPM = amount === 1;
             if (isPM === wasPM) {
-                return date;
+                newDate = date;
             }
-            return date.set('hour', wasPM ? hours - 12 : hours + 12);
+            else {
+                newDate = date.set('hour', wasPM ? hours - 12 : hours + 12);
+            }
+            break;
         }
         case 'hour': {
             // In 12 hour time, ensure that AM/PM does not change
             let sectionAmount = amount;
             if (section.minValue === 12 || section.maxValue === 11) {
-                const hours = date.hour();
+                const hours = date.hour ?? placeholder.hour();
                 const wasPM = hours >= 12;
                 if (!wasPM && sectionAmount === 12) {
                     sectionAmount = 0;
@@ -267,14 +323,36 @@ function setSegment(section, date, amount) {
                     sectionAmount += 12;
                 }
             }
-            return date.set('hour', sectionAmount);
+            newDate = date.set('hour', sectionAmount);
+            break;
         }
         case 'minute':
         case 'second': {
-            return date.set(type, amount);
+            newDate = date.set(type, amount);
+            break;
+        }
+        default: {
+            newDate = date;
+            break;
         }
     }
-    return date;
+    if (newDate.year !== null && newDate.month !== null && newDate.day !== null) {
+        if (newDate.weekday !== null &&
+            (type === 'day' || type === 'month' || type === 'quarter' || type === 'year')) {
+            newDate = newDate.set('weekday', placeholder
+                .set({ date: newDate.day, month: newDate.month, year: newDate.year })
+                .day());
+        }
+        else if (type === 'weekday') {
+            const d = placeholder
+                .set({ date: newDate.day, month: newDate.month, year: newDate.year })
+                .set({ day: amount });
+            newDate.year = d.year();
+            newDate.month = d.month();
+            newDate.day = d.date();
+        }
+    }
+    return newDate;
 }
 function doesSectionHaveLeadingZeros(contentType, sectionType, format) {
     if (contentType !== 'digit') {
@@ -321,7 +399,7 @@ function getSectionPlaceholder(sectionConfig, currentTokenValue, t) {
             return t('year_placeholder').repeat((0, date_utils_1.dateTime)().format(currentTokenValue).length);
         }
         case 'quarter': {
-            return t('quarter_placeholder');
+            return t('quarter_placeholder').repeat(currentTokenValue.length);
         }
         case 'month': {
             return t('month_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
@@ -330,7 +408,7 @@ function getSectionPlaceholder(sectionConfig, currentTokenValue, t) {
             return t('day_placeholder').repeat(2);
         }
         case 'weekday': {
-            return t('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? 4 : 2);
+            return t('weekday_placeholder').repeat(sectionConfig.contentType === 'letter' ? currentTokenValue.length : 2);
         }
         case 'hour': {
             return t('hour_placeholder').repeat(2);
@@ -375,7 +453,7 @@ function splitFormatIntoSections(format, t = i18n_1.i18n, lang = 'en') {
         }
         else {
             if (!isSeparator) {
-                addFormatSection(sections, currentTokenValue, t);
+                addFormatSection(sections, currentTokenValue, t, lang);
                 currentTokenValue = '';
             }
             isSeparator = true;
@@ -392,18 +470,24 @@ function splitFormatIntoSections(format, t = i18n_1.i18n, lang = 'en') {
             addLiteralSection(sections, currentTokenValue);
         }
         else {
-            addFormatSection(sections, currentTokenValue, t);
+            addFormatSection(sections, currentTokenValue, t, lang);
         }
     }
     return sections;
 }
-function addFormatSection(sections, token, t) {
+function addFormatSection(sections, token, t, lang) {
     if (!token) {
         return;
     }
     const sectionConfig = getDateSectionConfigFromFormatToken(token);
     const hasLeadingZeros = doesSectionHaveLeadingZeros(sectionConfig.contentType, sectionConfig.type, token);
-    sections.push(Object.assign(Object.assign({}, sectionConfig), { format: token, placeholder: getSectionPlaceholder(sectionConfig, token, t), options: getSectionOptions(sectionConfig, token), hasLeadingZeros }));
+    sections.push({
+        ...sectionConfig,
+        format: token,
+        placeholder: getSectionPlaceholder(sectionConfig, token, t),
+        options: getSectionOptions(sectionConfig, token, lang),
+        hasLeadingZeros,
+    });
 }
 function addLiteralSection(sections, token) {
     if (!token) {
@@ -417,11 +501,11 @@ function addLiteralSection(sections, token) {
         hasLeadingZeros: false,
     });
 }
-function getSectionOptions(section, token) {
+function getSectionOptions(section, token, lang) {
     switch (section.type) {
         case 'month': {
             const format = section.contentType === 'letter' ? token : 'MMMM';
-            let date = (0, date_utils_1.dateTime)().startOf('year');
+            let date = (0, date_utils_1.dateTime)({ lang }).startOf('year');
             const options = [];
             for (let i = 0; i < 12; i++) {
                 options.push(date.format(format).toLocaleUpperCase());
@@ -440,7 +524,7 @@ function getSectionOptions(section, token) {
         }
         case 'weekday': {
             const format = section.contentType === 'letter' ? token : 'dddd';
-            let date = (0, date_utils_1.dateTime)().day(0);
+            let date = (0, date_utils_1.dateTime)({ lang }).day(0);
             const options = [];
             for (let i = 0; i < 7; i++) {
                 options.push(date.format(format).toLocaleUpperCase());
@@ -454,68 +538,53 @@ function getSectionOptions(section, token) {
 function cleanString(dirtyString) {
     return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 }
-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];
-        if (!section) {
-            continue;
-        }
-        const newSection = toEditableSection(section, value, validSegments, position, previousEditableSection);
-        newSections.push(newSection);
-        if (isEditableSection(section)) {
-            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 += newSection.textValue.length;
-    }
-    return newSections;
+function getEditableSections(sections, value, placeholder) {
+    return sections.map((section) => toEditableSection(section, value, placeholder));
 }
-function isEditableSection(section) {
-    var _a;
-    return (_a = exports.EDITABLE_SEGMENTS[section.type]) !== null && _a !== void 0 ? _a : false;
+function isEditableSectionType(type) {
+    return EDITABLE_SEGMENTS[type] ?? false;
 }
-function toEditableSection(section, value, validSegments, position, previousEditableSection) {
-    const isEditable = isEditableSection(section);
+function toEditableSection(section, value, placeholder) {
     let renderedValue = section.placeholder;
-    if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
-        renderedValue = value.format(section.format);
+    let val = isEditableSectionType(section.type) ? value[section.type] : null;
+    if (section.type === 'timeZoneName') {
+        renderedValue = placeholder.format(section.format);
+    }
+    else if (isEditableSectionType(section.type) && val !== null) {
+        const sectionDate = placeholder.set({ month: 0, date: 1, hour: 0, minute: 0, second: 0 });
+        let sectionType = getDurationUnitFromSectionType(section.type);
+        if (section.type === 'month') {
+            val -= 1;
+        }
+        else if (section.type === 'quarter') {
+            sectionType = 'month';
+            val = (val - 1) * 3;
+        }
+        else if (section.type === 'dayPeriod') {
+            if (value.hour === null) {
+                val = val === 1 ? 12 : 0;
+            }
+            else {
+                val = value.hour;
+            }
+        }
+        renderedValue = sectionDate.set(sectionType, val).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));
+    const newSection = {
+        ...section,
+        value: getSectionValue(section, value),
+        textValue: renderedValue,
+        ...getSectionLimits(section, value, placeholder),
+    };
     return newSection;
 }
-function getCurrentEditableSectionIndex(sections, selectedSections) {
-    const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
-    const section = sections[currentIndex];
-    if (section && !exports.EDITABLE_SEGMENTS[section.type]) {
-        return section.nextEditableSection;
-    }
-    return section ? currentIndex : -1;
-}
-function formatSections(sections) {
-    // use ltr direction context to get predictable navigation inside input
-    return '\u2066' + sections.map((s) => s.textValue).join('') + '\u2069';
-}
 function parseDate(options) {
     let date = (0, date_utils_1.dateTime)(options);
     if (!date.isValid()) {
-        date = (0, date_utils_1.dateTime)(Object.assign(Object.assign({}, options), { format: undefined }));
+        date = (0, date_utils_1.dateTime)({ ...options, format: undefined });
     }
     return date;
 }
@@ -541,9 +610,6 @@ function parseDateFromString(str, format, timeZone) {
     }
     return date;
 }
-function isAllSegmentsValid(allSegments, validSegments) {
-    return Object.keys(allSegments).every((key) => validSegments[key]);
-}
 function useFormatSections(format) {
     const { t } = i18n_1.i18n.useTranslation();
     const { lang } = (0, uikit_1.useLang)();
@@ -558,21 +624,20 @@ function useFormatSections(format) {
 const dateUnits = ['day', 'month', 'quarter', 'year'];
 const timeUnits = ['second', 'minute', 'hour'];
 function getFormatInfo(sections) {
-    var _a, _b;
     const availableUnits = {};
     let hasDate = false;
     let hasTime = false;
     let minDateUnitIndex = dateUnits.length - 1;
     let minTimeUnitIndex = timeUnits.length - 1;
     for (const s of sections) {
-        if (!isEditableSection(s)) {
+        if (!isEditableSectionType(s.type)) {
             continue;
         }
         const dateUnitIndex = dateUnits.indexOf(s.type);
         const timeUnitIndex = timeUnits.indexOf(s.type);
         availableUnits[s.type] = true;
-        hasDate || (hasDate = dateUnitIndex !== -1);
-        hasTime || (hasTime = timeUnitIndex !== -1);
+        hasDate ||= dateUnitIndex !== -1;
+        hasTime ||= timeUnitIndex !== -1;
         minDateUnitIndex =
             dateUnitIndex === -1 ? minDateUnitIndex : Math.min(dateUnitIndex, minDateUnitIndex);
         minTimeUnitIndex =
@@ -582,8 +647,8 @@ function getFormatInfo(sections) {
         availableUnits,
         hasDate,
         hasTime,
-        minDateUnit: (_a = dateUnits[minDateUnitIndex]) !== null && _a !== void 0 ? _a : 'day',
-        minTimeUnit: (_b = timeUnits[minTimeUnitIndex]) !== null && _b !== void 0 ? _b : 'second',
+        minDateUnit: dateUnits[minDateUnitIndex] ?? 'day',
+        minTimeUnit: timeUnits[minTimeUnitIndex] ?? 'second',
     };
 }
 function adjustDateToFormat(date, formatInfo, method = 'startOf') {
@@ -599,21 +664,4 @@ function adjustDateToFormat(date, formatInfo, method = 'startOf') {
     }
     return newDate;
 }
-function markValidSection(allSections, editableSections, unit) {
-    const validSections = Object.assign({}, editableSections);
-    validSections[unit] = true;
-    if (validSections.day && validSections.month && validSections.year && allSections.weekday) {
-        validSections.weekday = true;
-    }
-    if (validSections.month && allSections.quarter) {
-        validSections.quarter = true;
-    }
-    if (validSections.quarter && allSections.month) {
-        validSections.month = true;
-    }
-    if (validSections.hour && allSections.dayPeriod) {
-        validSections.dayPeriod = true;
-    }
-    return validSections;
-}
 //# sourceMappingURL=utils.js.map