react-native-timer-picker 1.1.3 → 1.2.0

package/README.md

@@ -308,9 +308,12 @@ return (
 | hideHours                   | Hide the hours picker                                     | Boolean                                           | false               | false    |
 | hideMinutes                 | Hide the minutes picker                                   | Boolean                                           | false               | false    |
 | hideSeconds                 | Hide the seconds picker                                   | Boolean                                           | false               | false    |
-| hourLabel                   | Label for the hours picker                                | String                                            | h                   | false    |
-| minuteLabel                 | Label for the minutes picker                              | String                                            | m                   | false    |
-| secondLabel                 | Label for the seconds picker                              | String                                            | s                   | false    |
+| hourLimit                   | Limit on the hours it is possible to select               | { max?: Number, min?: Number }                    | -                   | false    |
+| minuteLimit                 | Limit on the minutes it is possible to select             | { max?: Number, min?: Number }                    | -                   | false    |
+| secondLimit                 | Limit on the seconds it is possible to select             | { max?: Number, min?: Number }                    | -                   | false    |
+| hourLabel                   | Label for the hours picker                                | String \| React.ReactElement                      | h                   | false    |
+| minuteLabel                 | Label for the minutes picker                              | String \| React.ReactElement                      | m                   | false    |
+| secondLabel                 | Label for the seconds picker                              | String \| React.ReactElement                      | s                   | false    |
 | padWithNItems               | Number of items to pad the picker with on either side     | Number                                            | 1                   | false    |
 | disableInfiniteScroll       | Disable the infinite scroll feature                       | Boolean                                           | false               | false    |
 | LinearGradient              | Linear Gradient Component                                 | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | -                   | false    |
@@ -326,12 +329,13 @@ The following custom styles can be supplied to re-style the component in any way
 | :-------------------: | :------------------------------------- | :-----------------------------------: |
 | theme                 | Theme of the component                 | "light" \| "dark"                     |
 | backgroundColor       | Main background color                  | string                                |
-| textColor             | Color for the text elements            | string                                |
+| text                  | Base text style                        | TextStyle                            |
 | pickerContainer       | Main container for the picker          | ViewStyle                             |
 | pickerLabelContainer  | Container for the picker's labels      | ViewStyle                             |
 | pickerLabel           | Style for the picker's labels          | TextStyle                             |
 | pickerItemContainer   | Container for each number in the picker | ViewStyle                             |
 | pickerItem            | Style for each individual picker number | TextStyle                             |
+| disabledPickerItem    | Style for any numbers outside any set limits | TextStyle                         |
 | pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle                             |
 
 ### TimerPickerModal ⏰
@@ -365,9 +369,9 @@ The following custom styles can be supplied to re-style the component in any way
 | container         | Main container's style                 | ViewStyle |
 | contentContainer  | Style for the content's container      | ViewStyle |
 | buttonContainer   | Style for the container around the buttons | ViewStyle |
-| button            | General style for both buttons         | ViewStyle |
-| cancelButton      | Style for the cancel button            | ViewStyle |
-| confirmButton     | Style for the confirm button           | ViewStyle |
+| button            | General style for both buttons         | TextStyle |
+| cancelButton      | Style for the cancel button            | TextStyle |
+| confirmButton     | Style for the confirm button           | TextStyle |
 | modalTitle        | Style for the title of the modal       | TextStyle |
 
 
@@ -375,12 +379,26 @@ The following custom styles can be supplied to re-style the component in any way
 
 ### TimerPickerModal
 
+The library exposes a TimerPickerModalRef type, which can be used to type your ref to the modal:
+
+```javascript
+const timerPickerModalRef = useRef<TimerPickerModalRef>(null);
+```
+
+It has the following available methods:
+
 `reset` - imperative method to reset the selected duration to their initial values.
 
 ```javascript
 timerPickerModalRef.current.reset();
 ```
 
+`setValue` - imperative method to set the selected duration to a particular value
+
+```javascript
+timerPickerModalRef.current.setValue({hours: number, minutes: number, seconds: number});
+```
+
 ## License 📝
 
 This project is licensed under the [MIT License](LICENSE).

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

@@ -11,5 +11,6 @@ interface ModalProps {
     overlayStyle?: any;
     testID?: string;
 }
-export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID }: ModalProps) => React.ReactElement;
-export default Modal;
+export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID, }: ModalProps) => React.ReactElement;
+declare const _default: React.MemoExoticComponent<({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID, }: ModalProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

package/dist/components/Modal/index.js

@@ -76,7 +76,7 @@ var Modal = function (_a) {
         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,
+            useNativeDriver: true,
             duration: animationDuration,
             toValue: 1,
         }).start();
@@ -85,7 +85,7 @@ var Modal = function (_a) {
         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,
+            useNativeDriver: true,
             duration: animationDuration,
             toValue: 0,
         }).start(function () {
@@ -118,4 +118,4 @@ var Modal = function (_a) {
         </react_native_1.Modal>);
 };
 exports.Modal = Modal;
-exports.default = exports.Modal;
+exports.default = react_1.default.memo(exports.Modal);

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

@@ -11,18 +11,23 @@ export type LinearGradientProps = React.ComponentProps<typeof View> & {
     start?: LinearGradientPoint | null;
     end?: LinearGradientPoint | null;
 };
+export type LimitType = {
+    max?: number;
+    min?: number;
+};
 interface DurationScrollProps {
     numberOfItems: number;
-    label?: string;
+    label?: string | React.ReactElement;
     initialIndex?: number;
     onDurationChange: (duration: number) => void;
     padNumbersWithZero?: boolean;
     disableInfiniteScroll?: boolean;
+    limit?: LimitType;
     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;
+declare const _default: React.MemoExoticComponent<({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, limit, padWithNItems, pickerGradientOverlayProps, LinearGradient, testID, styles, }: DurationScrollProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

package/dist/components/TimerPicker/DurationScroll.js

@@ -37,9 +37,12 @@ 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 getAdjustedLimit_1 = require("../../utils/getAdjustedLimit");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var KEY_EXTRACTOR = function (_, index) { return index.toString(); };
 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 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, limit = _a.limit, 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,
@@ -48,12 +51,70 @@ var DurationScroll = function (_a) {
         padWithNItems: padWithNItems,
     });
     var numberOfItemsToShow = 1 + padWithNItems * 2;
-    var renderItem = function (_a) {
+    var adjustedLimited = (0, getAdjustedLimit_1.getAdjustedLimit)(limit, numberOfItems);
+    var renderItem = (0, react_1.useCallback)(function (_a) {
         var item = _a.item;
+        var intItem = parseInt(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>);
-    };
+                    <react_native_1.Text style={[
+                styles.pickerItem,
+                intItem > adjustedLimited.max ||
+                    intItem < adjustedLimited.min
+                    ? styles.disabledPickerItem
+                    : {},
+            ]}>
+                        {item}
+                    </react_native_1.Text>
+                </react_native_1.View>);
+    }, [
+        adjustedLimited.max,
+        adjustedLimited.min,
+        styles.disabledPickerItem,
+        styles.pickerItem,
+        styles.pickerItemContainer,
+    ]);
+    var onMomentumScrollEnd = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var newIndex = Math.round(e.nativeEvent.contentOffset.y /
+            styles.pickerItemContainer.height);
+        var newDuration = (disableInfiniteScroll ? newIndex : newIndex + padWithNItems) %
+            (numberOfItems + 1);
+        // check limits
+        if (newDuration > adjustedLimited.max) {
+            var targetScrollIndex = newIndex - (newDuration - adjustedLimited.max);
+            (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                animated: true,
+                index: 
+                // guard against scrolling beyond end of list
+                targetScrollIndex >= 0
+                    ? targetScrollIndex
+                    : adjustedLimited.max - 1,
+            }); // scroll down to max
+            newDuration = adjustedLimited.max;
+        }
+        else if (newDuration < adjustedLimited.min) {
+            var targetScrollIndex = newIndex + (adjustedLimited.min - newDuration);
+            (_b = flatListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToIndex({
+                animated: true,
+                index: 
+                // guard against scrolling beyond end of list
+                targetScrollIndex <= data.length - 1
+                    ? targetScrollIndex
+                    : adjustedLimited.min,
+            }); // scroll up to min
+            newDuration = adjustedLimited.min;
+        }
+        onDurationChange(newDuration);
+    }, [
+        adjustedLimited.max,
+        adjustedLimited.min,
+        data.length,
+        disableInfiniteScroll,
+        numberOfItems,
+        onDurationChange,
+        padWithNItems,
+        styles.pickerItemContainer.height,
+    ]);
     var onViewableItemsChanged = (0, react_1.useCallback)(function (_a) {
         var _b, _c, _d, _e;
         var viewableItems = _a.viewableItems;
@@ -72,6 +133,11 @@ var DurationScroll = function (_a) {
             });
         }
     }, [numberOfItems]);
+    var getItemLayout = (0, react_1.useCallback)(function (_, index) { return ({
+        length: styles.pickerItemContainer.height,
+        offset: styles.pickerItemContainer.height * index,
+        index: index,
+    }); }, [styles.pickerItemContainer.height]);
     var viewabilityConfigCallbackPairs = (0, react_1.useRef)([
         {
             viewabilityConfig: { viewAreaCoveragePercentThreshold: 25 },
@@ -82,25 +148,16 @@ var DurationScroll = function (_a) {
             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) +
+            <react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={getItemLayout} 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" 
+            (padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={KEY_EXTRACTOR} 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"/>
+            : undefined} onMomentumScrollEnd={onMomentumScrollEnd} testID="duration-scroll-flatlist"/>
             <react_native_1.View style={styles.pickerLabelContainer}>
-                <react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>
+                {typeof label === "string" ? (<react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>) : (label !== null && label !== void 0 ? label : null)}
             </react_native_1.View>
             {LinearGradient ? (<>
                     <LinearGradient colors={[
@@ -120,4 +177,4 @@ var DurationScroll = function (_a) {
                 </>) : null}
         </react_native_1.View>);
 };
-exports.default = DurationScroll;
+exports.default = react_1.default.memo(DurationScroll);

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

@@ -1,12 +1,13 @@
 export interface CustomTimerPickerStyles {
     theme?: "light" | "dark";
     backgroundColor?: string;
-    textColor?: string;
+    text?: any;
     pickerContainer?: any;
     pickerLabelContainer?: any;
     pickerLabel?: any;
     pickerItemContainer?: any;
     pickerItem?: any;
+    disabledPickerItem?: any;
     pickerGradientOverlay?: any;
 }
 export declare const generateStyles: (customStyles: CustomTimerPickerStyles | undefined, options: {
@@ -17,5 +18,6 @@ export declare const generateStyles: (customStyles: CustomTimerPickerStyles | un
     pickerLabel: any;
     pickerItemContainer: any;
     pickerItem: any;
+    disabledPickerItem: any;
     pickerGradientOverlay: any;
 };

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

@@ -19,22 +19,23 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g;
     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"
+        pickerLabel: __assign(__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: (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"
+                : LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel),
+        pickerItemContainer: __assign({ height: 50, justifyContent: "center", alignItems: "center", width: ((_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : 25) * 3.6 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer),
+        pickerItem: __assign(__assign({ textAlignVertical: "center", fontSize: 25, color: (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),
+                : LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem),
+        disabledPickerItem: __assign({ opacity: 0.2 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.disabledPickerItem),
         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),
+                : ((_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 50) * 0.8 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay),
     });
 };
 exports.generateStyles = generateStyles;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { View } from "react-native";
+import { LimitType } from "./DurationScroll";
 import { CustomTimerPickerStyles } from "./TimerPicker.styles";
 import { LinearGradientProps } from "./DurationScroll";
 export interface TimerPickerProps {
@@ -14,9 +15,12 @@ export interface TimerPickerProps {
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
-    hourLabel?: string;
-    minuteLabel?: string;
-    secondLabel?: string;
+    hourLimit?: LimitType;
+    minuteLimit?: LimitType;
+    secondLimit?: LimitType;
+    hourLabel?: string | React.ReactElement;
+    minuteLabel?: string | React.ReactElement;
+    secondLabel?: string | React.ReactElement;
     padWithNItems?: number;
     disableInfiniteScroll?: boolean;
     LinearGradient?: any;
@@ -24,5 +28,5 @@ export interface TimerPickerProps {
     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;
+declare const _default: React.MemoExoticComponent<({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLimit, minuteLimit, secondLimit, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, LinearGradient, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

package/dist/components/TimerPicker/index.js

@@ -31,11 +31,13 @@ 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 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, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _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 styles = (0, react_1.useMemo)(function () {
+        return (0, TimerPicker_styles_1.generateStyles)(customStyles, {
+            padWithNItems: checkedPadWithNItems,
+        });
+    }, [checkedPadWithNItems, customStyles]);
     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];
@@ -48,9 +50,9 @@ var TimerPicker = function (_a) {
         // 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}
+            {!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={hourLimit} 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} limit={minuteLimit} 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} limit={secondLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
         </react_native_1.View>);
 };
-exports.default = TimerPicker;
+exports.default = react_1.default.memo(TimerPicker);

package/dist/components/TimerPickerModal.styles.js

@@ -19,23 +19,19 @@ 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;
+    var _a;
     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")
+        button: __assign(__assign({ marginHorizontal: 12, paddingVertical: 10, paddingHorizontal: 20, borderWidth: 1, borderRadius: 10, fontSize: 16, overflow: "hidden" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        cancelButton: __assign(__assign({ borderColor: "gray", color: (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.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.cancelButton),
+        confirmButton: __assign(__assign({ borderColor: "green", color: (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.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.confirmButton),
+        modalTitle: __assign(__assign({ fontSize: 24, fontWeight: "bold", marginBottom: 15, color: (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),
+                : LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.modalTitle),
     });
 };
 exports.generateStyles = generateStyles;

package/dist/components/index.d.ts

@@ -3,8 +3,13 @@ import { View, Text } from "react-native";
 import { TimerPickerProps } from "./TimerPicker";
 import Modal from "./Modal";
 import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
-interface TimePickerModalRef {
+export interface TimerPickerModalRef {
     reset: () => void;
+    setValue: (value: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
 }
 export interface TimerPickerModalProps extends TimerPickerProps {
     visible: boolean;
@@ -27,5 +32,5 @@ export interface TimerPickerModalProps extends TimerPickerProps {
     modalTitleProps?: React.ComponentProps<typeof Text>;
     styles?: CustomTimerPickerModalStyles;
 }
-declare const TimerPickerModal: React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimePickerModalRef>>;
-export default TimerPickerModal;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimerPickerModalRef>>>;
+export default _default;

package/dist/components/index.js

@@ -32,7 +32,7 @@ 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 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, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _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,
@@ -61,6 +61,11 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
         setSelectedDuration(confirmedDuration);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
+    // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
+    var durationChange = (0, react_1.useCallback)(function (duration) {
+        setSelectedDuration(duration);
+        onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange(duration);
+    }, [onDurationChange]);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         reset: function () {
             var initialDuration = {
@@ -72,6 +77,10 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
             setConfirmedDuration(initialDuration);
             setIsVisible(false);
         },
+        setValue: function (value) {
+            setSelectedDuration(value);
+            setConfirmedDuration(value);
+        },
     }); });
     return (<Modal_1.default isVisible={visible} onOverlayPress={closeOnOverlayPress ? hideModal : undefined} {...modalProps} testID="timer-picker-modal">
                 <react_native_1.View {...containerProps} style={styles.container}>
@@ -79,10 +88,7 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
                         {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}/>
+                        <TimerPicker_1.default 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} styles={customStyles}/>
                         <react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
                             {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel}>
                                     <react_native_1.Text style={[
@@ -105,4 +111,4 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
                 </react_native_1.View>
             </Modal_1.default>);
 });
-exports.default = TimerPickerModal;
+exports.default = react_1.default.memo(TimerPickerModal);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as TimerPickerModal, TimerPickerModalProps, } from "./components";
+export { default as TimerPickerModal, TimerPickerModalProps, TimerPickerModalRef, } 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/utils/getAdjustedLimit.d.ts

@@ -0,0 +1,5 @@
+import type { LimitType } from "../components/TimerPicker/DurationScroll";
+export declare const getAdjustedLimit: (limit: LimitType | undefined, numberOfItems: number) => {
+    max: number;
+    min: number;
+};

package/dist/utils/getAdjustedLimit.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdjustedLimit = void 0;
+var getAdjustedLimit = function (limit, numberOfItems) {
+    if (!limit || (!limit.max && !limit.min)) {
+        return {
+            max: numberOfItems,
+            min: 0,
+        };
+    }
+    // guard against limits that are out of bounds
+    var adjustedMaxLimit = limit.max
+        ? Math.min(limit.max, numberOfItems)
+        : numberOfItems;
+    var adjustedMinLimit = limit.min ? Math.max(limit.min, 0) : 0;
+    // guard against invalid limits
+    if (adjustedMaxLimit < adjustedMinLimit) {
+        return {
+            max: numberOfItems,
+            min: 0,
+        };
+    }
+    return {
+        max: adjustedMaxLimit,
+        min: adjustedMinLimit,
+    };
+};
+exports.getAdjustedLimit = getAdjustedLimit;

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "1.1.3",
+    "version": "1.2.0",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {