Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
5 changes: 4 additions & 1 deletion src/components/DurationScroll/DurationScroll.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
pmLabel,
repeatNumbersNTimes = 3,
repeatNumbersNTimesNotExplicitlySet,
selectedValue,
styles,
testID,
} = props;
Expand Down Expand Up @@ -225,6 +226,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
is12HourPicker={is12HourPicker}
item={item}
pmLabel={pmLabel}
selectedValue={selectedValue}
styles={styles}
/>
),
Expand All @@ -235,6 +237,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
amLabel,
is12HourPicker,
pmLabel,
selectedValue,
styles,
]
);
Expand Down Expand Up @@ -644,4 +647,4 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
}
);

export default React.memo(DurationScroll);
export default React.memo(DurationScroll);
3 changes: 2 additions & 1 deletion src/components/DurationScroll/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface DurationScrollProps {
pmLabel?: string;
repeatNumbersNTimes?: number;
repeatNumbersNTimesNotExplicitlySet: boolean;
selectedValue?: number;
styles: ReturnType<typeof generateStyles>;
testID?: string;
}
Expand Down Expand Up @@ -70,4 +71,4 @@ export type SoundAsset =
export type ExpoAvAudioInstance = {
replayAsync: () => Promise<void>;
unloadAsync: () => Promise<void>;
};
};
8 changes: 7 additions & 1 deletion src/components/PickerItem/PickerItem.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React from "react";

import { View, Text } from "react-native";
Expand All @@ -12,6 +13,7 @@ interface PickerItemProps {
is12HourPicker?: boolean;
item: string;
pmLabel?: string;
selectedValue?: number;
styles: ReturnType<typeof generateStyles>;
}

Expand All @@ -24,6 +26,7 @@ const PickerItem = React.memo<PickerItemProps>(
is12HourPicker,
item,
pmLabel,
selectedValue,
styles,
}) => {
let stringItem = item;
Expand All @@ -38,6 +41,8 @@ const PickerItem = React.memo<PickerItemProps>(
intItem = parseInt(stringItem);
}

const isSelected = intItem === selectedValue;

return (
<View
key={item}
Expand All @@ -47,6 +52,7 @@ const PickerItem = React.memo<PickerItemProps>(
allowFontScaling={allowFontScaling}
style={[
styles.pickerItem,
isSelected && styles.selectedPickerItem,
intItem > adjustedLimitedMax ||
intItem < adjustedLimitedMin
? styles.disabledPickerItem
Expand All @@ -68,4 +74,4 @@ const PickerItem = React.memo<PickerItemProps>(
}
);

export default PickerItem;
export default PickerItem;
7 changes: 6 additions & 1 deletion src/components/TimerPicker/TimerPicker.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, {
forwardRef,
useEffect,
Expand Down Expand Up @@ -221,6 +222,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
repeatNumbersNTimesNotExplicitlySet={
props?.repeatDayNumbersNTimes === undefined
}
selectedValue={selectedDays}
styles={styles}
testID="duration-scroll-day"
{...otherProps}
Expand Down Expand Up @@ -253,6 +255,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
repeatNumbersNTimesNotExplicitlySet={
props?.repeatHourNumbersNTimes === undefined
}
selectedValue={selectedHours}
styles={styles}
testID="duration-scroll-hour"
{...otherProps}
Expand Down Expand Up @@ -280,6 +283,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
repeatNumbersNTimesNotExplicitlySet={
props?.repeatMinuteNumbersNTimes === undefined
}
selectedValue={selectedMinutes}
styles={styles}
testID="duration-scroll-minute"
{...otherProps}
Expand Down Expand Up @@ -307,6 +311,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
repeatNumbersNTimesNotExplicitlySet={
props?.repeatSecondNumbersNTimes === undefined
}
selectedValue={selectedSeconds}
styles={styles}
testID="duration-scroll-second"
{...otherProps}
Expand All @@ -317,4 +322,4 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
}
);

export default React.memo(TimerPicker);
export default React.memo(TimerPicker);
13 changes: 12 additions & 1 deletion src/components/TimerPicker/styles.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import { StyleSheet } from "react-native";
import type { TextStyle, ViewStyle } from "react-native";

Expand All @@ -17,6 +18,7 @@ export interface CustomTimerPickerStyles {
pickerItemContainer?: ViewStyle & { height?: number };
pickerLabel?: TextStyle;
pickerLabelContainer?: ViewStyle;
selectedPickerItem?: TextStyle;
text?: TextStyle;
theme?: "light" | "dark";
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -157,4 +168,4 @@ export const generateStyles = (
...customStyles?.durationScrollFlatListContentContainer,
},
});
};
};