@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/DateRange/consts.js

@@ -0,0 +1,81 @@
+const CalendarVariant = {
+    period: 'period',
+    day: 'day',
+    week: 'week',
+    month: 'month',
+    anyDate: 'anyDate',
+    noDate: 'noDate'
+};
+const DATES_DELIMETER = ' — ';
+const FOCUSED_WIDTH_WITHOUT_TIME = 252;
+const FOCUSED_WIDTH_WITH_TIME = 308;
+const FOCUSED_WIDTH_WITH_TIME_EN = 316;
+const DEFAULT_HINT_Z_INDEX = 3;
+const KEYBOARD_ACTIVATION_KEYS = [
+    'Enter',
+    ' '
+];
+const NAVIGATION_VARIANTS = [
+    CalendarVariant.day,
+    CalendarVariant.week,
+    CalendarVariant.month
+];
+const INPUT_CONTENT_VARIANTS = [
+    CalendarVariant.day,
+    CalendarVariant.week,
+    CalendarVariant.month,
+    CalendarVariant.anyDate,
+    CalendarVariant.noDate
+];
+const NON_CALENDAR_VARIANTS = [
+    CalendarVariant.anyDate,
+    CalendarVariant.noDate
+];
+const calendarVariants = [
+    {
+        value: CalendarVariant.period,
+        labelGetter: (locale)=>locale.translate.radiobuttons.period
+    },
+    {
+        value: CalendarVariant.day,
+        labelGetter: (locale)=>locale.translate.radiobuttons.day
+    },
+    {
+        value: CalendarVariant.week,
+        labelGetter: (locale)=>locale.translate.radiobuttons.week
+    },
+    {
+        value: CalendarVariant.month,
+        labelGetter: (locale)=>locale.translate.radiobuttons.month
+    }
+];
+const additionalCalendarVariants = [
+    {
+        value: CalendarVariant.anyDate,
+        labelGetter: (locale)=>locale.translate.radiobuttons.anyDate
+    },
+    {
+        value: CalendarVariant.noDate,
+        labelGetter: (locale)=>locale.translate.radiobuttons.noDate
+    }
+];
+const getCalendarVariants = (locale, features)=>calendarVariants.filter((variant)=>{
+        if (variant.value === CalendarVariant.period) return features?.withPeriod !== false;
+        return true;
+    }).map((variant)=>({
+            value: variant.value,
+            label: variant.labelGetter(locale)
+        }));
+const getAdditionalCalendarVariants = (locale, features)=>additionalCalendarVariants.filter((variant)=>{
+        if (variant.value === CalendarVariant.anyDate) return features?.withAnyDate !== false;
+        if (variant.value === CalendarVariant.noDate) return features?.withNoDate !== false;
+        return true;
+    }).map((variant)=>({
+            value: variant.value,
+            label: variant.labelGetter(locale)
+        }));
+const getDefaultVariant = (features)=>{
+    if (features?.withPeriod !== false) return CalendarVariant.period;
+    return CalendarVariant.day;
+};
+export { CalendarVariant, DATES_DELIMETER, DEFAULT_HINT_Z_INDEX, FOCUSED_WIDTH_WITHOUT_TIME, FOCUSED_WIDTH_WITH_TIME, FOCUSED_WIDTH_WITH_TIME_EN, INPUT_CONTENT_VARIANTS, KEYBOARD_ACTIVATION_KEYS, NAVIGATION_VARIANTS, NON_CALENDAR_VARIANTS, getAdditionalCalendarVariants, getCalendarVariants, getDefaultVariant };

package/dist/components/DateRange/formatDateRangeValue.d.ts

@@ -0,0 +1,24 @@
+import type { LanguageValue } from '../../context/constants';
+import type { DateRangeLocale, DateRangeValue } from './types';
+export declare const joinFormattedDateRange: (startDate: string, endDate: string) => string;
+export declare const splitFormattedDateRange: (value: string) => {
+    startDate: string;
+    endDate: string;
+};
+interface LocaleOptions {
+    translates: DateRangeLocale;
+    formatTranslates: DateRangeLocale;
+    lang: LanguageValue;
+}
+export declare const getDateRangePeriodName: (value: DateRangeValue, translates: DateRangeLocale) => string;
+export declare const getDateRangeSliderText: (value: DateRangeValue, localeOptions: LocaleOptions) => {
+    text: string;
+    tooltipText: string;
+} | null;
+export interface FormatDateRangeValueOptions extends LocaleOptions {
+    withTime?: boolean;
+    periodFormattedValue?: string;
+    emptyPeriodMaskValue?: string;
+}
+export declare const formatDateRangeValue: (value: DateRangeValue, options: FormatDateRangeValueOptions) => string | undefined;
+export {};

package/dist/components/DateRange/formatDateRangeValue.js

@@ -0,0 +1,116 @@
+import { format, isSameMonth, isToday, isTomorrow, isYesterday } from "date-fns";
+import { DATES_DELIMETER } from "./consts.js";
+import { capitalizeFirstLetter, getFormatOptions, getPeriodValue, getRangeDates, isAnyDateValue, isDayValue, isMonthValue, isNoDateValue, isRangeValue, isValueNullable, isWeekValue } from "./utils.js";
+const joinFormattedDateRange = (startDate, endDate)=>`${startDate}${DATES_DELIMETER}${endDate}`;
+const splitFormattedDateRange = (value)=>{
+    const [startDate, endDate] = value.split(DATES_DELIMETER);
+    return {
+        startDate,
+        endDate
+    };
+};
+const removeDots = (str)=>str.replace(/\./g, '');
+const getWeekIntervalText = ({ startDate, endDate }, localeOptions)=>{
+    const formatOptions = getFormatOptions(localeOptions.lang);
+    if (isSameMonth(startDate, endDate)) {
+        const formatedStartDate = format(startDate, localeOptions.formatTranslates.format.slider.week.dateFormat.sameMonth.firstDate, formatOptions);
+        const formatedTooltipStartDate = format(startDate, localeOptions.formatTranslates.format.slider.week.tooltipDateFormat.sameMonth.firstDate, formatOptions);
+        const formatedEndDate = format(endDate, localeOptions.formatTranslates.format.slider.week.dateFormat.sameMonth.endDate, formatOptions);
+        const formatedTooltipEndDate = format(endDate, localeOptions.formatTranslates.format.slider.week.tooltipDateFormat.sameMonth.endDate, formatOptions);
+        return {
+            text: `${formatedStartDate}–${formatedEndDate}`,
+            tooltipText: `${formatedTooltipStartDate}–${formatedTooltipEndDate}`
+        };
+    }
+    const formatedStartDate = format(startDate, localeOptions.formatTranslates.format.slider.week.dateFormat.differentMonth.firstDate, formatOptions);
+    const formatedTooltipStartDate = format(startDate, localeOptions.formatTranslates.format.slider.week.tooltipDateFormat.differentMonth.firstDate, formatOptions);
+    const formatedEndDate = format(endDate, localeOptions.formatTranslates.format.slider.week.dateFormat.differentMonth.endDate, formatOptions);
+    const formatedTooltipEndDate = format(endDate, localeOptions.formatTranslates.format.slider.week.tooltipDateFormat.differentMonth.endDate, formatOptions);
+    return {
+        text: removeDots(`${formatedStartDate} — ${formatedEndDate}`),
+        tooltipText: `${formatedTooltipStartDate} — ${formatedTooltipEndDate}`
+    };
+};
+const getDayText = (options, localeOptions)=>{
+    if (!options.value) return localeOptions.translates.translate.slider.day.placeholder;
+    return format(options.value, localeOptions.formatTranslates.format.slider.day.dateFormat, getFormatOptions(localeOptions.lang));
+};
+const getWeekText = (options, localeOptions)=>{
+    const unselectedTexts = {
+        text: localeOptions.translates.translate.slider.week.placeholder,
+        tooltipText: localeOptions.translates.translate.slider.week.placeholder
+    };
+    if (!options.value) return unselectedTexts;
+    const { startDate, endDate } = getRangeDates(options);
+    if (!startDate || !endDate) return unselectedTexts;
+    return getWeekIntervalText({
+        startDate,
+        endDate
+    }, localeOptions);
+};
+const getMonthText = (options, localeOptions)=>{
+    const unselectedText = localeOptions.translates.translate.slider.month.placeholder;
+    if (!options.value) return unselectedText;
+    const { startDate, endDate } = getRangeDates(options);
+    if (!startDate || !endDate) return unselectedText;
+    const text = format(startDate, localeOptions.formatTranslates.format.slider.month.dateFormat, getFormatOptions(localeOptions.lang));
+    return capitalizeFirstLetter(text);
+};
+const getDayPeriodName = (options, translates)=>{
+    if (options.value && isToday(options.value)) return translates.translate.dayQuickFilters.today;
+    if (options.value && isYesterday(options.value)) return translates.translate.dayQuickFilters.yesterday;
+    if (options.value && isTomorrow(options.value)) return translates.translate.dayQuickFilters.tomorrow;
+    return translates.translate.slider.day.title;
+};
+const getDateRangePeriodName = (value, translates)=>{
+    if (isDayValue(value)) return getDayPeriodName(value, translates);
+    if (isWeekValue(value)) return translates.translate.slider.week.title;
+    if (isMonthValue(value)) return translates.translate.slider.month.title;
+    if (isAnyDateValue(value)) return translates.translate.radiobuttons.anyDate;
+    if (isNoDateValue(value)) return translates.translate.radiobuttons.noDate;
+    return translates.translate.radiobuttons.period;
+};
+const getDateRangeSliderText = (value, localeOptions)=>{
+    if (isDayValue(value)) {
+        const text = getDayText(value, localeOptions);
+        return {
+            text,
+            tooltipText: text
+        };
+    }
+    if (isWeekValue(value)) return getWeekText(value, localeOptions);
+    if (isMonthValue(value)) {
+        const text = getMonthText(value, localeOptions);
+        return {
+            text,
+            tooltipText: text
+        };
+    }
+    return null;
+};
+const formatPeriodDates = (startDate, endDate, translates, withTime)=>{
+    const formatDate = (date)=>{
+        const timeString = format(date, 'HH:mm');
+        return `${format(date, translates.format.dateFormat)}${withTime ? ` ${timeString}` : ''}`;
+    };
+    return joinFormattedDateRange(formatDate(startDate), formatDate(endDate));
+};
+const formatDateRangeValue = (value, options)=>{
+    if (isAnyDateValue(value)) return options.translates.translate.radiobuttons.anyDate;
+    if (isNoDateValue(value)) return options.translates.translate.radiobuttons.noDate;
+    if (isValueNullable(value)) return;
+    if (isRangeValue(value)) {
+        if (void 0 !== options.periodFormattedValue) {
+            const maskValue = options.periodFormattedValue.trim();
+            if (!maskValue || maskValue === options.emptyPeriodMaskValue) return;
+            return maskValue;
+        }
+        const { startDate, endDate } = getPeriodValue(value.value);
+        if (!startDate || !endDate) return;
+        return formatPeriodDates(startDate, endDate, options.translates, options.withTime ?? false);
+    }
+    if (isDayValue(value)) return getDayText(value, options);
+    if (isWeekValue(value)) return getWeekText(value, options).text;
+    if (isMonthValue(value)) return getMonthText(value, options);
+};
+export { formatDateRangeValue, getDateRangePeriodName, getDateRangeSliderText, joinFormattedDateRange, splitFormattedDateRange };

package/dist/components/DateRange/hooks/useCalendar.d.ts

@@ -0,0 +1,13 @@
+import type { DateRangeValue } from '../types';
+interface UseCalendarArgs {
+    minDate?: Date;
+    maxDate?: Date;
+    value: DateRangeValue;
+    onChangeValue?: (value: DateRangeValue) => void;
+}
+export declare const useCalendar: (args: UseCalendarArgs) => {
+    handlePickDate: (date: Date) => void;
+    minDate: Date;
+    maxDate: Date;
+};
+export {};

package/dist/components/DateRange/hooks/useCalendar.js

@@ -0,0 +1,88 @@
+import { addYears, endOfDay, endOfMonth, endOfWeek, endOfYear, startOfDay, startOfWeek, startOfYear, subYears } from "date-fns";
+import { CalendarVariant } from "../consts.js";
+import { getCorrectInterval, getRangeDates, isDayValue, isMonthValue, isRangeValue, isWeekValue } from "../utils.js";
+const useCalendar = (args)=>{
+    const changePeriodValue = (dates)=>{
+        const value = {
+            type: 'period',
+            value: [
+                dates.startDate,
+                dates.endDate
+            ]
+        };
+        args.onChangeValue?.(value);
+    };
+    const handlePickRangeDate = (date)=>{
+        const { startDate, endDate } = getRangeDates(args.value);
+        if (endDate && startDate) return void changePeriodValue({
+            startDate: date,
+            endDate: null
+        });
+        if (startDate) {
+            const [firstDayOfInterval, secondDayOfInterval] = getCorrectInterval(startDate, date);
+            changePeriodValue({
+                startDate: firstDayOfInterval,
+                endDate: endOfDay(secondDayOfInterval)
+            });
+            return;
+        }
+        if (endDate) {
+            const [firstDayOfInterval, secondDayOfInterval] = getCorrectInterval(endDate, date);
+            changePeriodValue({
+                startDate: startOfDay(firstDayOfInterval),
+                endDate: secondDayOfInterval
+            });
+            return;
+        }
+        changePeriodValue({
+            startDate: date,
+            endDate: null
+        });
+    };
+    const handlePickSingleDay = (date)=>{
+        args.onChangeValue?.({
+            type: CalendarVariant.day,
+            value: date
+        });
+    };
+    const handlePickWeek = (date)=>{
+        const firstDay = startOfWeek(date, {
+            weekStartsOn: 1
+        });
+        const lastDay = endOfWeek(date, {
+            weekStartsOn: 1
+        });
+        args.onChangeValue?.({
+            type: CalendarVariant.week,
+            value: [
+                firstDay,
+                lastDay
+            ]
+        });
+    };
+    const handlePickMonth = (date)=>{
+        const endDate = endOfMonth(date);
+        args.onChangeValue?.({
+            type: CalendarVariant.month,
+            value: [
+                date,
+                endDate
+            ]
+        });
+    };
+    const handlePickDate = (date)=>{
+        if (isRangeValue(args.value)) handlePickRangeDate(date);
+        if (isDayValue(args.value)) handlePickSingleDay(date);
+        if (isWeekValue(args.value)) handlePickWeek(date);
+        if (isMonthValue(args.value)) handlePickMonth(date);
+    };
+    const currentDate = new Date();
+    const minDate = args.minDate ? new Date(args.minDate) : startOfYear(subYears(currentDate, 100));
+    const maxDate = args.maxDate ? new Date(args.maxDate) : endOfYear(addYears(currentDate, 100));
+    return {
+        handlePickDate,
+        minDate,
+        maxDate
+    };
+};
+export { useCalendar };