react-native-timer-picker 1.5.4 → 1.7.0

package/package.json

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

package/src/components/TimerPicker/DurationScroll.tsx

@@ -55,6 +55,7 @@ interface DurationScrollProps {
     onDurationChange: (duration: number) => void;
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
+    isDisabled?: boolean;
     limit?: LimitType;
     aggressivelyGetLatestDuration: boolean;
     is12HourPicker?: boolean;
@@ -83,6 +84,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             padNumbersWithZero = false,
             disableInfiniteScroll = false,
             limit,
+            isDisabled,
             aggressivelyGetLatestDuration,
             allowFontScaling = false,
             is12HourPicker,
@@ -336,11 +338,16 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
         return (
             <View
                 testID={testID}
-                style={{
-                    height:
-                        styles.pickerItemContainer.height * numberOfItemsToShow,
-                    overflow: "visible",
-                }}>
+                pointerEvents={isDisabled ? "none" : undefined}
+                style={[
+                    {
+                        height:
+                            styles.pickerItemContainer.height *
+                            numberOfItemsToShow,
+                        overflow: "visible",
+                    },
+                    isDisabled && styles.disabledPickerContainer,
+                ]}>
                 <FlatList
                     ref={flatListRef}
                     data={data}
@@ -353,6 +360,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     decelerationRate={0.88}
                     scrollEventThrottle={16}
                     snapToAlignment="start"
+                    scrollEnabled={!isDisabled}
                     // used in place of snapToOffset due to bug on Android
                     snapToOffsets={[...Array(data.length)].map(
                         (_, i) => i * styles.pickerItemContainer.height

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

@@ -1,19 +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;
-    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";
@@ -101,6 +102,10 @@ export const generateStyles = (
             ...customStyles?.pickerLabel,
             ...customStyles?.pickerAmPmLabel,
         },
+        disabledPickerContainer: {
+            opacity: 0.4,
+            ...customStyles?.disabledPickerContainer,
+        },
         disabledPickerItem: {
             opacity: 0.2,
             ...customStyles?.disabledPickerItem,

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;
@@ -48,6 +50,9 @@ export interface TimerPickerProps {
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
+    hoursPickerIsDisabled?: boolean;
+    minutesPickerIsDisabled?: boolean;
+    secondsPickerIsDisabled?: boolean;
     hourLimit?: LimitType;
     minuteLimit?: LimitType;
     secondLimit?: LimitType;
@@ -70,12 +75,13 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
         {
             allowFontScaling = false,
             onDurationChange,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
+            initialValue,
             hideHours = false,
             hideMinutes = false,
             hideSeconds = false,
+            hoursPickerIsDisabled = false,
+            minutesPickerIsDisabled = false,
+            secondsPickerIsDisabled = false,
             hourLimit,
             minuteLimit,
             secondLimit,
@@ -109,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?.({
@@ -128,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);
@@ -168,7 +186,8 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         label={
                             hourLabel ?? (!use12HourPicker ? "h" : undefined)
                         }
-                        initialValue={initialHours}
+                        isDisabled={hoursPickerIsDisabled}
+                        initialValue={safeInitialValue.hours}
                         allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
@@ -197,7 +216,8 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         ref={minutesDurationScrollRef}
                         numberOfItems={59}
                         label={minuteLabel ?? "m"}
-                        initialValue={initialMinutes}
+                        isDisabled={minutesPickerIsDisabled}
+                        initialValue={safeInitialValue.minutes}
                         allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
@@ -224,7 +244,8 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         ref={secondsDurationScrollRef}
                         numberOfItems={59}
                         label={secondLabel ?? "s"}
-                        initialValue={initialSeconds}
+                        isDisabled={secondsPickerIsDisabled}
+                        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,12 +70,13 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             onCancel,
             onDurationChange,
             closeOnOverlayPress,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
+            initialValue,
             hideHours = false,
             hideMinutes = false,
             hideSeconds = false,
+            hoursPickerIsDisabled = false,
+            minutesPickerIsDisabled = false,
+            secondsPickerIsDisabled = false,
             hourLimit,
             minuteLimit,
             secondLimit,
@@ -111,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({
@@ -214,13 +214,14 @@ 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}
                             hideSeconds={hideSeconds}
+                            hoursPickerIsDisabled={hoursPickerIsDisabled}
+                            minutesPickerIsDisabled={minutesPickerIsDisabled}
+                            secondsPickerIsDisabled={secondsPickerIsDisabled}
                             hourLimit={hourLimit}
                             minuteLimit={minuteLimit}
                             secondLimit={secondLimit}