From aab457a7bc0deea376639c214e25f76f71b10c70 Mon Sep 17 00:00:00 2001 From: Mike Loos Date: Thu, 24 Apr 2025 06:45:00 -0400 Subject: [PATCH 1/2] Added decelerationRate prop --- README.md | 1 + src/components/DurationScroll/index.tsx | 3 ++- src/components/DurationScroll/types.ts | 1 + src/components/TimerPicker/index.tsx | 4 ++++ src/components/TimerPicker/types.ts | 1 + 5 files changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e243a0d..1a5d16c 100644 --- a/README.md +++ b/README.md @@ -489,6 +489,7 @@ return ( | pickerContainerProps | Props for the picker container | `React.ComponentProps` | - | false | | pickerGradientOverlayProps | Props for the gradient overlay (supply a different `locations` array to adjust its position) overlays | `Partial` | - | false | | styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles-) | - | false | +| decelerationRate | Set how quickly the picker decelerates after the user lifts their finger | 'fast', 'normal', or Number | 0.88 | false | #### Custom Styles 👗 diff --git a/src/components/DurationScroll/index.tsx b/src/components/DurationScroll/index.tsx index 7f83a96..73a7d3c 100644 --- a/src/components/DurationScroll/index.tsx +++ b/src/components/DurationScroll/index.tsx @@ -57,6 +57,7 @@ const DurationScroll = forwardRef( repeatNumbersNTimesNotExplicitlySet, styles, testID, + decelerationRate = 0.88, } = props; const numberOfItems = useMemo(() => { @@ -504,7 +505,7 @@ const DurationScroll = forwardRef( styles.durationScrollFlatListContentContainer } data={numbersForFlatList} - decelerationRate={0.88} + decelerationRate={decelerationRate} getItemLayout={getItemLayout} initialScrollIndex={initialScrollIndex} keyExtractor={(_, index) => index.toString()} diff --git a/src/components/DurationScroll/types.ts b/src/components/DurationScroll/types.ts index 10cf46f..6cba64a 100644 --- a/src/components/DurationScroll/types.ts +++ b/src/components/DurationScroll/types.ts @@ -44,6 +44,7 @@ export interface DurationScrollProps { repeatNumbersNTimesNotExplicitlySet: boolean; styles: ReturnType; testID?: string; + decelerationRate?: number | "normal" | "fast"; } export interface DurationScrollRef { diff --git a/src/components/TimerPicker/index.tsx b/src/components/TimerPicker/index.tsx index 4e8ea92..73b4d20 100644 --- a/src/components/TimerPicker/index.tsx +++ b/src/components/TimerPicker/index.tsx @@ -54,6 +54,7 @@ const TimerPicker = forwardRef( secondsPickerIsDisabled = false, styles: customStyles, use12HourPicker = false, + decelerationRate = 0.88, ...otherProps } = props; @@ -173,6 +174,7 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-hour" + decelerationRate={decelerationRate} {...otherProps} /> ) : null} @@ -199,6 +201,7 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-minute" + decelerationRate={decelerationRate} {...otherProps} /> ) : null} @@ -225,6 +228,7 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-second" + decelerationRate={decelerationRate} {...otherProps} /> ) : null} diff --git a/src/components/TimerPicker/types.ts b/src/components/TimerPicker/types.ts index ca73f46..786a576 100644 --- a/src/components/TimerPicker/types.ts +++ b/src/components/TimerPicker/types.ts @@ -84,4 +84,5 @@ export interface TimerPickerProps { secondsPickerIsDisabled?: boolean; styles?: CustomTimerPickerStyles; use12HourPicker?: boolean; + decelerationRate?: number | "normal" | "fast"; } From c32e8630dfa0859b38ae09db225e7ec188aea14e Mon Sep 17 00:00:00 2001 From: Mike Loos Date: Thu, 24 Apr 2025 07:09:19 -0400 Subject: [PATCH 2/2] Fixed eslint issues with new decelerationRate prop --- src/components/DurationScroll/index.tsx | 3 ++- src/components/DurationScroll/types.ts | 2 +- src/components/TimerPicker/index.tsx | 8 ++++---- src/components/TimerPicker/types.ts | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/DurationScroll/index.tsx b/src/components/DurationScroll/index.tsx index 73a7d3c..fbfb7b9 100644 --- a/src/components/DurationScroll/index.tsx +++ b/src/components/DurationScroll/index.tsx @@ -35,6 +35,7 @@ const DurationScroll = forwardRef( amLabel, Audio, clickSoundAsset, + decelerationRate = 0.88, disableInfiniteScroll = false, FlatList = RNFlatList, Haptics, @@ -57,7 +58,6 @@ const DurationScroll = forwardRef( repeatNumbersNTimesNotExplicitlySet, styles, testID, - decelerationRate = 0.88, } = props; const numberOfItems = useMemo(() => { @@ -562,6 +562,7 @@ const DurationScroll = forwardRef( styles.pickerLabel, styles.pickerLabelContainer, viewabilityConfigCallbackPairs, + decelerationRate, ]); const renderLinearGradient = useMemo(() => { diff --git a/src/components/DurationScroll/types.ts b/src/components/DurationScroll/types.ts index 6cba64a..9f00f1c 100644 --- a/src/components/DurationScroll/types.ts +++ b/src/components/DurationScroll/types.ts @@ -26,6 +26,7 @@ export interface DurationScrollProps { allowFontScaling?: boolean; amLabel?: string; clickSoundAsset?: SoundAssetType; + decelerationRate?: number | "normal" | "fast"; disableInfiniteScroll?: boolean; initialValue?: number; interval: number; @@ -44,7 +45,6 @@ export interface DurationScrollProps { repeatNumbersNTimesNotExplicitlySet: boolean; styles: ReturnType; testID?: string; - decelerationRate?: number | "normal" | "fast"; } export interface DurationScrollRef { diff --git a/src/components/TimerPicker/index.tsx b/src/components/TimerPicker/index.tsx index 73b4d20..1079197 100644 --- a/src/components/TimerPicker/index.tsx +++ b/src/components/TimerPicker/index.tsx @@ -22,6 +22,7 @@ const TimerPicker = forwardRef( aggressivelyGetLatestDuration = false, allowFontScaling = false, amLabel = "am", + decelerationRate = 0.88, disableInfiniteScroll = false, hideHours = false, hideMinutes = false, @@ -54,7 +55,6 @@ const TimerPicker = forwardRef( secondsPickerIsDisabled = false, styles: customStyles, use12HourPicker = false, - decelerationRate = 0.88, ...otherProps } = props; @@ -154,6 +154,7 @@ const TimerPicker = forwardRef( } allowFontScaling={allowFontScaling} amLabel={amLabel} + decelerationRate={decelerationRate} disableInfiniteScroll={disableInfiniteScroll} initialValue={safeInitialValue.hours} interval={hourInterval} @@ -174,7 +175,6 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-hour" - decelerationRate={decelerationRate} {...otherProps} /> ) : null} @@ -185,6 +185,7 @@ const TimerPicker = forwardRef( aggressivelyGetLatestDuration } allowFontScaling={allowFontScaling} + decelerationRate={decelerationRate} disableInfiniteScroll={disableInfiniteScroll} initialValue={safeInitialValue.minutes} interval={minuteInterval} @@ -201,7 +202,6 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-minute" - decelerationRate={decelerationRate} {...otherProps} /> ) : null} @@ -212,6 +212,7 @@ const TimerPicker = forwardRef( aggressivelyGetLatestDuration } allowFontScaling={allowFontScaling} + decelerationRate={decelerationRate} disableInfiniteScroll={disableInfiniteScroll} initialValue={safeInitialValue.seconds} interval={secondInterval} @@ -228,7 +229,6 @@ const TimerPicker = forwardRef( } styles={styles} testID="duration-scroll-second" - decelerationRate={decelerationRate} {...otherProps} /> ) : null} diff --git a/src/components/TimerPicker/types.ts b/src/components/TimerPicker/types.ts index 786a576..b5e46c0 100644 --- a/src/components/TimerPicker/types.ts +++ b/src/components/TimerPicker/types.ts @@ -42,6 +42,7 @@ export interface TimerPickerProps { allowFontScaling?: boolean; amLabel?: string; clickSoundAsset?: SoundAssetType; + decelerationRate?: number | "normal" | "fast"; disableInfiniteScroll?: boolean; hideHours?: boolean; hideMinutes?: boolean; @@ -84,5 +85,4 @@ export interface TimerPickerProps { secondsPickerIsDisabled?: boolean; styles?: CustomTimerPickerStyles; use12HourPicker?: boolean; - decelerationRate?: number | "normal" | "fast"; }