@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/TimePickerBase/TimePickerBase.tsx

@@ -0,0 +1,223 @@
+import { Divider } from '@cloud-ru/ds-divider';
+import { getDefaultItemId } from '@cloud-ru/ds-list';
+import cn from 'classnames';
+import { useCallback, useMemo } from 'react';
+
+import { AUTOFOCUS, HOURS, MINUTES, SECONDS } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { OnKeyDownGetter } from '../../types';
+import { TimeList } from '../TimeList';
+import styles from './styles.module.scss';
+
+export type TimePickerBaseProps = {
+  /** CSS-класс */
+  className?: string;
+  /** Фиксированная ширина (оверрайдит fitToContainer) */
+  fixedWidth?: boolean;
+};
+
+export function TimePickerBase({ className, fixedWidth }: TimePickerBaseProps) {
+  const {
+    size,
+    mode,
+    fitToContainer,
+    showSeconds,
+    dateAndTime,
+    onTimeChange,
+    applyButtonRef,
+    currentButtonRef,
+    hoursKeyboardNavigationRef,
+    minutesKeyboardNavigationRef,
+    secondsKeyboardNavigationRef,
+    setFocus,
+    getTestId,
+    navigationStartRef,
+    onFocusLeave,
+  } = useCalendarContext();
+
+  const hours = dateAndTime?.hours;
+  const minutes = dateAndTime?.minutes;
+  const seconds = dateAndTime?.seconds;
+
+  const getTimeChangeHandler = useCallback(
+    (propName: 'hours' | 'minutes' | 'seconds') => (value: number) => {
+      onTimeChange({
+        hours: dateAndTime?.hours ?? 0,
+        minutes: dateAndTime?.minutes ?? 0,
+        seconds: dateAndTime?.seconds ?? 0,
+        [propName]: value ?? dateAndTime?.[propName] ?? 0,
+      });
+    },
+    [dateAndTime, onTimeChange],
+  );
+
+  const onHoursChange = getTimeChangeHandler('hours');
+  const onMinutesChange = getTimeChangeHandler('minutes');
+  const onSecondsChange = getTimeChangeHandler('seconds');
+
+  const onHourKeyDownGetter: OnKeyDownGetter = useCallback(
+    id => event => {
+      switch (event.key) {
+        case 'Tab':
+          if (mode === 'time' && event.shiftKey) {
+            onFocusLeave?.('prev');
+            break;
+          }
+
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (event.shiftKey) {
+            setFocus(AUTOFOCUS);
+          } else {
+            minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+          }
+          break;
+        case 'Enter':
+          minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+          break;
+        case 'ArrowUp':
+          if (mode === 'time' && id === 0) {
+            onFocusLeave?.('prev');
+            break;
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [minutes, minutesKeyboardNavigationRef, mode, onFocusLeave, setFocus],
+  );
+
+  const onMinuteKeyDownGetter: OnKeyDownGetter = useCallback(
+    () => event => {
+      switch (event.key) {
+        case 'Tab':
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (event.shiftKey) {
+            hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(hours ?? 0));
+          } else {
+            if (showSeconds) {
+              secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(seconds ?? 0));
+            } else {
+              currentButtonRef.current?.focus();
+            }
+          }
+          break;
+        case 'Enter':
+          if (showSeconds) {
+            secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(seconds ?? 0));
+          } else {
+            applyButtonRef.current?.focus();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [
+      applyButtonRef,
+      currentButtonRef,
+      hours,
+      hoursKeyboardNavigationRef,
+      seconds,
+      secondsKeyboardNavigationRef,
+      showSeconds,
+    ],
+  );
+
+  const onSecondKeyDownGetter: OnKeyDownGetter = useCallback(
+    () => event => {
+      switch (event.key) {
+        case 'Tab':
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (event.shiftKey) {
+            minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+          } else {
+            currentButtonRef.current?.focus();
+          }
+          break;
+        case 'Enter':
+          applyButtonRef.current?.focus();
+          break;
+        default:
+          break;
+      }
+    },
+    [applyButtonRef, currentButtonRef, minutes, minutesKeyboardNavigationRef],
+  );
+
+  const timeValue = useMemo(() => {
+    const selectedTime = [hours, minutes];
+
+    if (showSeconds) {
+      selectedTime.push(seconds);
+    }
+
+    return selectedTime
+      .map(value => {
+        if (value) {
+          return value.toString().padStart(2, '0');
+        }
+
+        return '00';
+      })
+      .join(':');
+  }, [hours, minutes, seconds, showSeconds]);
+
+  return (
+    <div className={cn(styles.root, className)} data-size={size} data-fit-to-container={fitToContainer || undefined}>
+      <div className={styles.header} data-size={size}>
+        <div className={styles.time} data-size={size}>
+          {timeValue}
+        </div>
+      </div>
+
+      <Divider className={styles.divider} orientation='horizontal' />
+
+      <div
+        className={styles.listTimeDesktop}
+        data-size={size}
+        data-fit-to-container={fitToContainer || undefined}
+        data-fixed-width={fixedWidth || undefined}
+      >
+        <TimeList
+          className={styles.timeListColumn}
+          value={hours}
+          onChange={onHoursChange}
+          data-test-id={getTestId('hours')}
+          numberOfItems={HOURS}
+          onKeyDownGetter={onHourKeyDownGetter}
+          keyboardNavigationRef={hoursKeyboardNavigationRef}
+          navigationStartRef={mode === 'time' ? navigationStartRef : undefined}
+        />
+
+        <TimeList
+          className={styles.timeListColumn}
+          value={minutes}
+          onChange={onMinutesChange}
+          data-test-id={getTestId('minutes')}
+          numberOfItems={MINUTES}
+          onKeyDownGetter={onMinuteKeyDownGetter}
+          keyboardNavigationRef={minutesKeyboardNavigationRef}
+        />
+
+        {showSeconds && (
+          <TimeList
+            className={styles.timeListColumn}
+            value={seconds}
+            onChange={onSecondsChange}
+            data-test-id={getTestId('seconds')}
+            numberOfItems={SECONDS}
+            onKeyDownGetter={onSecondKeyDownGetter}
+            keyboardNavigationRef={secondsKeyboardNavigationRef}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/TimePickerBase/index.ts

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

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

@@ -0,0 +1,105 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/calendar.module' as calendar;
+
+$sizes: 's', 'm', 'l';
+
+// Видимых строк в колонке времени и в сетке дат мастера (неделя + шесть строк дат).
+$visibleRows: 7;
+
+// Мастер даёт 11/14 у `s` и 12/16 у `m`/`l` — карта была сдвинута на шаг вверх.
+$typography: (
+  's': base.$sn-regular-label-s,
+  'm': base.$sn-regular-label-m,
+  'l': base.$sn-regular-label-m,
+);
+
+.divider {
+  flex-shrink: 0;
+  height: auto;
+}
+
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.listTimeDesktop {
+  display: flex;
+  flex-grow: 1;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      // `min-width` (не `width`): токен и так семантически minimum, а `flex-grow: 1` позволяет колонкам
+      // растягиваться под ширину дропдауна/футера (иначе фикс-ширина зажимала бы список уже футера).
+      min-width: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'timePicker', 'min-width');
+      height: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'timePicker', 'min-height');
+      padding-right: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate', 'padding-right');
+      padding-left: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate', 'padding-left');
+    }
+  }
+
+  &:not([data-fixed-width])[data-fit-to-container] {
+    width: 100%;
+  }
+}
+
+.timeListColumn {
+  flex: 1;
+
+  // Строка времени по высоте = ячейке календаря, а не дефолтной высоте элемента `@cloud-ru/ds-list`:
+  // фиксированная высота колонки делится на число видимых строк. `itemCalendar.min-height`
+  // не подходит — он идёт от `density-size` и у размера s даёт 24.
+  // `.timeListColumn` приземляется на wrapper `@cloud-ru/ds-list`; item несёт `role='menuitem'` + `data-size`.
+  [role='menuitem'] {
+    // `@cloud-ru/ds-list` выравнивает контент по `flex-start`; для тайм-строки число должно быть
+    // по центру ячейки, иначе на увеличенной высоте оно прилипает к верху и уезжает от
+    // фоновой заливки выбранного значения.
+    align-items: center;
+
+    @each $size in $sizes {
+      &[data-size='#{$size}'] {
+        min-height: calc(
+          #{base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'timePicker', 'min-height')} / #{$visibleRows}
+        );
+        border-radius: base.simple-var(
+          calendar.$calendar,
+          'anatomy',
+          'size',
+          $size,
+          'itemCalendar',
+          'container',
+          'border-radius'
+        );
+      }
+    }
+  }
+}
+
+.header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'header');
+    }
+  }
+}
+
+.time {
+  display: flex;
+  align-items: center;
+
+  height: base.$sn-primitive-dimension-24;
+
+  color: base.$sn-theme-color-neutral-text;
+  text-align: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var($typography, $size);
+    }
+  }
+}

package/src/helperComponents/TimePickerDrum/TimePickerDrum.tsx

@@ -0,0 +1,187 @@
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+
+import { HOURS, MINUTES, SECONDS, SIZE } from '../../constants';
+import { noop, TEST_IDS } from './constants';
+import styles from './styles.module.scss';
+import { TimePickerDrumWheelColumn, TimePickerDrumWheelColumnHandle } from './TimePickerDrumWheelColumn';
+import { TimePickerDrumProps } from './types';
+import {
+  buildColumnValues,
+  formatDisplayPart,
+  formatSelectedDateLabelForDisplay,
+  getSizeLimits,
+  nearestInSortedValues,
+} from './utils';
+
+/** Императивный интерфейс барабана: форсит «оседание» всех колонок (см. FF-8654, комментарий #2). */
+export type TimePickerDrumHandle = {
+  /** Синхронно завершает незакоммиченные жесты во всех колонках и возвращает итоговое время. */
+  flush(): { hours: number; minutes: number; seconds: number };
+};
+
+export const TimePickerDrum = forwardRef<TimePickerDrumHandle, TimePickerDrumProps>(function TimePickerDrum(
+  {
+    size = SIZE.M,
+    showSeconds = true,
+    selectedDateLabel,
+    hours,
+    minutes,
+    seconds,
+    onHoursChange,
+    onMinutesChange,
+    onSecondsChange,
+    customOptions,
+    className,
+    'data-test-id': dataTestId,
+    ...rest
+  }: TimePickerDrumProps,
+  ref,
+) {
+  const { itemHeight, pickerHeight } = useMemo(() => getSizeLimits(size), [size]);
+
+  const hoursColumnRef = useRef<TimePickerDrumWheelColumnHandle>(null);
+  const minutesColumnRef = useRef<TimePickerDrumWheelColumnHandle>(null);
+  const secondsColumnRef = useRef<TimePickerDrumWheelColumnHandle>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      flush: () => ({
+        hours: hoursColumnRef.current?.flush() ?? hours,
+        minutes: minutesColumnRef.current?.flush() ?? minutes,
+        seconds: secondsColumnRef.current?.flush() ?? seconds ?? 0,
+      }),
+    }),
+    [hours, minutes, seconds],
+  );
+
+  const hourValues = useMemo(
+    () => buildColumnValues(HOURS, customOptions?.allowedHours, customOptions?.minHour),
+    [customOptions?.allowedHours, customOptions?.minHour],
+  );
+
+  const minuteValues = useMemo(
+    () => buildColumnValues(MINUTES, customOptions?.allowedMinutes, customOptions?.minMinute),
+    [customOptions?.allowedMinutes, customOptions?.minMinute],
+  );
+
+  const secondValues = useMemo(
+    () => buildColumnValues(SECONDS, customOptions?.allowedSeconds, customOptions?.minSecond),
+    [customOptions?.allowedSeconds, customOptions?.minSecond],
+  );
+
+  /**
+   * Подгонка `hours` / `minutes` / `seconds` под `customOptions`: при несовпадении с допустимым набором
+   * вызывается ближайший `on*Change`. В контролируемом режиме колбэк обязан обновить проп до этого значения;
+   * иначе эффект будет срабатывать на каждом рендере (риск цикла обновлений).
+   */
+  useEffect(() => {
+    const next = nearestInSortedValues(hourValues, hours);
+    if (!Number.isFinite(next) || next === hours) {
+      return;
+    }
+    onHoursChange(next);
+  }, [hourValues, hours, onHoursChange]);
+
+  useEffect(() => {
+    const next = nearestInSortedValues(minuteValues, minutes);
+    if (!Number.isFinite(next) || next === minutes) {
+      return;
+    }
+    onMinutesChange(next);
+  }, [minuteValues, minutes, onMinutesChange]);
+
+  useEffect(() => {
+    if (!showSeconds || onSecondsChange == null) {
+      return;
+    }
+    const s = seconds ?? 0;
+    const next = nearestInSortedValues(secondValues, s);
+    if (!Number.isFinite(next) || next === s) {
+      return;
+    }
+    onSecondsChange(next);
+  }, [onSecondsChange, secondValues, seconds, showSeconds]);
+
+  const timeDisplay = useMemo(() => {
+    const h = formatDisplayPart(hours);
+    const m = formatDisplayPart(minutes);
+    if (showSeconds) {
+      const s = formatDisplayPart(seconds ?? 0);
+      return { main: `${h}:${m}`, secondsPart: `:${s}` };
+    }
+    return { main: `${h}:${m}`, secondsPart: undefined };
+  }, [hours, minutes, seconds, showSeconds]);
+
+  const selectedDateLabelDisplay = useMemo(() => {
+    if (!selectedDateLabel) {
+      return '';
+    }
+    return formatSelectedDateLabelForDisplay(selectedDateLabel);
+  }, [selectedDateLabel]);
+
+  return (
+    <div
+      className={cn(styles.root, className)}
+      data-size={size}
+      data-show-seconds={showSeconds || undefined}
+      // Барабан сам обрабатывает вертикальный pointer-жест — отключаем перехват drag'ом bottom-sheet'а
+      // (иначе свайп вниз по барабану закрывал бы sheet вместо прокрутки колонок).
+      data-bottom-sheet-no-drag
+      data-test-id={dataTestId ?? TEST_IDS.root}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.selectedTime} data-test-id={TEST_IDS.selectedTime}>
+        {selectedDateLabelDisplay !== '' && (
+          <div className={styles.dateLabel} data-test-id={TEST_IDS.selectedDate}>
+            {selectedDateLabelDisplay}
+          </div>
+        )}
+        <div className={styles.timeRow}>
+          <span className={styles.timeMain}>{timeDisplay.main}</span>
+          {timeDisplay.secondsPart != null && <span className={styles.timeSeconds}>{timeDisplay.secondsPart}</span>}
+        </div>
+      </div>
+
+      <div className={styles.drum} data-test-id={TEST_IDS.drum}>
+        <TimePickerDrumWheelColumn
+          ref={hoursColumnRef}
+          className={styles.column}
+          value={hours}
+          options={hourValues}
+          formatLabel={formatDisplayPart}
+          height={pickerHeight}
+          itemHeight={itemHeight}
+          data-test-id={TEST_IDS.hoursColumn}
+          onChange={onHoursChange}
+        />
+        <TimePickerDrumWheelColumn
+          ref={minutesColumnRef}
+          className={styles.column}
+          value={minutes}
+          options={minuteValues}
+          formatLabel={formatDisplayPart}
+          height={pickerHeight}
+          itemHeight={itemHeight}
+          data-test-id={TEST_IDS.minutesColumn}
+          onChange={onMinutesChange}
+        />
+        {showSeconds && (
+          <TimePickerDrumWheelColumn
+            ref={secondsColumnRef}
+            className={styles.column}
+            value={seconds ?? 0}
+            options={secondValues}
+            formatLabel={formatDisplayPart}
+            height={pickerHeight}
+            itemHeight={itemHeight}
+            data-test-id={TEST_IDS.secondsColumn}
+            onChange={onSecondsChange ?? noop}
+          />
+        )}
+      </div>
+    </div>
+  );
+});