Skip to content

Commit

Permalink
Merge branch 'release/v1.6.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@troberts-28
troberts-28 committed Mar 2, 2024
2 parents fc0c9f8 + 968042a commit badd4ff
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 20 deletions.
32 changes: 18 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,9 @@ return (
| hideHours | Hide the hours picker | Boolean | false | false |
| hideMinutes | Hide the minutes picker | Boolean | false | false |
| hideSeconds | Hide the seconds picker | Boolean | false | false |
| hoursPickerIsDisabled | Disable the hours picker picker | Boolean | false | false |
| minutesPickerIsDisabled | Disable the minutes picker picker | Boolean | false | false |
| secondsPickerIsDisabled | Disable the seconds picker picker | Boolean | false | false |
| hourLimit | Limit on the hours it is possible to select | { max?: Number, min?: Number } | - | false |
| minuteLimit | Limit on the minutes it is possible to select | { max?: Number, min?: Number } | - | false |
| secondLimit | Limit on the seconds it is possible to select | { max?: Number, min?: Number } | - | false |
Expand All @@ -362,20 +365,21 @@ return (

The following custom styles can be supplied to re-style the component in any way. Various styles are applied by default - you can take a look at these [here](src/components/TimerPicker/TimerPicker.styles.ts).

| Style Prop | Description | Type |
| :-------------------: | :------------------------------------------- | :---------------: |
| theme | Theme of the component | "light" \| "dark" |
| backgroundColor | Main background color | string |
| text | Base text style | TextStyle |
| pickerContainer | Main container for the picker | ViewStyle |
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
| pickerLabel | Style for the picker's labels | TextStyle |
| pickerAmPmContainer | Style for the picker's labels | ViewStyle |
| pickerAmPmLabel | Style for the picker's labels | TextStyle |
| pickerItemContainer | Container for each number in the picker | ViewStyle |
| pickerItem | Style for each individual picker number | TextStyle |
| disabledPickerItem | Style for any numbers outside any set limits | TextStyle |
| pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle |
| Style Prop | Description | Type |
| :---------------------: | :------------------------------------------- | :---------------: |
| theme | Theme of the component | "light" \| "dark" |
| backgroundColor | Main background color | string |
| text | Base text style | TextStyle |
| pickerContainer | Main container for the picker | ViewStyle |
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
| pickerLabel | Style for the picker's labels | TextStyle |
| pickerAmPmContainer | Style for the picker's labels | ViewStyle |
| pickerAmPmLabel | Style for the picker's labels | TextStyle |
| pickerItemContainer | Container for each number in the picker | ViewStyle |
| pickerItem | Style for each individual picker number | TextStyle |
| disabledPickerItem | Style for any numbers outside any set limits | TextStyle |
| disabledPickerContainer | Style for disabled pickers | ViewStyle |
| pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle |

### TimerPickerModal ⏰

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"url": "https://github.com/troberts-28"
},
"license": "MIT",
"version": "1.5.4",
"version": "1.6.0",
"main": "dist/commonjs/index.js",
"types": "dist/typescript/src/index.d.ts",
"scripts": {
Expand Down
18 changes: 13 additions & 5 deletions src/components/TimerPicker/DurationScroll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ interface DurationScrollProps {
onDurationChange: (duration: number) => void;
padNumbersWithZero?: boolean;
disableInfiniteScroll?: boolean;
isDisabled?: boolean;
limit?: LimitType;
aggressivelyGetLatestDuration: boolean;
is12HourPicker?: boolean;
Expand Down Expand Up @@ -83,6 +84,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
padNumbersWithZero = false,
disableInfiniteScroll = false,
limit,
isDisabled,
aggressivelyGetLatestDuration,
allowFontScaling = false,
is12HourPicker,
Expand Down Expand Up @@ -336,11 +338,16 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
return (
<View
testID={testID}
style={{
height:
styles.pickerItemContainer.height * numberOfItemsToShow,
overflow: "visible",
}}>
pointerEvents={isDisabled ? "none" : undefined}
style={[
{
height:
styles.pickerItemContainer.height *
numberOfItemsToShow,
overflow: "visible",
},
isDisabled && styles.disabledPickerContainer,
]}>
<FlatList
ref={flatListRef}
data={data}
Expand All @@ -353,6 +360,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
decelerationRate={0.88}
scrollEventThrottle={16}
snapToAlignment="start"
scrollEnabled={!isDisabled}
// used in place of snapToOffset due to bug on Android
snapToOffsets={[...Array(data.length)].map(
(_, i) => i * styles.pickerItemContainer.height
Expand Down
5 changes: 5 additions & 0 deletions src/components/TimerPicker/TimerPicker.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface CustomTimerPickerStyles {
pickerAmPmLabel?: any;
pickerItemContainer?: any;
pickerItem?: any;
disabledPickerContainer?: any;
disabledPickerItem?: any;
pickerGradientOverlay?: any;
}
Expand Down Expand Up @@ -101,6 +102,10 @@ export const generateStyles = (
...customStyles?.pickerLabel,
...customStyles?.pickerAmPmLabel,
},
disabledPickerContainer: {
opacity: 0.4,
...customStyles?.disabledPickerContainer,
},
disabledPickerItem: {
opacity: 0.2,
...customStyles?.disabledPickerItem,
Expand Down
9 changes: 9 additions & 0 deletions src/components/TimerPicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ export interface TimerPickerProps {
hideHours?: boolean;
hideMinutes?: boolean;
hideSeconds?: boolean;
hoursPickerIsDisabled?: boolean;
minutesPickerIsDisabled?: boolean;
secondsPickerIsDisabled?: boolean;
hourLimit?: LimitType;
minuteLimit?: LimitType;
secondLimit?: LimitType;
Expand Down Expand Up @@ -76,6 +79,9 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
hideHours = false,
hideMinutes = false,
hideSeconds = false,
hoursPickerIsDisabled = false,
minutesPickerIsDisabled = false,
secondsPickerIsDisabled = false,
hourLimit,
minuteLimit,
secondLimit,
Expand Down Expand Up @@ -168,6 +174,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
label={
hourLabel ?? (!use12HourPicker ? "h" : undefined)
}
isDisabled={hoursPickerIsDisabled}
initialValue={initialHours}
allowFontScaling={allowFontScaling}
aggressivelyGetLatestDuration={
Expand Down Expand Up @@ -197,6 +204,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
ref={minutesDurationScrollRef}
numberOfItems={59}
label={minuteLabel ?? "m"}
isDisabled={minutesPickerIsDisabled}
initialValue={initialMinutes}
allowFontScaling={allowFontScaling}
aggressivelyGetLatestDuration={
Expand Down Expand Up @@ -224,6 +232,7 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
ref={secondsDurationScrollRef}
numberOfItems={59}
label={secondLabel ?? "s"}
isDisabled={secondsPickerIsDisabled}
initialValue={initialSeconds}
allowFontScaling={allowFontScaling}
aggressivelyGetLatestDuration={
Expand Down
6 changes: 6 additions & 0 deletions src/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
hideHours = false,
hideMinutes = false,
hideSeconds = false,
hoursPickerIsDisabled = false,
minutesPickerIsDisabled = false,
secondsPickerIsDisabled = false,
hourLimit,
minuteLimit,
secondLimit,
Expand Down Expand Up @@ -221,6 +224,9 @@ const TimerPickerModal = forwardRef<TimerPickerModalRef, TimerPickerModalProps>(
hideHours={hideHours}
hideMinutes={hideMinutes}
hideSeconds={hideSeconds}
hoursPickerIsDisabled={hoursPickerIsDisabled}
minutesPickerIsDisabled={minutesPickerIsDisabled}
secondsPickerIsDisabled={secondsPickerIsDisabled}
hourLimit={hourLimit}
minuteLimit={minuteLimit}
secondLimit={secondLimit}
Expand Down

0 comments on commit badd4ff

Please sign in to comment.