Merge branch 'patch/v2.0.1'

troberts-28 · Dec 3, 2024 · d6915ee · d6915ee
2 parents cf7e1c1 + e0f6774
commit d6915ee
Show file tree

Hide file tree

Showing 8 changed files with 478 additions and 95 deletions.
diff --git a/examples/example-expo/package.json b/examples/example-expo/package.json
@@ -10,12 +10,12 @@
     },
     "dependencies": {
         "@expo/vector-icons": "^14.0.3",
-        "expo": "^52.0.0",
+        "expo": "^52.0.11",
         "expo-av": "~15.0.1",
         "expo-haptics": "~14.0.0",
         "expo-linear-gradient": "~14.0.1",
         "react": "18.3.1",
-        "react-native": "0.76.2"
+        "react-native": "0.76.3"
     },
     "devDependencies": {
         "@babel/core": "^7.24.0",

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "main": "dist/commonjs/index.js",
     "module": "dist/module/index.js",
     "types": "dist/typescript/index.d.ts",

diff --git a/src/components/DurationScroll/index.tsx b/src/components/DurationScroll/index.tsx
@@ -77,7 +77,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
             if (!disableInfiniteScroll && repeatNumbersNTimes < 2) {
                 return 2;
-            } else if (repeatNumbersNTimes < 1) {
+            } else if (repeatNumbersNTimes < 1 || isNaN(repeatNumbersNTimes)) {
                 return 1;
             }
 

diff --git a/src/components/TimerPicker/index.tsx b/src/components/TimerPicker/index.tsx
@@ -9,6 +9,7 @@ import React, {
 
 import { View } from "react-native";
 
+import { getSafeInitialValue } from "../../utils/getSafeInitialValue";
 import DurationScroll from "../DurationScroll";
 import type { DurationScrollRef } from "../DurationScroll/types";
 
@@ -57,7 +58,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
         } = props;
 
         const safePadWithNItems = useMemo(() => {
-            if (padWithNItems < 0) {
+            if (padWithNItems < 0 || isNaN(padWithNItems)) {
                 return 0;
             }
 
@@ -70,6 +71,16 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             return Math.round(padWithNItems);
         }, [hideHours, padWithNItems]);
 
+        const safeInitialValue = useMemo(
+            () =>
+                getSafeInitialValue({
+                    hours: initialValue?.hours,
+                    minutes: initialValue?.minutes,
+                    seconds: initialValue?.seconds,
+                }),
+            [initialValue?.hours, initialValue?.minutes, initialValue?.seconds]
+        );
+
         const styles = useMemo(
             () =>
                 generateStyles(customStyles, {
@@ -79,15 +90,6 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             [safePadWithNItems, customStyles]
         );
 
-        const safeInitialValue = useMemo(
-            () => ({
-                hours: initialValue?.hours ?? 0,
-                minutes: initialValue?.minutes ?? 0,
-                seconds: initialValue?.seconds ?? 0,
-            }),
-            [initialValue?.hours, initialValue?.minutes, initialValue?.seconds]
-        );
-
         const [selectedHours, setSelectedHours] = useState(
             safeInitialValue.hours
         );

diff --git a/src/components/TimerPickerModal/index.tsx b/src/components/TimerPickerModal/index.tsx
@@ -9,6 +9,7 @@ import React, {
 
 import { View, Text, TouchableOpacity } from "react-native";
 
+import { getSafeInitialValue } from "../../utils/getSafeInitialValue";
 import Modal from "../Modal";
 import TimerPicker from "../TimerPicker";
 import type { TimerPickerRef } from "../TimerPicker/types";
@@ -40,15 +41,17 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             ...otherProps
         } = props;
 
-        const styles = generateStyles(customStyles);
+        const styles = generateStyles(customStyles, {
+            hasModalTitle: Boolean(modalTitle),
+        });
 
         const timerPickerRef = useRef<TimerPickerRef>(null);
 
-        const safeInitialValue = {
-            hours: initialValue?.hours ?? 0,
-            minutes: initialValue?.minutes ?? 0,
-            seconds: initialValue?.seconds ?? 0,
-        };
+        const safeInitialValue = getSafeInitialValue({
+            hours: initialValue?.hours,
+            minutes: initialValue?.minutes,
+            seconds: initialValue?.seconds,
+        });
 
         const [selectedDuration, setSelectedDuration] =
             useState(safeInitialValue);
@@ -150,7 +153,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             {...otherProps}
                             aggressivelyGetLatestDuration
                             onDurationChange={durationChangeHandler}
-                            styles={customStyles}
+                            styles={styles.timerPickerStyles}
                         />
                         <View
                             {...buttonContainerProps}

diff --git a/src/components/TimerPickerModal/styles.ts b/src/components/TimerPickerModal/styles.ts
@@ -19,31 +19,54 @@ const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
 const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
 
 export const generateStyles = (
-    customStyles: CustomTimerPickerModalStyles | undefined
-) =>
-    StyleSheet.create({
+    customStyles: CustomTimerPickerModalStyles | undefined,
+    variables?: {
+        hasModalTitle: boolean;
+    }
+) => {
+    const {
+        button: customButtonStyle,
+        buttonContainer: customButtonContainerStyle,
+        cancelButton: customCancelButtonStyle,
+        confirmButton: customConfirmButtonStyle,
+        container: customContainerStyle,
+        contentContainer: customContentContainerStyle,
+        modalTitle: customModalTitleStyle,
+        ...customTimerPickerStyles
+    } = customStyles ?? {};
+
+    return StyleSheet.create({
         container: {
             justifyContent: "center",
-            alignItems: "center",
             overflow: "hidden",
-            ...customStyles?.container,
+            ...customContainerStyle,
+            // disable setting alignItems here because it can affect
+            // the FlatList's ability to calculate its layout, which can
+            // stop snapToOffsets working properly
+            alignItems: undefined,
         },
         contentContainer: {
             backgroundColor:
-                customStyles?.backgroundColor ??
-                (customStyles?.theme === "dark"
+                customTimerPickerStyles?.backgroundColor ??
+                (customTimerPickerStyles?.theme === "dark"
                     ? DARK_MODE_BACKGROUND_COLOR
                     : LIGHT_MODE_BACKGROUND_COLOR),
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 20,
-            padding: 20,
-            ...customStyles?.contentContainer,
+            overflow: "hidden",
+            ...customContentContainerStyle,
+            // disable setting padding here because it can affect
+            // the FlatList's ability to calculate its layout, which can
+            // stop snapToOffsets working properly
+            paddingHorizontal: 0,
+            paddingVertical: 0,
         },
         buttonContainer: {
             flexDirection: "row",
             marginTop: 25,
-            ...customStyles?.buttonContainer,
+            marginBottom: 20,
+            ...customButtonContainerStyle,
         },
         button: {
             marginHorizontal: 12,
@@ -53,36 +76,53 @@ export const generateStyles = (
             borderRadius: 10,
             fontSize: 16,
             overflow: "hidden",
-            ...customStyles?.text,
-            ...customStyles?.button,
+            ...customTimerPickerStyles?.text,
+            ...customButtonStyle,
         },
         cancelButton: {
             borderColor: "gray",
             color:
-                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "gray",
+                customTimerPickerStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : "gray",
             backgroundColor:
-                customStyles?.theme === "dark" ? "gray" : undefined,
-            ...customStyles?.text,
-            ...customStyles?.cancelButton,
+                customTimerPickerStyles?.theme === "dark" ? "gray" : undefined,
+            ...customTimerPickerStyles?.text,
+            ...customCancelButtonStyle,
         },
         confirmButton: {
             borderColor: "green",
             color:
-                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "green",
+                customTimerPickerStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : "green",
             backgroundColor:
-                customStyles?.theme === "dark" ? "green" : undefined,
-            ...customStyles?.text,
-            ...customStyles?.confirmButton,
+                customTimerPickerStyles?.theme === "dark" ? "green" : undefined,
+            ...customTimerPickerStyles?.text,
+            ...customConfirmButtonStyle,
         },
         modalTitle: {
             fontSize: 24,
             fontWeight: "600",
+            marginTop: 20,
             marginBottom: 15,
             color:
-                customStyles?.theme === "dark"
+                customTimerPickerStyles?.theme === "dark"
                     ? DARK_MODE_TEXT_COLOR
                     : LIGHT_MODE_TEXT_COLOR,
-            ...customStyles?.text,
-            ...customStyles?.modalTitle,
+            ...customTimerPickerStyles?.text,
+            ...customModalTitleStyle,
+        },
+        timerPickerStyles: {
+            ...customTimerPickerStyles,
+            pickerContainer: {
+                // set padding here instead of on modal content container because it can affect
+                // the FlatList's ability to calculate its layout, which can
+                // stop snapToOffsets working properly
+                paddingHorizontal: 20,
+                paddingTop: !variables?.hasModalTitle ? 20 : 0,
+                ...(customTimerPickerStyles?.pickerContainer ?? {}),
+            },
         },
     });
+};
diff --git a/src/utils/getSafeInitialValue.ts b/src/utils/getSafeInitialValue.ts
@@ -0,0 +1,24 @@
+export const getSafeInitialValue = (
+    initialValue:
+        | {
+              hours?: number;
+              minutes?: number;
+              seconds?: number;
+          }
+        | undefined
+) => ({
+    hours:
+        typeof initialValue?.hours === "number" && !isNaN(initialValue?.hours)
+            ? initialValue.hours
+            : 0,
+    minutes:
+        typeof initialValue?.minutes === "number" &&
+        !isNaN(initialValue?.minutes)
+            ? initialValue.minutes
+            : 0,
+    seconds:
+        typeof initialValue?.seconds === "number" &&
+        !isNaN(initialValue?.seconds)
+            ? initialValue.seconds
+            : 0,
+});