react-native-timer-picker 1.6.0 → 1.7.0

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "main": "dist/commonjs/index.js",
     "types": "dist/typescript/src/index.d.ts",
     "scripts": {

package/src/components/TimerPicker/TimerPicker.styles.ts

@@ -1,20 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { StyleSheet } from "react-native";
+import { StyleSheet, TextStyle, ViewStyle } from "react-native";
 
 export interface CustomTimerPickerStyles {
     theme?: "light" | "dark";
     backgroundColor?: string;
-    text?: any;
-    pickerContainer?: any;
-    pickerLabelContainer?: any;
-    pickerLabel?: any;
-    pickerAmPmContainer?: any;
-    pickerAmPmLabel?: any;
-    pickerItemContainer?: any;
-    pickerItem?: any;
-    disabledPickerContainer?: any;
-    disabledPickerItem?: any;
-    pickerGradientOverlay?: any;
+    text?: TextStyle;
+    pickerContainer?: ViewStyle & { backgroundColor?: string };
+    pickerLabelContainer?: ViewStyle;
+    pickerLabel?: TextStyle;
+    pickerAmPmContainer?: ViewStyle;
+    pickerAmPmLabel?: TextStyle;
+    pickerItemContainer?: ViewStyle & { height?: number };
+    pickerItem?: TextStyle;
+    disabledPickerContainer?: ViewStyle;
+    disabledPickerItem?: TextStyle;
+    pickerGradientOverlay?: ViewStyle;
 }
 
 const DARK_MODE_BACKGROUND_COLOR = "#232323";

package/src/components/TimerPicker/index.tsx

@@ -38,9 +38,11 @@ export interface TimerPickerProps {
         minutes: number;
         seconds: number;
     }) => void;
-    initialHours?: number;
-    initialMinutes?: number;
-    initialSeconds?: number;
+    initialValue?: {
+        hours?: number;
+        minutes?: number;
+        seconds?: number;
+    };
     aggressivelyGetLatestDuration?: boolean;
     use12HourPicker?: boolean;
     amLabel?: string;
@@ -73,9 +75,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
         {
             allowFontScaling = false,
             onDurationChange,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
+            initialValue,
             hideHours = false,
             hideMinutes = false,
             hideSeconds = false,
@@ -115,9 +115,21 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             [checkedPadWithNItems, customStyles]
         );
 
-        const [selectedHours, setSelectedHours] = useState(initialHours);
-        const [selectedMinutes, setSelectedMinutes] = useState(initialMinutes);
-        const [selectedSeconds, setSelectedSeconds] = useState(initialSeconds);
+        const safeInitialValue = {
+            hours: initialValue?.hours ?? 0,
+            minutes: initialValue?.minutes ?? 0,
+            seconds: initialValue?.seconds ?? 0,
+        };
+
+        const [selectedHours, setSelectedHours] = useState(
+            safeInitialValue.hours
+        );
+        const [selectedMinutes, setSelectedMinutes] = useState(
+            safeInitialValue.minutes
+        );
+        const [selectedSeconds, setSelectedSeconds] = useState(
+            safeInitialValue.seconds
+        );
 
         useEffect(() => {
             onDurationChange?.({
@@ -134,9 +146,9 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
 
         useImperativeHandle(ref, () => ({
             reset: (options) => {
-                setSelectedHours(initialHours);
-                setSelectedMinutes(initialMinutes);
-                setSelectedSeconds(initialSeconds);
+                setSelectedHours(safeInitialValue.hours);
+                setSelectedMinutes(safeInitialValue.minutes);
+                setSelectedSeconds(safeInitialValue.seconds);
                 hoursDurationScrollRef.current?.reset(options);
                 minutesDurationScrollRef.current?.reset(options);
                 secondsDurationScrollRef.current?.reset(options);
@@ -175,7 +187,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                             hourLabel ?? (!use12HourPicker ? "h" : undefined)
                         }
                         isDisabled={hoursPickerIsDisabled}
-                        initialValue={initialHours}
+                        initialValue={safeInitialValue.hours}
                         allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
@@ -205,7 +217,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         label={minuteLabel ?? "m"}
                         isDisabled={minutesPickerIsDisabled}
-                        initialValue={initialMinutes}
+                        initialValue={safeInitialValue.minutes}
                         allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
@@ -233,7 +245,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         numberOfItems={59}
                         label={secondLabel ?? "s"}
                         isDisabled={secondsPickerIsDisabled}
-                        initialValue={initialSeconds}
+                        initialValue={safeInitialValue.seconds}
                         allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration

package/src/components/TimerPickerModal.styles.ts

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { StyleSheet } from "react-native";
+import { StyleSheet, TextStyle, ViewStyle } from "react-native";
 
 import type { CustomTimerPickerStyles } from "./TimerPicker/TimerPicker.styles";
 
 export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
-    container?: any;
-    contentContainer?: any;
-    buttonContainer?: any;
-    button?: any;
-    cancelButton?: any;
-    confirmButton?: any;
-    modalTitle?: any;
+    container?: ViewStyle;
+    contentContainer?: ViewStyle;
+    buttonContainer?: ViewStyle;
+    button?: TextStyle;
+    cancelButton?: TextStyle;
+    confirmButton?: TextStyle;
+    modalTitle?: TextStyle;
 }
 
 const DARK_MODE_BACKGROUND_COLOR = "#232323";

package/src/components/index.tsx

@@ -70,9 +70,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             onCancel,
             onDurationChange,
             closeOnOverlayPress,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
+            initialValue,
             hideHours = false,
             hideMinutes = false,
             hideSeconds = false,
@@ -114,33 +112,32 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
 
         const timerPickerRef = useRef<TimerPickerRef>(null);
 
-        const [selectedDuration, setSelectedDuration] = useState({
-            hours: initialHours,
-            minutes: initialMinutes,
-            seconds: initialSeconds,
-        });
-        const [confirmedDuration, setConfirmedDuration] = useState({
-            hours: initialHours,
-            minutes: initialMinutes,
-            seconds: initialSeconds,
-        });
+        const safeInitialValue = {
+            hours: initialValue?.hours ?? 0,
+            minutes: initialValue?.minutes ?? 0,
+            seconds: initialValue?.seconds ?? 0,
+        };
+
+        const [selectedDuration, setSelectedDuration] =
+            useState(safeInitialValue);
+        const [confirmedDuration, setConfirmedDuration] =
+            useState(safeInitialValue);
 
         const reset = (options?: { animated?: boolean }) => {
-            const initialDuration = {
-                hours: initialHours,
-                minutes: initialMinutes,
-                seconds: initialSeconds,
-            };
-            setSelectedDuration(initialDuration);
-            setConfirmedDuration(initialDuration);
+            setSelectedDuration(safeInitialValue);
+            setConfirmedDuration(safeInitialValue);
             timerPickerRef.current?.reset(options);
         };
 
-        // reset state if the initial times change
+        // reset state if the initial value changes
         useEffect(() => {
             reset();
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [initialHours, initialMinutes, initialSeconds]);
+        }, [
+            safeInitialValue.hours,
+            safeInitialValue.minutes,
+            safeInitialValue.seconds,
+        ]);
 
         const hideModalHandler = () => {
             setSelectedDuration({
@@ -217,9 +214,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                         <TimerPicker
                             ref={timerPickerRef}
                             onDurationChange={durationChangeHandler}
-                            initialHours={confirmedDuration.hours}
-                            initialMinutes={confirmedDuration.minutes}
-                            initialSeconds={confirmedDuration.seconds}
+                            initialValue={confirmedDuration}
                             aggressivelyGetLatestDuration={true}
                             hideHours={hideHours}
                             hideMinutes={hideMinutes}