react-native-timer-picker 1.6.0 → 1.8.0

package/src/components/Modal/types.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+
+import type { ViewStyle } from "react-native";
+import type { Modal as ReactNativeModal } from "react-native";
+
+export interface ModalProps {
+    animationDuration?: number;
+    children?: React.ReactElement;
+    contentStyle?: ViewStyle;
+    isVisible?: boolean;
+    modalProps?: ComponentProps<typeof ReactNativeModal>;
+    onHide?: () => void;
+    onOverlayPress?: () => void;
+    overlayOpacity?: number;
+    overlayStyle?: ViewStyle;
+    testID?: string;
+}

package/src/components/TimerPicker/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-    MutableRefObject,
     forwardRef,
     useEffect,
     useImperativeHandle,
@@ -7,102 +6,44 @@ import React, {
     useRef,
     useState,
 } from "react";
-import { View } from "react-native";
-
-import DurationScroll, { DurationScrollRef, LimitType } from "./DurationScroll";
 
-import { generateStyles, CustomTimerPickerStyles } from "./TimerPicker.styles";
-import { LinearGradientProps } from "./DurationScroll";
+import { View } from "react-native";
 
-export interface TimerPickerRef {
-    reset: (options?: { animated?: boolean }) => void;
-    setValue: (
-        value: {
-            hours: number;
-            minutes: number;
-            seconds: number;
-        },
-        options?: { animated?: boolean }
-    ) => void;
-    latestDuration: {
-        hours: MutableRefObject<number> | undefined;
-        minutes: MutableRefObject<number> | undefined;
-        seconds: MutableRefObject<number> | undefined;
-    };
-}
+import DurationScroll from "../DurationScroll";
+import type { DurationScrollRef } from "../DurationScroll/types";
 
-export interface TimerPickerProps {
-    allowFontScaling?: boolean;
-    onDurationChange?: (duration: {
-        hours: number;
-        minutes: number;
-        seconds: number;
-    }) => void;
-    initialHours?: number;
-    initialMinutes?: number;
-    initialSeconds?: number;
-    aggressivelyGetLatestDuration?: boolean;
-    use12HourPicker?: boolean;
-    amLabel?: string;
-    pmLabel?: string;
-    hideHours?: boolean;
-    hideMinutes?: boolean;
-    hideSeconds?: boolean;
-    hoursPickerIsDisabled?: boolean;
-    minutesPickerIsDisabled?: boolean;
-    secondsPickerIsDisabled?: boolean;
-    hourLimit?: LimitType;
-    minuteLimit?: LimitType;
-    secondLimit?: LimitType;
-    hourLabel?: string | React.ReactElement;
-    minuteLabel?: string | React.ReactElement;
-    secondLabel?: string | React.ReactElement;
-    padWithNItems?: number;
-    disableInfiniteScroll?: boolean;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    LinearGradient?: any;
-    pickerContainerProps?: React.ComponentProps<typeof View>;
-    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    styles?: CustomTimerPickerStyles;
-}
+import { generateStyles } from "./styles";
+import type { TimerPickerProps, TimerPickerRef } from "./types";
 
 const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
-    (
-        {
+    (props, ref) => {
+        const {
+            aggressivelyGetLatestDuration = false,
             allowFontScaling = false,
-            onDurationChange,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
+            amLabel = "am",
+            disableInfiniteScroll = false,
             hideHours = false,
             hideMinutes = false,
             hideSeconds = false,
-            hoursPickerIsDisabled = false,
-            minutesPickerIsDisabled = false,
-            secondsPickerIsDisabled = false,
-            hourLimit,
-            minuteLimit,
-            secondLimit,
             hourLabel,
+            hourLimit,
+            hoursPickerIsDisabled = false,
+            initialValue,
             minuteLabel,
-            secondLabel,
+            minuteLimit,
+            minutesPickerIsDisabled = false,
+            onDurationChange,
             padWithNItems = 1,
-            disableInfiniteScroll = false,
-            aggressivelyGetLatestDuration = false,
-            use12HourPicker = false,
-            amLabel = "am",
-            pmLabel = "pm",
-            LinearGradient,
             pickerContainerProps,
-            pickerGradientOverlayProps,
-            topPickerGradientOverlayProps,
-            bottomPickerGradientOverlayProps,
+            pmLabel = "pm",
+            secondLabel,
+            secondLimit,
+            secondsPickerIsDisabled = false,
             styles: customStyles,
-        },
-        ref
-    ): React.ReactElement => {
+            use12HourPicker = false,
+            ...otherProps
+        } = props;
+
         const checkedPadWithNItems =
             padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
 
@@ -115,9 +56,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 +87,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);
@@ -170,89 +123,68 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                 {!hideHours ? (
                     <DurationScroll
                         ref={hoursDurationScrollRef}
-                        numberOfItems={23}
-                        label={
-                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
-                        }
-                        isDisabled={hoursPickerIsDisabled}
-                        initialValue={initialHours}
-                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }
-                        onDurationChange={setSelectedHours}
-                        pickerGradientOverlayProps={pickerGradientOverlayProps}
-                        topPickerGradientOverlayProps={
-                            topPickerGradientOverlayProps
-                        }
-                        bottomPickerGradientOverlayProps={
-                            bottomPickerGradientOverlayProps
-                        }
+                        allowFontScaling={allowFontScaling}
+                        amLabel={amLabel}
                         disableInfiniteScroll={disableInfiniteScroll}
-                        padWithNItems={checkedPadWithNItems}
-                        limit={hourLimit}
-                        LinearGradient={LinearGradient}
+                        initialValue={safeInitialValue.hours}
                         is12HourPicker={use12HourPicker}
-                        amLabel={amLabel}
+                        isDisabled={hoursPickerIsDisabled}
+                        label={
+                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
+                        }
+                        limit={hourLimit}
+                        numberOfItems={23}
+                        onDurationChange={setSelectedHours}
+                        padWithNItems={checkedPadWithNItems}
                         pmLabel={pmLabel}
                         styles={styles}
                         testID="duration-scroll-hour"
+                        {...otherProps}
                     />
                 ) : null}
                 {!hideMinutes ? (
                     <DurationScroll
                         ref={minutesDurationScrollRef}
-                        numberOfItems={59}
-                        label={minuteLabel ?? "m"}
-                        isDisabled={minutesPickerIsDisabled}
-                        initialValue={initialMinutes}
-                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }
+                        allowFontScaling={allowFontScaling}
+                        disableInfiniteScroll={disableInfiniteScroll}
+                        initialValue={safeInitialValue.minutes}
+                        isDisabled={minutesPickerIsDisabled}
+                        label={minuteLabel ?? "m"}
+                        limit={minuteLimit}
+                        numberOfItems={59}
                         onDurationChange={setSelectedMinutes}
                         padNumbersWithZero
-                        pickerGradientOverlayProps={pickerGradientOverlayProps}
-                        topPickerGradientOverlayProps={
-                            topPickerGradientOverlayProps
-                        }
-                        bottomPickerGradientOverlayProps={
-                            bottomPickerGradientOverlayProps
-                        }
-                        disableInfiniteScroll={disableInfiniteScroll}
                         padWithNItems={checkedPadWithNItems}
-                        limit={minuteLimit}
-                        LinearGradient={LinearGradient}
                         styles={styles}
                         testID="duration-scroll-minute"
+                        {...otherProps}
                     />
                 ) : null}
                 {!hideSeconds ? (
                     <DurationScroll
                         ref={secondsDurationScrollRef}
-                        numberOfItems={59}
-                        label={secondLabel ?? "s"}
-                        isDisabled={secondsPickerIsDisabled}
-                        initialValue={initialSeconds}
-                        allowFontScaling={allowFontScaling}
                         aggressivelyGetLatestDuration={
                             aggressivelyGetLatestDuration
                         }
+                        allowFontScaling={allowFontScaling}
+                        disableInfiniteScroll={disableInfiniteScroll}
+                        initialValue={safeInitialValue.seconds}
+                        isDisabled={secondsPickerIsDisabled}
+                        label={secondLabel ?? "s"}
+                        limit={secondLimit}
+                        numberOfItems={59}
                         onDurationChange={setSelectedSeconds}
                         padNumbersWithZero
-                        pickerGradientOverlayProps={pickerGradientOverlayProps}
-                        topPickerGradientOverlayProps={
-                            topPickerGradientOverlayProps
-                        }
-                        bottomPickerGradientOverlayProps={
-                            bottomPickerGradientOverlayProps
-                        }
-                        disableInfiniteScroll={disableInfiniteScroll}
                         padWithNItems={checkedPadWithNItems}
-                        limit={secondLimit}
-                        LinearGradient={LinearGradient}
                         styles={styles}
                         testID="duration-scroll-second"
+                        {...otherProps}
                     />
                 ) : null}
             </View>

package/src/components/TimerPicker/{TimerPicker.styles.ts → styles.ts}

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

package/src/components/TimerPicker/types.ts

@@ -0,0 +1,72 @@
+import type { MutableRefObject } from "react";
+
+import type { View } from "react-native";
+
+import type {
+    LinearGradientProps,
+    SoundAssetType,
+    LimitType,
+} from "../DurationScroll/types";
+
+import type { CustomTimerPickerStyles } from "./styles";
+
+export interface TimerPickerRef {
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
+    reset: (options?: { animated?: boolean }) => void;
+    setValue: (
+        value: {
+            hours: number;
+            minutes: number;
+            seconds: number;
+        },
+        options?: { animated?: boolean }
+    ) => void;
+}
+
+export interface TimerPickerProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Audio?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Haptics?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LinearGradient?: any;
+    aggressivelyGetLatestDuration?: boolean;
+    allowFontScaling?: boolean;
+    amLabel?: string;
+    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    clickSoundAsset?: SoundAssetType;
+    disableInfiniteScroll?: boolean;
+    hideHours?: boolean;
+    hideMinutes?: boolean;
+    hideSeconds?: boolean;
+    hourLabel?: string | React.ReactElement;
+    hourLimit?: LimitType;
+    hoursPickerIsDisabled?: boolean;
+    initialValue?: {
+        hours?: number;
+        minutes?: number;
+        seconds?: number;
+    };
+    minuteLabel?: string | React.ReactElement;
+    minuteLimit?: LimitType;
+    minutesPickerIsDisabled?: boolean;
+    onDurationChange?: (duration: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    padWithNItems?: number;
+    pickerContainerProps?: React.ComponentProps<typeof View>;
+    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    pmLabel?: string;
+    secondLabel?: string | React.ReactElement;
+    secondLimit?: LimitType;
+    secondsPickerIsDisabled?: boolean;
+    styles?: CustomTimerPickerStyles;
+    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    use12HourPicker?: boolean;
+}

package/src/components/{index.tsx → TimerPickerModal/index.tsx}

@@ -1,5 +1,4 @@
 import React, {
-    MutableRefObject,
     forwardRef,
     useCallback,
     useEffect,
@@ -7,140 +6,70 @@ import React, {
     useRef,
     useState,
 } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-
-import TimerPicker, { TimerPickerProps, TimerPickerRef } from "./TimerPicker";
-import Modal from "./Modal";
 
-import {
-    generateStyles,
-    CustomTimerPickerModalStyles,
-} from "./TimerPickerModal.styles";
+import { View, Text, TouchableOpacity } from "react-native";
 
-export interface TimerPickerModalRef {
-    reset: (options?: { animated?: boolean }) => void;
-    setValue: (
-        value: {
-            hours: number;
-            minutes: number;
-            seconds: number;
-        },
-        options?: { animated?: boolean }
-    ) => void;
-    latestDuration: {
-        hours: MutableRefObject<number> | undefined;
-        minutes: MutableRefObject<number> | undefined;
-        seconds: MutableRefObject<number> | undefined;
-    };
-}
+import Modal from "../Modal";
+import TimerPicker from "../TimerPicker";
+import type { TimerPickerRef } from "../TimerPicker/types";
 
-export interface TimerPickerModalProps extends TimerPickerProps {
-    visible: boolean;
-    setIsVisible: (isVisible: boolean) => void;
-    onConfirm: ({
-        hours,
-        minutes,
-        seconds,
-    }: {
-        hours: number;
-        minutes: number;
-        seconds: number;
-    }) => void;
-    onCancel?: () => void;
-    closeOnOverlayPress?: boolean;
-    hideCancelButton?: boolean;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
-    modalTitle?: string;
-    modalProps?: React.ComponentProps<typeof Modal>;
-    containerProps?: React.ComponentProps<typeof View>;
-    contentContainerProps?: React.ComponentProps<typeof View>;
-    buttonContainerProps?: React.ComponentProps<typeof View>;
-    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;
-    modalTitleProps?: React.ComponentProps<typeof Text>;
-    styles?: CustomTimerPickerModalStyles;
-}
+import { generateStyles } from "./styles";
+import type { TimerPickerModalRef, TimerPickerModalProps } from "./types";
 
 const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
-    (
-        {
-            visible,
-            setIsVisible,
-            onConfirm,
-            onCancel,
-            onDurationChange,
+    (props, ref) => {
+        const {
+            buttonContainerProps,
+            buttonTouchableOpacityProps,
+            cancelButtonText,
             closeOnOverlayPress,
-            initialHours = 0,
-            initialMinutes = 0,
-            initialSeconds = 0,
-            hideHours = false,
-            hideMinutes = false,
-            hideSeconds = false,
-            hoursPickerIsDisabled = false,
-            minutesPickerIsDisabled = false,
-            secondsPickerIsDisabled = false,
-            hourLimit,
-            minuteLimit,
-            secondLimit,
-            hourLabel,
-            minuteLabel,
-            secondLabel,
-            padWithNItems = 1,
-            disableInfiniteScroll = false,
-            allowFontScaling = false,
-            use12HourPicker,
-            amLabel,
-            pmLabel,
-            hideCancelButton = false,
-            confirmButtonText = "Confirm",
-            cancelButtonText = "Cancel",
-            modalTitle,
-            LinearGradient,
-            modalProps,
+            confirmButtonText,
             containerProps,
             contentContainerProps,
-            pickerContainerProps,
-            buttonContainerProps,
-            buttonTouchableOpacityProps,
+            hideCancelButton,
+            initialValue,
+            modalProps,
+            modalTitle,
             modalTitleProps,
-            pickerGradientOverlayProps,
-            topPickerGradientOverlayProps,
-            bottomPickerGradientOverlayProps,
+            onCancel,
+            onConfirm,
+            onDurationChange,
+            setIsVisible,
             styles: customStyles,
-        },
-        ref
-    ): React.ReactElement => {
+            visible,
+            ...otherProps
+        } = props;
+
         const styles = generateStyles(customStyles);
 
         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({
@@ -216,41 +145,9 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                         ) : null}
                         <TimerPicker
                             ref={timerPickerRef}
+                            initialValue={confirmedDuration}
+                            {...otherProps}
                             onDurationChange={durationChangeHandler}
-                            initialHours={confirmedDuration.hours}
-                            initialMinutes={confirmedDuration.minutes}
-                            initialSeconds={confirmedDuration.seconds}
-                            aggressivelyGetLatestDuration={true}
-                            hideHours={hideHours}
-                            hideMinutes={hideMinutes}
-                            hideSeconds={hideSeconds}
-                            hoursPickerIsDisabled={hoursPickerIsDisabled}
-                            minutesPickerIsDisabled={minutesPickerIsDisabled}
-                            secondsPickerIsDisabled={secondsPickerIsDisabled}
-                            hourLimit={hourLimit}
-                            minuteLimit={minuteLimit}
-                            secondLimit={secondLimit}
-                            hourLabel={hourLabel}
-                            minuteLabel={minuteLabel}
-                            secondLabel={secondLabel}
-                            padWithNItems={padWithNItems}
-                            disableInfiniteScroll={disableInfiniteScroll}
-                            allowFontScaling={allowFontScaling}
-                            use12HourPicker={use12HourPicker}
-                            amLabel={amLabel}
-                            pmLabel={pmLabel}
-                            LinearGradient={LinearGradient}
-                            pickerContainerProps={pickerContainerProps}
-                            pickerGradientOverlayProps={
-                                pickerGradientOverlayProps
-                            }
-                            topPickerGradientOverlayProps={
-                                topPickerGradientOverlayProps
-                            }
-                            bottomPickerGradientOverlayProps={
-                                bottomPickerGradientOverlayProps
-                            }
-                            styles={customStyles}
                         />
                         <View
                             {...buttonContainerProps}

package/src/components/{TimerPickerModal.styles.ts → TimerPickerModal/styles.ts}

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