react-native-timer-picker 1.2.7 → 1.2.9

package/src/components/TimerPicker/DurationScroll.tsx

@@ -0,0 +1,337 @@
+import React, {
+    useRef,
+    useCallback,
+    forwardRef,
+    useImperativeHandle,
+} from "react";
+import {
+    View,
+    Text,
+    FlatList,
+    ViewabilityConfigCallbackPairs,
+    ViewToken,
+    NativeSyntheticEvent,
+    NativeScrollEvent,
+} from "react-native";
+
+import { generateNumbers } from "../../utils/generateNumbers";
+import { colorToRgba } from "../../utils/colorToRgba";
+import { generateStyles } from "./TimerPicker.styles";
+import { getAdjustedLimit } from "../../utils/getAdjustedLimit";
+import { getScrollIndex } from "../../utils/getScrollIndex";
+
+export interface DurationScrollRef {
+    reset: (options?: { animated?: boolean }) => void;
+    setValue: (value: number, options?: { animated?: boolean }) => void;
+}
+
+type LinearGradientPoint = {
+    x: number;
+    y: number;
+};
+
+export type LinearGradientProps = React.ComponentProps<typeof View> & {
+    colors: string[];
+    locations?: number[] | null;
+    start?: LinearGradientPoint | null;
+    end?: LinearGradientPoint | null;
+};
+
+export type LimitType = {
+    max?: number;
+    min?: number;
+};
+
+interface DurationScrollProps {
+    numberOfItems: number;
+    label?: string | React.ReactElement;
+    initialValue?: number;
+    onDurationChange: (duration: number) => void;
+    padNumbersWithZero?: boolean;
+    disableInfiniteScroll?: boolean;
+    limit?: LimitType;
+    padWithNItems: number;
+    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LinearGradient?: any;
+    testID?: string;
+    styles: ReturnType<typeof generateStyles>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const KEY_EXTRACTOR = (_: any, index: number) => index.toString();
+
+const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
+    (
+        {
+            numberOfItems,
+            label,
+            initialValue = 0,
+            onDurationChange,
+            padNumbersWithZero = false,
+            disableInfiniteScroll = false,
+            limit,
+            padWithNItems,
+            pickerGradientOverlayProps,
+            topPickerGradientOverlayProps,
+            bottomPickerGradientOverlayProps,
+            LinearGradient,
+            testID,
+            styles,
+        },
+        ref
+    ): React.ReactElement => {
+        const flatListRef = useRef<FlatList | null>(null);
+
+        const data = generateNumbers(numberOfItems, {
+            padWithZero: padNumbersWithZero,
+            repeatNTimes: 3,
+            disableInfiniteScroll,
+            padWithNItems: padWithNItems,
+        });
+
+        const numberOfItemsToShow = 1 + padWithNItems * 2;
+
+        const adjustedLimited = getAdjustedLimit(limit, numberOfItems);
+
+        const initialScrollIndex = getScrollIndex({
+            value: initialValue,
+            numberOfItems,
+            padWithNItems,
+            disableInfiniteScroll,
+        });
+
+        useImperativeHandle(ref, () => ({
+            reset: (options) => {
+                flatListRef.current?.scrollToIndex({
+                    animated: options?.animated ?? false,
+                    index: initialScrollIndex,
+                });
+            },
+            setValue: (value, options) => {
+                flatListRef.current?.scrollToIndex({
+                    animated: options?.animated ?? false,
+                    index: getScrollIndex({
+                        value: value,
+                        numberOfItems,
+                        padWithNItems,
+                        disableInfiniteScroll,
+                    }),
+                });
+            },
+        }));
+
+        const renderItem = useCallback(
+            ({ item }: { item: string }) => {
+                const intItem = parseInt(item);
+
+                return (
+                    <View
+                        key={item}
+                        style={styles.pickerItemContainer}
+                        testID="picker-item">
+                        <Text
+                            style={[
+                                styles.pickerItem,
+                                intItem > adjustedLimited.max ||
+                                intItem < adjustedLimited.min
+                                    ? styles.disabledPickerItem
+                                    : {},
+                            ]}>
+                            {item}
+                        </Text>
+                    </View>
+                );
+            },
+            [
+                adjustedLimited.max,
+                adjustedLimited.min,
+                styles.disabledPickerItem,
+                styles.pickerItem,
+                styles.pickerItemContainer,
+            ]
+        );
+
+        const onMomentumScrollEnd = useCallback(
+            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                const newIndex = Math.round(
+                    e.nativeEvent.contentOffset.y /
+                        styles.pickerItemContainer.height
+                );
+                let newDuration =
+                    (disableInfiniteScroll
+                        ? newIndex
+                        : newIndex + padWithNItems) %
+                    (numberOfItems + 1);
+
+                // check limits
+                if (newDuration > adjustedLimited.max) {
+                    const targetScrollIndex =
+                        newIndex - (newDuration - adjustedLimited.max);
+                    flatListRef.current?.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) {
+                    const targetScrollIndex =
+                        newIndex + (adjustedLimited.min - newDuration);
+                    flatListRef.current?.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,
+            ]
+        );
+
+        const onViewableItemsChanged = useCallback(
+            ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+                if (
+                    viewableItems[0]?.index &&
+                    viewableItems[0].index < numberOfItems * 0.5
+                ) {
+                    flatListRef.current?.scrollToIndex({
+                        animated: false,
+                        index: viewableItems[0].index + numberOfItems,
+                    });
+                } else if (
+                    viewableItems[0]?.index &&
+                    viewableItems[0].index >= numberOfItems * 2.5
+                ) {
+                    flatListRef.current?.scrollToIndex({
+                        animated: false,
+                        index: viewableItems[0].index - numberOfItems,
+                    });
+                }
+            },
+            [numberOfItems]
+        );
+
+        const getItemLayout = useCallback(
+            (_: ArrayLike<string> | null | undefined, index: number) => ({
+                length: styles.pickerItemContainer.height,
+                offset: styles.pickerItemContainer.height * index,
+                index,
+            }),
+            [styles.pickerItemContainer.height]
+        );
+
+        const viewabilityConfigCallbackPairs =
+            useRef<ViewabilityConfigCallbackPairs>([
+                {
+                    viewabilityConfig: { viewAreaCoveragePercentThreshold: 25 },
+                    onViewableItemsChanged: onViewableItemsChanged,
+                },
+            ]);
+
+        return (
+            <View
+                testID={testID}
+                style={{
+                    height:
+                        styles.pickerItemContainer.height * numberOfItemsToShow,
+                    overflow: "hidden",
+                }}>
+                <FlatList
+                    ref={flatListRef}
+                    data={data}
+                    getItemLayout={getItemLayout}
+                    initialScrollIndex={initialScrollIndex}
+                    windowSize={numberOfItemsToShow}
+                    renderItem={renderItem}
+                    keyExtractor={KEY_EXTRACTOR}
+                    showsVerticalScrollIndicator={false}
+                    decelerationRate={0.9}
+                    scrollEventThrottle={16}
+                    snapToAlignment="start"
+                    // used in place of snapToOffset due to bug on Android
+                    snapToOffsets={[...Array(data.length)].map(
+                        (_, i) => i * styles.pickerItemContainer.height
+                    )}
+                    viewabilityConfigCallbackPairs={
+                        !disableInfiniteScroll
+                            ? viewabilityConfigCallbackPairs?.current
+                            : undefined
+                    }
+                    onMomentumScrollEnd={onMomentumScrollEnd}
+                    testID="duration-scroll-flatlist"
+                />
+                <View style={styles.pickerLabelContainer} pointerEvents="none">
+                    {typeof label === "string" ? (
+                        <Text style={styles.pickerLabel}>{label}</Text>
+                    ) : (
+                        label ?? null
+                    )}
+                </View>
+                {LinearGradient ? (
+                    <>
+                        <LinearGradient
+                            colors={[
+                                styles.pickerContainer.backgroundColor ??
+                                    "white",
+                                colorToRgba({
+                                    color:
+                                        styles.pickerContainer
+                                            .backgroundColor ?? "white",
+                                    opacity: 0,
+                                }),
+                            ]}
+                            start={{ x: 1, y: 0.3 }}
+                            end={{ x: 1, y: 1 }}
+                            pointerEvents="none"
+                            {...pickerGradientOverlayProps}
+                            {...topPickerGradientOverlayProps}
+                            style={[styles.pickerGradientOverlay, { top: 0 }]}
+                        />
+                        <LinearGradient
+                            colors={[
+                                colorToRgba({
+                                    color:
+                                        styles.pickerContainer
+                                            .backgroundColor ?? "white",
+                                    opacity: 0,
+                                }),
+                                styles.pickerContainer.backgroundColor ??
+                                    "white",
+                            ]}
+                            start={{ x: 1, y: 0 }}
+                            end={{ x: 1, y: 0.7 }}
+                            pointerEvents="none"
+                            {...pickerGradientOverlayProps}
+                            {...bottomPickerGradientOverlayProps}
+                            style={[
+                                styles.pickerGradientOverlay,
+                                { bottom: -1 },
+                            ]}
+                        />
+                    </>
+                ) : null}
+            </View>
+        );
+    }
+);
+
+export default React.memo(DurationScroll);

package/src/components/TimerPicker/TimerPicker.styles.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { StyleSheet } from "react-native";
+
+export interface CustomTimerPickerStyles {
+    theme?: "light" | "dark";
+    backgroundColor?: string;
+    text?: any;
+    pickerContainer?: any;
+    pickerLabelContainer?: any;
+    pickerLabel?: any;
+    pickerItemContainer?: any;
+    pickerItem?: any;
+    disabledPickerItem?: any;
+    pickerGradientOverlay?: any;
+}
+
+const DARK_MODE_BACKGROUND_COLOR = "#232323";
+const DARK_MODE_TEXT_COLOR = "#E9E9E9";
+const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
+const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
+
+export const generateStyles = (
+    customStyles: CustomTimerPickerStyles | undefined,
+    options: { padWithNItems: number }
+) =>
+    StyleSheet.create({
+        pickerContainer: {
+            flexDirection: "row",
+            marginRight: "8%",
+            backgroundColor:
+                customStyles?.backgroundColor ??
+                (customStyles?.theme === "dark"
+                    ? DARK_MODE_BACKGROUND_COLOR
+                    : LIGHT_MODE_BACKGROUND_COLOR),
+            ...customStyles?.pickerContainer,
+        },
+        pickerLabelContainer: {
+            position: "absolute",
+            right: 4,
+            top: 0,
+            bottom: 0,
+            justifyContent: "center",
+            ...customStyles?.pickerLabelContainer,
+        },
+        pickerLabel: {
+            fontSize: 18,
+            fontWeight: "bold",
+            marginTop: (customStyles?.pickerItem?.fontSize ?? 25) / 6,
+            color:
+                customStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : LIGHT_MODE_TEXT_COLOR,
+            ...customStyles?.text,
+            ...customStyles?.pickerLabel,
+        },
+        pickerItemContainer: {
+            height: 50,
+            justifyContent: "center",
+            alignItems: "center",
+            width: (customStyles?.pickerItem?.fontSize ?? 25) * 3.6,
+            ...customStyles?.pickerItemContainer,
+        },
+        pickerItem: {
+            textAlignVertical: "center",
+            fontSize: 25,
+            color:
+                customStyles?.theme === "dark"
+                    ? DARK_MODE_TEXT_COLOR
+                    : LIGHT_MODE_TEXT_COLOR,
+            ...customStyles?.text,
+            ...customStyles?.pickerItem,
+        },
+        disabledPickerItem: {
+            opacity: 0.2,
+            ...customStyles?.disabledPickerItem,
+        },
+        pickerGradientOverlay: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            height:
+                options.padWithNItems === 0
+                    ? "30%"
+                    : (customStyles?.pickerItemContainer?.height ?? 50) * 0.8,
+            ...customStyles?.pickerGradientOverlay,
+        },
+    });

package/src/components/TimerPicker/index.tsx

@@ -0,0 +1,216 @@
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { View } from "react-native";
+
+import DurationScroll, { DurationScrollRef, LimitType } from "./DurationScroll";
+
+import { generateStyles, CustomTimerPickerStyles } from "./TimerPicker.styles";
+import { LinearGradientProps } from "./DurationScroll";
+
+export interface TimerPickerRef {
+    reset: (options?: { animated?: boolean }) => void;
+    setValue: (
+        value: {
+            hours: number;
+            minutes: number;
+            seconds: number;
+        },
+        options?: { animated?: boolean }
+    ) => void;
+}
+
+export interface TimerPickerProps {
+    onDurationChange?: (duration: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    initialHours?: number;
+    initialMinutes?: number;
+    initialSeconds?: number;
+    hideHours?: boolean;
+    hideMinutes?: boolean;
+    hideSeconds?: boolean;
+    hourLimit?: LimitType;
+    minuteLimit?: LimitType;
+    secondLimit?: LimitType;
+    hourLabel?: string | React.ReactElement;
+    minuteLabel?: string | React.ReactElement;
+    secondLabel?: string | React.ReactElement;
+    padWithNItems?: number;
+    disableInfiniteScroll?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LinearGradient?: any;
+    pickerContainerProps?: React.ComponentProps<typeof View>;
+    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
+    styles?: CustomTimerPickerStyles;
+}
+
+const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
+    (
+        {
+            onDurationChange,
+            initialHours = 0,
+            initialMinutes = 0,
+            initialSeconds = 0,
+            hideHours = false,
+            hideMinutes = false,
+            hideSeconds = false,
+            hourLimit,
+            minuteLimit,
+            secondLimit,
+            hourLabel = "h",
+            minuteLabel = "m",
+            secondLabel = "s",
+            padWithNItems = 1,
+            disableInfiniteScroll = false,
+            LinearGradient,
+            pickerContainerProps,
+            pickerGradientOverlayProps,
+            topPickerGradientOverlayProps,
+            bottomPickerGradientOverlayProps,
+            styles: customStyles,
+        },
+        ref
+    ): React.ReactElement => {
+        const checkedPadWithNItems =
+            padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
+
+        const styles = useMemo(
+            () =>
+                generateStyles(customStyles, {
+                    padWithNItems: checkedPadWithNItems,
+                }),
+
+            [checkedPadWithNItems, customStyles]
+        );
+
+        const [selectedHours, setSelectedHours] = useState(initialHours);
+        const [selectedMinutes, setSelectedMinutes] = useState(initialMinutes);
+        const [selectedSeconds, setSelectedSeconds] = useState(initialSeconds);
+
+        useEffect(() => {
+            onDurationChange?.({
+                hours: selectedHours,
+                minutes: selectedMinutes,
+                seconds: selectedSeconds,
+            });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [selectedHours, selectedMinutes, selectedSeconds]);
+
+        const hoursDurationScrollRef = useRef<DurationScrollRef>(null);
+        const minutesDurationScrollRef = useRef<DurationScrollRef>(null);
+        const secondsDurationScrollRef = useRef<DurationScrollRef>(null);
+
+        useImperativeHandle(ref, () => ({
+            reset: (options) => {
+                setSelectedHours(initialHours);
+                setSelectedMinutes(initialMinutes);
+                setSelectedSeconds(initialSeconds);
+                hoursDurationScrollRef.current?.reset(options);
+                minutesDurationScrollRef.current?.reset(options);
+                secondsDurationScrollRef.current?.reset(options);
+            },
+            setValue: (value, options) => {
+                setSelectedHours(value.hours);
+                setSelectedMinutes(value.minutes);
+                setSelectedSeconds(value.seconds);
+                hoursDurationScrollRef.current?.setValue(value.hours, options);
+                minutesDurationScrollRef.current?.setValue(
+                    value.minutes,
+                    options
+                );
+                secondsDurationScrollRef.current?.setValue(
+                    value.seconds,
+                    options
+                );
+            },
+        }));
+
+        return (
+            <View
+                {...pickerContainerProps}
+                style={styles.pickerContainer}
+                testID="timer-picker">
+                {!hideHours ? (
+                    <DurationScroll
+                        ref={hoursDurationScrollRef}
+                        numberOfItems={23}
+                        label={hourLabel}
+                        initialValue={initialHours}
+                        onDurationChange={setSelectedHours}
+                        pickerGradientOverlayProps={pickerGradientOverlayProps}
+                        topPickerGradientOverlayProps={
+                            topPickerGradientOverlayProps
+                        }
+                        bottomPickerGradientOverlayProps={
+                            bottomPickerGradientOverlayProps
+                        }
+                        disableInfiniteScroll={disableInfiniteScroll}
+                        padWithNItems={checkedPadWithNItems}
+                        limit={hourLimit}
+                        LinearGradient={LinearGradient}
+                        styles={styles}
+                        testID="duration-scroll-hour"
+                    />
+                ) : null}
+                {!hideMinutes ? (
+                    <DurationScroll
+                        ref={minutesDurationScrollRef}
+                        numberOfItems={59}
+                        label={minuteLabel}
+                        initialValue={initialMinutes}
+                        onDurationChange={setSelectedMinutes}
+                        padNumbersWithZero
+                        pickerGradientOverlayProps={pickerGradientOverlayProps}
+                        topPickerGradientOverlayProps={
+                            topPickerGradientOverlayProps
+                        }
+                        bottomPickerGradientOverlayProps={
+                            bottomPickerGradientOverlayProps
+                        }
+                        disableInfiniteScroll={disableInfiniteScroll}
+                        padWithNItems={checkedPadWithNItems}
+                        limit={minuteLimit}
+                        LinearGradient={LinearGradient}
+                        styles={styles}
+                        testID="duration-scroll-minute"
+                    />
+                ) : null}
+                {!hideSeconds ? (
+                    <DurationScroll
+                        ref={secondsDurationScrollRef}
+                        numberOfItems={59}
+                        label={secondLabel}
+                        initialValue={initialSeconds}
+                        onDurationChange={setSelectedSeconds}
+                        padNumbersWithZero
+                        pickerGradientOverlayProps={pickerGradientOverlayProps}
+                        topPickerGradientOverlayProps={
+                            topPickerGradientOverlayProps
+                        }
+                        bottomPickerGradientOverlayProps={
+                            bottomPickerGradientOverlayProps
+                        }
+                        disableInfiniteScroll={disableInfiniteScroll}
+                        padWithNItems={checkedPadWithNItems}
+                        limit={secondLimit}
+                        LinearGradient={LinearGradient}
+                        styles={styles}
+                        testID="duration-scroll-second"
+                    />
+                ) : null}
+            </View>
+        );
+    }
+);
+
+export default React.memo(TimerPicker);