@klyftig/mobile-ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "scripts": {
     "sync": "bash scripts/sync-to-kaelo.sh",
     "pack-install": "npm pack && mv klyftig-mobile-ui-*.tgz /tmp/klyftig-mobile-ui-local.tgz && cd ../kaelo/mobile && npm install /tmp/klyftig-mobile-ui-local.tgz"

package/src/components/WheelPicker.tsx

@@ -13,12 +13,23 @@ import { colors } from '../theme/colors';
 export interface WheelPickerProps {
   values: number[];
   selected: number;
-  onChange: (value: number) => void;
+  /**
+   * `wraps` (only with `loop`): how many times this scroll went past the end
+   * of the list — +1 for 59 → 00 going down, -1 for 00 → 59 going up. A
+   * caller can carry it, e.g. bump the hour when the minutes wrap.
+   */
+  onChange: (value: number, info: { wraps: number }) => void;
   formatLabel?: (value: number) => string;
   itemHeight?: number;
   visibleCount?: number;
   width?: number;
   flex?: number;
+  /**
+   * Wrap around (59 → 00 → 01, and back from 00 to 59), like a clock. The
+   * values are laid out LOOP_COPIES times and the wheel recentres on the
+   * middle copy after every scroll, so it never reaches an end in practice.
+   */
+  loop?: boolean;
 }
 
 const DEFAULT_ITEM_HEIGHT = 48;
@@ -32,6 +43,9 @@ const DEFAULT_VISIBLE_COUNT = 3;
 // and momentum behave normally, but we don't mount 600 <Text> nodes on first
 // paint of MeasurementsStep.
 const WINDOW_OVERSCAN = 8;
+// Odd, so there is a middle copy to start in and snap back to. 21 copies of
+// 60 minutes is 1260 rows — only the overscan window is mounted.
+const LOOP_COPIES = 21;
 
 export function WheelPicker({
   values,
@@ -42,6 +56,7 @@ export function WheelPicker({
   visibleCount = DEFAULT_VISIBLE_COUNT,
   width,
   flex,
+  loop = false,
 }: WheelPickerProps) {
   const { colors } = useTheme();
   const scrollRef = useRef<ScrollView>(null);
@@ -49,10 +64,18 @@ export function WheelPicker({
   const padding = (containerHeight - itemHeight) / 2;
   const lastIndexRef = useRef<number>(-1);
 
-  const selectedIndex = useMemo(() => {
+  // Rows are virtual indices; with `loop` they span LOOP_COPIES copies of
+  // `values` and row i shows values[i mod n].
+  const n = values.length;
+  const rowCount = loop ? n * LOOP_COPIES : n;
+  const middleStart = loop ? Math.floor(LOOP_COPIES / 2) * n : 0;
+  const valueIndexOf = useCallback((row: number) => ((row % n) + n) % n, [n]);
+
+  const valueIndex = useMemo(() => {
     const idx = values.indexOf(selected);
     return idx >= 0 ? idx : 0;
   }, [values, selected]);
+  const selectedIndex = middleStart + valueIndex;
 
   // Track the row currently centered under the selection overlay during scroll
   // so the rendered window follows the user's drag, not just the committed
@@ -73,38 +96,49 @@ export function WheelPicker({
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
       const index = Math.round(offsetY / itemHeight);
-      const clamped = Math.max(0, Math.min(values.length - 1, index));
+      const clamped = Math.max(0, Math.min(rowCount - 1, index));
       setWindowCenter((prev) => (Math.abs(prev - clamped) >= 2 ? clamped : prev));
     },
-    [itemHeight, values.length],
+    [itemHeight, rowCount],
   );
 
   const handleMomentumEnd = useCallback(
     (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
       const index = Math.round(offsetY / itemHeight);
-      const clamped = Math.max(0, Math.min(values.length - 1, index));
-      setWindowCenter(clamped);
-      if (values[clamped] !== selected) {
-        onChange(values[clamped]);
+      const clamped = Math.max(0, Math.min(rowCount - 1, index));
+      const value = values[valueIndexOf(clamped)];
+      // Every scroll starts in the middle copy, so copies crossed = wraps.
+      const wraps = loop ? Math.floor(clamped / n) - Math.floor(LOOP_COPIES / 2) : 0;
+      let row = clamped;
+      if (loop) {
+        // Jump back to the same value in the middle copy (invisible: the rows
+        // look identical) so the next fling has room either way.
+        row = middleStart + valueIndexOf(clamped);
+        if (row !== clamped) scrollRef.current?.scrollTo({ y: row * itemHeight, animated: false });
+        lastIndexRef.current = row;
+      }
+      setWindowCenter(row);
+      if (value !== selected || wraps !== 0) {
+        onChange(value, { wraps });
       }
     },
-    [itemHeight, values, selected, onChange],
+    [itemHeight, n, rowCount, values, valueIndexOf, loop, middleStart, selected, onChange],
   );
 
   const windowStart = Math.max(0, windowCenter - WINDOW_OVERSCAN);
-  const windowEnd = Math.min(values.length - 1, windowCenter + WINDOW_OVERSCAN);
+  const windowEnd = Math.min(rowCount - 1, windowCenter + WINDOW_OVERSCAN);
 
   const dimColor = colors.text.tertiary;
   const activeColor = colors.text.primary;
 
   const items = [];
   for (let i = windowStart; i <= windowEnd; i++) {
-    const value = values[i];
+    const value = values[valueIndexOf(i)];
     const isSelected = i === selectedIndex;
     items.push(
       <View
-        key={value}
+        key={i}
         style={[
           styles.item,
           {
@@ -128,7 +162,7 @@ export function WheelPicker({
     );
   }
 
-  const totalContentHeight = values.length * itemHeight + padding * 2;
+  const totalContentHeight = rowCount * itemHeight + padding * 2;
 
   return (
     <View style={[styles.wrapper, { height: containerHeight, width, flex }]}>