react-native-timer-picker 1.2.11 → 1.4.0

package/src/components/index.tsx

@@ -1,4 +1,5 @@
 import React, {
+    MutableRefObject,
     forwardRef,
     useCallback,
     useImperativeHandle,
@@ -25,6 +26,11 @@ export interface TimerPickerModalRef {
         },
         options?: { animated?: boolean }
     ) => void;
+    latestDuration: {
+        hours: MutableRefObject<number> | undefined;
+        minutes: MutableRefObject<number> | undefined;
+        seconds: MutableRefObject<number> | undefined;
+    };
 }
 
 export interface TimerPickerModalProps extends TimerPickerProps {
@@ -72,11 +78,14 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             hourLimit,
             minuteLimit,
             secondLimit,
-            hourLabel = "h",
-            minuteLabel = "m",
-            secondLabel = "s",
+            hourLabel,
+            minuteLabel,
+            secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
+            use12HourPicker,
+            amLabel,
+            pmLabel,
             hideCancelButton = false,
             confirmButtonText = "Confirm",
             cancelButtonText = "Cancel",
@@ -98,6 +107,8 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
     ): React.ReactElement => {
         const styles = generateStyles(customStyles);
 
+        const timerPickerRef = useRef<TimerPickerRef>(null);
+
         const [selectedDuration, setSelectedDuration] = useState({
             hours: initialHours,
             minutes: initialMinutes,
@@ -109,7 +120,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             seconds: initialSeconds,
         });
 
-        const hideModal = () => {
+        const hideModalHandler = () => {
             setSelectedDuration({
                 hours: confirmedDuration.hours,
                 minutes: confirmedDuration.minutes,
@@ -118,19 +129,29 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             setIsVisible(false);
         };
 
-        const confirm = () => {
-            setConfirmedDuration(selectedDuration);
-            onConfirm(selectedDuration);
+        const confirmHandler = () => {
+            const latestDuration = timerPickerRef.current?.latestDuration;
+            const newDuration = {
+                hours: latestDuration?.hours?.current ?? selectedDuration.hours,
+                minutes:
+                    latestDuration?.minutes?.current ??
+                    selectedDuration.minutes,
+                seconds:
+                    latestDuration?.seconds?.current ??
+                    selectedDuration.seconds,
+            };
+            setConfirmedDuration(newDuration);
+            onConfirm(newDuration);
         };
 
-        const cancel = () => {
+        const cancelHandler = () => {
             setIsVisible(false);
             setSelectedDuration(confirmedDuration);
             onCancel?.();
         };
 
         // wrapped in useCallback to avoid unnecessary re-renders of TimerPicker
-        const durationChange = useCallback(
+        const durationChangeHandler = useCallback(
             (duration: { hours: number; minutes: number; seconds: number }) => {
                 setSelectedDuration(duration);
                 onDurationChange?.(duration);
@@ -138,8 +159,6 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             [onDurationChange]
         );
 
-        const timerPickerRef = useRef<TimerPickerRef>(null);
-
         useImperativeHandle(ref, () => ({
             reset: (options) => {
                 const initialDuration = {
@@ -156,12 +175,19 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                 setConfirmedDuration(value);
                 timerPickerRef.current?.setValue(value, options);
             },
+            latestDuration: {
+                hours: timerPickerRef.current?.latestDuration?.hours,
+                minutes: timerPickerRef.current?.latestDuration?.minutes,
+                seconds: timerPickerRef.current?.latestDuration?.seconds,
+            },
         }));
 
         return (
             <Modal
                 isVisible={visible}
-                onOverlayPress={closeOnOverlayPress ? hideModal : undefined}
+                onOverlayPress={
+                    closeOnOverlayPress ? hideModalHandler : undefined
+                }
                 {...modalProps}
                 testID="timer-picker-modal">
                 <View {...containerProps} style={styles.container}>
@@ -177,10 +203,11 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                         ) : null}
                         <TimerPicker
                             ref={timerPickerRef}
-                            onDurationChange={durationChange}
+                            onDurationChange={durationChangeHandler}
                             initialHours={confirmedDuration.hours}
                             initialMinutes={confirmedDuration.minutes}
                             initialSeconds={confirmedDuration.seconds}
+                            aggressivelyGetLatestDuration={true}
                             hideHours={hideHours}
                             hideMinutes={hideMinutes}
                             hideSeconds={hideSeconds}
@@ -192,6 +219,9 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             secondLabel={secondLabel}
                             padWithNItems={padWithNItems}
                             disableInfiniteScroll={disableInfiniteScroll}
+                            use12HourPicker={use12HourPicker}
+                            amLabel={amLabel}
+                            pmLabel={pmLabel}
                             LinearGradient={LinearGradient}
                             pickerContainerProps={pickerContainerProps}
                             pickerGradientOverlayProps={
@@ -210,7 +240,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             style={styles.buttonContainer}>
                             {!hideCancelButton ? (
                                 <TouchableOpacity
-                                    onPress={cancel}
+                                    onPress={cancelHandler}
                                     {...buttonTouchableOpacityProps}>
                                     <Text
                                         style={[
@@ -222,7 +252,7 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                                 </TouchableOpacity>
                             ) : null}
                             <TouchableOpacity
-                                onPress={confirm}
+                                onPress={confirmHandler}
                                 {...buttonTouchableOpacityProps}>
                                 <Text
                                     style={[

package/src/tests/Modal.test.tsx

@@ -5,7 +5,7 @@ import Modal from "../components/Modal";
 
 describe("Modal", () => {
     it("renders without crashing", () => {
-        const { getByTestId } = render(<Modal />);
+        const { getByTestId } = render(<Modal isVisible/>);
         const component = getByTestId("modal");
         expect(component).toBeDefined();
     });

package/src/utils/generateNumbers.ts

@@ -1,10 +1,10 @@
-import { padWithZero } from "./padWithZero";
+import { padNumber } from "./padNumber";
 
 export const generateNumbers = (
     numberOfItems: number,
     options: {
         repeatNTimes?: number;
-        padWithZero?: boolean;
+        padNumbersWithZero?: boolean;
         disableInfiniteScroll?: boolean;
         padWithNItems: number;
     }
@@ -14,15 +14,10 @@ export const generateNumbers = (
     }
 
     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));
-        }
+    for (let i = 0; i <= numberOfItems; i++) {
+        numbers.push(padNumber(i, { padWithZero: options.padNumbersWithZero }));
     }
+
     if ((options.repeatNTimes ?? 1) > 1) {
         numbers = Array(options.repeatNTimes).fill(numbers).flat();
     }
@@ -32,3 +27,38 @@ export const generateNumbers = (
     }
     return numbers;
 };
+
+export const generate12HourNumbers = (options: {
+    repeatNTimes?: number;
+    padNumbersWithZero?: boolean;
+    disableInfiniteScroll?: boolean;
+    padWithNItems: number;
+}) => {
+    let numbers: string[] = [];
+
+    // Generate numbers from 0 to 11 for AM
+    for (let i = 0; i <= 11; i++) {
+        numbers.push(
+            `${padNumber(i, { padWithZero: options.padNumbersWithZero })} AM`
+        );
+    }
+
+    // Generate numbers from 12 to 11 for PM
+    for (let i = 12; i <= 23; i++) {
+        const hour = i > 12 ? i - 12 : i;
+        numbers.push(
+            `${padNumber(hour, { padWithZero: options.padNumbersWithZero })} PM`
+        );
+    }
+
+    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/src/utils/padNumber.ts

@@ -0,0 +1,10 @@
+export const padNumber = (
+    value: number,
+    options?: { padWithZero?: boolean }
+): string => {
+    if (value < 10) {
+        return (options?.padWithZero ? "0" : " ") + value;
+    } else {
+        return String(value);
+    }
+};

package/dist/commonjs/utils/padWithZero.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.padWithZero = void 0;
-const padWithZero = value => {
-  if (value < 10) {
-    return "0" + value;
-  } else {
-    return String(value);
-  }
-};
-exports.padWithZero = padWithZero;
-//# sourceMappingURL=padWithZero.js.map

package/dist/commonjs/utils/padWithZero.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["padWithZero","value","String","exports"],"sources":["padWithZero.ts"],"sourcesContent":["export const padWithZero = (value: number): string => {\n    if (value < 10) {\n        return \"0\" + value;\n    } else {\n        return String(value);\n    }\n};"],"mappings":";;;;;;AAAO,MAAMA,WAAW,GAAIC,KAAa,IAAa;EAClD,IAAIA,KAAK,GAAG,EAAE,EAAE;IACZ,OAAO,GAAG,GAAGA,KAAK;EACtB,CAAC,MAAM;IACH,OAAOC,MAAM,CAACD,KAAK,CAAC;EACxB;AACJ,CAAC;AAACE,OAAA,CAAAH,WAAA,GAAAA,WAAA"}

package/dist/module/utils/padWithZero.js

@@ -1,8 +0,0 @@
-export const padWithZero = value => {
-  if (value < 10) {
-    return "0" + value;
-  } else {
-    return String(value);
-  }
-};
-//# sourceMappingURL=padWithZero.js.map

package/dist/module/utils/padWithZero.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["padWithZero","value","String"],"sources":["padWithZero.ts"],"sourcesContent":["export const padWithZero = (value: number): string => {\n    if (value < 10) {\n        return \"0\" + value;\n    } else {\n        return String(value);\n    }\n};"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAIC,KAAa,IAAa;EAClD,IAAIA,KAAK,GAAG,EAAE,EAAE;IACZ,OAAO,GAAG,GAAGA,KAAK;EACtB,CAAC,MAAM;IACH,OAAOC,MAAM,CAACD,KAAK,CAAC;EACxB;AACJ,CAAC"}

package/dist/typescript/utils/padWithZero.d.ts

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

package/src/utils/padWithZero.ts

@@ -1,7 +0,0 @@
-export const padWithZero = (value: number): string => {
-    if (value < 10) {
-        return "0" + value;
-    } else {
-        return String(value);
-    }
-};