react-native-timer-picker 1.3.0 → 1.5.0

package/src/components/TimerPicker/index.tsx

@@ -32,6 +32,7 @@ export interface TimerPickerRef {
 }
 
 export interface TimerPickerProps {
+    allowFontScaling?: boolean;
     onDurationChange?: (duration: {
         hours: number;
         minutes: number;
@@ -41,6 +42,9 @@ export interface TimerPickerProps {
     initialMinutes?: number;
     initialSeconds?: number;
     aggressivelyGetLatestDuration?: boolean;
+    use12HourPicker?: boolean;
+    amLabel?: string;
+    pmLabel?: string;
     hideHours?: boolean;
     hideMinutes?: boolean;
     hideSeconds?: boolean;
@@ -64,6 +68,7 @@ export interface TimerPickerProps {
 const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
     (
         {
+            allowFontScaling = false,
             onDurationChange,
             initialHours = 0,
             initialMinutes = 0,
@@ -74,12 +79,15 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
             hourLimit,
             minuteLimit,
             secondLimit,
-            hourLabel = "h",
-            minuteLabel = "m",
-            secondLabel = "s",
+            hourLabel,
+            minuteLabel,
+            secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
             aggressivelyGetLatestDuration = false,
+            use12HourPicker = false,
+            amLabel = "am",
+            pmLabel = "pm",
             LinearGradient,
             pickerContainerProps,
             pickerGradientOverlayProps,
@@ -157,9 +165,14 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={hoursDurationScrollRef}
                         numberOfItems={23}
-                        label={hourLabel}
+                        label={
+                            hourLabel ?? (!use12HourPicker ? "h" : undefined)
+                        }
                         initialValue={initialHours}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        allowFontScaling={allowFontScaling}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedHours}
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
                         topPickerGradientOverlayProps={
@@ -172,6 +185,9 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                         padWithNItems={checkedPadWithNItems}
                         limit={hourLimit}
                         LinearGradient={LinearGradient}
+                        is12HourPicker={use12HourPicker}
+                        amLabel={amLabel}
+                        pmLabel={pmLabel}
                         styles={styles}
                         testID="duration-scroll-hour"
                     />
@@ -180,9 +196,12 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={minutesDurationScrollRef}
                         numberOfItems={59}
-                        label={minuteLabel}
+                        label={minuteLabel ?? "m"}
                         initialValue={initialMinutes}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        allowFontScaling={allowFontScaling}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedMinutes}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}
@@ -204,9 +223,12 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
                     <DurationScroll
                         ref={secondsDurationScrollRef}
                         numberOfItems={59}
-                        label={secondLabel}
+                        label={secondLabel ?? "s"}
                         initialValue={initialSeconds}
-                        aggressivelyGetLatestDuration={aggressivelyGetLatestDuration}
+                        allowFontScaling={allowFontScaling}
+                        aggressivelyGetLatestDuration={
+                            aggressivelyGetLatestDuration
+                        }
                         onDurationChange={setSelectedSeconds}
                         padNumbersWithZero
                         pickerGradientOverlayProps={pickerGradientOverlayProps}

package/src/components/TimerPickerModal.styles.ts

@@ -1,16 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { StyleSheet } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import type { CustomTimerPickerStyles } from "./TimerPicker/TimerPicker.styles";
+import { ComponentProps } from "react";
 
 export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
-    container?: any;
-    contentContainer?: any;
-    buttonContainer?: any;
-    button?: any;
-    cancelButton?: any;
-    confirmButton?: any;
-    modalTitle?: any;
+    container?: ComponentProps<typeof View>;
+    contentContainer?: ComponentProps<typeof View>;
+    buttonContainer?: ComponentProps<typeof View>;
+    button?: ComponentProps<typeof Text>;
+    cancelButton?: ComponentProps<typeof Text>;
+    confirmButton?: ComponentProps<typeof Text>;
+    modalTitle?: ComponentProps<typeof Text>;
 }
 
 const DARK_MODE_BACKGROUND_COLOR = "#232323";

package/src/components/index.tsx

@@ -78,11 +78,15 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
             hourLimit,
             minuteLimit,
             secondLimit,
-            hourLabel = "h",
-            minuteLabel = "m",
-            secondLabel = "s",
+            hourLabel,
+            minuteLabel,
+            secondLabel,
             padWithNItems = 1,
             disableInfiniteScroll = false,
+            allowFontScaling = false,
+            use12HourPicker,
+            amLabel,
+            pmLabel,
             hideCancelButton = false,
             confirmButtonText = "Confirm",
             cancelButtonText = "Cancel",
@@ -216,6 +220,10 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
                             secondLabel={secondLabel}
                             padWithNItems={padWithNItems}
                             disableInfiniteScroll={disableInfiniteScroll}
+                            allowFontScaling={allowFontScaling}
+                            use12HourPicker={use12HourPicker}
+                            amLabel={amLabel}
+                            pmLabel={pmLabel}
                             LinearGradient={LinearGradient}
                             pickerContainerProps={pickerContainerProps}
                             pickerGradientOverlayProps={

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);
-    }
-};