@cloud-ru/ds-calendar 1.0.0

package/dist/esm/types.d.ts

@@ -0,0 +1,78 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { KeyboardEventHandler } from 'react';
+import { CALENDAR_MODE, RANGE_POSITION, SIZE, VIEW_MODE } from './constants.js';
+export type RangePosition = ValueOf<typeof RANGE_POSITION>;
+export type ViewMode = ValueOf<typeof VIEW_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+export type CalendarMode = ValueOf<typeof CALENDAR_MODE>;
+export type Range = [Date, Date];
+export type BaseGridItem = {
+    date: Date;
+    address: [number, number];
+};
+export type BaseGrid = BaseGridItem[][];
+export type Cell = {
+    /** Дата ячейки (для колбэков выбора) */
+    date: Date;
+    /** Адрес ячейки в сетке — синхронизация фокуса и клавиатуры */
+    address: [number, number];
+    /** Значение */
+    label: string;
+    /** Является ли сегодняшним днем */
+    current: boolean;
+    /** Выбран ли элемент */
+    checked: boolean;
+    /** Деактивирован ли */
+    disabled?: boolean;
+    /** Является ли выходным/праздником */
+    holiday?: boolean;
+    /**
+     * Относится ли к иному периоду (не к просматриваемому в данный момент)
+     */
+    another: boolean;
+    /**
+     * Является ли частью range
+     * @default out
+     */
+    rangePosition: RangePosition;
+    /** Индекс фокуса кнопки */
+    tabIndex: -1 | 0;
+    onSelect?(date: Date): void;
+    onPreselect?(date: Date): void;
+    onLeave?(): void;
+    onKeyDown?: KeyboardEventHandler;
+};
+export type FocusDirection = 'prev' | 'next';
+export type BuildCellProps = {
+    isDisabled?: boolean;
+    isHoliday?: boolean;
+};
+export type BuildCellPropsFunction = (date: Date, viewMode: ViewMode) => BuildCellProps;
+export type TimeValue = {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+};
+export type DateAndTime = TimeValue & {
+    year?: number;
+    month?: number;
+    day?: number;
+};
+export type PresetItem = {
+    /** Лейбл пресета */
+    label: string;
+    /** ID периода */
+    id: string;
+    /** Период */
+    range: Range;
+};
+export type PresetsOptions = {
+    /**
+     * Включение отображения секции с пресетами
+     * @default false
+     */
+    enabled?: boolean;
+    /** Кастомные пресеты быстрого выбора периода относительно текущего момента */
+    items?: PresetItem[];
+};
+export type OnKeyDownGetter = (id: number) => KeyboardEventHandler;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils.d.ts

@@ -0,0 +1,36 @@
+import { Lang } from '@cloud-ru/ds-locale';
+import { CalendarMode, DateAndTime, Range, RangePosition, TimeValue, ViewMode } from './types.js';
+export declare const isTheSameDecade: (date1: Date, date2: Date) => boolean;
+export declare const isTheSameYear: (date1: Date, date2: Date) => boolean;
+export declare const isTheSameMonth: (date1: Date, date2: Date) => boolean;
+export declare function isTheSameDate(date1: Date, date2: Date): boolean;
+export declare function timeValuesEqual(current: TimeValue | undefined, next: TimeValue): boolean;
+export declare const capitalize: (str: string) => string;
+export declare const getMonthName: (date: Date, locale?: Intl.Locale) => string;
+export declare const getDateLabel: (date: Date) => string;
+export declare const getYearLabel: (date: Date) => string;
+export declare const getMonthShift: (today: Date, targetDate: Date) => number;
+export declare const getYearShift: (today: Date, targetDate: Date) => number;
+export declare const getDecadeShift: (today: Date, targetDate: Date) => number;
+export declare const isTheSameItem: (viewMode: ViewMode, date1: Date, date2: Date) => boolean;
+export declare const sortDates: (dates: Date[]) => Date[];
+export declare const getInRangePosition: (date: Date, viewMode: ViewMode, range?: Range) => RangePosition;
+export declare const getEndOfTheDay: (date: Date) => Date;
+export declare const getStartOfTheMonth: (date: Date) => Date;
+export declare const getEndOfTheMonth: (date: Date) => Date;
+export declare const getStartOfTheYear: (date: Date) => Date;
+export declare const getEndOfTheYear: (date: Date) => Date;
+/**
+ * Нормализует выбранный период под границы режима (`setValue` десктопа и мобайла дают одинаковый результат):
+ * month/month-range — границы месяца, year/year-range — границы года, иначе — конец дня для верхней границы.
+ */
+export declare function normalizeRangeForMode(mode: CalendarMode | 'time', dates: Range): Range;
+export declare const getTestIdBuilder: (testId?: string) => (prefix: string) => string | undefined;
+export declare const getLocale: ({ localeProp, ctxLang }?: {
+    localeProp?: Intl.Locale;
+    ctxLang?: Lang;
+}) => Intl.Locale;
+export declare const getStartOfWeek: (locale: Intl.Locale) => import("weekstart").DayOfWeek;
+export declare const isWeekend: (date: Date, viewMode: ViewMode) => boolean;
+export declare function isTimePortionComplete(dateAndTime: Pick<DateAndTime, 'hours' | 'minutes' | 'seconds'>, showSeconds?: boolean): boolean;
+export declare const stringifyAddress: (address: [number, number]) => string;

package/dist/esm/utils.js

@@ -0,0 +1,100 @@
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { getWeekStartByLocale } from 'weekstart';
+import { CALENDAR_MODE, RANGE_POSITION, VIEW_MODE } from './constants.js';
+export const isTheSameDecade = (date1, date2) => Math.floor(date1.getFullYear() / 10) === Math.floor(date2.getFullYear() / 10);
+export const isTheSameYear = (date1, date2) => date1.getFullYear() === date2.getFullYear();
+export const isTheSameMonth = (date1, date2) => isTheSameYear(date1, date2) && date1.getMonth() === date2.getMonth();
+export function isTheSameDate(date1, date2) {
+    return isTheSameMonth(date1, date2) && date1.getDate() === date2.getDate();
+}
+export function timeValuesEqual(current, next) {
+    if (current === undefined) {
+        return false;
+    }
+    return ((current.hours ?? 0) === (next.hours ?? 0) &&
+        (current.minutes ?? 0) === (next.minutes ?? 0) &&
+        (current.seconds ?? 0) === (next.seconds ?? 0));
+}
+export const capitalize = (str) => str.substring(0, 1).toUpperCase() + str.substring(1);
+export const getMonthName = (date, locale) => {
+    const monthName = date.toLocaleString(locale, { month: 'long' });
+    return capitalize(monthName);
+};
+export const getDateLabel = (date) => date.getDate().toString();
+export const getYearLabel = (date) => date.getFullYear().toString();
+export const getMonthShift = (today, targetDate) => {
+    const overYearDiff = (targetDate.getFullYear() - today.getFullYear()) * 12;
+    const monthsDiff = targetDate.getMonth() - today.getMonth();
+    return overYearDiff + monthsDiff;
+};
+export const getYearShift = (today, targetDate) => targetDate.getFullYear() - today.getFullYear();
+export const getDecadeShift = (today, targetDate) => Math.trunc((targetDate.getFullYear() - today.getFullYear()) / 10);
+export const isTheSameItem = (viewMode, date1, date2) => {
+    switch (viewMode) {
+        case VIEW_MODE.Month:
+            return isTheSameDate(date1, date2);
+        case VIEW_MODE.Year:
+            return isTheSameMonth(date1, date2);
+        case VIEW_MODE.Decade:
+            return isTheSameYear(date1, date2);
+        default:
+            return false;
+    }
+};
+export const sortDates = (dates) => [...dates].sort((d1, d2) => d1.valueOf() - d2.valueOf());
+export const getInRangePosition = (date, viewMode, range) => {
+    if (!range) {
+        return RANGE_POSITION.Out;
+    }
+    const [startDate, endDate] = sortDates(range);
+    const isStart = isTheSameItem(viewMode, date, startDate);
+    const isEnd = isTheSameItem(viewMode, date, endDate);
+    if (isStart && isEnd) {
+        return RANGE_POSITION.StartEnd;
+    }
+    if (isStart) {
+        return RANGE_POSITION.Start;
+    }
+    if (isEnd) {
+        return RANGE_POSITION.End;
+    }
+    const [start, end] = [startDate.valueOf(), endDate.valueOf()];
+    return date.valueOf() >= start && date.valueOf() <= end ? RANGE_POSITION.In : RANGE_POSITION.Out;
+};
+export const getEndOfTheDay = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
+export const getStartOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), 1).valueOf());
+export const getEndOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).valueOf() - 1);
+export const getStartOfTheYear = (date) => new Date(new Date(date.getFullYear(), 0, 1).valueOf());
+export const getEndOfTheYear = (date) => new Date(new Date(date.getFullYear() + 1, 0, 1).valueOf() - 1);
+/**
+ * Нормализует выбранный период под границы режима (`setValue` десктопа и мобайла дают одинаковый результат):
+ * month/month-range — границы месяца, year/year-range — границы года, иначе — конец дня для верхней границы.
+ */
+export function normalizeRangeForMode(mode, dates) {
+    const [first, last] = sortDates(dates);
+    switch (mode) {
+        case CALENDAR_MODE.Month:
+        case CALENDAR_MODE.MonthRange:
+            return [getStartOfTheMonth(first), getEndOfTheMonth(last)];
+        case CALENDAR_MODE.Year:
+        case CALENDAR_MODE.YearRange:
+            return [getStartOfTheYear(first), getEndOfTheYear(last)];
+        default:
+            return [first, getEndOfTheDay(last)];
+    }
+}
+export const getTestIdBuilder = (testId) => (prefix) => (testId ? `${prefix}-${testId}` : undefined);
+const getNavigatorLocale = () => (isBrowser() ? (navigator?.language ?? 'ru-RU') : 'ru-RU');
+export const getLocale = ({ localeProp, ctxLang } = {}) => localeProp || new Intl.Locale(ctxLang ? ctxLang.replace('_', '-') : getNavigatorLocale());
+export const getStartOfWeek = (locale) => getWeekStartByLocale(locale.language);
+export const isWeekend = (date, viewMode) => {
+    if (viewMode === 'month') {
+        return date.getDay() === 0 || date.getDay() === 6;
+    }
+    return false;
+};
+export function isTimePortionComplete(dateAndTime, showSeconds) {
+    const { hours, minutes, seconds } = dateAndTime;
+    return [hours, minutes, ...(showSeconds ? [seconds] : [])].every(v => v !== undefined);
+}
+export const stringifyAddress = (address) => address.join('-');