diff --git a/README.md b/README.md index 7ce2e87..67fc2ed 100644 --- a/README.md +++ b/README.md @@ -608,6 +608,7 @@ For deeper style customization, you can supply the following custom styles to ad | durationScrollFlatList | Style for the Flatlist in each picker | ViewStyle | | durationScrollFlatListContainer | Style for the View that contains the Flatlist in each picker | ViewStyle | | durationScrollFlatListContentContainer | Style for the Flatlist's `contentContainerStyle` prop in each picker | ViewStyle | +| selectedPickerItem | Style for the currently selected individual picker number | TextStyle | **Note:** There are minor limitations on `pickerContainer.backgroundColor` and `pickerItemContainer.height`. These properties must be simple values (string and number respectively) as they are used in internal calculations for scroll positioning, gradient overlays, and snap behavior. Complex computed values or union types are not supported for these specific properties. diff --git a/src/components/DurationScroll/DurationScroll.tsx b/src/components/DurationScroll/DurationScroll.tsx index a07b45c..606a2c2 100644 --- a/src/components/DurationScroll/DurationScroll.tsx +++ b/src/components/DurationScroll/DurationScroll.tsx @@ -62,6 +62,7 @@ const DurationScroll = forwardRef( pmLabel, repeatNumbersNTimes = 3, repeatNumbersNTimesNotExplicitlySet, + selectedValue, styles, testID, } = props; @@ -225,6 +226,7 @@ const DurationScroll = forwardRef( is12HourPicker={is12HourPicker} item={item} pmLabel={pmLabel} + selectedValue={selectedValue} styles={styles} /> ), @@ -235,6 +237,7 @@ const DurationScroll = forwardRef( amLabel, is12HourPicker, pmLabel, + selectedValue, styles, ] ); @@ -644,4 +647,4 @@ const DurationScroll = forwardRef( } ); -export default React.memo(DurationScroll); +export default React.memo(DurationScroll); \ No newline at end of file diff --git a/src/components/DurationScroll/types.ts b/src/components/DurationScroll/types.ts index 9b51cc9..e734d5a 100644 --- a/src/components/DurationScroll/types.ts +++ b/src/components/DurationScroll/types.ts @@ -32,6 +32,7 @@ export interface DurationScrollProps { pmLabel?: string; repeatNumbersNTimes?: number; repeatNumbersNTimesNotExplicitlySet: boolean; + selectedValue?: number; styles: ReturnType; testID?: string; } @@ -70,4 +71,4 @@ export type SoundAsset = export type ExpoAvAudioInstance = { replayAsync: () => Promise; unloadAsync: () => Promise; -}; +}; \ No newline at end of file diff --git a/src/components/PickerItem/PickerItem.tsx b/src/components/PickerItem/PickerItem.tsx index ccef3a8..75478e9 100644 --- a/src/components/PickerItem/PickerItem.tsx +++ b/src/components/PickerItem/PickerItem.tsx @@ -1,3 +1,4 @@ + import React from "react"; import { View, Text } from "react-native"; @@ -12,6 +13,7 @@ interface PickerItemProps { is12HourPicker?: boolean; item: string; pmLabel?: string; + selectedValue?: number; styles: ReturnType; } @@ -24,6 +26,7 @@ const PickerItem = React.memo( is12HourPicker, item, pmLabel, + selectedValue, styles, }) => { let stringItem = item; @@ -38,6 +41,8 @@ const PickerItem = React.memo( intItem = parseInt(stringItem); } + const isSelected = intItem === selectedValue; + return ( ( allowFontScaling={allowFontScaling} style={[ styles.pickerItem, + isSelected && styles.selectedPickerItem, intItem > adjustedLimitedMax || intItem < adjustedLimitedMin ? styles.disabledPickerItem @@ -68,4 +74,4 @@ const PickerItem = React.memo( } ); -export default PickerItem; +export default PickerItem; \ No newline at end of file diff --git a/src/components/TimerPicker/TimerPicker.tsx b/src/components/TimerPicker/TimerPicker.tsx index 652a3f1..615c174 100644 --- a/src/components/TimerPicker/TimerPicker.tsx +++ b/src/components/TimerPicker/TimerPicker.tsx @@ -1,3 +1,4 @@ + import React, { forwardRef, useEffect, @@ -221,6 +222,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatDayNumbersNTimes === undefined } + selectedValue={selectedDays} styles={styles} testID="duration-scroll-day" {...otherProps} @@ -253,6 +255,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatHourNumbersNTimes === undefined } + selectedValue={selectedHours} styles={styles} testID="duration-scroll-hour" {...otherProps} @@ -280,6 +283,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatMinuteNumbersNTimes === undefined } + selectedValue={selectedMinutes} styles={styles} testID="duration-scroll-minute" {...otherProps} @@ -307,6 +311,7 @@ const TimerPicker = forwardRef( repeatNumbersNTimesNotExplicitlySet={ props?.repeatSecondNumbersNTimes === undefined } + selectedValue={selectedSeconds} styles={styles} testID="duration-scroll-second" {...otherProps} @@ -317,4 +322,4 @@ const TimerPicker = forwardRef( } ); -export default React.memo(TimerPicker); +export default React.memo(TimerPicker); \ No newline at end of file diff --git a/src/components/TimerPicker/styles.ts b/src/components/TimerPicker/styles.ts index 24c9748..e9c2a6d 100644 --- a/src/components/TimerPicker/styles.ts +++ b/src/components/TimerPicker/styles.ts @@ -1,3 +1,4 @@ + import { StyleSheet } from "react-native"; import type { TextStyle, ViewStyle } from "react-native"; @@ -17,6 +18,7 @@ export interface CustomTimerPickerStyles { pickerItemContainer?: ViewStyle & { height?: number }; pickerLabel?: TextStyle; pickerLabelContainer?: ViewStyle; + selectedPickerItem?: TextStyle; text?: TextStyle; theme?: "light" | "dark"; } @@ -107,6 +109,15 @@ export const generateStyles = ( ...customStyles?.text, ...customStyles?.pickerItem, }, + selectedPickerItem: { + textAlignVertical: "center", + fontSize: 25, + overflow: "visible", + color: textColor, + ...customStyles?.text, + ...customStyles?.pickerItem, + ...customStyles?.selectedPickerItem, + }, pickerAmPmContainer: { position: "absolute", top: 0, @@ -157,4 +168,4 @@ export const generateStyles = ( ...customStyles?.durationScrollFlatListContentContainer, }, }); -}; +}; \ No newline at end of file