react-native-timer-picker 1.2.7 → 1.2.9

package/src/components/TimerPickerModal.styles.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { StyleSheet } 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;
+}
+
+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: "bold",
+            marginBottom: 15,
+            color:
+                customStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : LIGHT_MODE_TEXT_COLOR,
+            ...customStyles?.text,
+            ...customStyles?.modalTitle,
+        },
+    });

package/src/components/index.tsx

@@ -0,0 +1,243 @@
+import React, {
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
+    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";
+
+export interface TimerPickerModalRef {
+    reset: (options?: { animated?: boolean }) => void;
+    setValue: (
+        value: {
+            hours: number;
+            minutes: number;
+            seconds: number;
+        },
+        options?: { animated?: boolean }
+    ) => void;
+}
+
+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;
+}
+
+const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
+    (
+        {
+            visible,
+            setIsVisible,
+            onConfirm,
+            onCancel,
+            onDurationChange,
+            closeOnOverlayPress,
+            initialHours = 0,
+            initialMinutes = 0,
+            initialSeconds = 0,
+            hideHours = false,
+            hideMinutes = false,
+            hideSeconds = false,
+            hourLimit,
+            minuteLimit,
+            secondLimit,
+            hourLabel = "h",
+            minuteLabel = "m",
+            secondLabel = "s",
+            padWithNItems = 1,
+            disableInfiniteScroll = false,
+            hideCancelButton = false,
+            confirmButtonText = "Confirm",
+            cancelButtonText = "Cancel",
+            modalTitle,
+            LinearGradient,
+            modalProps,
+            containerProps,
+            contentContainerProps,
+            pickerContainerProps,
+            buttonContainerProps,
+            buttonTouchableOpacityProps,
+            modalTitleProps,
+            pickerGradientOverlayProps,
+            topPickerGradientOverlayProps,
+            bottomPickerGradientOverlayProps,
+            styles: customStyles,
+        },
+        ref
+    ): React.ReactElement => {
+        const styles = generateStyles(customStyles);
+
+        const [selectedDuration, setSelectedDuration] = useState({
+            hours: initialHours,
+            minutes: initialMinutes,
+            seconds: initialSeconds,
+        });
+        const [confirmedDuration, setConfirmedDuration] = useState({
+            hours: initialHours,
+            minutes: initialMinutes,
+            seconds: initialSeconds,
+        });
+
+        const hideModal = () => {
+            setSelectedDuration({
+                hours: confirmedDuration.hours,
+                minutes: confirmedDuration.minutes,
+                seconds: confirmedDuration.seconds,
+            });
+            setIsVisible(false);
+        };
+
+        const confirm = () => {
+            setConfirmedDuration(selectedDuration);
+            onConfirm(selectedDuration);
+        };
+
+        const cancel = () => {
+            setIsVisible(false);
+            setSelectedDuration(confirmedDuration);
+            onCancel?.();
+        };
+
+        // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
+        const durationChange = useCallback(
+            (duration: { hours: number; minutes: number; seconds: number }) => {
+                setSelectedDuration(duration);
+                onDurationChange?.(duration);
+            },
+            [onDurationChange]
+        );
+
+        const timerPickerRef = useRef<TimerPickerRef>(null);
+
+        useImperativeHandle(ref, () => ({
+            reset: (options) => {
+                const initialDuration = {
+                    hours: initialHours,
+                    minutes: initialMinutes,
+                    seconds: initialSeconds,
+                };
+                setSelectedDuration(initialDuration);
+                setConfirmedDuration(initialDuration);
+                timerPickerRef.current?.reset(options);
+            },
+            setValue: (value, options) => {
+                setSelectedDuration(value);
+                setConfirmedDuration(value);
+                timerPickerRef.current?.setValue(value, options);
+            },
+        }));
+
+        return (
+            <Modal
+                isVisible={visible}
+                onOverlayPress={closeOnOverlayPress ? hideModal : 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}
+                            onDurationChange={durationChange}
+                            initialHours={confirmedDuration.hours}
+                            initialMinutes={confirmedDuration.minutes}
+                            initialSeconds={confirmedDuration.seconds}
+                            hideHours={hideHours}
+                            hideMinutes={hideMinutes}
+                            hideSeconds={hideSeconds}
+                            hourLimit={hourLimit}
+                            minuteLimit={minuteLimit}
+                            secondLimit={secondLimit}
+                            hourLabel={hourLabel}
+                            minuteLabel={minuteLabel}
+                            secondLabel={secondLabel}
+                            padWithNItems={padWithNItems}
+                            disableInfiniteScroll={disableInfiniteScroll}
+                            LinearGradient={LinearGradient}
+                            pickerContainerProps={pickerContainerProps}
+                            pickerGradientOverlayProps={
+                                pickerGradientOverlayProps
+                            }
+                            topPickerGradientOverlayProps={
+                                topPickerGradientOverlayProps
+                            }
+                            bottomPickerGradientOverlayProps={
+                                bottomPickerGradientOverlayProps
+                            }
+                            styles={customStyles}
+                        />
+                        <View
+                            {...buttonContainerProps}
+                            style={styles.buttonContainer}>
+                            {!hideCancelButton ? (
+                                <TouchableOpacity
+                                    onPress={cancel}
+                                    {...buttonTouchableOpacityProps}>
+                                    <Text
+                                        style={[
+                                            styles.button,
+                                            styles.cancelButton,
+                                        ]}>
+                                        {cancelButtonText}
+                                    </Text>
+                                </TouchableOpacity>
+                            ) : null}
+                            <TouchableOpacity
+                                onPress={confirm}
+                                {...buttonTouchableOpacityProps}>
+                                <Text
+                                    style={[
+                                        styles.button,
+                                        styles.confirmButton,
+                                    ]}>
+                                    {confirmButtonText}
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        );
+    }
+);
+
+export default React.memo(TimerPickerModal);

package/src/index.ts

@@ -0,0 +1,14 @@
+export {
+    default as TimerPickerModal,
+    type TimerPickerModalProps,
+    type TimerPickerModalRef,
+} from "./components";
+
+export {
+    default as TimerPicker,
+    type TimerPickerProps,
+    type TimerPickerRef,
+} from "./components/TimerPicker";
+
+export { type CustomTimerPickerModalStyles } from "./components/TimerPickerModal.styles";
+export { type CustomTimerPickerStyles } from "./components/TimerPicker/TimerPicker.styles";

package/src/tests/DurationScroll.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import DurationScroll from "../components/TimerPicker/DurationScroll";
+
+describe("DurationScroll", () => {
+    const onDurationChangeMock = jest.fn();
+    const emptyStyles = {
+        pickerContainer: {},
+        pickerLabelContainer: {},
+        pickerLabel: {},
+        pickerItemContainer: {},
+        pickerItem: {},
+        pickerGradientOverlay: {},
+    };
+
+    it("renders without crashing", () => {
+        const { getByTestId } = render(
+            <DurationScroll
+                numberOfItems={1}
+                onDurationChange={onDurationChangeMock}
+                padWithNItems={0}
+                styles={emptyStyles}
+                testID="duration-scroll"
+            />
+        );
+        const component = getByTestId("duration-scroll");
+        expect(component).toBeDefined();
+    });
+
+    it("renders the correct number of items", () => {
+        const { getAllByTestId } = render(
+            <DurationScroll
+                numberOfItems={2}
+                onDurationChange={onDurationChangeMock}
+                padWithNItems={1}
+                styles={emptyStyles}
+            />
+        );
+        const items = getAllByTestId("picker-item");
+        expect(items).toHaveLength(7);
+    });
+
+    it("renders the label if provided", () => {
+        const { getByText } = render(
+            <DurationScroll
+                numberOfItems={59}
+                label="Duration"
+                onDurationChange={onDurationChangeMock}
+                padWithNItems={1}
+                styles={emptyStyles}
+            />
+        );
+        const label = getByText("Duration");
+        expect(label).toBeDefined();
+    });
+
+});

package/src/tests/Modal.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, fireEvent } from "@testing-library/react-native";
+import Modal from "../components/Modal";
+
+describe("Modal", () => {
+    it("renders without crashing", () => {
+        const { getByTestId } = render(<Modal />);
+        const component = getByTestId("modal");
+        expect(component).toBeDefined();
+    });
+
+    it("renders children when visible", () => {
+        const { getByText } = render(
+            <Modal isVisible>
+                <Text>{"Modal Content"}</Text>
+            </Modal>
+        );
+        const content = getByText("Modal Content");
+        expect(content).toBeDefined();
+    });
+
+    it("calls onOverlayPress when overlay is pressed", () => {
+        const onOverlayPressMock = jest.fn();
+        const { getByTestId } = render(
+            <Modal isVisible onOverlayPress={onOverlayPressMock} />
+        );
+        const overlay = getByTestId("modal-backdrop");
+        fireEvent.press(overlay);
+        expect(onOverlayPressMock).toHaveBeenCalled();
+    });
+
+    // Add more test cases to cover different interactions, scenarios, and edge cases
+});

package/src/tests/TimerPicker.test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import TimerPicker from "../components/TimerPicker";
+
+describe("TimerPicker", () => {
+    it("renders without crashing", () => {
+        const { getByTestId } = render(<TimerPicker />);
+        const component = getByTestId("timer-picker");
+        expect(component).toBeDefined();
+    });
+
+    it("renders without crashing with negative padWithNItems", () => {
+        const { getByTestId } = render(<TimerPicker padWithNItems={-1} />);
+        const component = getByTestId("timer-picker");
+        expect(component).toBeDefined();
+    });
+
+    it("hides minutes and seconds when respective hide props are provided", () => {
+        const { queryByTestId } = render(
+            <TimerPicker hideMinutes hideSeconds />
+        );
+        const minutePicker = queryByTestId("duration-scroll-minute");
+        const secondPicker = queryByTestId("duration-scroll-second");
+        expect(minutePicker).toBeNull();
+        expect(secondPicker).toBeNull();
+    });
+});

package/src/tests/TimerPickerModal.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import TimerPickerModal from "../components";
+
+describe("TimerPickerModal", () => {
+    const mockOnConfirm = jest.fn();
+    const mockOnCancel = jest.fn();
+
+    const defaultProps = {
+        visible: true,
+        setIsVisible: jest.fn(),
+        onConfirm: mockOnConfirm,
+        onCancel: mockOnCancel,
+    };
+
+    it("renders without crashing", () => {
+        const { getByTestId } = render(<TimerPickerModal {...defaultProps} />);
+        const component = getByTestId("timer-picker-modal");
+        expect(component).toBeDefined();
+    });
+
+    it("calls onConfirm when Confirm button is pressed", () => {
+        const { getByText } = render(<TimerPickerModal {...defaultProps} />);
+        const confirmButton = getByText("Confirm");
+        fireEvent.press(confirmButton);
+        expect(mockOnConfirm).toHaveBeenCalled();
+    });
+
+    it("calls onCancel when Cancel button is pressed", () => {
+        const { getByText } = render(<TimerPickerModal {...defaultProps} />);
+        const cancelButton = getByText("Cancel");
+        fireEvent.press(cancelButton);
+        expect(mockOnCancel).toHaveBeenCalled();
+    });
+
+    it("hides the modal when Cancel button is pressed", () => {
+        const setIsVisibleMock = jest.fn();
+        const { getByText } = render(
+            <TimerPickerModal
+                {...defaultProps}
+                setIsVisible={setIsVisibleMock}
+            />
+        );
+        const cancelButton = getByText("Cancel");
+        fireEvent.press(cancelButton);
+        expect(setIsVisibleMock).toHaveBeenCalledWith(false);
+    });
+
+    it("hides the modal when overlay is pressed", () => {
+        const setIsVisibleMock = jest.fn();
+        const { getByTestId } = render(
+            <TimerPickerModal
+                {...defaultProps}
+                setIsVisible={setIsVisibleMock}
+                closeOnOverlayPress
+            />
+        );
+        const overlay = getByTestId("modal-backdrop");
+        fireEvent.press(overlay);
+        expect(setIsVisibleMock).toHaveBeenCalledWith(false);
+    });
+
+    it("calls onConfirm with selected duration when Confirm button is pressed", () => {
+        const { getByText } = render(<TimerPickerModal {...defaultProps} />);
+        // Select duration in TimerPicker, assuming its interaction is tested separately
+        const confirmButton = getByText("Confirm");
+        fireEvent.press(confirmButton);
+        expect(mockOnConfirm).toHaveBeenCalledWith(expect.objectContaining({}));
+    });
+});

package/{dist/utils/colorToRgba.js → src/utils/colorToRgba.ts}

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorToRgba = void 0;
-var colorToRgba = function (variables) {
+export const colorToRgba = (variables: { color: string; opacity?: number }) => {
     // this function is required for expo-linear-gradient on iOS. To fade to transparent, we need
     // to be able to add opacity to the background color. Supplying 'transparent' does not work
     // because that is actually a transparent black (rgba(0, 0, 0, 1)), which results in dodgy rendering
-    var color = variables.color, _a = variables.opacity, opacity = _a === void 0 ? 1 : _a;
+
+    const { color, opacity = 1 } = variables;
     // Handle named colors
-    var namedColors = {
+    const namedColors: { [key: string]: string } = {
         transparent: "rgba(0, 0, 0, 0)",
         black: "rgba(0, 0, 0, 1)",
         white: "rgba(255, 255, 255, 1)",
@@ -16,33 +14,36 @@ var colorToRgba = function (variables) {
         gray: "rgba(128, 128, 128, 1)",
         red: "rgba(255, 0, 0, 1)",
     };
+
     if (color in namedColors) {
         return namedColors[color];
     }
+
     // Handle RGB format
     if (color.startsWith("rgb(")) {
-        var rgbValues = color
+        const rgbValues = color
             .replace("rgb(", "")
             .replace(")", "")
             .split(",")
-            .map(function (value) { return parseInt(value.trim(), 10); });
-        var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
-        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+            .map((value) => parseInt(value.trim(), 10));
+        const [r, g, b] = rgbValues;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     }
+
     // Handle hex format
     if (color.startsWith("#")) {
-        var hexColor = color.slice(1);
+        let hexColor = color.slice(1);
         if (hexColor.length === 3) {
             hexColor = hexColor
                 .split("")
-                .map(function (value) { return value + value; })
+                .map((value) => value + value)
                 .join("");
         }
-        var r = parseInt(hexColor.slice(0, 2), 16);
-        var g = parseInt(hexColor.slice(2, 4), 16);
-        var b = parseInt(hexColor.slice(4, 6), 16);
-        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+        const r = parseInt(hexColor.slice(0, 2), 16);
+        const g = parseInt(hexColor.slice(2, 4), 16);
+        const b = parseInt(hexColor.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     }
+
     return color; // Return unchanged if unable to parse
 };
-exports.colorToRgba = colorToRgba;

package/src/utils/generateNumbers.ts

@@ -0,0 +1,34 @@
+import { padWithZero } from "./padWithZero";
+
+export const generateNumbers = (
+    numberOfItems: number,
+    options: {
+        repeatNTimes?: number;
+        padWithZero?: boolean;
+        disableInfiniteScroll?: boolean;
+        padWithNItems: number;
+    }
+) => {
+    if (numberOfItems <= 0) {
+        return [];
+    }
+
+    let numbers: string[] = [];
+    if (options.padWithZero) {
+        for (let i = 0; i <= numberOfItems; i++) {
+            numbers.push(padWithZero(i));
+        }
+    } else {
+        for (let i = 0; i <= numberOfItems; i++) {
+            numbers.push(String(i));
+        }
+    }
+    if ((options.repeatNTimes ?? 1) > 1) {
+        numbers = Array(options.repeatNTimes).fill(numbers).flat();
+    }
+    if (options.disableInfiniteScroll) {
+        numbers.push(...Array(options.padWithNItems).fill(""));
+        numbers.unshift(...Array(options.padWithNItems).fill(""));
+    }
+    return numbers;
+};

package/{dist/utils/getAdjustedLimit.js → src/utils/getAdjustedLimit.ts}

@@ -1,18 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAdjustedLimit = void 0;
-var getAdjustedLimit = function (limit, numberOfItems) {
+import type { LimitType } from "../components/TimerPicker/DurationScroll";
+
+export const getAdjustedLimit = (
+    limit: LimitType | undefined,
+    numberOfItems: number
+): {
+    max: number;
+    min: number;
+} => {
     if (!limit || (!limit.max && !limit.min)) {
         return {
             max: numberOfItems,
             min: 0,
         };
     }
+
     // guard against limits that are out of bounds
-    var adjustedMaxLimit = limit.max
+    const adjustedMaxLimit = limit.max
         ? Math.min(limit.max, numberOfItems)
         : numberOfItems;
-    var adjustedMinLimit = limit.min ? Math.max(limit.min, 0) : 0;
+    const adjustedMinLimit = limit.min ? Math.max(limit.min, 0) : 0;
+
     // guard against invalid limits
     if (adjustedMaxLimit < adjustedMinLimit) {
         return {
@@ -20,9 +27,9 @@ var getAdjustedLimit = function (limit, numberOfItems) {
             min: 0,
         };
     }
+
     return {
         max: adjustedMaxLimit,
         min: adjustedMinLimit,
     };
 };
-exports.getAdjustedLimit = getAdjustedLimit;