@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/TimePickerDrum/utils.ts

@@ -0,0 +1,130 @@
+import { SIZE } from '../../constants';
+import { Size } from '../../types';
+
+/**
+ * Допустимые значения колонки: whitelist `allowed` (если после фильтра непустой),
+ * иначе диапазон от `min` до конца (`0 .. fullCount - 1`), иначе полный диапазон.
+ */
+export function buildColumnValues(fullCount: number, allowed?: number[], min?: number): number[] {
+  const max = fullCount - 1;
+  const fullRange = () => Array.from({ length: fullCount }, (_, i) => i);
+
+  if (allowed != null && allowed.length > 0) {
+    const uniq = new Set<number>();
+    for (const raw of allowed) {
+      if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+        continue;
+      }
+      const v = Math.trunc(raw);
+      if (v >= 0 && v <= max) {
+        uniq.add(v);
+      }
+    }
+    const list = [...uniq].sort((a, b) => a - b);
+    if (list.length > 0) {
+      return list;
+    }
+  }
+
+  if (min !== undefined && typeof min === 'number' && Number.isFinite(min)) {
+    const from = Math.min(max, Math.max(0, Math.trunc(min)));
+    return Array.from({ length: max - from + 1 }, (_, i) => from + i);
+  }
+
+  return fullRange();
+}
+
+/** `values` — отсортированный по возрастанию список без дубликатов. */
+export function nearestInSortedValues(values: number[], target: number): number {
+  if (values.length === 0) {
+    return target;
+  }
+
+  const t = typeof target === 'number' && Number.isFinite(target) ? target : 0;
+  const first = values[0];
+  const last = values[values.length - 1];
+
+  if (t <= first) {
+    return first;
+  }
+  if (t >= last) {
+    return last;
+  }
+
+  let lo = 0;
+  let hi = values.length - 1;
+
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const m = values[mid];
+    if (m === t) {
+      return t;
+    }
+    if (m < t) {
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+
+  const left = values[hi];
+  const right = values[lo];
+  return Math.abs(t - left) <= Math.abs(right - t) ? left : right;
+}
+
+/**
+ * Математический остаток `n` по модулю `m`: результат всегда в диапазоне `[0, m - 1]` при `m > 0`,
+ * в том числе для отрицательных и дробных `n` (после `%` в JS). Нужен для циклического индекса в колонке барабана.
+ *
+ * @param n делимое (часто индекс со сдвигом)
+ * @param m положительный модуль (длина списка `options`)
+ */
+export function mod(n: number, m: number): number {
+  return ((n % m) + m) % m;
+}
+
+/**
+ * Форматирует числовую часть времени для отображения: целое приводится к строке с ведущим нулём до двух знаков (`0` → `"00"`, `9` → `"09"`).
+ * Используется для часов, минут и секунд в дисплее и в подписях ячеек барабана.
+ *
+ * @param value целое в допустимом диапазоне колонки (часы, минуты или секунды)
+ */
+export function formatDisplayPart(value: number): string {
+  return String(value).padStart(2, '0');
+}
+
+/** В блоке подписи показываем только календарную часть (время — в `timeRow`). */
+export function formatSelectedDateLabelForDisplay(text: string): string {
+  const trimmed = text.trim();
+  if (trimmed === '') {
+    return '';
+  }
+
+  const parsed = Date.parse(trimmed);
+  if (!Number.isNaN(parsed)) {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(new Date(parsed));
+  }
+
+  return trimmed;
+}
+
+/**
+ * Геометрия барабана времени по размеру календаря: высота одной строки (`itemHeight`) и высота окна колонок (`pickerHeight`) в пикселях.
+ * Соответствует ступенчатым значениям для `s` / `m` / `l` из дизайн-токенов `TimePickerDrum`.
+ *
+ * @param size размер по оси Figma (`SIZE.S` | `SIZE.M` | `SIZE.L`)
+ * @returns `itemHeight` — шаг строки и дискретизации жеста; `pickerHeight` — высота видимой области колонки
+ */
+export function getSizeLimits(size: Size) {
+  if (size === SIZE.L) {
+    return { itemHeight: 56, pickerHeight: 280 };
+  }
+  if (size === SIZE.M) {
+    return { itemHeight: 48, pickerHeight: 240 };
+  }
+  return { itemHeight: 40, pickerHeight: 200 };
+}

package/src/helperComponents/WeekRow/WeekRow.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+
+import { VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { Item } from '../Item';
+import styles from './styles.module.scss';
+import { getWeekLabels } from './utils';
+
+export function WeekRow() {
+  const { viewMode, locale, size } = useCalendarContext();
+
+  const labels = useMemo(() => getWeekLabels(locale), [locale]);
+
+  if (viewMode === VIEW_MODE.Month) {
+    return (
+      <>
+        {labels.map((label, index) => (
+          <Item
+            key={`${index}-${label}`}
+            another
+            className={styles.cell}
+            label={label}
+            rangePosition='out'
+            size={size}
+            tabIndex={-1}
+            testIdSegment='header-item'
+          />
+        ))}
+      </>
+    );
+  }
+
+  return null;
+}

package/src/helperComponents/WeekRow/index.ts

@@ -0,0 +1 @@
+export * from './WeekRow';

package/src/helperComponents/WeekRow/styles.module.scss

@@ -0,0 +1,3 @@
+.cell {
+  pointer-events: none;
+}

package/src/helperComponents/WeekRow/utils.ts

@@ -0,0 +1,18 @@
+import { capitalize, getStartOfWeek } from '../../utils';
+
+export const MONDAY_DATE = new Date(1970, 1, 2);
+
+export const SUNDAY_DATE = new Date(1970, 1, 1);
+
+export const getWeekLabels = (locale: Intl.Locale): string[] => {
+  const labels: string[] = [];
+
+  const startDate = getStartOfWeek(locale) === 0 ? SUNDAY_DATE : MONDAY_DATE;
+
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
+    labels.push(capitalize(date.toLocaleString(locale, { weekday: 'short' })));
+  }
+
+  return labels;
+};

package/src/helperComponents/YearView/YearView.tsx

@@ -0,0 +1,83 @@
+import { useCallback } from 'react';
+
+import { AUTOFOCUS, CALENDAR_MODE, VIEW_MODE } from '../../constants';
+import { useCalendarContext, useGrid } from '../../hooks';
+import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils';
+import { Grid } from '../Grid';
+import { buildYearGrid } from './utils';
+
+export function YearView() {
+  const {
+    referenceDate,
+    setViewMode,
+    setViewShift,
+    setFocus,
+    preselectedRange,
+    continuePreselect,
+    restartPreselect,
+    locale,
+    setValue,
+    mode,
+    startPreselect,
+    completePreselect,
+  } = useCalendarContext();
+
+  const getItemLabel = useCallback((date: Date) => getMonthName(date, locale), [locale]);
+
+  const onSelect = useCallback(
+    (date: Date) => {
+      if (mode === CALENDAR_MODE.Month) {
+        setValue([date, date]);
+        return;
+      }
+
+      if (mode === CALENDAR_MODE.MonthRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
+
+      setFocus(AUTOFOCUS);
+      setViewShift(getMonthShift(referenceDate, date));
+      setViewMode(VIEW_MODE.Month);
+    },
+    [
+      completePreselect,
+      mode,
+      preselectedRange,
+      referenceDate,
+      setFocus,
+      setValue,
+      setViewMode,
+      setViewShift,
+      startPreselect,
+    ],
+  );
+
+  const onPreselect = useCallback(
+    (date: Date) => {
+      if (preselectedRange) {
+        continuePreselect(date);
+      }
+    },
+    [continuePreselect, preselectedRange],
+  );
+
+  const onLeave = useCallback(() => {
+    if (preselectedRange) {
+      restartPreselect();
+    }
+  }, [preselectedRange, restartPreselect]);
+
+  const grid = useGrid({
+    buildGrid: buildYearGrid,
+    isTheSameItem: isTheSameMonth,
+    isInPeriod: isTheSameYear,
+    getItemLabel,
+
+    onSelect,
+    onPreselect,
+    onLeave,
+  });
+
+  return <Grid grid={grid} />;
+}

package/src/helperComponents/YearView/index.ts

@@ -0,0 +1 @@
+export * from './YearView';

package/src/helperComponents/YearView/utils.ts

@@ -0,0 +1,19 @@
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
+import { BaseGrid, BaseGridItem } from '../../types';
+
+export const buildYearGrid = (date: Date): BaseGrid => {
+  const result: BaseGrid = [];
+  const year = date.getFullYear();
+  let month = 0;
+  const { rows, columns } = GRID_SIZE[VIEW_MODE.Year];
+
+  for (let i = 0; i < rows; i++) {
+    const row: BaseGridItem[] = [];
+    for (let j = 0; j < columns; j++) {
+      row.push({ date: new Date(year, month++, 1), address: [i, j] });
+    }
+    result.push(row);
+  }
+
+  return result;
+};

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './TimePickerBase';
+export * from './CalendarContext';
+export * from './Footer';
+export * from './CalendarBase';

package/src/hooks/classifyCell.ts

@@ -0,0 +1,104 @@
+import { CALENDAR_MODE, RANGE_POSITION } from '../constants';
+import {
+  BuildCellProps,
+  BuildCellPropsFunction,
+  CalendarMode,
+  DateAndTime,
+  Range,
+  RangePosition,
+  ViewMode,
+} from '../types';
+import { getInRangePosition, isWeekend } from '../utils';
+
+/** Чистая классификация ячейки календаря (без побочных эффектов фокуса/`firstNotDisableCell`). */
+export type CellClassification = {
+  disabled: boolean;
+  holiday: boolean;
+  rangePosition: RangePosition;
+  checked: boolean;
+  current: boolean;
+  another: boolean;
+  label: string;
+};
+
+export type ClassifyCellParams = {
+  date: Date;
+  /** Дата периода, к которому относится сетка ячейки — определяет `another`. */
+  viewDate: Date;
+  viewMode: ViewMode;
+  mode: CalendarMode | 'time';
+  value?: Range;
+  preselectedRange?: Range;
+  dateAndTime?: DateAndTime;
+  isDateFilled(): boolean;
+  showHolidays: boolean;
+  today?: Date;
+  buildCellProps?: BuildCellPropsFunction;
+  isTheSameItem(date1: Date, date2: Date): boolean;
+  isInPeriod(viewDate: Date, date: Date): boolean;
+  getItemLabel(date: Date): string;
+};
+
+/**
+ * Классифицирует одну ячейку календаря (`checked` / `holiday` / `rangePosition` / `current` / `another` / `label`).
+ * Date-driven и переиспользуемая: один `viewDate` на сетку, без обращения к `CalendarContext`, фокусу и
+ * `firstNotDisableCell`. Используется и десктопным `useGrid`, и мобильными «стопками» сеток.
+ */
+export function classifyCell({
+  date,
+  viewDate,
+  viewMode,
+  mode,
+  value,
+  preselectedRange,
+  dateAndTime,
+  isDateFilled,
+  showHolidays,
+  today,
+  buildCellProps,
+  isTheSameItem,
+  isInPeriod,
+  getItemLabel,
+}: ClassifyCellParams): CellClassification {
+  let disabled = false;
+  let holiday: boolean | undefined;
+  let cellProps: BuildCellProps = { isDisabled: false };
+  if (buildCellProps) {
+    cellProps = buildCellProps(date, viewMode);
+    disabled = cellProps?.isDisabled ?? false;
+    holiday = cellProps.isHoliday;
+  }
+
+  if (holiday === undefined) {
+    holiday = showHolidays && isWeekend(date, viewMode);
+  }
+
+  const dateTimeSelectedValue = isDateFilled()
+    ? new Date(dateAndTime?.year ?? 0, dateAndTime?.month ?? 0, dateAndTime?.day ?? 0)
+    : undefined;
+
+  const isRangeMode =
+    mode === CALENDAR_MODE.DateRange || mode === CALENDAR_MODE.MonthRange || mode === CALENDAR_MODE.YearRange;
+  const rangePosition = isRangeMode
+    ? getInRangePosition(date, viewMode, preselectedRange || value)
+    : RANGE_POSITION.Out;
+
+  const isSelectedValue =
+    value && !preselectedRange && !dateTimeSelectedValue
+      ? isTheSameItem(value[0], date) || isTheSameItem(value[1], date)
+      : false;
+  const isPreselected = preselectedRange ? isTheSameItem(preselectedRange[0], date) : false;
+  const isDateTimeValueSelected = dateTimeSelectedValue ? isTheSameItem(dateTimeSelectedValue, date) : false;
+
+  const current = isTheSameItem(today || new Date(), date);
+
+  return {
+    disabled,
+    holiday: holiday ?? false,
+    rangePosition,
+    current,
+    another: !isInPeriod(viewDate, date),
+    label: getItemLabel(date),
+    checked: isSelectedValue || isPreselected || isDateTimeValueSelected || rangePosition !== RANGE_POSITION.Out,
+  };
+}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './classifyCell';
+export * from './useDateAndTime';
+export * from './useGrid';
+export * from './useCalendarContext';
+export * from './useOpenTrigger';
+export * from './useTimeDrumHandlers';
+export * from './useTimePickerValueBridge';

package/src/hooks/useCalendarContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { CalendarContext } from '../helperComponents';
+
+export function useCalendarContext() {
+  return useContext(CalendarContext);
+}

package/src/hooks/useDateAndTime.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DateAndTime, Range, TimeValue } from '../types';
+import { isTimePortionComplete } from '../utils';
+
+export function useDateAndTime({
+  showSeconds,
+  value,
+}: {
+  showSeconds?: boolean;
+  value: Range | TimeValue | undefined;
+}) {
+  const [dateAndTime, setDateAndTime] = useState<DateAndTime>(() => {
+    if (Array.isArray(value)) {
+      const initialValue = value[0];
+
+      return {
+        year: initialValue.getFullYear(),
+        month: initialValue.getMonth(),
+        day: initialValue.getDate(),
+        hours: initialValue.getHours(),
+        minutes: initialValue.getMinutes(),
+        seconds: initialValue.getSeconds(),
+      };
+    }
+
+    return {
+      year: undefined,
+      month: undefined,
+      day: undefined,
+      hours: value?.hours,
+      minutes: value?.minutes,
+      seconds: value?.seconds,
+    };
+  });
+
+  const isDateFilled = useCallback(() => {
+    const { year, month, day } = dateAndTime;
+    return [year, month, day].every(value => value !== undefined);
+  }, [dateAndTime]);
+
+  const isTimeFilled = useCallback(() => isTimePortionComplete(dateAndTime, showSeconds), [dateAndTime, showSeconds]);
+
+  const isDateAndTimeFilled = useCallback(() => isTimeFilled() && isDateFilled(), [isDateFilled, isTimeFilled]);
+
+  const onDateChange = useCallback((value: Pick<DateAndTime, 'year' | 'month' | 'day'> | Date) => {
+    if (value instanceof Date) {
+      setDateAndTime(prevDate => ({
+        ...prevDate,
+        year: value.getFullYear(),
+        month: value.getMonth(),
+        day: value.getDate(),
+      }));
+    } else {
+      setDateAndTime(prevDate => ({ ...prevDate, ...value }));
+    }
+  }, []);
+
+  const onTimeChange = useCallback((value: TimeValue | Date) => {
+    if (value instanceof Date) {
+      setDateAndTime(prevDate => ({
+        ...prevDate,
+        hours: value.getHours(),
+        minutes: value.getMinutes(),
+        seconds: value.getSeconds(),
+      }));
+    } else {
+      setDateAndTime(prevDate => ({ ...prevDate, ...value }));
+    }
+  }, []);
+
+  const onDateAndTimeChange = useCallback((value: DateAndTime | Date) => {
+    if (value instanceof Date) {
+      setDateAndTime({
+        year: value.getFullYear(),
+        month: value.getMonth(),
+        day: value.getDate(),
+        hours: value.getHours(),
+        minutes: value.getMinutes(),
+        seconds: value.getSeconds(),
+      });
+    } else {
+      setDateAndTime(value);
+    }
+  }, []);
+
+  /** Левый конец Range из пропа: полный sync только при новом instant, иначе не затираем время до onChange. */
+  const lastSyncedRangeStartMs = useRef<number | null>(null);
+  const lastSyncedTimeValueKey = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!value) {
+      lastSyncedRangeStartMs.current = null;
+      lastSyncedTimeValueKey.current = null;
+      setDateAndTime({});
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      lastSyncedTimeValueKey.current = null;
+      const rangeStartMs = value[0].getTime();
+
+      if (lastSyncedRangeStartMs.current !== rangeStartMs) {
+        lastSyncedRangeStartMs.current = rangeStartMs;
+        onDateAndTimeChange(value[0]);
+      }
+
+      return;
+    }
+
+    lastSyncedRangeStartMs.current = null;
+    const timeKey = `${value.hours ?? ''}:${value.minutes ?? ''}:${value.seconds ?? ''}`;
+
+    if (lastSyncedTimeValueKey.current !== timeKey) {
+      lastSyncedTimeValueKey.current = timeKey;
+      onTimeChange(value);
+    }
+  }, [onDateAndTimeChange, onTimeChange, value]);
+
+  return {
+    dateAndTime,
+    setDateAndTime,
+    isDateAndTimeFilled,
+    isTimeFilled,
+    isDateFilled,
+    onDateChange,
+    onTimeChange,
+    onDateAndTimeChange,
+  };
+}

package/src/hooks/useGrid.ts

@@ -0,0 +1,123 @@
+import { KeyboardEventHandler, useMemo } from 'react';
+
+import { BaseGrid, Cell } from '../types';
+import { stringifyAddress } from '../utils';
+import { classifyCell } from './classifyCell';
+import { useCalendarContext } from './useCalendarContext';
+
+export type UseGridParams = {
+  buildGrid(viewDate: Date): BaseGrid;
+  isTheSameItem(date1: Date, date2: Date): boolean;
+  isInPeriod(viewDate: Date, date: Date): boolean;
+  getItemLabel(date: Date): string;
+  onSelect?(date: Date): void;
+  onPreselect?(date: Date): void;
+  onLeave?(): void;
+  onKeyDown?: KeyboardEventHandler;
+};
+
+export function useGrid({
+  onSelect,
+  onPreselect,
+  onLeave,
+  buildGrid,
+  isTheSameItem,
+  getItemLabel,
+  isInPeriod,
+  onKeyDown,
+}: UseGridParams) {
+  const {
+    today,
+    showHolidays,
+    preselectedRange,
+    value,
+    dateAndTime,
+    mode,
+    viewDate,
+    viewMode,
+    focus,
+    buildCellProps,
+    firstNotDisableCell,
+    isDateFilled,
+  } = useCalendarContext();
+
+  return useMemo(() => {
+    let hasFocusInGrid = false;
+    let currentItem: Cell | undefined;
+    let hasFoundFirstNotDisableCell = false;
+    const result = buildGrid(viewDate).map(row =>
+      row.map<Cell>(({ date, address }) => {
+        const classification = classifyCell({
+          date,
+          viewDate,
+          viewMode,
+          mode,
+          value,
+          preselectedRange,
+          dateAndTime,
+          isDateFilled,
+          showHolidays,
+          today,
+          buildCellProps,
+          isTheSameItem,
+          isInPeriod,
+          getItemLabel,
+        });
+
+        if (!classification.disabled) {
+          if (firstNotDisableCell && !hasFoundFirstNotDisableCell) {
+            firstNotDisableCell.current = address;
+            hasFoundFirstNotDisableCell = true;
+          }
+        }
+
+        const tabIndex = focus && stringifyAddress(address) === focus ? 0 : -1;
+        hasFocusInGrid = tabIndex === 0 || hasFocusInGrid;
+
+        const cell: Cell = {
+          ...classification,
+          date,
+          onLeave,
+          address,
+          tabIndex,
+          onSelect,
+          onPreselect,
+          onKeyDown,
+        };
+
+        if (classification.current) {
+          currentItem = cell;
+        }
+
+        return cell;
+      }),
+    );
+
+    if (!hasFocusInGrid) {
+      (currentItem || result[0][0]).tabIndex = 0;
+    }
+
+    return result;
+  }, [
+    buildCellProps,
+    buildGrid,
+    dateAndTime,
+    firstNotDisableCell,
+    focus,
+    getItemLabel,
+    isDateFilled,
+    isInPeriod,
+    isTheSameItem,
+    mode,
+    onKeyDown,
+    onLeave,
+    onPreselect,
+    onSelect,
+    preselectedRange,
+    showHolidays,
+    today,
+    value,
+    viewDate,
+    viewMode,
+  ]);
+}