@gravity-ui/date-components 3.4.1 → 4.0.0

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

@@ -4,16 +4,16 @@ import { dayjs } from '@gravity-ui/date-utils/build/dayjs/index.js';
 import { useLang } from '@gravity-ui/uikit';
 import { mergeDateTime } from "../utils/dates.js";
 import { i18n } from "./i18n/index.js";
-export const 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 = {
@@ -22,6 +22,7 @@ const formatTokenMap = {
     YYYY: 'year',
     // Quarter
     Q: 'quarter',
+    Qo: 'quarter',
     // Month
     M: 'month',
     MM: 'month',
@@ -56,6 +57,16 @@ const formatTokenMap = {
     Z: { sectionType: 'timeZoneName', contentType: 'letter' },
     ZZ: { sectionType: 'timeZoneName', contentType: 'letter' },
 };
+export const 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) {
@@ -85,7 +96,7 @@ function isFourDigitYearFormat(format) {
 function isHour12(format) {
     return dateTime().set('hour', 15).format(format) !== '15';
 }
-export function getSectionLimits(section, date) {
+function getSectionLimits(section, date, placeholder) {
     const { type, format } = section;
     switch (type) {
         case 'year': {
@@ -100,8 +111,8 @@ export function getSectionLimits(section, date) {
         }
         case 'month': {
             return {
-                minValue: 0,
-                maxValue: 11,
+                minValue: 1,
+                maxValue: 12,
             };
         }
         case 'weekday': {
@@ -113,12 +124,12 @@ export 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,
@@ -139,32 +150,29 @@ export function getSectionLimits(section, date) {
     }
     return {};
 }
-export function getSectionValue(section, date) {
+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(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',
@@ -172,7 +180,7 @@ const TYPE_MAPPING = {
     dayPeriod: 'hour',
 };
 export 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) {
@@ -180,11 +188,42 @@ export function getDurationUnitFromSectionType(type) {
     }
     return type;
 }
-export function addSegment(section, date, amount) {
-    var _a;
-    let val = (_a = section.value) !== null && _a !== void 0 ? _a : 0;
+export 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;
@@ -195,48 +234,71 @@ export 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 = 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;
 }
-export function setSegment(section, date, amount) {
+export 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
                 : 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;
@@ -245,14 +307,36 @@ export 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') {
@@ -299,7 +383,7 @@ function getSectionPlaceholder(sectionConfig, currentTokenValue, t) {
             return t('year_placeholder').repeat(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);
@@ -308,7 +392,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);
@@ -353,7 +437,7 @@ export function splitFormatIntoSections(format, t = i18n, lang = 'en') {
         }
         else {
             if (!isSeparator) {
-                addFormatSection(sections, currentTokenValue, t);
+                addFormatSection(sections, currentTokenValue, t, lang);
                 currentTokenValue = '';
             }
             isSeparator = true;
@@ -370,18 +454,24 @@ export function splitFormatIntoSections(format, t = 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) {
@@ -395,11 +485,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 = dateTime().startOf('year');
+            let date = dateTime({ lang }).startOf('year');
             const options = [];
             for (let i = 0; i < 12; i++) {
                 options.push(date.format(format).toLocaleUpperCase());
@@ -418,7 +508,7 @@ function getSectionOptions(section, token) {
         }
         case 'weekday': {
             const format = section.contentType === 'letter' ? token : 'dddd';
-            let date = dateTime().day(0);
+            let date = dateTime({ lang }).day(0);
             const options = [];
             for (let i = 0; i < 7; i++) {
                 options.push(date.format(format).toLocaleUpperCase());
@@ -432,68 +522,53 @@ function getSectionOptions(section, token) {
 export function cleanString(dirtyString) {
     return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 }
-export 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;
+export function getEditableSections(sections, value, placeholder) {
+    return sections.map((section) => toEditableSection(section, value, placeholder));
 }
-export function isEditableSection(section) {
-    var _a;
-    return (_a = EDITABLE_SEGMENTS[section.type]) !== null && _a !== void 0 ? _a : false;
+export function isEditableSectionType(type) {
+    return EDITABLE_SEGMENTS[type] ?? false;
 }
-export function toEditableSection(section, value, validSegments, position, previousEditableSection) {
-    const isEditable = isEditableSection(section);
+export 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;
 }
-export 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;
-}
-export 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 = dateTime(options);
     if (!date.isValid()) {
-        date = dateTime(Object.assign(Object.assign({}, options), { format: undefined }));
+        date = dateTime({ ...options, format: undefined });
     }
     return date;
 }
@@ -519,9 +594,6 @@ export function parseDateFromString(str, format, timeZone) {
     }
     return date;
 }
-export function isAllSegmentsValid(allSegments, validSegments) {
-    return Object.keys(allSegments).every((key) => validSegments[key]);
-}
 export function useFormatSections(format) {
     const { t } = i18n.useTranslation();
     const { lang } = useLang();
@@ -536,21 +608,20 @@ export function useFormatSections(format) {
 const dateUnits = ['day', 'month', 'quarter', 'year'];
 const timeUnits = ['second', 'minute', 'hour'];
 export 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 =
@@ -560,8 +631,8 @@ export 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',
     };
 }
 export function adjustDateToFormat(date, formatInfo, method = 'startOf') {
@@ -577,21 +648,4 @@ export function adjustDateToFormat(date, formatInfo, method = 'startOf') {
     }
     return newDate;
 }
-export 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