react-native-timer-picker 1.9.0 → 1.10.0

package/src/components/DurationScroll/index.tsx

@@ -1,459 +0,0 @@
-import React, {
-    useRef,
-    useCallback,
-    forwardRef,
-    useImperativeHandle,
-    useState,
-    useEffect,
-} from "react";
-
-import { View, Text, FlatList as RNFlatList } from "react-native";
-import type {
-    ViewabilityConfigCallbackPairs,
-    ViewToken,
-    NativeSyntheticEvent,
-    NativeScrollEvent,
-} from "react-native";
-
-import { colorToRgba } from "../../utils/colorToRgba";
-import {
-    generate12HourNumbers,
-    generateNumbers,
-} from "../../utils/generateNumbers";
-import { getAdjustedLimit } from "../../utils/getAdjustedLimit";
-import { getScrollIndex } from "../../utils/getScrollIndex";
-
-import type { DurationScrollProps, DurationScrollRef } from "./types";
-
-const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
-    (props, ref) => {
-        const {
-            aggressivelyGetLatestDuration,
-            allowFontScaling = false,
-            amLabel,
-            Audio,
-            bottomPickerGradientOverlayProps,
-            clickSoundAsset,
-            disableInfiniteScroll = false,
-            FlatList = RNFlatList,
-            Haptics,
-            initialValue = 0,
-            is12HourPicker,
-            isDisabled,
-            label,
-            limit,
-            LinearGradient,
-            numberOfItems,
-            onDurationChange,
-            padNumbersWithZero = false,
-            padWithNItems,
-            pickerGradientOverlayProps,
-            pmLabel,
-            styles,
-            testID,
-            topPickerGradientOverlayProps,
-        } = props;
-
-        const data = !is12HourPicker
-            ? generateNumbers(numberOfItems, {
-                  padNumbersWithZero,
-                  repeatNTimes: 3,
-                  disableInfiniteScroll,
-                  padWithNItems,
-              })
-            : generate12HourNumbers({
-                  padNumbersWithZero,
-                  repeatNTimes: 3,
-                  disableInfiniteScroll,
-                  padWithNItems,
-              });
-
-        const numberOfItemsToShow = 1 + padWithNItems * 2;
-
-        const adjustedLimited = getAdjustedLimit(limit, numberOfItems);
-
-        const initialScrollIndex = getScrollIndex({
-            value: initialValue,
-            numberOfItems,
-            padWithNItems,
-            disableInfiniteScroll,
-        });
-
-        // keep track of the latest duration as it scrolls
-        const latestDuration = useRef(0);
-        // keep track of the last index scrolled past for haptic/audio feedback
-        const lastFeedbackIndex = useRef(0);
-
-        const flatListRef = useRef<RNFlatList | null>(null);
-
-        const [clickSound, setClickSound] = useState<
-            | {
-                  replayAsync: () => Promise<void>;
-                  unloadAsync: () => Promise<void>;
-              }
-            | undefined
-        >();
-
-        // Preload the sound when the component mounts
-        useEffect(() => {
-            const loadSound = async () => {
-                if (Audio) {
-                    const { sound } = await Audio.Sound.createAsync(
-                        clickSoundAsset ?? {
-                            // use a hosted sound as a fallback (do not use local asset due to loader issues
-                            // in some environments when including mp3 in library)
-                            uri: "https://drive.google.com/uc?export=download&id=10e1YkbNsRh-vGx1jmS1Nntz8xzkBp4_I",
-                        },
-                        { shouldPlay: false }
-                    );
-                    setClickSound(sound);
-                }
-            };
-            loadSound();
-
-            // Unload sound when component unmounts
-            return () => {
-                clickSound?.unloadAsync();
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [Audio]);
-
-        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,
-                    }),
-                });
-            },
-            latestDuration: latestDuration,
-        }));
-
-        const renderItem = useCallback(
-            ({ item }: { item: string }) => {
-                let stringItem = item;
-                let intItem: number;
-                let isAm: boolean | undefined;
-
-                if (!is12HourPicker) {
-                    intItem = parseInt(item);
-                } else {
-                    isAm = item.includes("AM");
-                    stringItem = item.replace(/\s[AP]M/g, "");
-                    intItem = parseInt(stringItem);
-                }
-
-                return (
-                    <View
-                        key={item}
-                        style={styles.pickerItemContainer}
-                        testID="picker-item">
-                        <Text
-                            allowFontScaling={allowFontScaling}
-                            style={[
-                                styles.pickerItem,
-                                intItem > adjustedLimited.max ||
-                                intItem < adjustedLimited.min
-                                    ? styles.disabledPickerItem
-                                    : {},
-                            ]}>
-                            {stringItem}
-                        </Text>
-                        {is12HourPicker ? (
-                            <View
-                                pointerEvents="none"
-                                style={styles.pickerAmPmContainer}>
-                                <Text
-                                    allowFontScaling={allowFontScaling}
-                                    style={[styles.pickerAmPmLabel]}>
-                                    {isAm ? amLabel : pmLabel}
-                                </Text>
-                            </View>
-                        ) : null}
-                    </View>
-                );
-            },
-            [
-                adjustedLimited.max,
-                adjustedLimited.min,
-                allowFontScaling,
-                amLabel,
-                is12HourPicker,
-                pmLabel,
-                styles.disabledPickerItem,
-                styles.pickerAmPmContainer,
-                styles.pickerAmPmLabel,
-                styles.pickerItem,
-                styles.pickerItemContainer,
-            ]
-        );
-
-        const onScroll = useCallback(
-            (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-                // this function is only used when the picker is in a modal and/or has Haptic/Audio feedback
-                // it is used to ensure that the modal gets the latest duration on clicking
-                // the confirm button, even if the scrollview is still scrolling
-                if (!aggressivelyGetLatestDuration && !Haptics && !Audio) {
-                    return;
-                }
-
-                if (aggressivelyGetLatestDuration) {
-                    const newIndex = Math.round(
-                        e.nativeEvent.contentOffset.y /
-                            styles.pickerItemContainer.height
-                    );
-                    let newDuration =
-                        (disableInfiniteScroll
-                            ? newIndex
-                            : newIndex + padWithNItems) %
-                        (numberOfItems + 1);
-
-                    if (newDuration !== latestDuration.current) {
-                        // check limits
-                        if (newDuration > adjustedLimited.max) {
-                            newDuration = adjustedLimited.max;
-                        } else if (newDuration < adjustedLimited.min) {
-                            newDuration = adjustedLimited.min;
-                        }
-
-                        latestDuration.current = newDuration;
-                    }
-                }
-
-                if (Haptics || Audio) {
-                    const feedbackIndex = Math.round(
-                        (e.nativeEvent.contentOffset.y +
-                            styles.pickerItemContainer.height / 2) /
-                            styles.pickerItemContainer.height
-                    );
-
-                    if (feedbackIndex !== lastFeedbackIndex.current) {
-                        // this check stops the feedback firing when the component mounts
-                        if (lastFeedbackIndex.current) {
-                            // fire haptic feedback if available
-                            Haptics?.selectionAsync();
-
-                            // play click sound if available
-                            clickSound?.replayAsync();
-                        }
-
-                        lastFeedbackIndex.current = feedbackIndex;
-                    }
-                }
-            },
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            [
-                adjustedLimited.max,
-                adjustedLimited.min,
-                aggressivelyGetLatestDuration,
-                clickSound,
-                disableInfiniteScroll,
-                numberOfItems,
-                padWithNItems,
-                styles.pickerItemContainer.height,
-            ]
-        );
-
-        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
-                pointerEvents={isDisabled ? "none" : undefined}
-                style={[
-                    {
-                        height:
-                            styles.pickerItemContainer.height *
-                            numberOfItemsToShow,
-                        overflow: "visible",
-                    },
-                    isDisabled && styles.disabledPickerContainer,
-                ]}
-                testID={testID}>
-                <FlatList
-                    ref={flatListRef}
-                    data={data}
-                    decelerationRate={0.88}
-                    getItemLayout={getItemLayout}
-                    initialScrollIndex={initialScrollIndex}
-                    keyExtractor={(_, index) => index.toString()}
-                    nestedScrollEnabled
-                    onMomentumScrollEnd={onMomentumScrollEnd}
-                    onScroll={onScroll}
-                    renderItem={renderItem}
-                    scrollEnabled={!isDisabled}
-                    scrollEventThrottle={16}
-                    showsVerticalScrollIndicator={false}
-                    snapToAlignment="start"
-                    // used in place of snapToOffset due to bug on Android
-                    snapToOffsets={[...Array(data.length)].map(
-                        (_, i) => i * styles.pickerItemContainer.height
-                    )}
-                    testID="duration-scroll-flatlist"
-                    viewabilityConfigCallbackPairs={
-                        !disableInfiniteScroll
-                            ? viewabilityConfigCallbackPairs?.current
-                            : undefined
-                    }
-                    windowSize={numberOfItemsToShow}
-                />
-                <View pointerEvents="none" style={styles.pickerLabelContainer}>
-                    {typeof label === "string" ? (
-                        <Text
-                            allowFontScaling={allowFontScaling}
-                            style={styles.pickerLabel}>
-                            {label}
-                        </Text>
-                    ) : (
-                        label ?? null
-                    )}
-                </View>
-                {LinearGradient ? (
-                    <>
-                        <LinearGradient
-                            colors={[
-                                styles.pickerContainer.backgroundColor ??
-                                    "white",
-                                colorToRgba({
-                                    color:
-                                        styles.pickerContainer
-                                            .backgroundColor ?? "white",
-                                    opacity: 0,
-                                }),
-                            ]}
-                            end={{ x: 1, y: 1 }}
-                            pointerEvents="none"
-                            start={{ x: 1, y: 0.3 }}
-                            {...pickerGradientOverlayProps}
-                            {...topPickerGradientOverlayProps}
-                            style={[styles.pickerGradientOverlay, { top: 0 }]}
-                        />
-                        <LinearGradient
-                            colors={[
-                                colorToRgba({
-                                    color:
-                                        styles.pickerContainer
-                                            .backgroundColor ?? "white",
-                                    opacity: 0,
-                                }),
-                                styles.pickerContainer.backgroundColor ??
-                                    "white",
-                            ]}
-                            end={{ x: 1, y: 0.7 }}
-                            pointerEvents="none"
-                            start={{ x: 1, y: 0 }}
-                            {...pickerGradientOverlayProps}
-                            {...bottomPickerGradientOverlayProps}
-                            style={[
-                                styles.pickerGradientOverlay,
-                                { bottom: -1 },
-                            ]}
-                        />
-                    </>
-                ) : null}
-            </View>
-        );
-    }
-);
-
-export default React.memo(DurationScroll);

package/src/components/DurationScroll/types.ts

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { MutableRefObject } from "react";
-
-import type {
-    View,
-    FlatList as RNFlatList,
-    FlatListProps as RNFlatListProps,
-} from "react-native";
-
-import type { generateStyles } from "../TimerPicker/styles";
-
-export type CustomFlatList = <ItemT = any>(
-    props: React.PropsWithChildren<
-        RNFlatListProps<ItemT> & React.RefAttributes<RNFlatList<ItemT>>
-    >,
-    ref: React.ForwardedRef<RNFlatList<ItemT>>
-) => React.ReactElement | null;
-
-export interface DurationScrollProps {
-    Audio?: any;
-    FlatList?: CustomFlatList;
-    Haptics?: any;
-    LinearGradient?: any;
-    aggressivelyGetLatestDuration: boolean;
-    allowFontScaling?: boolean;
-    amLabel?: string;
-    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    clickSoundAsset?: SoundAssetType;
-    disableInfiniteScroll?: boolean;
-    initialValue?: number;
-    is12HourPicker?: boolean;
-    isDisabled?: boolean;
-    label?: string | React.ReactElement;
-    limit?: LimitType;
-    numberOfItems: number;
-    onDurationChange: (duration: number) => void;
-    padNumbersWithZero?: boolean;
-    padWithNItems: number;
-    pickerGradientOverlayProps?: Partial<LinearGradientProps>;
-    pmLabel?: string;
-    styles: ReturnType<typeof generateStyles>;
-    testID?: string;
-    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
-}
-
-export interface DurationScrollRef {
-    latestDuration: MutableRefObject<number>;
-    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[];
-    end?: LinearGradientPoint | null;
-    locations?: number[] | null;
-    start?: LinearGradientPoint | null;
-};
-
-export type LimitType = {
-    max?: number;
-    min?: number;
-};
-
-export type SoundAssetType =
-    | number
-    | {
-          headers?: Record<string, string>;
-          overrideFileExtensionAndroid?: string;
-          uri: string;
-      };

package/src/components/Modal/index.tsx

@@ -1,124 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-
-import {
-    Animated,
-    Easing,
-    Modal as ReactNativeModal,
-    TouchableWithoutFeedback,
-    useWindowDimensions,
-} from "react-native";
-
-import { styles } from "./styles";
-import type { ModalProps } from "./types";
-
-export const Modal = (props: ModalProps) => {
-    const {
-        animationDuration = 300,
-        children,
-        contentStyle,
-        isVisible = false,
-        modalProps,
-        onHide,
-        onOverlayPress,
-        overlayOpacity = 0.4,
-        overlayStyle,
-        testID = "modal",
-    } = props;
-
-    const { height: screenHeight, width: screenWidth } = useWindowDimensions();
-
-    const isMounted = useRef(false);
-    const animatedOpacity = useRef(new Animated.Value(0));
-
-    useEffect(() => {
-        isMounted.current = true;
-        if (isVisible) {
-            show();
-        }
-
-        return () => {
-            isMounted.current = false;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const backdropAnimatedStyle = {
-        opacity: animatedOpacity.current.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, overlayOpacity],
-        }),
-    };
-    const contentAnimatedStyle = {
-        transform: [
-            {
-                translateY: animatedOpacity.current.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [screenHeight, 0],
-                    extrapolate: "clamp",
-                }),
-            },
-        ],
-    };
-
-    const show = useCallback(() => {
-        Animated.timing(animatedOpacity.current, {
-            easing: Easing.inOut(Easing.quad),
-            // Using native driver in the modal makes the content flash
-            useNativeDriver: true,
-            duration: animationDuration,
-            toValue: 1,
-        }).start();
-    }, [animationDuration]);
-
-    const hide = useCallback(() => {
-        Animated.timing(animatedOpacity.current, {
-            easing: Easing.inOut(Easing.quad),
-            // Using native driver in the modal makes the content flash
-            useNativeDriver: true,
-            duration: animationDuration,
-            toValue: 0,
-        }).start(() => {
-            if (isMounted.current) {
-                onHide?.();
-            }
-        });
-    }, [animationDuration, onHide]);
-
-    useEffect(() => {
-        if (isVisible) {
-            show();
-        } else {
-            hide();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isVisible]);
-
-    return (
-        <ReactNativeModal
-            animationType="fade"
-            transparent
-            visible={isVisible}
-            {...modalProps}
-            testID={testID}>
-            <TouchableWithoutFeedback
-                onPress={onOverlayPress}
-                testID="modal-backdrop">
-                <Animated.View
-                    style={[
-                        styles.backdrop,
-                        backdropAnimatedStyle,
-                        { width: screenWidth, height: screenHeight },
-                        overlayStyle,
-                    ]}
-                />
-            </TouchableWithoutFeedback>
-            <Animated.View
-                pointerEvents="box-none"
-                style={[styles.content, contentAnimatedStyle, contentStyle]}>
-                {children}
-            </Animated.View>
-        </ReactNativeModal>
-    );
-};
-
-export default React.memo(Modal);

package/src/components/Modal/styles.ts

@@ -1,26 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const styles = StyleSheet.create({
-    container: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
-    backdrop: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: "black",
-        opacity: 0,
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 1,
-    },
-});

package/src/components/Modal/types.ts

@@ -1,17 +0,0 @@
-import type { ComponentProps } from "react";
-
-import type { ViewStyle } from "react-native";
-import type { Modal as ReactNativeModal } from "react-native";
-
-export interface ModalProps {
-    animationDuration?: number;
-    children?: React.ReactElement;
-    contentStyle?: ViewStyle;
-    isVisible?: boolean;
-    modalProps?: ComponentProps<typeof ReactNativeModal>;
-    onHide?: () => void;
-    onOverlayPress?: () => void;
-    overlayOpacity?: number;
-    overlayStyle?: ViewStyle;
-    testID?: string;
-}