react-native-timer-picker 1.9.0 → 1.10.0

package/src/components/TimerPicker/index.tsx

@@ -1,196 +0,0 @@
-import React, {
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-    useState,
-} from "react";
-
-import { View } from "react-native";
-
-import DurationScroll from "../DurationScroll";
-import type { DurationScrollRef } from "../DurationScroll/types";
-
-import { generateStyles } from "./styles";
-import type { TimerPickerProps, TimerPickerRef } from "./types";
-
-const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
-    (props, ref) => {
-        const {
-            aggressivelyGetLatestDuration = false,
-            allowFontScaling = false,
-            amLabel = "am",
-            disableInfiniteScroll = false,
-            FlatList,
-            hideHours = false,
-            hideMinutes = false,
-            hideSeconds = false,
-            hourLabel,
-            hourLimit,
-            hoursPickerIsDisabled = false,
-            initialValue,
-            minuteLabel,
-            minuteLimit,
-            minutesPickerIsDisabled = false,
-            onDurationChange,
-            padWithNItems = 1,
-            pickerContainerProps,
-            pmLabel = "pm",
-            secondLabel,
-            secondLimit,
-            secondsPickerIsDisabled = false,
-            styles: customStyles,
-            use12HourPicker = false,
-            ...otherProps
-        } = props;
-
-        const checkedPadWithNItems =
-            padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
-
-        const styles = useMemo(
-            () =>
-                generateStyles(customStyles, {
-                    padWithNItems: checkedPadWithNItems,
-                }),
-
-            [checkedPadWithNItems, customStyles]
-        );
-
-        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?.({
-                hours: selectedHours,
-                minutes: selectedMinutes,
-                seconds: selectedSeconds,
-            });
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [selectedHours, selectedMinutes, selectedSeconds]);
-
-        const hoursDurationScrollRef = useRef<DurationScrollRef>(null);
-        const minutesDurationScrollRef = useRef<DurationScrollRef>(null);
-        const secondsDurationScrollRef = useRef<DurationScrollRef>(null);
-
-        useImperativeHandle(ref, () => ({
-            reset: (options) => {
-                setSelectedHours(safeInitialValue.hours);
-                setSelectedMinutes(safeInitialValue.minutes);
-                setSelectedSeconds(safeInitialValue.seconds);
-                hoursDurationScrollRef.current?.reset(options);
-                minutesDurationScrollRef.current?.reset(options);
-                secondsDurationScrollRef.current?.reset(options);
-            },
-            setValue: (value, options) => {
-                setSelectedHours(value.hours);
-                setSelectedMinutes(value.minutes);
-                setSelectedSeconds(value.seconds);
-                hoursDurationScrollRef.current?.setValue(value.hours, options);
-                minutesDurationScrollRef.current?.setValue(
-                    value.minutes,
-                    options
-                );
-                secondsDurationScrollRef.current?.setValue(
-                    value.seconds,
-                    options
-                );
-            },
-            latestDuration: {
-                hours: hoursDurationScrollRef.current?.latestDuration,
-                minutes: minutesDurationScrollRef.current?.latestDuration,
-                seconds: secondsDurationScrollRef.current?.latestDuration,
-            },
-        }));
-
-        return (
-            <View
-                {...pickerContainerProps}
-                style={styles.pickerContainer}
-                testID="timer-picker">
-                {!hideHours ? (
-                    <DurationScroll
-                        ref={hoursDurationScrollRef}
-                        aggressivelyGetLatestDuration={
-                            aggressivelyGetLatestDuration
-                        }
-                        allowFontScaling={allowFontScaling}
-                        amLabel={amLabel}
-                        disableInfiniteScroll={disableInfiniteScroll}
-                        initialValue={safeInitialValue.hours}
-                        is12HourPicker={use12HourPicker}
-                        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}
-                        aggressivelyGetLatestDuration={
-                            aggressivelyGetLatestDuration
-                        }
-                        allowFontScaling={allowFontScaling}
-                        disableInfiniteScroll={disableInfiniteScroll}
-                        initialValue={safeInitialValue.minutes}
-                        isDisabled={minutesPickerIsDisabled}
-                        label={minuteLabel ?? "m"}
-                        limit={minuteLimit}
-                        numberOfItems={59}
-                        onDurationChange={setSelectedMinutes}
-                        padNumbersWithZero
-                        padWithNItems={checkedPadWithNItems}
-                        styles={styles}
-                        testID="duration-scroll-minute"
-                        {...otherProps}
-                    />
-                ) : null}
-                {!hideSeconds ? (
-                    <DurationScroll
-                        ref={secondsDurationScrollRef}
-                        aggressivelyGetLatestDuration={
-                            aggressivelyGetLatestDuration
-                        }
-                        allowFontScaling={allowFontScaling}
-                        disableInfiniteScroll={disableInfiniteScroll}
-                        initialValue={safeInitialValue.seconds}
-                        isDisabled={secondsPickerIsDisabled}
-                        label={secondLabel ?? "s"}
-                        limit={secondLimit}
-                        numberOfItems={59}
-                        onDurationChange={setSelectedSeconds}
-                        padNumbersWithZero
-                        padWithNItems={checkedPadWithNItems}
-                        styles={styles}
-                        testID="duration-scroll-second"
-                        {...otherProps}
-                    />
-                ) : null}
-            </View>
-        );
-    }
-);
-
-export default React.memo(TimerPicker);

package/src/components/TimerPicker/styles.ts

@@ -1,123 +0,0 @@
-import { StyleSheet } from "react-native";
-import type { TextStyle, ViewStyle } from "react-native";
-
-export interface CustomTimerPickerStyles {
-    backgroundColor?: string;
-    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";
-const DARK_MODE_TEXT_COLOR = "#E9E9E9";
-const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
-const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
-
-export const generateStyles = (
-    customStyles: CustomTimerPickerStyles | undefined,
-    options: { padWithNItems: number }
-) =>
-    StyleSheet.create({
-        pickerContainer: {
-            flexDirection: "row",
-            marginRight: "8%",
-            backgroundColor:
-                customStyles?.backgroundColor ??
-                (customStyles?.theme === "dark"
-                    ? DARK_MODE_BACKGROUND_COLOR
-                    : LIGHT_MODE_BACKGROUND_COLOR),
-            ...customStyles?.pickerContainer,
-        },
-        pickerLabelContainer: {
-            position: "absolute",
-            right: 4,
-            top: 0,
-            bottom: 0,
-            justifyContent: "center",
-            minWidth:
-                (customStyles?.pickerLabel?.fontSize ??
-                    customStyles?.text?.fontSize ??
-                    25) * 0.65,
-            ...customStyles?.pickerLabelContainer,
-        },
-        pickerLabel: {
-            fontSize: 18,
-            fontWeight: "bold",
-            marginTop:
-                (customStyles?.pickerItem?.fontSize ??
-                    customStyles?.text?.fontSize ??
-                    25) / 6,
-            color:
-                customStyles?.theme === "dark"
-                    ? DARK_MODE_TEXT_COLOR
-                    : LIGHT_MODE_TEXT_COLOR,
-            ...customStyles?.text,
-            ...customStyles?.pickerLabel,
-        },
-        pickerItemContainer: {
-            flexDirection: "row",
-            height: 50,
-            justifyContent: "center",
-            alignItems: "center",
-            width: (customStyles?.pickerItem?.fontSize ?? 25) * 3.6,
-            ...customStyles?.pickerItemContainer,
-        },
-        pickerItem: {
-            textAlignVertical: "center",
-            fontSize: 25,
-            color:
-                customStyles?.theme === "dark"
-                    ? DARK_MODE_TEXT_COLOR
-                    : LIGHT_MODE_TEXT_COLOR,
-            ...customStyles?.text,
-            ...customStyles?.pickerItem,
-        },
-        pickerAmPmContainer: {
-            position: "absolute",
-            right: 0,
-            top: 0,
-            bottom: 0,
-            justifyContent: "center",
-            ...customStyles?.pickerLabelContainer,
-            ...customStyles?.pickerAmPmContainer,
-        },
-        pickerAmPmLabel: {
-            fontSize: 18,
-            fontWeight: "bold",
-            marginTop: (customStyles?.pickerItem?.fontSize ?? 25) / 6,
-            color:
-                customStyles?.theme === "dark"
-                    ? DARK_MODE_TEXT_COLOR
-                    : LIGHT_MODE_TEXT_COLOR,
-            ...customStyles?.text,
-            ...customStyles?.pickerLabel,
-            ...customStyles?.pickerAmPmLabel,
-        },
-        disabledPickerContainer: {
-            opacity: 0.4,
-            ...customStyles?.disabledPickerContainer,
-        },
-        disabledPickerItem: {
-            opacity: 0.2,
-            ...customStyles?.disabledPickerItem,
-        },
-        pickerGradientOverlay: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            height:
-                options.padWithNItems === 0
-                    ? "30%"
-                    : (customStyles?.pickerItemContainer?.height ?? 50) * 0.8,
-            ...customStyles?.pickerGradientOverlay,
-        },
-    });

package/src/components/TimerPicker/types.ts

@@ -1,74 +0,0 @@
-import type { MutableRefObject } from "react";
-
-import type { View } from "react-native";
-
-import type {
-    LinearGradientProps,
-    SoundAssetType,
-    LimitType,
-    CustomFlatList,
-} 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;
-    FlatList?: CustomFlatList;
-    // 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/TimerPickerModal/index.tsx

@@ -1,190 +0,0 @@
-import React, {
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react";
-
-import { View, Text, TouchableOpacity } from "react-native";
-
-import Modal from "../Modal";
-import TimerPicker from "../TimerPicker";
-import type { TimerPickerRef } from "../TimerPicker/types";
-
-import { generateStyles } from "./styles";
-import type { TimerPickerModalRef, TimerPickerModalProps } from "./types";
-
-const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
-    (props, ref) => {
-        const {
-            buttonContainerProps,
-            buttonTouchableOpacityProps,
-            cancelButtonText = "Cancel",
-            closeOnOverlayPress,
-            confirmButtonText = "Confirm",
-            containerProps,
-            contentContainerProps,
-            hideCancelButton = false,
-            initialValue,
-            modalProps,
-            modalTitle,
-            modalTitleProps,
-            onCancel,
-            onConfirm,
-            onDurationChange,
-            setIsVisible,
-            styles: customStyles,
-            visible,
-            ...otherProps
-        } = props;
-
-        const styles = generateStyles(customStyles);
-
-        const timerPickerRef = useRef<TimerPickerRef>(null);
-
-        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 }) => {
-            setSelectedDuration(safeInitialValue);
-            setConfirmedDuration(safeInitialValue);
-            timerPickerRef.current?.reset(options);
-        };
-
-        // reset state if the initial value changes
-        useEffect(() => {
-            reset();
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [
-            safeInitialValue.hours,
-            safeInitialValue.minutes,
-            safeInitialValue.seconds,
-        ]);
-
-        const hideModalHandler = () => {
-            setSelectedDuration({
-                hours: confirmedDuration.hours,
-                minutes: confirmedDuration.minutes,
-                seconds: confirmedDuration.seconds,
-            });
-            setIsVisible(false);
-        };
-
-        const confirmHandler = () => {
-            const latestDuration = timerPickerRef.current?.latestDuration;
-
-            const newDuration = {
-                hours: latestDuration?.hours?.current ?? selectedDuration.hours,
-                minutes:
-                    latestDuration?.minutes?.current ??
-                    selectedDuration.minutes,
-                seconds:
-                    latestDuration?.seconds?.current ??
-                    selectedDuration.seconds,
-            };
-            setConfirmedDuration(newDuration);
-            onConfirm(newDuration);
-        };
-
-        const cancelHandler = () => {
-            setIsVisible(false);
-            setSelectedDuration(confirmedDuration);
-            onCancel?.();
-        };
-
-        // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
-        const durationChangeHandler = useCallback(
-            (duration: { hours: number; minutes: number; seconds: number }) => {
-                setSelectedDuration(duration);
-                onDurationChange?.(duration);
-            },
-            [onDurationChange]
-        );
-
-        useImperativeHandle(ref, () => ({
-            reset,
-            setValue: (value, options) => {
-                setSelectedDuration(value);
-                setConfirmedDuration(value);
-                timerPickerRef.current?.setValue(value, options);
-            },
-            latestDuration: {
-                hours: timerPickerRef.current?.latestDuration?.hours,
-                minutes: timerPickerRef.current?.latestDuration?.minutes,
-                seconds: timerPickerRef.current?.latestDuration?.seconds,
-            },
-        }));
-
-        return (
-            <Modal
-                isVisible={visible}
-                onOverlayPress={
-                    closeOnOverlayPress ? hideModalHandler : undefined
-                }
-                {...modalProps}
-                testID="timer-picker-modal">
-                <View {...containerProps} style={styles.container}>
-                    <View
-                        {...contentContainerProps}
-                        style={styles.contentContainer}>
-                        {modalTitle ? (
-                            <Text
-                                {...modalTitleProps}
-                                style={styles.modalTitle}>
-                                {modalTitle}
-                            </Text>
-                        ) : null}
-                        <TimerPicker
-                            ref={timerPickerRef}
-                            initialValue={confirmedDuration}
-                            {...otherProps}
-                            aggressivelyGetLatestDuration
-                            onDurationChange={durationChangeHandler}
-                            styles={customStyles}
-                        />
-                        <View
-                            {...buttonContainerProps}
-                            style={styles.buttonContainer}>
-                            {!hideCancelButton ? (
-                                <TouchableOpacity
-                                    {...buttonTouchableOpacityProps}
-                                    onPress={cancelHandler}>
-                                    <Text
-                                        style={[
-                                            styles.button,
-                                            styles.cancelButton,
-                                        ]}>
-                                        {cancelButtonText}
-                                    </Text>
-                                </TouchableOpacity>
-                            ) : null}
-                            <TouchableOpacity
-                                {...buttonTouchableOpacityProps}
-                                onPress={confirmHandler}>
-                                <Text
-                                    style={[
-                                        styles.button,
-                                        styles.confirmButton,
-                                    ]}>
-                                    {confirmButtonText}
-                                </Text>
-                            </TouchableOpacity>
-                        </View>
-                    </View>
-                </View>
-            </Modal>
-        );
-    }
-);
-
-export default React.memo(TimerPickerModal);

package/src/components/TimerPickerModal/styles.ts

@@ -1,88 +0,0 @@
-import { StyleSheet } from "react-native";
-import type { TextStyle, ViewStyle } from "react-native";
-
-import type { CustomTimerPickerStyles } from "../TimerPicker/styles";
-
-export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
-    button?: TextStyle;
-    buttonContainer?: ViewStyle;
-    cancelButton?: TextStyle;
-    confirmButton?: TextStyle;
-    container?: ViewStyle;
-    contentContainer?: ViewStyle;
-    modalTitle?: TextStyle;
-}
-
-const DARK_MODE_BACKGROUND_COLOR = "#232323";
-const DARK_MODE_TEXT_COLOR = "#E9E9E9";
-const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
-const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
-
-export const generateStyles = (
-    customStyles: CustomTimerPickerModalStyles | undefined
-) =>
-    StyleSheet.create({
-        container: {
-            justifyContent: "center",
-            alignItems: "center",
-            overflow: "hidden",
-            ...customStyles?.container,
-        },
-        contentContainer: {
-            backgroundColor:
-                customStyles?.backgroundColor ??
-                (customStyles?.theme === "dark"
-                    ? DARK_MODE_BACKGROUND_COLOR
-                    : LIGHT_MODE_BACKGROUND_COLOR),
-            justifyContent: "center",
-            alignItems: "center",
-            borderRadius: 20,
-            padding: 20,
-            ...customStyles?.contentContainer,
-        },
-        buttonContainer: {
-            flexDirection: "row",
-            marginTop: 25,
-            ...customStyles?.buttonContainer,
-        },
-        button: {
-            marginHorizontal: 12,
-            paddingVertical: 10,
-            paddingHorizontal: 20,
-            borderWidth: 1,
-            borderRadius: 10,
-            fontSize: 16,
-            overflow: "hidden",
-            ...customStyles?.text,
-            ...customStyles?.button,
-        },
-        cancelButton: {
-            borderColor: "gray",
-            color:
-                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "gray",
-            backgroundColor:
-                customStyles?.theme === "dark" ? "gray" : undefined,
-            ...customStyles?.text,
-            ...customStyles?.cancelButton,
-        },
-        confirmButton: {
-            borderColor: "green",
-            color:
-                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "green",
-            backgroundColor:
-                customStyles?.theme === "dark" ? "green" : undefined,
-            ...customStyles?.text,
-            ...customStyles?.confirmButton,
-        },
-        modalTitle: {
-            fontSize: 24,
-            fontWeight: "600",
-            marginBottom: 15,
-            color:
-                customStyles?.theme === "dark"
-                    ? DARK_MODE_TEXT_COLOR
-                    : LIGHT_MODE_TEXT_COLOR,
-            ...customStyles?.text,
-            ...customStyles?.modalTitle,
-        },
-    });