react-native-timer-picker 1.1.1 → 1.1.2

package/dist/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,22 @@
+export declare const styles: {
+    container: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    backdrop: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        backgroundColor: string;
+        opacity: number;
+    };
+    content: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+};

package/dist/components/Modal/Modal.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+var react_native_1 = require("react-native");
+exports.styles = react_native_1.StyleSheet.create({
+    container: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    backdrop: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: "black",
+        opacity: 0,
+    },
+    content: {
+        flex: 1,
+        justifyContent: "flex-end",
+    },
+});

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface ModalProps {
+    children?: React.ReactElement;
+    onOverlayPress?: () => void;
+    onHide?: () => void;
+    isVisible?: boolean;
+    animationDuration?: number;
+    overlayOpacity?: number;
+    modalProps?: any;
+    contentStyle?: any;
+    overlayStyle?: any;
+    testID?: string;
+}
+export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID }: ModalProps) => React.ReactElement;
+export default Modal;

package/dist/components/Modal/index.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var Modal_styles_1 = require("./Modal.styles");
+var Modal = function (_a) {
+    var children = _a.children, onOverlayPress = _a.onOverlayPress, onHide = _a.onHide, _b = _a.isVisible, isVisible = _b === void 0 ? false : _b, _c = _a.animationDuration, animationDuration = _c === void 0 ? 300 : _c, _d = _a.overlayOpacity, overlayOpacity = _d === void 0 ? 0.4 : _d, modalProps = _a.modalProps, contentStyle = _a.contentStyle, overlayStyle = _a.overlayStyle, testID = _a.testID;
+    var _e = (0, react_1.useState)(react_native_1.Dimensions.get("window").height), screenHeight = _e[0], setScreenHeight = _e[1];
+    var _f = (0, react_1.useState)(react_native_1.Dimensions.get("window").width), screenWidth = _f[0], setScreenWidth = _f[1];
+    var isMounted = (0, react_1.useRef)(false);
+    var animatedOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0));
+    var handleDimensionsUpdate = function (dimensionsUpdate) {
+        var updatedScreenWidth = dimensionsUpdate.window.width;
+        var updateadScreenHeight = dimensionsUpdate.window.height;
+        if (updatedScreenWidth !== screenWidth ||
+            updateadScreenHeight !== screenHeight) {
+            setScreenHeight(updateadScreenHeight);
+            setScreenWidth(updatedScreenWidth);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        if (isVisible) {
+            show();
+        }
+        var deviceEventEmitter = react_native_1.DeviceEventEmitter.addListener("didUpdateDimensions", handleDimensionsUpdate);
+        return function () {
+            deviceEventEmitter.remove();
+            isMounted.current = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var backdropAnimatedStyle = {
+        opacity: animatedOpacity.current.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, overlayOpacity],
+        }),
+    };
+    var contentAnimatedStyle = {
+        transform: [
+            {
+                translateY: animatedOpacity.current.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [screenHeight, 0],
+                    extrapolate: "clamp",
+                }),
+            },
+        ],
+    };
+    var show = (0, react_1.useCallback)(function () {
+        react_native_1.Animated.timing(animatedOpacity.current, {
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+            // Using native driver in the modal makes the content flash
+            useNativeDriver: false,
+            duration: animationDuration,
+            toValue: 1,
+        }).start();
+    }, [animationDuration]);
+    var hide = (0, react_1.useCallback)(function () {
+        react_native_1.Animated.timing(animatedOpacity.current, {
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+            // Using native driver in the modal makes the content flash
+            useNativeDriver: false,
+            duration: animationDuration,
+            toValue: 0,
+        }).start(function () {
+            if (isMounted.current) {
+                onHide === null || onHide === void 0 ? void 0 : onHide();
+            }
+        });
+    }, [animationDuration, onHide]);
+    (0, react_1.useEffect)(function () {
+        if (isVisible) {
+            show();
+        }
+        else {
+            hide();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible]);
+    return (<react_native_1.Modal transparent animationType="fade" visible={isVisible} {...modalProps} testID={testID !== null && testID !== void 0 ? testID : "modal"}>
+            <react_native_1.TouchableWithoutFeedback onPress={onOverlayPress} testID="modal-backdrop">
+                <react_native_1.Animated.View style={[
+            Modal_styles_1.styles.backdrop,
+            backdropAnimatedStyle,
+            { width: screenWidth, height: screenHeight },
+            overlayStyle,
+        ]}/>
+            </react_native_1.TouchableWithoutFeedback>
+            <react_native_1.Animated.View style={[Modal_styles_1.styles.content, contentAnimatedStyle, contentStyle]} pointerEvents="box-none">
+                {children}
+            </react_native_1.Animated.View>
+        </react_native_1.Modal>);
+};
+exports.Modal = Modal;
+exports.default = exports.Modal;

package/dist/components/TimerPicker/DurationScroll.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { View } from "react-native";
+import { generateStyles } from "./TimerPicker.styles";
+type LinearGradientPoint = {
+    x: number;
+    y: number;
+};
+export type LinearGradientProps = React.ComponentProps<typeof View> & {
+    colors: string[];
+    locations?: number[] | null;
+    start?: LinearGradientPoint | null;
+    end?: LinearGradientPoint | null;
+};
+interface DurationScrollProps {
+    numberOfItems: number;
+    label?: string;
+    initialIndex?: number;
+    onDurationChange: (duration: number) => void;
+    padNumbersWithZero?: boolean;
+    disableInfiniteScroll?: boolean;
+    padWithNItems: number;
+    pickerGradientOverlayProps?: LinearGradientProps;
+    LinearGradient?: any;
+    testID?: string;
+    styles: ReturnType<typeof generateStyles>;
+}
+declare const DurationScroll: ({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, padWithNItems, pickerGradientOverlayProps, LinearGradient, testID, styles, }: DurationScrollProps) => React.ReactElement;
+export default DurationScroll;

package/dist/components/TimerPicker/DurationScroll.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-var-requires */
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var generateNumbers_1 = require("../../utils/generateNumbers");
+var colorToRgba_1 = require("../../utils/colorToRgba");
+var DurationScroll = function (_a) {
+    var _b, _c, _d, _e;
+    var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialIndex, initialIndex = _f === void 0 ? 0 : _f, onDurationChange = _a.onDurationChange, _g = _a.padNumbersWithZero, padNumbersWithZero = _g === void 0 ? false : _g, _h = _a.disableInfiniteScroll, disableInfiniteScroll = _h === void 0 ? false : _h, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
+    var flatListRef = (0, react_1.useRef)(null);
+    var data = (0, generateNumbers_1.generateNumbers)(numberOfItems, {
+        padWithZero: padNumbersWithZero,
+        repeatNTimes: 3,
+        disableInfiniteScroll: disableInfiniteScroll,
+        padWithNItems: padWithNItems,
+    });
+    var numberOfItemsToShow = 1 + padWithNItems * 2;
+    var renderItem = function (_a) {
+        var item = _a.item;
+        return (<react_native_1.View key={item} style={styles.pickerItemContainer} testID="picker-item">
+            <react_native_1.Text style={styles.pickerItem}>{item}</react_native_1.Text>
+        </react_native_1.View>);
+    };
+    var onViewableItemsChanged = (0, react_1.useCallback)(function (_a) {
+        var _b, _c, _d, _e;
+        var viewableItems = _a.viewableItems;
+        if (((_b = viewableItems[0]) === null || _b === void 0 ? void 0 : _b.index) &&
+            viewableItems[0].index < numberOfItems * 0.5) {
+            (_c = flatListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToIndex({
+                animated: false,
+                index: viewableItems[0].index + numberOfItems,
+            });
+        }
+        else if (((_d = viewableItems[0]) === null || _d === void 0 ? void 0 : _d.index) &&
+            viewableItems[0].index >= numberOfItems * 2.5) {
+            (_e = flatListRef.current) === null || _e === void 0 ? void 0 : _e.scrollToIndex({
+                animated: false,
+                index: viewableItems[0].index - numberOfItems,
+            });
+        }
+    }, [numberOfItems]);
+    var viewabilityConfigCallbackPairs = (0, react_1.useRef)([
+        {
+            viewabilityConfig: { viewAreaCoveragePercentThreshold: 25 },
+            onViewableItemsChanged: onViewableItemsChanged,
+        },
+    ]);
+    return (<react_native_1.View testID={testID} style={{
+            height: styles.pickerItemContainer.height * numberOfItemsToShow,
+            overflow: "hidden",
+        }}>
+            <react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={function (_, index) { return ({
+            length: styles.pickerItemContainer.height,
+            offset: styles.pickerItemContainer.height * index,
+            index: index,
+        }); }} initialScrollIndex={(initialIndex % numberOfItems) +
+            numberOfItems +
+            (disableInfiniteScroll ? padWithNItems : 0) -
+            (padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={function (_, index) { return index.toString(); }} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={16} snapToAlignment="start" 
+    // used in place of snapToOffset due to bug on Android
+    snapToOffsets={__spreadArray([], Array(data.length), true).map(function (_, i) { return i * styles.pickerItemContainer.height; })} viewabilityConfigCallbackPairs={!disableInfiniteScroll
+            ? viewabilityConfigCallbackPairs === null || viewabilityConfigCallbackPairs === void 0 ? void 0 : viewabilityConfigCallbackPairs.current
+            : undefined} onMomentumScrollEnd={function (e) {
+            var newIndex = Math.round(e.nativeEvent.contentOffset.y /
+                styles.pickerItemContainer.height);
+            onDurationChange((disableInfiniteScroll ? newIndex : newIndex + padWithNItems) %
+                (numberOfItems + 1));
+        }} testID="duration-scroll-flatlist"/>
+            <react_native_1.View style={styles.pickerLabelContainer}>
+                <react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>
+            </react_native_1.View>
+            {LinearGradient ? (<>
+                    <LinearGradient colors={[
+                (_b = styles.pickerContainer.backgroundColor) !== null && _b !== void 0 ? _b : "white",
+                (0, colorToRgba_1.colorToRgba)({
+                    color: (_c = styles.pickerContainer.backgroundColor) !== null && _c !== void 0 ? _c : "white",
+                    opacity: 0,
+                }),
+            ]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
+                    <LinearGradient colors={[
+                (0, colorToRgba_1.colorToRgba)({
+                    color: (_d = styles.pickerContainer.backgroundColor) !== null && _d !== void 0 ? _d : "white",
+                    opacity: 0,
+                }),
+                (_e = styles.pickerContainer.backgroundColor) !== null && _e !== void 0 ? _e : "white",
+            ]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { bottom: -1 }]}/>
+                </>) : null}
+        </react_native_1.View>);
+};
+exports.default = DurationScroll;

package/dist/components/TimerPicker/TimerPicker.styles.d.ts

@@ -0,0 +1,21 @@
+export interface CustomTimerPickerStyles {
+    theme?: "light" | "dark";
+    backgroundColor?: string;
+    textColor?: string;
+    pickerContainer?: any;
+    pickerLabelContainer?: any;
+    pickerLabel?: any;
+    pickerItemContainer?: any;
+    pickerItem?: any;
+    pickerGradientOverlay?: any;
+}
+export declare const generateStyles: (customStyles: CustomTimerPickerStyles | undefined, options: {
+    padWithNItems: number;
+}) => {
+    pickerContainer: any;
+    pickerLabelContainer: any;
+    pickerLabel: any;
+    pickerItemContainer: any;
+    pickerItem: any;
+    pickerGradientOverlay: any;
+};

package/dist/components/TimerPicker/TimerPicker.styles.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyles = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_native_1 = require("react-native");
+var DARK_MODE_BACKGROUND_COLOR = "#232323";
+var DARK_MODE_TEXT_COLOR = "#E9E9E9";
+var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
+var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
+var generateStyles = function (customStyles, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return react_native_1.StyleSheet.create({
+        pickerContainer: __assign({ flexDirection: "row", marginRight: "8%", backgroundColor: (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.backgroundColor) !== null && _a !== void 0 ? _a : ((customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
+                ? DARK_MODE_BACKGROUND_COLOR
+                : LIGHT_MODE_BACKGROUND_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerContainer),
+        pickerLabelContainer: __assign({ position: "absolute", right: 4, top: 0, bottom: 0, justifyContent: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabelContainer),
+        pickerLabel: __assign({ fontSize: 18, fontWeight: "bold", marginTop: ((_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 25) / 6, color: (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _d !== void 0 ? _d : ((customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
+                ? DARK_MODE_TEXT_COLOR
+                : LIGHT_MODE_TEXT_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel),
+        pickerItemContainer: __assign({ height: 50, justifyContent: "center", alignItems: "center", width: ((_f = (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 25) * 3.6 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer),
+        pickerItem: __assign({ textAlignVertical: "center", fontSize: 25, color: (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _g !== void 0 ? _g : ((customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
+                ? DARK_MODE_TEXT_COLOR
+                : LIGHT_MODE_TEXT_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem),
+        pickerGradientOverlay: __assign({ position: "absolute", left: 0, right: 0, height: options.padWithNItems === 0
+                ? "30%"
+                : ((_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 50) * 0.8 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay),
+    });
+};
+exports.generateStyles = generateStyles;

package/dist/components/TimerPicker/index.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { View } from "react-native";
+import { CustomTimerPickerStyles } from "./TimerPicker.styles";
+import { LinearGradientProps } from "./DurationScroll";
+export interface TimerPickerProps {
+    onDurationChange?: (duration: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    initialHours?: number;
+    initialMinutes?: number;
+    initialSeconds?: number;
+    hideHours?: boolean;
+    hideMinutes?: boolean;
+    hideSeconds?: boolean;
+    hourLabel?: string;
+    minuteLabel?: string;
+    secondLabel?: string;
+    padWithNItems?: number;
+    disableInfiniteScroll?: boolean;
+    LinearGradient?: any;
+    pickerContainerProps?: React.ComponentProps<typeof View>;
+    pickerGradientOverlayProps?: LinearGradientProps;
+    styles?: CustomTimerPickerStyles;
+}
+declare const TimerPicker: ({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, LinearGradient, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement;
+export default TimerPicker;

package/dist/components/TimerPicker/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var DurationScroll_1 = __importDefault(require("./DurationScroll"));
+var TimerPicker_styles_1 = require("./TimerPicker.styles");
+var TimerPicker = function (_a) {
+    var onDurationChange = _a.onDurationChange, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, LinearGradient = _a.LinearGradient, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
+    var checkedPadWithNItems = padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
+    var styles = (0, TimerPicker_styles_1.generateStyles)(customStyles, {
+        padWithNItems: checkedPadWithNItems,
+    });
+    var _o = (0, react_1.useState)(initialHours), selectedHours = _o[0], setSelectedHours = _o[1];
+    var _p = (0, react_1.useState)(initialMinutes), selectedMinutes = _p[0], setSelectedMinutes = _p[1];
+    var _q = (0, react_1.useState)(initialSeconds), selectedSeconds = _q[0], setSelectedSeconds = _q[1];
+    (0, react_1.useEffect)(function () {
+        onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange({
+            hours: selectedHours,
+            minutes: selectedMinutes,
+            seconds: selectedSeconds,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedHours, selectedMinutes, selectedSeconds]);
+    return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer} testID="timer-picker">
+            {!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
+            {!hideMinutes ? (<DurationScroll_1.default numberOfItems={59} label={minuteLabel} initialIndex={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
+            {!hideSeconds ? (<DurationScroll_1.default numberOfItems={59} label={secondLabel} initialIndex={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
+        </react_native_1.View>);
+};
+exports.default = TimerPicker;

package/dist/components/TimerPickerModal.styles.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+export declare const generateStyles: (customStyles: CustomTimerPickerModalStyles | undefined) => {
+    container: any;
+    contentContainer: any;
+    buttonContainer: any;
+    button: any;
+    cancelButton: any;
+    confirmButton: any;
+    modalTitle: any;
+};

package/dist/components/TimerPickerModal.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyles = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var react_native_1 = require("react-native");
+var DARK_MODE_BACKGROUND_COLOR = "#232323";
+var DARK_MODE_TEXT_COLOR = "#E9E9E9";
+var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
+var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
+var generateStyles = function (customStyles) {
+    var _a, _b, _c, _d;
+    return react_native_1.StyleSheet.create({
+        container: __assign({ flex: 1, justifyContent: "center", alignItems: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        contentContainer: __assign({ backgroundColor: ((_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.backgroundColor) !== null && _a !== void 0 ? _a : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
+                ? DARK_MODE_BACKGROUND_COLOR
+                : LIGHT_MODE_BACKGROUND_COLOR, justifyContent: "center", alignItems: "center", borderRadius: 20, padding: 20 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.contentContainer),
+        buttonContainer: __assign({ flexDirection: "row", marginTop: 25 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.buttonContainer),
+        button: __assign({ marginHorizontal: 12, paddingVertical: 10, paddingHorizontal: 20, borderWidth: 1, borderRadius: 10, fontSize: 16, overflow: "hidden" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        cancelButton: __assign({ borderColor: "gray", color: ((_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _b !== void 0 ? _b : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
+                ? DARK_MODE_TEXT_COLOR
+                : "gray", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "gray" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.cancelButton),
+        confirmButton: __assign({ borderColor: "green", color: ((_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _c !== void 0 ? _c : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
+                ? DARK_MODE_TEXT_COLOR
+                : "green", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "green" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.confirmButton),
+        modalTitle: __assign({ fontSize: 24, fontWeight: "bold", marginBottom: 15, color: ((_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _d !== void 0 ? _d : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
+                ? DARK_MODE_TEXT_COLOR
+                : LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.modalTitle),
+    });
+};
+exports.generateStyles = generateStyles;

package/dist/components/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { TimerPickerProps } from "./TimerPicker";
+import Modal from "./Modal";
+import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
+interface TimePickerModalRef {
+    reset: () => 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>;
+    modalTitleProps?: React.ComponentProps<typeof Text>;
+    styles?: CustomTimerPickerModalStyles;
+}
+declare const TimerPickerModal: React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimePickerModalRef>>;
+export default TimerPickerModal;

package/dist/components/index.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var TimerPicker_1 = __importDefault(require("./TimerPicker"));
+var Modal_1 = __importDefault(require("./Modal"));
+var TimerPickerModal_styles_1 = require("./TimerPickerModal.styles");
+var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
+    var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onDurationChange = _a.onDurationChange, closeOnOverlayPress = _a.closeOnOverlayPress, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, _o = _a.hideCancelButton, hideCancelButton = _o === void 0 ? false : _o, _p = _a.confirmButtonText, confirmButtonText = _p === void 0 ? "Confirm" : _p, _q = _a.cancelButtonText, cancelButtonText = _q === void 0 ? "Cancel" : _q, modalTitle = _a.modalTitle, LinearGradient = _a.LinearGradient, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
+    var styles = (0, TimerPickerModal_styles_1.generateStyles)(customStyles);
+    var _r = (0, react_1.useState)({
+        hours: initialHours,
+        minutes: initialMinutes,
+        seconds: initialSeconds,
+    }), selectedDuration = _r[0], setSelectedDuration = _r[1];
+    var _s = (0, react_1.useState)({
+        hours: initialHours,
+        minutes: initialMinutes,
+        seconds: initialSeconds,
+    }), confirmedDuration = _s[0], setConfirmedDuration = _s[1];
+    var hideModal = function () {
+        setSelectedDuration({
+            hours: confirmedDuration.hours,
+            minutes: confirmedDuration.minutes,
+            seconds: confirmedDuration.seconds,
+        });
+        setIsVisible(false);
+    };
+    var confirm = function () {
+        setConfirmedDuration(selectedDuration);
+        onConfirm(selectedDuration);
+    };
+    var cancel = function () {
+        setIsVisible(false);
+        setSelectedDuration(confirmedDuration);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        reset: function () {
+            var initialDuration = {
+                hours: initialHours,
+                minutes: initialMinutes,
+                seconds: initialSeconds,
+            };
+            setSelectedDuration(initialDuration);
+            setConfirmedDuration(initialDuration);
+            setIsVisible(false);
+        },
+    }); });
+    return (<Modal_1.default isVisible={visible} onOverlayPress={closeOnOverlayPress ? hideModal : undefined} {...modalProps} testID="timer-picker-modal">
+                <react_native_1.View {...containerProps} style={styles.container}>
+                    <react_native_1.View {...contentContainerProps} style={styles.contentContainer}>
+                        {modalTitle ? (<react_native_1.Text {...modalTitleProps} style={styles.modalTitle}>
+                                {modalTitle}
+                            </react_native_1.Text>) : null}
+                        <TimerPicker_1.default onDurationChange={function (duration) {
+            setSelectedDuration(duration);
+            onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange(duration);
+        }} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} styles={customStyles}/>
+                        <react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
+                            {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel}>
+                                    <react_native_1.Text style={[
+                styles.cancelButton,
+                styles.button,
+            ]}>
+                                        {cancelButtonText}
+                                    </react_native_1.Text>
+                                </react_native_1.TouchableOpacity>) : null}
+                            <react_native_1.TouchableOpacity onPress={confirm}>
+                                <react_native_1.Text style={[
+            styles.confirmButton,
+            styles.button,
+        ]}>
+                                    {confirmButtonText}
+                                </react_native_1.Text>
+                            </react_native_1.TouchableOpacity>
+                        </react_native_1.View>
+                    </react_native_1.View>
+                </react_native_1.View>
+            </Modal_1.default>);
+});
+exports.default = TimerPickerModal;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimerPicker = exports.TimerPickerModal = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "TimerPickerModal", { enumerable: true, get: function () { return __importDefault(components_1).default; } });
+var TimerPicker_1 = require("./components/TimerPicker");
+Object.defineProperty(exports, "TimerPicker", { enumerable: true, get: function () { return __importDefault(TimerPicker_1).default; } });

package/dist/utils/colorToRgba.d.ts

@@ -0,0 +1,4 @@
+export declare const colorToRgba: (variables: {
+    color: string;
+    opacity?: number | undefined;
+}) => string;

package/dist/utils/colorToRgba.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorToRgba = void 0;
+var colorToRgba = function (variables) {
+    // 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;
+    // Handle named colors
+    var namedColors = {
+        transparent: "rgba(0, 0, 0, 0)",
+        black: "rgba(0, 0, 0, 1)",
+        white: "rgba(255, 255, 255, 1)",
+        blue: "rgba(0, 0, 255, 1)",
+        green: "rgba(0, 128, 0, 1)",
+        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
+            .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, ")");
+    }
+    // Handle hex format
+    if (color.startsWith("#")) {
+        var hexColor = color.slice(1);
+        if (hexColor.length === 3) {
+            hexColor = hexColor
+                .split("")
+                .map(function (value) { return 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, ")");
+    }
+    return color; // Return unchanged if unable to parse
+};
+exports.colorToRgba = colorToRgba;

package/dist/utils/generateNumbers.d.ts

@@ -0,0 +1,7 @@
+import { padWithZero } from "./padWithZero";
+export declare const generateNumbers: (numberOfItems: number, options: {
+    repeatNTimes?: number;
+    padWithZero?: boolean;
+    disableInfiniteScroll?: boolean;
+    padWithNItems: number;
+}) => string[];

package/dist/utils/generateNumbers.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateNumbers = void 0;
+var padWithZero_1 = require("./padWithZero");
+var generateNumbers = function (numberOfItems, options) {
+    var _a;
+    if (numberOfItems <= 0) {
+        return [];
+    }
+    var numbers = [];
+    if (options.padWithZero) {
+        for (var i = 0; i <= numberOfItems; i++) {
+            numbers.push((0, padWithZero_1.padWithZero)(i));
+        }
+    }
+    else {
+        for (var i = 0; i <= numberOfItems; i++) {
+            numbers.push(String(i));
+        }
+    }
+    if (((_a = options.repeatNTimes) !== null && _a !== void 0 ? _a : 1) > 1) {
+        numbers = Array(options.repeatNTimes).fill(numbers).flat();
+    }
+    if (options.disableInfiniteScroll) {
+        numbers.push.apply(numbers, Array(options.padWithNItems).fill(""));
+        numbers.unshift.apply(numbers, Array(options.padWithNItems).fill(""));
+    }
+    return numbers;
+};
+exports.generateNumbers = generateNumbers;

package/dist/utils/padWithZero.d.ts

@@ -0,0 +1 @@
+export declare const padWithZero: (value: number) => string;

package/dist/utils/padWithZero.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.padWithZero = void 0;
+var padWithZero = function (value) {
+    if (value < 10) {
+        return "0" + value;
+    }
+    else {
+        return String(value);
+    }
+};
+exports.padWithZero = padWithZero;

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
@@ -31,7 +31,6 @@
         "registry": "https://registry.npmjs.org/"
     },
     "files": [
-        "index.ts",
         "dist",
         "package.json",
         "README.md",