@cloud-ru/ds-calendar 1.0.0

package/dist/esm/hooks/useTimePickerValueBridge.d.ts

@@ -0,0 +1,22 @@
+import { Range, TimeValue } from '../types.js';
+import { useDateAndTime } from './useDateAndTime.js';
+export type UseTimePickerValueBridgeParams = {
+    value?: TimeValue;
+    defaultValue?: TimeValue;
+    onChangeValue?(value: TimeValue): void;
+    showSeconds: boolean;
+};
+export type TimePickerValueBridge = {
+    /** Контролируемое/неконтролируемое значение времени (наружу). */
+    value?: TimeValue;
+    /** Внутреннее `Range`-представление выбранного времени для `CalendarContext.value`. */
+    internalValue?: Range;
+    /** `CalendarContext.setValue` — принимает `Range`, обновляет `internalValue`. */
+    setValue(dates: Range): void;
+} & Pick<ReturnType<typeof useDateAndTime>, 'dateAndTime' | 'onTimeChange' | 'onDateChange' | 'onDateAndTimeChange' | 'isDateFilled' | 'isTimeFilled' | 'isDateAndTimeFilled'>;
+/**
+ * Мост значения для time-picker'ов (desktop popover и mobile bottom sheet): связывает публичное `TimeValue`
+ * с внутренним `dateAndTime` через `Range`-буфер `internalValue`, с защитой от цикла обновлений при внешней
+ * смене `value` (см. `lastValueKeyRef`). Выделен из `TimePickerDropdown`, чтобы обе поверхности шарили логику.
+ */
+export declare function useTimePickerValueBridge({ value: valueProp, defaultValue, onChangeValue, showSeconds, }: UseTimePickerValueBridgeParams): TimePickerValueBridge;

package/dist/esm/hooks/useTimePickerValueBridge.js

@@ -0,0 +1,71 @@
+import { useEventHandler, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isTimePortionComplete, timeValuesEqual } from '../utils.js';
+import { useDateAndTime } from './useDateAndTime.js';
+/**
+ * Мост значения для time-picker'ов (desktop popover и mobile bottom sheet): связывает публичное `TimeValue`
+ * с внутренним `dateAndTime` через `Range`-буфер `internalValue`, с защитой от цикла обновлений при внешней
+ * смене `value` (см. `lastValueKeyRef`). Выделен из `TimePickerDropdown`, чтобы обе поверхности шарили логику.
+ */
+export function useTimePickerValueBridge({ value: valueProp, defaultValue, onChangeValue, showSeconds, }) {
+    const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
+    const setValueEventHandler = useEventHandler(setValueState);
+    const [internalValue, setInternalValue] = useState();
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        if (!internalValue?.[0]) {
+            return;
+        }
+        const hours = internalValue[0].getHours();
+        const minutes = internalValue[0].getMinutes();
+        const seconds = internalValue[0].getSeconds();
+        setValueEventHandler({ hours, minutes, seconds });
+    }, [internalValue, setValueEventHandler]);
+    const setValue = useCallback((dates) => {
+        const newDate = dates[0];
+        setInternalValue([newDate, newDate]);
+    }, []);
+    const { dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = useDateAndTime({ showSeconds, value });
+    // Этот эффект распространяет правки времени из пикера (dateAndTime) → value. Внешнее изменение
+    // `value` синхронизируется в dateAndTime ОТДЕЛЬНЫМ эффектом (useDateAndTime), который отрабатывает
+    // на рендер позже. Без guard'а в цикле внешней смены value этот эффект видит УСТАРЕВШИЙ dateAndTime
+    // и эмитит его обратно, откатывая внешнее значение → бесконечный ре-рендер. Поэтому в цикл, где
+    // value изменился извне, эмит пропускаем и даём dateAndTime догнаться.
+    const lastValueKeyRef = useRef(null);
+    useEffect(() => {
+        const wasValueCleared = value === undefined && previousValueRef.current !== undefined;
+        previousValueRef.current = value;
+        // Ключ внешнего value: если он изменился с прошлого рендера, значит value пришёл извне,
+        // а dateAndTime ещё не догнался — эмит в этом цикле пропускаем.
+        const valueKey = value ? `${value.hours}:${value.minutes}:${value.seconds}` : null;
+        const externalValueChanged = valueKey !== lastValueKeyRef.current;
+        lastValueKeyRef.current = valueKey;
+        if (wasValueCleared) {
+            return;
+        }
+        if (!isTimePortionComplete(dateAndTime, showSeconds)) {
+            return;
+        }
+        const next = {
+            hours: dateAndTime.hours ?? 0,
+            minutes: dateAndTime.minutes ?? 0,
+            seconds: dateAndTime.seconds ?? 0,
+        };
+        if (timeValuesEqual(value, next) || externalValueChanged) {
+            return;
+        }
+        setValueEventHandler(next);
+    }, [dateAndTime, showSeconds, setValueEventHandler, value]);
+    return {
+        value,
+        internalValue,
+        setValue,
+        dateAndTime,
+        onTimeChange,
+        onDateChange,
+        onDateAndTimeChange,
+        isDateFilled,
+        isTimeFilled,
+        isDateAndTimeFilled,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './locale/index.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';
+export * from './locale/index.js';

package/dist/esm/locale/index.d.ts

@@ -0,0 +1,95 @@
+declare const CALENDAR_MESSAGES: {
+    readonly 'en-GB': {
+        readonly current: "Current";
+        readonly apply: "Apply";
+        readonly time: "Time";
+        readonly presets: "Presets";
+        readonly selected: "Selected:";
+        readonly prevPeriodMonth: "Previous month";
+        readonly nextPeriodMonth: "Next month";
+        readonly prevPeriodYear: "Previous year";
+        readonly nextPeriodYear: "Next year";
+        readonly prevPeriodDecade: "Previous decade";
+        readonly nextPeriodDecade: "Next decade";
+        readonly defaultPresets: {
+            readonly lastWeek: "Last 7 days";
+            readonly lastTwoWeeks: "Last 14 days";
+            readonly lastMonth: "Last 30 days";
+            readonly lastQuarter: "Last 90 days";
+            readonly lastThird: "Last 120 days";
+            readonly lastYear: "Last 1 year";
+            readonly lastTwoYears: "Last 2 years";
+        };
+    };
+    readonly 'ru-RU': {
+        readonly current: "Сейчас";
+        readonly apply: "Применить";
+        readonly time: "Время";
+        readonly presets: "Пресеты";
+        readonly selected: "Выбрано:";
+        readonly prevPeriodMonth: "Предыдущий месяц";
+        readonly nextPeriodMonth: "Следующий месяц";
+        readonly prevPeriodYear: "Предыдущий год";
+        readonly nextPeriodYear: "Следующий год";
+        readonly prevPeriodDecade: "Предыдущее десятилетие";
+        readonly nextPeriodDecade: "Следующее десятилетие";
+        readonly defaultPresets: {
+            readonly lastWeek: "Последние 7 дней";
+            readonly lastTwoWeeks: "Последние 14 дней";
+            readonly lastMonth: "Последние 30 дней";
+            readonly lastQuarter: "Последние 90 дней";
+            readonly lastThird: "Последние 120 дней";
+            readonly lastYear: "Последний 1 год";
+            readonly lastTwoYears: "Последние 2 года";
+        };
+    };
+};
+export type CalendarMessages = (typeof CALENDAR_MESSAGES)['en-GB'];
+/** locale компонента Calendar: `calendarLocale.useTranslations()` в коде, `calendarLocale.extend(...)` в сервисе. */
+export declare const calendarLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly current: "Current";
+        readonly apply: "Apply";
+        readonly time: "Time";
+        readonly presets: "Presets";
+        readonly selected: "Selected:";
+        readonly prevPeriodMonth: "Previous month";
+        readonly nextPeriodMonth: "Next month";
+        readonly prevPeriodYear: "Previous year";
+        readonly nextPeriodYear: "Next year";
+        readonly prevPeriodDecade: "Previous decade";
+        readonly nextPeriodDecade: "Next decade";
+        readonly defaultPresets: {
+            readonly lastWeek: "Last 7 days";
+            readonly lastTwoWeeks: "Last 14 days";
+            readonly lastMonth: "Last 30 days";
+            readonly lastQuarter: "Last 90 days";
+            readonly lastThird: "Last 120 days";
+            readonly lastYear: "Last 1 year";
+            readonly lastTwoYears: "Last 2 years";
+        };
+    };
+    readonly 'ru-RU': {
+        readonly current: "Сейчас";
+        readonly apply: "Применить";
+        readonly time: "Время";
+        readonly presets: "Пресеты";
+        readonly selected: "Выбрано:";
+        readonly prevPeriodMonth: "Предыдущий месяц";
+        readonly nextPeriodMonth: "Следующий месяц";
+        readonly prevPeriodYear: "Предыдущий год";
+        readonly nextPeriodYear: "Следующий год";
+        readonly prevPeriodDecade: "Предыдущее десятилетие";
+        readonly nextPeriodDecade: "Следующее десятилетие";
+        readonly defaultPresets: {
+            readonly lastWeek: "Последние 7 дней";
+            readonly lastTwoWeeks: "Последние 14 дней";
+            readonly lastMonth: "Последние 30 дней";
+            readonly lastQuarter: "Последние 90 дней";
+            readonly lastThird: "Последние 120 дней";
+            readonly lastYear: "Последний 1 год";
+            readonly lastTwoYears: "Последние 2 года";
+        };
+    };
+}, "@cloud-ru/ds-calendar">;
+export {};

package/dist/esm/locale/index.js

@@ -0,0 +1,49 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+const CALENDAR_MESSAGES = defineMessages({
+    'en-GB': {
+        current: 'Current',
+        apply: 'Apply',
+        time: 'Time',
+        presets: 'Presets',
+        selected: 'Selected:',
+        prevPeriodMonth: 'Previous month',
+        nextPeriodMonth: 'Next month',
+        prevPeriodYear: 'Previous year',
+        nextPeriodYear: 'Next year',
+        prevPeriodDecade: 'Previous decade',
+        nextPeriodDecade: 'Next decade',
+        defaultPresets: {
+            lastWeek: 'Last 7 days',
+            lastTwoWeeks: 'Last 14 days',
+            lastMonth: 'Last 30 days',
+            lastQuarter: 'Last 90 days',
+            lastThird: 'Last 120 days',
+            lastYear: 'Last 1 year',
+            lastTwoYears: 'Last 2 years',
+        },
+    },
+    'ru-RU': {
+        current: 'Сейчас',
+        apply: 'Применить',
+        time: 'Время',
+        presets: 'Пресеты',
+        selected: 'Выбрано:',
+        prevPeriodMonth: 'Предыдущий месяц',
+        nextPeriodMonth: 'Следующий месяц',
+        prevPeriodYear: 'Предыдущий год',
+        nextPeriodYear: 'Следующий год',
+        prevPeriodDecade: 'Предыдущее десятилетие',
+        nextPeriodDecade: 'Следующее десятилетие',
+        defaultPresets: {
+            lastWeek: 'Последние 7 дней',
+            lastTwoWeeks: 'Последние 14 дней',
+            lastMonth: 'Последние 30 дней',
+            lastQuarter: 'Последние 90 дней',
+            lastThird: 'Последние 120 дней',
+            lastYear: 'Последний 1 год',
+            lastTwoYears: 'Последние 2 года',
+        },
+    },
+});
+/** locale компонента Calendar: `calendarLocale.useTranslations()` в коде, `calendarLocale.extend(...)` в сервисе. */
+export const calendarLocale = defineLocale('@cloud-ru/ds-calendar', CALENDAR_MESSAGES);