🦺 ensure non-negative initial scroll index in all cases + ensure safe inputs for repeatNumbersNTimes prop

Author: troberts-28

src/components/DurationScroll/index.tsx

@@ -56,19 +56,29 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             topPickerGradientOverlayProps,
         } = props;
 
+        const safeRepeatNumbersNTimes = useMemo(() => {
+            if (!disableInfiniteScroll && repeatNumbersNTimes < 2) {
+                return 2;
+            } else if (repeatNumbersNTimes < 1) {
+                return 1;
+            }
+
+            return Math.round(repeatNumbersNTimes);
+        }, [disableInfiniteScroll, repeatNumbersNTimes]);
+
         const data = useMemo(() => {
             if (is12HourPicker) {
                 return generate12HourNumbers({
                     padNumbersWithZero,
-                    repeatNTimes: repeatNumbersNTimes,
+                    repeatNTimes: safeRepeatNumbersNTimes,
                     disableInfiniteScroll,
                     padWithNItems,
                 });
             }
 
             return generateNumbers(numberOfItems, {
                 padNumbersWithZero,
-                repeatNTimes: repeatNumbersNTimes,
+                repeatNTimes: safeRepeatNumbersNTimes,
                 disableInfiniteScroll,
                 padWithNItems,
             });
@@ -78,25 +88,27 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             numberOfItems,
             padNumbersWithZero,
             padWithNItems,
-            repeatNumbersNTimes,
+            safeRepeatNumbersNTimes,
         ]);
 
         const initialScrollIndex = useMemo(
             () =>
                 getScrollIndex({
                     numberOfItems,
                     padWithNItems,
-                    repeatNumbersNTimes,
+                    repeatNumbersNTimes: safeRepeatNumbersNTimes,
                     value: initialValue,
                 }),
             [
                 initialValue,
                 numberOfItems,
                 padWithNItems,
-                repeatNumbersNTimes,
+                safeRepeatNumbersNTimes,
             ]
         );
 
+        console.log(numberOfItems, initialScrollIndex);
+
         const adjustedLimited = useMemo(
             () => getAdjustedLimit(limit, numberOfItems),
             [limit, numberOfItems]
@@ -156,7 +168,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     index: getScrollIndex({
                         numberOfItems,
                         padWithNItems,
-                        repeatNumbersNTimes,
+                        repeatNumbersNTimes: safeRepeatNumbersNTimes,
                         value: value,
                     }),
                 });
@@ -311,6 +323,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
                 // check limits
                 if (newDuration > adjustedLimited.max) {
+                    // TODO (NOW): make this work for a quick scroll
                     const targetScrollIndex =
                         newIndex - (newDuration - adjustedLimited.max);
                     flatListRef.current?.scrollToIndex({
@@ -363,15 +376,15 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                 } else if (
                     viewableItems[0]?.index &&
                     viewableItems[0].index >=
-                        numberOfItems * (repeatNumbersNTimes - 0.5)
+                        numberOfItems * (safeRepeatNumbersNTimes - 0.5)
                 ) {
                     flatListRef.current?.scrollToIndex({
                         animated: false,
                         index: viewableItems[0].index - numberOfItems - 1,
                     });
                 }
             },
-            [numberOfItems, repeatNumbersNTimes]
+            [numberOfItems, safeRepeatNumbersNTimes]
         );
 
         const getItemLayout = useCallback(

src/components/TimerPicker/index.tsx

@@ -50,16 +50,22 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             ...otherProps
         } = props;
 
-        const checkedPadWithNItems =
-            padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
+        const safePadWithNItems = useMemo(() => {
+            if (padWithNItems < 0) {
+                return 0;
+            }
+            // check if large values also work
+
+            return Math.round(padWithNItems);
+        }, [padWithNItems]);
 
         const styles = useMemo(
             () =>
                 generateStyles(customStyles, {
-                    padWithNItems: checkedPadWithNItems,
+                    padWithNItems: safePadWithNItems,
                 }),
 
-            [checkedPadWithNItems, customStyles]
+            [safePadWithNItems, customStyles]
         );
 
         const safeInitialValue = useMemo(
@@ -148,7 +154,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={23}
                         onDurationChange={setSelectedHours}
                         padNumbersWithZero={padHoursWithZero}
-                        padWithNItems={checkedPadWithNItems}
+                        padWithNItems={safePadWithNItems}
                         pmLabel={pmLabel}
                         repeatNumbersNTimes={repeatHourNumbersNTimes}
                         styles={styles}
@@ -171,7 +177,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         onDurationChange={setSelectedMinutes}
                         padNumbersWithZero={padMinutesWithZero}
-                        padWithNItems={checkedPadWithNItems}
+                        padWithNItems={safePadWithNItems}
                         repeatNumbersNTimes={repeatMinuteNumbersNTimes}
                         styles={styles}
                         testID="duration-scroll-minute"
@@ -193,7 +199,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         onDurationChange={setSelectedSeconds}
                         padNumbersWithZero={padSecondsWithZero}
-                        padWithNItems={checkedPadWithNItems}
+                        padWithNItems={safePadWithNItems}
                         repeatNumbersNTimes={repeatSecondNumbersNTimes}
                         styles={styles}
                         testID="duration-scroll-second"

src/utils/generateNumbers.ts

@@ -6,7 +6,7 @@ export const generateNumbers = (
         disableInfiniteScroll?: boolean;
         padNumbersWithZero?: boolean;
         padWithNItems: number;
-        repeatNTimes?: number;
+        repeatNTimes: number;
     }
 ) => {
     if (numberOfItems <= 0) {
@@ -18,10 +18,10 @@ export const generateNumbers = (
         numbers.push(padNumber(i, { padWithZero: options.padNumbersWithZero }));
     }
 
-    if ((options.repeatNTimes ?? 1) > 1) {
+    if (options.repeatNTimes > 1) {
         numbers = Array(options.repeatNTimes).fill(numbers).flat();
     }
-    if (options.disableInfiniteScroll) {
+    if (options.disableInfiniteScroll || options.repeatNTimes === 1) {
         numbers.push(...Array(options.padWithNItems).fill(""));
         numbers.unshift(...Array(options.padWithNItems).fill(""));
     }

src/utils/getScrollIndex.ts

@@ -7,8 +7,9 @@ export const getScrollIndex = (variables: {
     const { numberOfItems, padWithNItems, repeatNumbersNTimes, value } =
         variables;
 
-    return (
+    return Math.max(
         ((value + numberOfItems) % (numberOfItems * repeatNumbersNTimes)) -
-        (padWithNItems - 1)
+            (padWithNItems - 1),
+        0
     );
 };