@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/src/TimeInput/TimeWheels.tsx

@@ -0,0 +1,218 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TimeWheels.tsx
+ * @input A time of day, the hour format, the bounds and a commit callback
+ * @output Exports TimeWheels: UIDatePicker's `.time` wheels as one picker
+ * @position Internal component; the wheels under a finger in the TimeInput
+ *   sheet and DateTimeInput's time panel. timeWheelRules.ts holds the rules.
+ *
+ * A column that moves by itself turns on the Wheel's own spin (`spinTo`). The
+ * spin starts before the commit, so the new value finds the column moving.
+ *
+ * SYNC: When modified, update TimeWheels.test.tsx, timeWheelRules.ts,
+ * TimeInput.doc.mjs and DateTimeInput.doc.mjs.
+ */
+
+import {useMemo, useRef} from 'react';
+import {Wheel, type WheelHandle} from '../DateInput/Wheel';
+import type {ISOTimeString} from '../utils/timeParser';
+import {
+  columnValue,
+  columnsToTurn,
+  displayedTime,
+  restingTime,
+  hourRows,
+  meridiemOf,
+  meridiemRows,
+  minuteRows,
+  secondRows,
+  turnColumn,
+  wheelBounds,
+  type TimeColumn,
+  type TimeParts,
+  type TimeRow,
+} from './timeWheelRules';
+import {
+  registerEnglishFallback,
+  useComponentTranslator,
+} from '../i18n/useComponentTranslator';
+import english from '../i18n/generated-english/TimeInput/TimeWheels.generated';
+
+registerEnglishFallback(english);
+
+export interface TimeWheelsProps {
+  /** The time the wheels show. */
+  time: TimeParts;
+  /** 12-hour (with an AM/PM column) or 24-hour time. */
+  hourFormat: '12h' | '24h';
+  /** Whether a seconds column shows. */
+  hasSeconds: boolean;
+  /** Earliest time that may commit. */
+  min?: ISOTimeString;
+  /** Latest time that may commit. */
+  max?: ISOTimeString;
+  /** False while the wheels are hidden. */
+  isActive: boolean;
+  /** Called with the committed time, already inside the bounds. */
+  onCommit: (time: TimeParts) => void;
+}
+
+function sameTime(a: TimeParts, b: TimeParts): boolean {
+  return a.hour === b.hour && a.minute === b.minute && a.second === b.second;
+}
+
+/**
+ * UIDatePicker's time wheels.
+ *
+ * @example
+ * ```
+ * <TimeWheels time={{hour: 11, minute: 58, second: 0}} hourFormat="12h"
+ *   hasSeconds={false} isActive onCommit={setTime} />
+ * ```
+ */
+export function TimeWheels({
+  time,
+  hourFormat,
+  hasSeconds,
+  min,
+  max,
+  isActive,
+  onCommit,
+}: TimeWheelsProps) {
+  const t = useComponentTranslator();
+  const bounds = useMemo(() => wheelBounds(min, max), [min, max]);
+  const shown = displayedTime(time, hasSeconds);
+
+  const hourOptions = useMemo(
+    () => hourRows(shown.hour, hourFormat, bounds),
+    [shown.hour, hourFormat, bounds],
+  );
+  const minuteOptions = useMemo(
+    () => minuteRows(shown.hour, hasSeconds, bounds),
+    [shown.hour, hasSeconds, bounds],
+  );
+  const secondOptions = useMemo(
+    () => secondRows(shown.hour, shown.minute, bounds),
+    [shown.hour, shown.minute, bounds],
+  );
+  const meridiemOptions = useMemo(
+    () =>
+      meridiemRows(
+        {
+          am: t('@astryx.dateTimeInput.meridiemAM'),
+          pm: t('@astryx.dateTimeInput.meridiemPM'),
+        },
+        bounds,
+      ),
+    [t, bounds],
+  );
+
+  const hourRef = useRef<WheelHandle | null>(null);
+  const minuteRef = useRef<WheelHandle | null>(null);
+  const secondRef = useRef<WheelHandle | null>(null);
+  const meridiemRef = useRef<WheelHandle | null>(null);
+
+  const rows: Record<TimeColumn, TimeRow[]> = {
+    hour: hourOptions,
+    minute: minuteOptions,
+    second: secondOptions,
+    meridiem: meridiemOptions,
+  };
+  // The rows the columns turn onto by themselves (`spinTo`), each with the id of
+  // its turn. A turn's arrival is not a person's rest, so it commits nothing,
+  // even when the owner kept the old time.
+  const spinsRef = useRef<
+    Partial<Record<TimeColumn, {value: number; id: number}>>
+  >({});
+  const nextSpinIdRef = useRef(0);
+
+  const restOn = (column: TimeColumn) => (value: number) => {
+    if (spinsRef.current[column]?.value === value) {
+      return;
+    }
+    const from = shown;
+    // What commits is the row the wheels come to rest on: past a bound, the
+    // nearest time inside it that has a row (datePicker.wheels.restPastBound).
+    const next = restingTime(
+      turnColumn(from, column, value, hourFormat),
+      hasSeconds,
+      bounds,
+    );
+    const handles: Record<TimeColumn, WheelHandle | null> = {
+      hour: hourRef.current,
+      minute: minuteRef.current,
+      second: secondRef.current,
+      meridiem: meridiemRef.current,
+    };
+    // Turn the other columns first, so the commit's new value finds them
+    // already moving (a Wheel never parks a moving column).
+    for (const turn of columnsToTurn(from, column, value, next, {
+      hourFormat,
+      hasSeconds,
+    })) {
+      const index = rows[turn.column].findIndex(
+        row => row.value === turn.value,
+      );
+      const handle = handles[turn.column];
+      if (index >= 0 && handle != null) {
+        nextSpinIdRef.current += 1;
+        const id = nextSpinIdRef.current;
+        spinsRef.current[turn.column] = {value: turn.value, id};
+        void handle.spinTo(index).finally(() => {
+          if (spinsRef.current[turn.column]?.id === id) {
+            spinsRef.current[turn.column] = undefined;
+          }
+        });
+      }
+    }
+    if (!sameTime(next, from)) {
+      onCommit(next);
+    }
+  };
+
+  return (
+    <>
+      <Wheel
+        ref={hourRef}
+        label={t('@astryx.dateTimeInput.hourWheel')}
+        options={hourOptions}
+        value={columnValue(shown, 'hour', hourFormat)}
+        isActive={isActive}
+        onChange={restOn('hour')}
+      />
+      <Wheel
+        ref={minuteRef}
+        label={t('@astryx.dateTimeInput.minuteWheel')}
+        options={minuteOptions}
+        value={shown.minute}
+        isActive={isActive}
+        onChange={restOn('minute')}
+      />
+      {hasSeconds && (
+        <Wheel
+          ref={secondRef}
+          label={t('@astryx.dateTimeInput.secondWheel')}
+          options={secondOptions}
+          value={shown.second}
+          isActive={isActive}
+          onChange={restOn('second')}
+        />
+      )}
+      {hourFormat === '12h' && (
+        <Wheel
+          ref={meridiemRef}
+          label={t('@astryx.dateTimeInput.meridiemWheel')}
+          options={meridiemOptions}
+          value={meridiemOf(shown.hour)}
+          isActive={isActive}
+          onChange={restOn('meridiem')}
+        />
+      )}
+    </>
+  );
+}
+
+TimeWheels.displayName = 'TimeWheels';

package/src/TimeInput/TouchTimeField.tsx

@@ -4,11 +4,11 @@
 
 /**
  * @file TouchTimeField.tsx
- * @input Uses React, Field, BottomSheet, Wheel, DateInput touch geometry
- *   tokens, and shared time utilities
+ * @input Uses React, Field, BottomSheet, the wheels (TimeWheels under a finger,
+ *   Wheel with a mouse), DateInput touch geometry tokens and time utilities
  * @output Exports TouchTimeField — the bottom-sheet surface behind TimeInput
  * @position Internal component; consumed by TimeInput.tsx for `presentation`
- *   sheet surfaces (`spec:AST-043` DEC-3: the time half of DateTimeInput's sheet)
+ *   sheet surfaces
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TimeInput/TimeInput.tsx
@@ -54,6 +54,7 @@ import {useSize} from '../SizeContext/SizeContext';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {Wheel, type WheelOption} from '../DateInput/Wheel';
+import {useTouchPresentation} from '../utils/touchPresentation';
 import {dateInputTouchGeometry} from '../DateInput/tokens.stylex';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {themeProps} from '../utils/themeProps';
@@ -68,6 +69,16 @@ import {
 } from '../utils';
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import type {TimeInputProps} from './TimeInput';
+import {TimeWheels} from '../DateInput/datePickerTouch';
+import {
+  hour12From24,
+  hour24From12,
+  hourRowsInHalf,
+  meridiemRows,
+  minuteRows,
+  secondRows,
+  wheelBounds,
+} from './timeWheelRules';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -141,45 +152,6 @@ const styles = stylex.create({
   },
 });
 
-function twoDigits(value: number): string {
-  return String(value).padStart(2, '0');
-}
-
-function hour12From24(hour: number): number {
-  return hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-}
-
-function hour24From12(hour: number, meridiem: number): number {
-  if (meridiem === 0) {
-    return hour === 12 ? 0 : hour;
-  }
-  return hour === 12 ? 12 : hour + 12;
-}
-
-function timeToSeconds(time: ISOTimeString | undefined): number | null {
-  if (time == null) {
-    return null;
-  }
-  const parsed = parseISOTime(time);
-  return parsed == null
-    ? null
-    : parsed.hour * 3600 + parsed.minute * 60 + parsed.second;
-}
-
-function rangeOverlaps(
-  startSecond: number,
-  endSecond: number,
-  min: ISOTimeString | undefined,
-  max: ISOTimeString | undefined,
-): boolean {
-  const minSecond = timeToSeconds(min);
-  const maxSecond = timeToSeconds(max);
-  return (
-    (minSecond == null || endSecond >= minSecond) &&
-    (maxSecond == null || startSecond <= maxSecond)
-  );
-}
-
 /**
  * The Astryx bottom-sheet time surface: a read-only closed field that opens
  * hour/minute(/second/meridiem) wheels in a BottomSheet. Wheels commit live,
@@ -249,6 +221,7 @@ export function TouchTimeField({
   const mergedInputRef = useMergedRefs(ref, inputRef);
   const inputGroup = useInputGroup();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const {isTouch} = useTouchPresentation();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
@@ -363,84 +336,29 @@ export function TouchTimeField({
     [fireChange, hasSeconds, max, min, optimisticValue],
   );
 
-  const hourOptions: WheelOption[] = useMemo(() => {
-    if (hourFormat === '24h') {
-      return Array.from({length: 24}, (_, hour) => ({
-        value: hour,
-        label: twoDigits(hour),
-        isDisabled: !rangeOverlaps(hour * 3600, hour * 3600 + 3599, min, max),
-      }));
-    }
-    const meridiem = parsedWheelTime.hour < 12 ? 0 : 1;
-    return Array.from({length: 12}, (_, index) => {
-      const hour = index + 1;
-      const hour24 = hour24From12(hour, meridiem);
-      return {
-        value: hour,
-        label: String(hour),
-        isDisabled: !rangeOverlaps(
-          hour24 * 3600,
-          hour24 * 3600 + 3599,
-          min,
-          max,
-        ),
-      };
-    });
-  }, [hourFormat, max, min, parsedWheelTime.hour]);
-
+  const bounds = useMemo(() => wheelBounds(min, max), [min, max]);
+  const hourOptions: WheelOption[] = useMemo(
+    () => hourRowsInHalf(parsedWheelTime.hour, hourFormat, bounds),
+    [bounds, hourFormat, parsedWheelTime.hour],
+  );
   const minuteOptions: WheelOption[] = useMemo(
-    () =>
-      Array.from({length: 60}, (_, minute) => {
-        const start = parsedWheelTime.hour * 3600 + minute * 60;
-        return {
-          value: minute,
-          label: twoDigits(minute),
-          isDisabled: !rangeOverlaps(
-            start,
-            start + (hasSeconds ? 59 : 0),
-            min,
-            max,
-          ),
-        };
-      }),
-    [hasSeconds, max, min, parsedWheelTime.hour],
+    () => minuteRows(parsedWheelTime.hour, hasSeconds, bounds),
+    [bounds, hasSeconds, parsedWheelTime.hour],
   );
-
   const secondOptions: WheelOption[] = useMemo(
-    () =>
-      Array.from({length: 60}, (_, second) => ({
-        value: second,
-        label: twoDigits(second),
-        isDisabled: !isTimeInRange(
-          formatISOTime(
-            {
-              hour: parsedWheelTime.hour,
-              minute: parsedWheelTime.minute,
-              second,
-            },
-            true,
-          ),
-          min,
-          max,
-        ),
-      })),
-    [max, min, parsedWheelTime.hour, parsedWheelTime.minute],
+    () => secondRows(parsedWheelTime.hour, parsedWheelTime.minute, bounds),
+    [bounds, parsedWheelTime.hour, parsedWheelTime.minute],
   );
-
   const meridiemOptions: WheelOption[] = useMemo(
-    () => [
-      {
-        value: 0,
-        label: t('@astryx.dateTimeInput.meridiemAM'),
-        isDisabled: !rangeOverlaps(0, 11 * 3600 + 3599, min, max),
-      },
-      {
-        value: 1,
-        label: t('@astryx.dateTimeInput.meridiemPM'),
-        isDisabled: !rangeOverlaps(12 * 3600, 23 * 3600 + 3599, min, max),
-      },
-    ],
-    [max, min, t],
+    () =>
+      meridiemRows(
+        {
+          am: t('@astryx.dateTimeInput.meridiemAM'),
+          pm: t('@astryx.dateTimeInput.meridiemPM'),
+        },
+        bounds,
+      ),
+    [bounds, t],
   );
 
   const openSheet = useCallback(() => {
@@ -539,49 +457,69 @@ export function TouchTimeField({
         padding={0}>
         <div ref={sheetBodyRef} {...stylex.props(styles.sheetBody)}>
           <div {...stylex.props(styles.wheels)}>
-            <Wheel
-              label={t('@astryx.dateTimeInput.hourWheel')}
-              options={hourOptions}
-              value={
-                hourFormat === '24h'
-                  ? parsedWheelTime.hour
-                  : hour12From24(parsedWheelTime.hour)
-              }
-              isActive={isSheetOpen}
-              onChange={hour =>
-                commitWheelTime(
-                  hourFormat === '24h'
-                    ? composeWheelTime({hour24: hour})
-                    : composeWheelTime({hour12: hour}),
-                )
-              }
-            />
-            <Wheel
-              label={t('@astryx.dateTimeInput.minuteWheel')}
-              options={minuteOptions}
-              value={parsedWheelTime.minute}
-              isActive={isSheetOpen}
-              onChange={minute => commitWheelTime(composeWheelTime({minute}))}
-            />
-            {hasSeconds && (
-              <Wheel
-                label={t('@astryx.dateTimeInput.secondWheel')}
-                options={secondOptions}
-                value={parsedWheelTime.second}
-                isActive={isSheetOpen}
-                onChange={second => commitWheelTime(composeWheelTime({second}))}
-              />
-            )}
-            {hourFormat === '12h' && (
-              <Wheel
-                label={t('@astryx.dateTimeInput.meridiemWheel')}
-                options={meridiemOptions}
-                value={parsedWheelTime.hour < 12 ? 0 : 1}
+            {isTouch ? (
+              <TimeWheels
+                time={parsedWheelTime}
+                hourFormat={hourFormat}
+                hasSeconds={hasSeconds}
+                min={min}
+                max={max}
                 isActive={isSheetOpen}
-                onChange={meridiem =>
-                  commitWheelTime(composeWheelTime({meridiem}))
+                onCommit={time =>
+                  commitWheelTime(formatISOTime(time, hasSeconds))
                 }
               />
+            ) : (
+              <>
+                <Wheel
+                  label={t('@astryx.dateTimeInput.hourWheel')}
+                  options={hourOptions}
+                  value={
+                    hourFormat === '24h'
+                      ? parsedWheelTime.hour
+                      : hour12From24(parsedWheelTime.hour)
+                  }
+                  isActive={isSheetOpen}
+                  onChange={hour =>
+                    commitWheelTime(
+                      hourFormat === '24h'
+                        ? composeWheelTime({hour24: hour})
+                        : composeWheelTime({hour12: hour}),
+                    )
+                  }
+                />
+                <Wheel
+                  label={t('@astryx.dateTimeInput.minuteWheel')}
+                  options={minuteOptions}
+                  value={parsedWheelTime.minute}
+                  isActive={isSheetOpen}
+                  onChange={minute =>
+                    commitWheelTime(composeWheelTime({minute}))
+                  }
+                />
+                {hasSeconds && (
+                  <Wheel
+                    label={t('@astryx.dateTimeInput.secondWheel')}
+                    options={secondOptions}
+                    value={parsedWheelTime.second}
+                    isActive={isSheetOpen}
+                    onChange={second =>
+                      commitWheelTime(composeWheelTime({second}))
+                    }
+                  />
+                )}
+                {hourFormat === '12h' && (
+                  <Wheel
+                    label={t('@astryx.dateTimeInput.meridiemWheel')}
+                    options={meridiemOptions}
+                    value={parsedWheelTime.hour < 12 ? 0 : 1}
+                    isActive={isSheetOpen}
+                    onChange={meridiem =>
+                      commitWheelTime(composeWheelTime({meridiem}))
+                    }
+                  />
+                )}
+              </>
             )}
           </div>
           <div {...stylex.props(styles.footer)}>