@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/TimePicker/parts.tsx

@@ -0,0 +1,714 @@
+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 { Input as InputParts } from "../../InputParts";
+import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps";
+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)?$/;
+
+export function isValidTimeString(value: string): boolean {
+  return timeStringRegex.test(value.trim());
+}
+
+export function parseTimeString(value: string): { h: number; m: number; s: number } {
+  if (!value) return { h: 0, m: 0, s: 0 };
+  const parts = value.split(":");
+  return {
+    h: Math.max(0, Math.min(23, Number.parseInt(parts[0] || "0", 10) || 0)),
+    m: Math.max(0, Math.min(59, Number.parseInt(parts[1] || "0", 10) || 0)),
+    s: Math.max(0, Math.min(59, Number.parseInt(parts[2] || "0", 10) || 0)),
+  };
+}
+
+export function toTimeString(h: number, m: number, s?: number): string {
+  const base = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+  return s !== undefined ? `${base}:${String(s).padStart(2, "0")}` : base;
+}
+
+export function formatTimeDisplay(value: string, format: TimeFormat, showSeconds: boolean): string {
+  if (!value) return "";
+  const { h, m, s } = parseTimeString(value);
+  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
+  if (format === "24h") {
+    return `${toTimeString(h, m)}${secSuffix}`;
+  }
+  const { h: displayH, period } = to12Hour(h);
+  return `${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
+}
+
+export function to24Hour(displayH: number, period: "AM" | "PM"): number {
+  const wrapped = ((displayH - 1) % 12) + 1;
+  if (period === "AM") return wrapped === 12 ? 0 : wrapped;
+  return wrapped === 12 ? 12 : wrapped + 12;
+}
+
+export function to12Hour(h24: number): { h: number; period: "AM" | "PM" } {
+  return {
+    h: h24 % 12 === 0 ? 12 : h24 % 12,
+    period: h24 >= 12 ? "PM" : "AM",
+  };
+}
+
+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,
+  timeFormat,
+  minuteStep,
+  showSeconds,
+}: {
+  value: string;
+  onChange: (time: string) => void;
+  timeFormat: TimeFormat;
+  minuteStep: number;
+  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"}
+        hour24={h}
+        minute={m}
+        second={s}
+        timeFormat={timeFormat}
+        minuteStep={minuteStep}
+        onSelectHour={handleHour}
+        onSelectMinute={handleMinute}
+        onSelectSecond={(next) => emit(h, m, next)}
+      />
+    </View>
+  );
+}
+
+interface TimePickerInputTriggerProps {
+  value: string;
+  placeholder: string;
+  disabled?: boolean;
+  error?: boolean;
+  id?: string;
+  clockIcon?: ReactNode;
+  onOpen: () => void;
+  onClear: () => void;
+  "aria-label"?: string;
+  "aria-required"?: boolean;
+  "aria-invalid"?: boolean;
+  "aria-readonly"?: boolean;
+}
+
+export function TimePickerInputTrigger({
+  value,
+  placeholder,
+  disabled,
+  error,
+  id,
+  clockIcon,
+  onOpen,
+  onClear,
+  "aria-label": ariaLabel,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+  "aria-readonly": ariaReadonly,
+}: TimePickerInputTriggerProps) {
+  return (
+    <View
+      flexDirection="row"
+      alignItems="center"
+      width="100%"
+      cursor={disabled ? "not-allowed" : "pointer"}
+      data-testid="time-picker-trigger"
+    >
+      <InputParts.Box
+        theme={error ? "red" : undefined}
+        elevation={undefined}
+        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>
+        <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();
+                  }
+                }
+          }
+        />
+        {value ? (
+          <InputParts.Section>
+            <InputParts.Button
+              aria-label={t("Clear time")}
+              onPress={(e) => {
+                e.stopPropagation();
+                onClear();
+              }}
+            >
+              <InputParts.Icon>
+                <X />
+              </InputParts.Icon>
+            </InputParts.Button>
+          </InputParts.Section>
+        ) : null}
+      </InputParts.Box>
+    </View>
+  );
+}