@lotics/ui 1.12.0 → 1.13.0

package/src/time_field.tsx

@@ -0,0 +1,300 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Popover, PopoverContent } from "./popover";
+import { pad } from "./date_picker_value";
+import {
+  SegmentLabels,
+  fieldOrder,
+  from12h,
+  getTimeLayout,
+  placeholderFor,
+  to12h,
+} from "./date_segments";
+
+export interface TimeFieldProps {
+  /** Canonical 24-hour "HH:mm" value, "" when empty. */
+  value: string;
+  onChange: (value: string) => void;
+  segmentLabels: SegmentLabels;
+  /** BCP-47 locale for hour/minute order + 12/24h. Default "en-US". */
+  locale?: string;
+  disabled?: boolean;
+  /** Names the group of selects (e.g. "Start time"). */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const ROW_HEIGHT = 32;
+
+/**
+ * A time picker built from independent hour / minute (/ AM-PM) selects, ordered
+ * and 12-vs-24h'd by the locale. Each segment is its own dropdown so any hour and
+ * any minute is one pick — the minute list covers all 60. Canonical value is the
+ * 24-hour "HH:mm"; the AM/PM split is derived for display only.
+ */
+export function TimeField(props: TimeFieldProps) {
+  const {
+    value,
+    onChange,
+    segmentLabels,
+    locale = "en-US",
+    disabled,
+    accessibilityLabel,
+    testID,
+  } = props;
+
+  const layout = useMemo(() => getTimeLayout(locale), [locale]);
+  const order = useMemo(() => fieldOrder(layout), [layout]);
+
+  const parsed = useMemo(() => {
+    const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+    if (!match) return null;
+    const h = Number(match[1]);
+    const mi = Number(match[2]);
+    return h <= 23 && mi <= 59 ? { h, mi } : null;
+  }, [value]);
+
+  const hourOptions = useMemo<Option[]>(() => {
+    const hours = layout.hour12
+      ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+      : Array.from({ length: 24 }, (_, h) => h);
+    return hours.map((h) => ({ value: String(h), label: pad(h) }));
+  }, [layout.hour12]);
+
+  const minuteOptions = useMemo<Option[]>(
+    () => Array.from({ length: 60 }, (_, m) => ({ value: String(m), label: pad(m) })),
+    [],
+  );
+
+  const periodOptions = useMemo<Option[]>(
+    () => [
+      { value: "am", label: layout.amText },
+      { value: "pm", label: layout.pmText },
+    ],
+    [layout.amText, layout.pmText],
+  );
+
+  const emit = useCallback((h: number, mi: number) => onChange(`${pad(h)}:${pad(mi)}`), [onChange]);
+
+  // Each select fills in the others from the current value (defaulting the
+  // untouched halves to 0) so any single pick yields a complete "HH:mm".
+  const setHour = useCallback(
+    (next: string) => {
+      const h = layout.hour12
+        ? from12h(Number(next), parsed ? to12h(parsed.h).pm : false)
+        : Number(next);
+      emit(h, parsed?.mi ?? 0);
+    },
+    [parsed, layout.hour12, emit],
+  );
+
+  const setMinute = useCallback(
+    (next: string) => emit(parsed?.h ?? 0, Number(next)),
+    [parsed, emit],
+  );
+
+  const setPeriod = useCallback(
+    (next: string) => {
+      const h12 = parsed ? to12h(parsed.h).h12 : 12;
+      emit(from12h(h12, next === "pm"), parsed?.mi ?? 0);
+    },
+    [parsed, emit],
+  );
+
+  const selected: Record<"hour" | "minute" | "dayPeriod", string | null> = {
+    hour: parsed ? String(layout.hour12 ? to12h(parsed.h).h12 : parsed.h) : null,
+    minute: parsed ? String(parsed.mi) : null,
+    dayPeriod: parsed ? (to12h(parsed.h).pm ? "pm" : "am") : null,
+  };
+
+  const config: Record<
+    "hour" | "minute" | "dayPeriod",
+    { options: Option[]; onSelect: (v: string) => void; label: string; width: number }
+  > = {
+    hour: { options: hourOptions, onSelect: setHour, label: segmentLabels.hour, width: 58 },
+    minute: { options: minuteOptions, onSelect: setMinute, label: segmentLabels.minute, width: 58 },
+    dayPeriod: {
+      options: periodOptions,
+      onSelect: setPeriod,
+      label: segmentLabels.dayPeriod,
+      width: 66,
+    },
+  };
+
+  return (
+    <View style={styles.row} accessibilityLabel={accessibilityLabel}>
+      {order.map((type) => {
+        if (type !== "hour" && type !== "minute" && type !== "dayPeriod") return null;
+        const c = config[type];
+        return (
+          <TimeSelect
+            key={type}
+            testID={testID ? `${testID}_${type}` : undefined}
+            value={selected[type]}
+            options={c.options}
+            onSelect={c.onSelect}
+            accessibilityLabel={c.label}
+            placeholder={placeholderFor(type)}
+            disabled={disabled}
+            width={c.width}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+interface TimeSelectProps {
+  value: string | null;
+  options: Option[];
+  onSelect: (value: string) => void;
+  accessibilityLabel: string;
+  placeholder: string;
+  disabled?: boolean;
+  testID?: string;
+  width: number;
+}
+
+/** One borderless-trigger dropdown select; the whole trigger is pressable. */
+function TimeSelect(props: TimeSelectProps) {
+  const { value, options, onSelect, accessibilityLabel, placeholder, disabled, testID, width } =
+    props;
+
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<View>(null);
+  const scrollRef = useRef<ScrollView>(null);
+
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? null;
+  const selectedIndex = options.findIndex((o) => o.value === value);
+
+  // Open the list scrolled to the current value (the minute list is 60 long).
+  useEffect(() => {
+    if (!open || selectedIndex < 0) return;
+    const y = Math.max(0, selectedIndex * ROW_HEIGHT - ROW_HEIGHT * 2);
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ y, animated: false }), 0);
+    return () => clearTimeout(id);
+  }, [open, selectedIndex]);
+
+  const openList = useCallback(() => {
+    if (!disabled) setOpen(true);
+  }, [disabled]);
+
+  const trigger = (
+    <View
+      ref={triggerRef}
+      onPointerDown={openList}
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.trigger,
+        { width },
+        open && !disabled && styles.triggerOpen,
+        disabled && styles.triggerDisabled,
+      ]}
+    >
+      <Text size="sm" color={selectedLabel ? "default" : "muted"}>
+        {selectedLabel ?? placeholder}
+      </Text>
+      <Icon
+        name="chevron-down"
+        size={16}
+        color={disabled ? colors.zinc["300"] : colors.zinc["400"]}
+      />
+    </View>
+  );
+
+  return (
+    <>
+      {trigger}
+      <Popover
+        open={open && !disabled}
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+        side="bottom"
+        align="start"
+      >
+        <PopoverContent testID={testID ? `${testID}_list` : undefined} disableBodyScroll>
+          <ScrollView ref={scrollRef} style={styles.list} keyboardShouldPersistTaps="handled">
+            {options.map((option) => {
+          const isSelected = option.value === value;
+          return (
+            <Pressable
+              key={option.value}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected }}
+              onPress={() => {
+                onSelect(option.value);
+                setOpen(false);
+              }}
+              style={({ hovered }) => [
+                styles.optionRow,
+                hovered && !isSelected && styles.optionHovered,
+                isSelected && styles.optionSelected,
+              ]}
+            >
+              <Text size="sm" color={isSelected ? "inverted" : "default"}>
+                {option.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+          </ScrollView>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: 40,
+    paddingHorizontal: 8,
+    gap: 2,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+  },
+  triggerOpen: {
+    outlineColor: colors.black,
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineOffset: -2,
+  },
+  triggerDisabled: {
+    backgroundColor: colors.zinc["50"],
+  },
+  list: {
+    maxHeight: 220,
+    minWidth: 72,
+  },
+  optionRow: {
+    height: ROW_HEIGHT,
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    borderRadius: 6,
+  },
+  optionHovered: {
+    backgroundColor: colors.zinc["100"],
+  },
+  optionSelected: {
+    backgroundColor: colors.zinc["900"],
+  },
+});

package/src/datetime_picker.tsx

@@ -1,44 +0,0 @@
-import { colors } from "@lotics/ui/colors";
-import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
-
-export interface DateTimePickerProps {
-  value?: string | null;
-  onValueChange: (value: string) => void;
-  disabled?: boolean;
-  onBlur?: () => void;
-}
-
-/**
- * A unified datetime picker component that allows selecting both date and time.
- * Value format: ISO 8601 datetime string (e.g., "2025-03-01T14:00")
- */
-export function DateTimePicker(props: DateTimePickerProps) {
-  const { value, onValueChange, disabled, onBlur } = props;
-
-  return (
-    <input
-      type="datetime-local"
-      value={value || ""}
-      onChange={(e) => {
-        onValueChange(e.target.value);
-      }}
-      disabled={disabled}
-      onBlur={onBlur}
-      style={{
-        height: 40,
-        borderRadius: 8,
-        paddingLeft: 8,
-        paddingRight: 8,
-        borderWidth: 1,
-        boxShadow: "none",
-        borderStyle: "solid",
-        boxSizing: "border-box",
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-        fontFamily: fontFamilyRegular,
-        ...inputTextStyleWeb,
-        letterSpacing: -0.4,
-      }}
-    />
-  );
-}