react-native-timer-picker 1.7.0 → 1.8.1

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;
-    initialValue?: {
-        hours?: number;
-        minutes?: number;
-        seconds?: 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,
-            initialValue,
+            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;
 
@@ -182,89 +123,68 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                 {!hideHours ? (
                     <DurationScroll
                         ref={hoursDurationScrollRef}
-                        numberOfItems={23}
-                        label={
-                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
-                        }
-                        isDisabled={hoursPickerIsDisabled}
-                        initialValue={safeInitialValue.hours}
-                        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={safeInitialValue.minutes}
-                        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={safeInitialValue.seconds}
-                        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, TextStyle, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
+import type { TextStyle, ViewStyle } from "react-native";
 
 export interface CustomTimerPickerStyles {
-    theme?: "light" | "dark";
     backgroundColor?: string;
-    text?: TextStyle;
-    pickerContainer?: ViewStyle & { backgroundColor?: string };
-    pickerLabelContainer?: ViewStyle;
-    pickerLabel?: TextStyle;
-    pickerAmPmContainer?: ViewStyle;
-    pickerAmPmLabel?: TextStyle;
-    pickerItemContainer?: ViewStyle & { height?: number };
-    pickerItem?: TextStyle;
     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,107 +6,40 @@ 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 = "Cancel",
             closeOnOverlayPress,
-            initialValue,
-            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,
             containerProps,
             contentContainerProps,
-            pickerContainerProps,
-            buttonContainerProps,
-            buttonTouchableOpacityProps,
+            hideCancelButton = false,
+            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);
@@ -150,6 +82,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
 
         const confirmHandler = () => {
             const latestDuration = timerPickerRef.current?.latestDuration;
+
             const newDuration = {
                 hours: latestDuration?.hours?.current ?? selectedDuration.hours,
                 minutes:
@@ -213,38 +146,10 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                         ) : null}
                         <TimerPicker
                             ref={timerPickerRef}
-                            onDurationChange={durationChangeHandler}
                             initialValue={confirmedDuration}
-                            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
-                            }
+                            {...otherProps}
+                            aggressivelyGetLatestDuration
+                            onDurationChange={durationChangeHandler}
                             styles={customStyles}
                         />
                         <View
@@ -252,8 +157,8 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             style={styles.buttonContainer}>
                             {!hideCancelButton ? (
                                 <TouchableOpacity
-                                    onPress={cancelHandler}
-                                    {...buttonTouchableOpacityProps}>
+                                    {...buttonTouchableOpacityProps}
+                                    onPress={cancelHandler}>
                                     <Text
                                         style={[
                                             styles.button,
@@ -264,8 +169,8 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                                 </TouchableOpacity>
                             ) : null}
                             <TouchableOpacity
-                                onPress={confirmHandler}
-                                {...buttonTouchableOpacityProps}>
+                                {...buttonTouchableOpacityProps}
+                                onPress={confirmHandler}>
                                 <Text
                                     style={[
                                         styles.button,

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

@@ -1,15 +1,15 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { StyleSheet, TextStyle, ViewStyle } from "react-native";
+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?: ViewStyle;
-    contentContainer?: ViewStyle;
-    buttonContainer?: ViewStyle;
     button?: TextStyle;
+    buttonContainer?: ViewStyle;
     cancelButton?: TextStyle;
     confirmButton?: TextStyle;
+    container?: ViewStyle;
+    contentContainer?: ViewStyle;
     modalTitle?: TextStyle;
 }
 
@@ -30,9 +30,10 @@ export const generateStyles = (
         },
         contentContainer: {
             backgroundColor:
-                customStyles?.backgroundColor ?? customStyles?.theme === "dark"
+                customStyles?.backgroundColor ??
+                (customStyles?.theme === "dark"
                     ? DARK_MODE_BACKGROUND_COLOR
-                    : LIGHT_MODE_BACKGROUND_COLOR,
+                    : LIGHT_MODE_BACKGROUND_COLOR),
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 20,
@@ -75,7 +76,7 @@ export const generateStyles = (
         },
         modalTitle: {
             fontSize: 24,
-            fontWeight: "bold",
+            fontWeight: "600",
             marginBottom: 15,
             color:
                 customStyles?.theme === "dark"

package/src/components/TimerPickerModal/types.ts

@@ -0,0 +1,52 @@
+import type { MutableRefObject } from "react";
+
+import type { View, TouchableOpacity, Text } from "react-native";
+
+import type Modal from "../Modal";
+import type { TimerPickerProps } from "../TimerPicker/types";
+
+import type { CustomTimerPickerModalStyles } from "./styles";
+
+export interface TimerPickerModalRef {
+    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 TimerPickerModalProps extends TimerPickerProps {
+    buttonContainerProps?: React.ComponentProps<typeof View>;
+    buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;
+    cancelButtonText?: string;
+    closeOnOverlayPress?: boolean;
+    confirmButtonText?: string;
+    containerProps?: React.ComponentProps<typeof View>;
+    contentContainerProps?: React.ComponentProps<typeof View>;
+    hideCancelButton?: boolean;
+    modalProps?: React.ComponentProps<typeof Modal>;
+    modalTitle?: string;
+    modalTitleProps?: React.ComponentProps<typeof Text>;
+    onCancel?: () => void;
+    onConfirm: ({
+        hours,
+        minutes,
+        seconds,
+    }: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    setIsVisible: (isVisible: boolean) => void;
+    styles?: CustomTimerPickerModalStyles;
+    visible: boolean;
+}