@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/TimePicker/parts.tsx

@@ -1,18 +1,14 @@
-import { Clock, X } from "@tamagui/lucide-icons-2";
-import {
-  ensureFocusVisibleRing,
-  useReadableTextOn,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
-import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { Text, View, isWeb } from "tamagui";
+import { ClockIcon, XIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { View, isWeb } from "tamagui";
 
 import { Input as InputParts } from "../../InputParts";
-import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps";
+import { formCommonColors } from "../../shared/colorRamps";
+import { TimeWheels } from "../../shared/TimeColumn";
 import { t } from "../../shared/t";
 
 export type TimeFormat = "12h" | "24h";
-export type DialMode = "hour" | "minute" | "second";
 
 const timeStringRegex = /^([01]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/;
 
@@ -59,451 +55,6 @@ export function to12Hour(h24: number): { h: number; period: "AM" | "PM" } {
   };
 }
 
-function pad2(n: number): string {
-  return String(n).padStart(2, "0");
-}
-
-function wrap(n: number, min: number, max: number): number {
-  const span = max - min + 1;
-  return min + ((((n - min) % span) + span) % span);
-}
-
-function snapToStep(raw: number, step: number, max = 59): number {
-  const size = Math.max(1, step);
-  return wrap(Math.round(raw / size) * size, 0, max);
-}
-
-function polar(fraction: number, radius: number, cell: number, center: number) {
-  const angle = fraction * 2 * Math.PI - Math.PI / 2;
-  return {
-    left: center + radius * Math.cos(angle) - cell / 2,
-    top: center + radius * Math.sin(angle) - cell / 2,
-  };
-}
-
-function angleFromPoint(x: number, y: number, center: number): number {
-  let angle = Math.atan2(y - center, x - center) + Math.PI / 2;
-  if (angle < 0) angle += Math.PI * 2;
-  return angle / (Math.PI * 2);
-}
-
-function pipRadius(pointy?: boolean): number {
-  return pointy ? 0 : 9999;
-}
-
-function activateKeys(onPress: () => void) {
-  return (e: { key?: string; preventDefault?: () => void }) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault?.();
-      onPress();
-    }
-  };
-}
-
-function ClockFaceButton({
-  label,
-  selected,
-  size,
-  left,
-  top,
-  pointy,
-  onPress,
-}: {
-  label: string;
-  selected: boolean;
-  size: number;
-  left: number;
-  top: number;
-  pointy?: boolean;
-  onPress: () => void;
-}) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const onAccent = useReadableTextOn(formSelectedColors.mark);
-  return (
-    <View
-      position="absolute"
-      left={left}
-      top={top}
-      width={size}
-      height={size}
-      borderRadius={pipRadius(pointy)}
-      alignItems="center"
-      justifyContent="center"
-      zIndex={2}
-      role="button"
-      aria-label={label}
-      aria-pressed={selected || undefined}
-      cursor="pointer"
-      backgroundColor={selected ? formSelectedColors.mark : "transparent"}
-      outlineWidth={0}
-      focusStyle={{ outlineWidth: 0 }}
-      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      onPress={(e) => {
-        e.stopPropagation?.();
-        onPress();
-      }}
-      {...(isWeb
-        ? { tabIndex: 0, onKeyDown: activateKeys(onPress) as unknown as () => void }
-        : { accessible: true })}
-    >
-      <Text
-        {...knobProps.label}
-        fontWeight={selected ? "700" : "500"}
-        color={selected ? onAccent : formCommonColors.text}
-        userSelect="none"
-      >
-        {label}
-      </Text>
-    </View>
-  );
-}
-
-function ClockHand({
-  fraction,
-  length,
-  center,
-}: {
-  fraction: number;
-  length: number;
-  center: number;
-}) {
-  const deg = fraction * 360 - 90;
-  return (
-    <View
-      position="absolute"
-      left={center}
-      top={center - 1.5}
-      width={length}
-      height={3}
-      borderRadius={2}
-      backgroundColor={formSelectedColors.mark}
-      zIndex={1}
-      pointerEvents="none"
-      style={
-        isWeb
-          ? { transformOrigin: "left center", transform: `rotate(${deg}deg)` }
-          : { transform: [{ rotate: `${deg}deg` }] }
-      }
-    />
-  );
-}
-
-export function ClockDial({
-  mode,
-  hour24,
-  minute,
-  second,
-  timeFormat,
-  minuteStep,
-  onSelectHour,
-  onSelectMinute,
-  onSelectSecond,
-}: {
-  mode: DialMode;
-  hour24: number;
-  minute: number;
-  second: number;
-  timeFormat: TimeFormat;
-  minuteStep: number;
-  onSelectHour: (hour24: number) => void;
-  onSelectMinute: (minute: number) => void;
-  onSelectSecond: (second: number) => void;
-}) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const cell = knobProps.nestedControl.px;
-  const size = cell * 8;
-  const center = size / 2;
-  const outerR = center - cell * 0.7;
-  const innerR = center - cell * 1.85;
-  const { h: hour12 } = to12Hour(hour24);
-  const faceRadius = pipRadius(knobProps.pointy);
-
-  const ticks = useMemo(() => {
-    if (mode === "hour" && timeFormat === "24h") {
-      return [
-        ...Array.from({ length: 12 }, (_, i) => ({
-          value: i,
-          label: pad2(i),
-          radius: innerR,
-          selected: hour24 === i,
-        })),
-        ...Array.from({ length: 12 }, (_, i) => ({
-          value: i + 12,
-          label: pad2(i + 12),
-          radius: outerR,
-          selected: hour24 === i + 12,
-        })),
-      ];
-    }
-    if (mode === "hour") {
-      return Array.from({ length: 12 }, (_, i) => {
-        const value = i === 0 ? 12 : i;
-        return {
-          value,
-          label: String(value),
-          radius: outerR,
-          selected: hour12 === value,
-        };
-      });
-    }
-    const step = mode === "minute" ? Math.max(1, minuteStep) : 1;
-    const labelStep = step >= 5 && 60 % step === 0 ? step : 5;
-    const current = mode === "minute" ? minute : second;
-    return Array.from({ length: Math.floor(60 / labelStep) }, (_, i) => {
-      const value = i * labelStep;
-      return {
-        value,
-        label: pad2(value),
-        radius: outerR,
-        selected: current === value,
-      };
-    });
-  }, [mode, timeFormat, hour24, hour12, minute, second, minuteStep, innerR, outerR]);
-
-  const handFraction =
-    mode === "hour"
-      ? timeFormat === "24h"
-        ? (hour24 % 12) / 12
-        : hour12 / 12
-      : mode === "minute"
-        ? minute / 60
-        : second / 60;
-  const handLength = mode === "hour" && timeFormat === "24h" && hour24 < 12 ? innerR : outerR;
-
-  const pickFromPoint = useCallback(
-    (x: number, y: number) => {
-      const dist = Math.hypot(x - center, y - center);
-      if (dist < cell * 0.4 || dist > center) return;
-      const frac = angleFromPoint(x, y, center);
-      if (mode === "hour") {
-        const hour12Pick = Math.round(frac * 12) % 12;
-        if (timeFormat === "24h") {
-          const inner = dist < (innerR + outerR) / 2;
-          onSelectHour(inner ? hour12Pick : hour12Pick + 12);
-          return;
-        }
-        onSelectHour(to24Hour(hour12Pick === 0 ? 12 : hour12Pick, hour24 >= 12 ? "PM" : "AM"));
-        return;
-      }
-      const raw = Math.round(frac * 60) % 60;
-      if (mode === "minute") onSelectMinute(snapToStep(raw, minuteStep));
-      else onSelectSecond(snapToStep(raw, 1));
-    },
-    [
-      center,
-      cell,
-      innerR,
-      outerR,
-      mode,
-      timeFormat,
-      hour24,
-      minuteStep,
-      onSelectHour,
-      onSelectMinute,
-      onSelectSecond,
-    ],
-  );
-
-  return (
-    <View
-      width={size}
-      height={size}
-      alignSelf="center"
-      position="relative"
-      data-testid="time-picker-dial"
-      role="group"
-      aria-label={mode === "hour" ? t("Hour") : mode === "minute" ? t("Min") : t("Sec")}
-    >
-      <View
-        width={size}
-        height={size}
-        borderRadius={faceRadius === 9999 ? size / 2 : 0}
-        backgroundColor={formInputColors.background.focus}
-        cursor="pointer"
-        onPress={(e) => {
-          const ne = e.nativeEvent as { locationX?: number; locationY?: number };
-          if (typeof ne.locationX === "number" && typeof ne.locationY === "number") {
-            pickFromPoint(ne.locationX, ne.locationY);
-          }
-        }}
-      />
-      <ClockHand fraction={handFraction} length={handLength} center={center} />
-      <View
-        position="absolute"
-        left={center + handLength * Math.cos(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2}
-        top={center + handLength * Math.sin(handFraction * 2 * Math.PI - Math.PI / 2) - cell / 2}
-        width={cell}
-        height={cell}
-        borderRadius={pipRadius(knobProps.pointy)}
-        backgroundColor={formSelectedColors.mark}
-        zIndex={1}
-        pointerEvents="none"
-      />
-      <View
-        position="absolute"
-        left={center - 5}
-        top={center - 5}
-        width={10}
-        height={10}
-        borderRadius={pipRadius(knobProps.pointy)}
-        backgroundColor={formSelectedColors.mark}
-        zIndex={3}
-        pointerEvents="none"
-      />
-      {ticks.map((tick) => {
-        const fraction = mode === "hour" ? (tick.value % 12) / 12 : tick.value / 60;
-        const pos = polar(fraction, tick.radius, cell, center);
-        return (
-          <ClockFaceButton
-            key={`${tick.radius}-${tick.value}`}
-            label={tick.label}
-            selected={tick.selected}
-            size={cell}
-            left={pos.left}
-            top={pos.top}
-            pointy={knobProps.pointy}
-            onPress={() => {
-              if (mode === "hour") {
-                onSelectHour(
-                  timeFormat === "24h"
-                    ? tick.value
-                    : to24Hour(tick.value, hour24 >= 12 ? "PM" : "AM"),
-                );
-              } else if (mode === "minute") {
-                onSelectMinute(tick.value);
-              } else {
-                onSelectSecond(tick.value);
-              }
-            }}
-          />
-        );
-      })}
-    </View>
-  );
-}
-
-function TimeSegment({
-  value,
-  selected,
-  label,
-  onPress,
-  onStep,
-}: {
-  value: string;
-  selected: boolean;
-  label: string;
-  onPress: () => void;
-  onStep: (delta: number) => void;
-}) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const onAccent = useReadableTextOn(formSelectedColors.mark);
-  const minWidth = knobProps.nestedControl.px * 2;
-  return (
-    <View
-      role="button"
-      aria-label={label}
-      aria-pressed={selected || undefined}
-      cursor="pointer"
-      minWidth={minWidth}
-      minHeight={knobProps.nestedControl.px * 1.5}
-      paddingHorizontal="$3"
-      paddingVertical="$2"
-      alignItems="center"
-      justifyContent="center"
-      backgroundColor={selected ? formSelectedColors.mark : formInputColors.background.focus}
-      borderRadius={knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius}
-      outlineWidth={0}
-      focusStyle={{ outlineWidth: 0 }}
-      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      onPress={onPress}
-      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
-      {...(isWeb
-        ? {
-            tabIndex: 0,
-            onKeyDown: ((e: { key?: string; preventDefault?: () => void }) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault?.();
-                onPress();
-              } else if (e.key === "ArrowUp") {
-                e.preventDefault?.();
-                onStep(1);
-              } else if (e.key === "ArrowDown") {
-                e.preventDefault?.();
-                onStep(-1);
-              }
-            }) as unknown as () => void,
-          }
-        : { accessible: true })}
-    >
-      <Text
-        fontSize="$8"
-        {...knobProps.heading}
-        fontWeight="700"
-        color={selected ? onAccent : formCommonColors.text}
-        userSelect="none"
-      >
-        {value}
-      </Text>
-    </View>
-  );
-}
-
-function PeriodToggle({
-  selected,
-  onChange,
-}: {
-  selected: "AM" | "PM";
-  onChange: (period: "AM" | "PM") => void;
-}) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
-  const onAccent = useReadableTextOn(formSelectedColors.mark);
-  return (
-    <View
-      overflow="hidden"
-      borderRadius={knobProps.pointy ? 0 : knobProps.borderRadius.borderRadius}
-      role="radiogroup"
-      aria-label={t("AM/PM")}
-    >
-      {(["AM", "PM"] as const).map((period) => {
-        const isSelected = period === selected;
-        const onPress = () => onChange(period);
-        return (
-          <View
-            key={period}
-            role="radio"
-            aria-checked={isSelected}
-            cursor="pointer"
-            width={knobProps.nestedControl.px * 1.75}
-            height={knobProps.nestedControl.px * 1.15}
-            alignItems="center"
-            justifyContent="center"
-            backgroundColor={
-              isSelected ? formSelectedColors.mark : formInputColors.background.focus
-            }
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-            onPress={onPress}
-            {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
-            {...(isWeb
-              ? { tabIndex: 0, onKeyDown: activateKeys(onPress) as unknown as () => void }
-              : { accessible: true })}
-          >
-            <Text
-              {...knobProps.label}
-              fontWeight={isSelected ? "700" : "500"}
-              color={isSelected ? onAccent : formCommonColors.text}
-              userSelect="none"
-            >
-              {period}
-            </Text>
-          </View>
-        );
-      })}
-    </View>
-  );
-}
-
 export function TimePanel({
   value,
   onChange,
@@ -518,107 +69,51 @@ export function TimePanel({
   showSeconds: boolean;
 }) {
   const { knobProps } = useResolvedKnobs({ compact: true });
-  const [mode, setMode] = useState<DialMode>("hour");
   const { h, m, s } = parseTimeString(value);
-  const { h: hour12, period } = to12Hour(h);
-
-  const emit = useCallback(
-    (newH: number, newM: number, newS: number) => {
-      onChange(showSeconds ? toTimeString(newH, newM, newS) : toTimeString(newH, newM));
-    },
-    [onChange, showSeconds],
-  );
-
-  const handleHour = useCallback(
-    (hour24: number) => {
-      emit(hour24, m, s);
-      setMode("minute");
-    },
-    [emit, m, s],
-  );
-
-  const handleMinute = useCallback(
-    (next: number) => {
-      emit(h, next, s);
-      if (showSeconds) setMode("second");
-    },
-    [emit, h, s, showSeconds],
-  );
 
   return (
-    <View
-      alignItems="center"
-      {...knobProps.panelPadding}
-      {...knobProps.gapLg}
-      data-testid="time-picker-panel"
-    >
-      <View flexDirection="row" alignItems="center" {...knobProps.gap}>
-        <TimeSegment
-          value={timeFormat === "24h" ? pad2(h) : pad2(hour12)}
-          selected={mode === "hour"}
-          label={t("Hour")}
-          onPress={() => setMode("hour")}
-          onStep={(delta) => {
-            if (timeFormat === "24h") emit(wrap(h + delta, 0, 23), m, s);
-            else emit(to24Hour(wrap(hour12 + delta, 1, 12), period), m, s);
-          }}
-        />
-        <Text fontSize="$8" {...knobProps.heading} color={formCommonColors.text} userSelect="none">
-          :
-        </Text>
-        <TimeSegment
-          value={pad2(m)}
-          selected={mode === "minute"}
-          label={t("Min")}
-          onPress={() => setMode("minute")}
-          onStep={(delta) =>
-            emit(h, snapToStep(m + delta * Math.max(1, minuteStep), minuteStep), s)
-          }
-        />
-        {showSeconds ? (
-          <>
-            <Text
-              fontSize="$8"
-              {...knobProps.heading}
-              color={formCommonColors.text}
-              userSelect="none"
-            >
-              :
-            </Text>
-            <TimeSegment
-              value={pad2(s)}
-              selected={mode === "second"}
-              label={t("Sec")}
-              onPress={() => setMode("second")}
-              onStep={(delta) => emit(h, m, wrap(s + delta, 0, 59))}
-            />
-          </>
-        ) : null}
-        {timeFormat === "12h" ? (
-          <PeriodToggle
-            selected={period}
-            onChange={(next) => {
-              if (next === period) return;
-              emit(to24Hour(hour12, next), m, s);
-            }}
-          />
-        ) : null}
-      </View>
-      <ClockDial
-        mode={showSeconds && mode === "second" ? "second" : mode === "minute" ? "minute" : "hour"}
+    <View width="100%" {...knobProps.panelPadding} data-testid="time-picker-panel">
+      <TimeWheels
         hour24={h}
         minute={m}
         second={s}
         timeFormat={timeFormat}
         minuteStep={minuteStep}
-        onSelectHour={handleHour}
-        onSelectMinute={handleMinute}
-        onSelectSecond={(next) => emit(h, m, next)}
+        showSeconds={showSeconds}
+        onChange={(hour24, minute, second) =>
+          onChange(
+            showSeconds ? toTimeString(hour24, minute, second) : toTimeString(hour24, minute),
+          )
+        }
       />
     </View>
   );
 }
 
+export function TimePickerClearButton({
+  onClear,
+  disabled,
+}: {
+  onClear: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <InputParts.Button
+      data-testid="time-picker-clear"
+      aria-label={t("Clear time")}
+      disabled={disabled}
+      onPress={(e) => {
+        e.stopPropagation();
+        onClear();
+      }}
+    >
+      <InputParts.Icon>
+        <XIcon />
+      </InputParts.Icon>
+    </InputParts.Button>
+  );
+}
+
 interface TimePickerInputTriggerProps {
   value: string;
   placeholder: string;
@@ -662,50 +157,45 @@ export function TimePickerInputTrigger({
         onPress={isWeb && !disabled ? onOpen : undefined}
         {...(disabled ? { opacity: 0.5, pointerEvents: "none" as const } : undefined)}
       >
-        <InputParts.Section>
-          <InputParts.Icon adornment="leading">{clockIcon ?? <Clock />}</InputParts.Icon>
+        <InputParts.Section data-testid="time-picker-glyph">
+          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
+            {clockIcon ?? <ClockIcon />}
+          </InputParts.Icon>
         </InputParts.Section>
-        <InputParts.Area
-          readOnly
-          pointerEvents="none"
-          id={id}
-          value={value}
-          placeholder={placeholder}
-          disabled={disabled}
-          color={formCommonColors.text}
-          aria-label={ariaLabel}
-          aria-required={ariaRequired}
-          aria-invalid={ariaInvalid}
-          aria-readonly={ariaReadonly}
-          onKeyPress={
-            disabled
-              ? undefined
-              : (e: {
-                  nativeEvent?: { key?: string };
-                  key?: string;
-                  preventDefault?: () => void;
-                }) => {
-                  const key = e?.nativeEvent?.key ?? e?.key;
-                  if (key === "Enter" || key === " " || key === "Spacebar") {
-                    e?.preventDefault?.();
-                    onOpen();
+        <InputParts.Section>
+          <InputParts.Area
+            readOnly
+            pointerEvents="none"
+            id={id}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            color={formCommonColors.text}
+            placeholderTextColor={formCommonColors.muted}
+            aria-label={ariaLabel}
+            aria-required={ariaRequired}
+            aria-invalid={ariaInvalid}
+            aria-readonly={ariaReadonly}
+            onKeyPress={
+              disabled
+                ? undefined
+                : (e: {
+                    nativeEvent?: { key?: string };
+                    key?: string;
+                    preventDefault?: () => void;
+                  }) => {
+                    const key = e?.nativeEvent?.key ?? e?.key;
+                    if (key === "Enter" || key === " " || key === "Spacebar") {
+                      e?.preventDefault?.();
+                      onOpen();
+                    }
                   }
-                }
-          }
-        />
-        {value ? (
+            }
+          />
+        </InputParts.Section>
+        {value && isWeb ? (
           <InputParts.Section>
-            <InputParts.Button
-              aria-label={t("Clear time")}
-              onPress={(e) => {
-                e.stopPropagation();
-                onClear();
-              }}
-            >
-              <InputParts.Icon>
-                <X />
-              </InputParts.Icon>
-            </InputParts.Button>
+            <TimePickerClearButton onClear={onClear} disabled={disabled} />
           </InputParts.Section>
         ) : null}
       </InputParts.Box>