react-native-timer-picker 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -81
- package/dist/components/Modal/Modal.styles.d.ts +3 -1
- package/dist/components/Modal/Modal.styles.js +3 -1
- package/dist/components/TimerPicker/DurationScroll.d.ts +3 -1
- package/dist/components/TimerPicker/DurationScroll.js +5 -6
- package/dist/components/TimerPicker/index.d.ts +3 -1
- package/dist/components/TimerPicker/index.js +4 -4
- package/dist/components/TimerPickerModal.styles.js +1 -1
- package/dist/components/index.js +2 -2
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -11,23 +11,23 @@ Great for timers, alarms and duration inputs ⏰🕰️⏳
|
|
|
11
11
|
|
|
12
12
|
Works with Expo and bare React Native apps.
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
14
|
+
- [Demos 📱](#demos-📱)
|
|
15
|
+
- [Peer Dependencies 👶](#peer-dependencies-)
|
|
16
|
+
- [Installation 🚀](#installation-)
|
|
17
|
+
- [Examples 😎](#examples-)
|
|
18
|
+
- [Timer Picker Modal (Dark Mode) 🌚](#timer-picker-modal-dark-mode-)
|
|
19
|
+
- [Timer Picker Modal (Light Mode) 🌞](#timer-picker-modal-light-mode-)
|
|
20
|
+
- [Timer Picker with Customisation (Dark Mode) 🌒](#timer-picker-with-customisation-dark-mode-)
|
|
21
|
+
- [Timer Picker with Customisation (Light Mode) 🌔](#timer-picker-with-customisation-light-mode-)
|
|
22
|
+
- [Props 💅](#props-)
|
|
23
|
+
- [TimerPicker ⏲️](#timerpicker-️)
|
|
24
|
+
- [Custom Styles 👗](#custom-styles-)
|
|
25
|
+
- [TimerPickerModal ⏰](#timerpickermodal-)
|
|
26
|
+
- [Custom Styles 👕](#custom-styles--1)
|
|
27
|
+
- [Methods 🔄](#methods-)
|
|
28
|
+
- [TimerPicker](#timerpicker)
|
|
29
|
+
- [TimerPickerModal](#timerpickermodal)
|
|
30
|
+
- [License 📝](#license-)
|
|
31
31
|
|
|
32
32
|
<br>
|
|
33
33
|
|
|
@@ -148,6 +148,7 @@ return (
|
|
|
148
148
|
)
|
|
149
149
|
|
|
150
150
|
```
|
|
151
|
+
|
|
151
152
|
<img src="demos/example1.gif" width="250" height="550"/>
|
|
152
153
|
|
|
153
154
|
### Timer Picker Modal (Light Mode) 🌞
|
|
@@ -217,9 +218,10 @@ return (
|
|
|
217
218
|
)
|
|
218
219
|
|
|
219
220
|
```
|
|
221
|
+
|
|
220
222
|
<img src="demos/example2.gif" width="250" height="550"/>
|
|
221
223
|
|
|
222
|
-
### Timer Picker with Customisation (Dark Mode) 🌒
|
|
224
|
+
### Timer Picker with Customisation (Dark Mode) 🌒
|
|
223
225
|
|
|
224
226
|
```jsx
|
|
225
227
|
import { TimerPicker } from "react-native-timer-picker";
|
|
@@ -253,14 +255,15 @@ return (
|
|
|
253
255
|
marginRight: 6,
|
|
254
256
|
},
|
|
255
257
|
}}
|
|
256
|
-
/>
|
|
258
|
+
/>
|
|
257
259
|
</View>
|
|
258
260
|
)
|
|
259
261
|
|
|
260
262
|
```
|
|
263
|
+
|
|
261
264
|
<img src="demos/example3.gif" width="250" height="550"/>
|
|
262
265
|
|
|
263
|
-
### Timer Picker with Customisation (Light Mode) 🌔
|
|
266
|
+
### Timer Picker with Customisation (Light Mode) 🌔
|
|
264
267
|
|
|
265
268
|
```jsx
|
|
266
269
|
import { TimerPicker } from "react-native-timer-picker";
|
|
@@ -301,6 +304,7 @@ return (
|
|
|
301
304
|
)
|
|
302
305
|
|
|
303
306
|
```
|
|
307
|
+
|
|
304
308
|
<img src="demos/example4.gif" width="250" height="550"/>
|
|
305
309
|
|
|
306
310
|
<br>
|
|
@@ -309,81 +313,83 @@ return (
|
|
|
309
313
|
|
|
310
314
|
### TimerPicker ⏲️
|
|
311
315
|
|
|
312
|
-
|
|
|
313
|
-
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
|
318
|
-
|
|
|
319
|
-
|
|
|
320
|
-
|
|
|
321
|
-
|
|
|
322
|
-
|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
|
|
|
326
|
-
|
|
|
327
|
-
|
|
|
328
|
-
|
|
|
329
|
-
|
|
|
330
|
-
|
|
|
331
|
-
|
|
|
332
|
-
|
|
|
316
|
+
| Prop | Description | Type | Default | Required |
|
|
317
|
+
| :------------------------------: | :---------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | :------: |
|
|
318
|
+
| onDurationChange | Callback when the duration changes | `(duration: { hours: number, minutes: number, seconds: number }) => void` | - | false |
|
|
319
|
+
| initialHours | Initial value for hours | Number | - | false |
|
|
320
|
+
| initialMinutes | Initial value for minutes | Number | - | false |
|
|
321
|
+
| initialSeconds | Initial value for seconds | Number | - | false |
|
|
322
|
+
| hideHours | Hide the hours picker | Boolean | false | false |
|
|
323
|
+
| hideMinutes | Hide the minutes picker | Boolean | false | false |
|
|
324
|
+
| hideSeconds | Hide the seconds picker | Boolean | false | false |
|
|
325
|
+
| hourLimit | Limit on the hours it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
326
|
+
| minuteLimit | Limit on the minutes it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
327
|
+
| secondLimit | Limit on the seconds it is possible to select | { max?: Number, min?: Number } | - | false |
|
|
328
|
+
| hourLabel | Label for the hours picker | String \| React.ReactElement | h | false |
|
|
329
|
+
| minuteLabel | Label for the minutes picker | String \| React.ReactElement | m | false |
|
|
330
|
+
| secondLabel | Label for the seconds picker | String \| React.ReactElement | s | false |
|
|
331
|
+
| padWithNItems | Number of items to pad the picker with on either side | Number | 1 | false |
|
|
332
|
+
| disableInfiniteScroll | Disable the infinite scroll feature | Boolean | false | false |
|
|
333
|
+
| LinearGradient | Linear Gradient Component | [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient).LinearGradient or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient).default | - | false |
|
|
334
|
+
| pickerContainerProps | Props for the picker container | `React.ComponentProps<typeof View>` | - | false |
|
|
335
|
+
| pickerGradientOverlayProps | Props for both gradient overlays | `Partial<LinearGradientProps>` | - | false |
|
|
336
|
+
| topPickerGradientOverlayProps | Props for the top gradient overlay | `Partial<LinearGradientProps>` | - | false |
|
|
337
|
+
| bottomPickerGradientOverlayProps | Props for the bottom gradient overlay | `Partial<LinearGradientProps>` | - | false |
|
|
338
|
+
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles-) | - | false |
|
|
333
339
|
|
|
334
340
|
#### Custom Styles 👗
|
|
335
341
|
|
|
336
342
|
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).
|
|
337
343
|
|
|
338
|
-
|
|
|
339
|
-
| :-------------------: |
|
|
340
|
-
|
|
|
341
|
-
|
|
|
342
|
-
|
|
|
343
|
-
|
|
|
344
|
-
| pickerLabelContainer | Container for the picker's labels
|
|
345
|
-
|
|
|
346
|
-
|
|
|
347
|
-
|
|
|
348
|
-
|
|
|
349
|
-
| pickerGradientOverlay | Style for the gradient overlay (fade out)
|
|
344
|
+
| Style Prop | Description | Type |
|
|
345
|
+
| :-------------------: | :------------------------------------------- | :---------------: |
|
|
346
|
+
| theme | Theme of the component | "light" \| "dark" |
|
|
347
|
+
| backgroundColor | Main background color | string |
|
|
348
|
+
| text | Base text style | TextStyle |
|
|
349
|
+
| pickerContainer | Main container for the picker | ViewStyle |
|
|
350
|
+
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
|
|
351
|
+
| pickerLabel | Style for the picker's labels | TextStyle |
|
|
352
|
+
| pickerItemContainer | Container for each number in the picker | ViewStyle |
|
|
353
|
+
| pickerItem | Style for each individual picker number | TextStyle |
|
|
354
|
+
| disabledPickerItem | Style for any numbers outside any set limits | TextStyle |
|
|
355
|
+
| pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle |
|
|
350
356
|
|
|
351
357
|
### TimerPickerModal ⏰
|
|
352
358
|
|
|
353
359
|
The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️), and the below additional props.
|
|
354
360
|
|
|
355
|
-
|
|
|
356
|
-
|
|
|
357
|
-
|
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
|
|
|
361
|
-
|
|
|
362
|
-
|
|
|
363
|
-
|
|
|
364
|
-
|
|
|
365
|
-
|
|
|
366
|
-
|
|
|
367
|
-
|
|
|
368
|
-
|
|
|
369
|
-
|
|
|
370
|
-
| buttonTouchableOpacityProps
|
|
371
|
-
|
|
|
372
|
-
|
|
|
361
|
+
| Prop | Description | Type | Default | Required |
|
|
362
|
+
| :-------------------------: | :---------------------------------------------------- | :------------------------------------------------------------------------------------------: | :-----: | :------: |
|
|
363
|
+
| visible | Determines if the modal is visible | Boolean | - | true |
|
|
364
|
+
| setIsVisible | Callback to set modal visibility | `(isVisible: boolean) => void` | - | true |
|
|
365
|
+
| onConfirm | Callback when the user confirms the selected time | `({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void` | - | true |
|
|
366
|
+
| onCancel | Callback when the user cancels the selection | `() => void` | - | false |
|
|
367
|
+
| closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean | false | false |
|
|
368
|
+
| hideCancelButton | Hide the cancel button within the modal | Boolean | false | false |
|
|
369
|
+
| confirmButtonText | Text for the confirm button | String | Confirm | false |
|
|
370
|
+
| cancelButtonText | Text for the cancel button | String | Cancel | false |
|
|
371
|
+
| modalTitle | Title text for the modal | String | - | false |
|
|
372
|
+
| modalProps | Props for the main modal component | `React.ComponentProps<typeof Modal>` | - | false |
|
|
373
|
+
| containerProps | Props for the main container | `React.ComponentProps<typeof View>` | - | false |
|
|
374
|
+
| contentContainerProps | Props for the content container | `React.ComponentProps<typeof View>` | - | false |
|
|
375
|
+
| buttonContainerProps | Props for the button containers | `React.ComponentProps<typeof View>` | - | false |
|
|
376
|
+
| buttonTouchableOpacityProps | Props for the button touchable opacities | `React.ComponentProps<typeof TouchableOpacity>` | - | false |
|
|
377
|
+
| modalTitleProps | Props for the modal title text component | `React.ComponentProps<typeof Text>` | - | false |
|
|
378
|
+
| styles | Custom styles for the timer picker modal | [CustomTimerPickerModalStyles](#custom-styles--1) | - | false |
|
|
373
379
|
|
|
374
380
|
#### Custom Styles 👕
|
|
375
381
|
|
|
376
382
|
The following custom styles can be supplied to re-style the component in any way. You can also supply all of the styles specified in [CustomTimerPickerStyles](#custom-styles-). Various styles are applied by default - you can take a look at these [here](src/components/TimerPickerModal.styles.ts).
|
|
377
383
|
|
|
378
|
-
|
|
|
379
|
-
|
|
|
380
|
-
|
|
|
381
|
-
| contentContainer
|
|
382
|
-
| buttonContainer
|
|
383
|
-
|
|
|
384
|
-
|
|
|
385
|
-
|
|
|
386
|
-
|
|
|
384
|
+
| Style Prop | Description | Type |
|
|
385
|
+
| :--------------: | :----------------------------------------- | :-------: |
|
|
386
|
+
| container | Main container's style | ViewStyle |
|
|
387
|
+
| contentContainer | Style for the content's container | ViewStyle |
|
|
388
|
+
| buttonContainer | Style for the container around the buttons | ViewStyle |
|
|
389
|
+
| button | General style for both buttons | TextStyle |
|
|
390
|
+
| cancelButton | Style for the cancel button | TextStyle |
|
|
391
|
+
| confirmButton | Style for the confirm button | TextStyle |
|
|
392
|
+
| modalTitle | Style for the title of the modal | TextStyle |
|
|
387
393
|
|
|
388
394
|
<br>
|
|
389
395
|
|
|
@@ -394,7 +400,7 @@ The following custom styles can be supplied to re-style the component in any way
|
|
|
394
400
|
The library exposes a TimerPickerRef type, which can be used to type your ref to the picker:
|
|
395
401
|
|
|
396
402
|
```javascript
|
|
397
|
-
const timerPickerRef = useRef<TimerPickerRef>
|
|
403
|
+
const timerPickerRef = useRef < TimerPickerRef > null;
|
|
398
404
|
```
|
|
399
405
|
|
|
400
406
|
It has the following available methods:
|
|
@@ -32,7 +32,9 @@ interface DurationScrollProps {
|
|
|
32
32
|
disableInfiniteScroll?: boolean;
|
|
33
33
|
limit?: LimitType;
|
|
34
34
|
padWithNItems: number;
|
|
35
|
-
pickerGradientOverlayProps?: LinearGradientProps
|
|
35
|
+
pickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
36
|
+
topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
37
|
+
bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
36
38
|
LinearGradient?: any;
|
|
37
39
|
testID?: string;
|
|
38
40
|
styles: ReturnType<typeof generateStyles>;
|
|
@@ -32,7 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
32
32
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
33
|
};
|
|
34
34
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
-
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
36
35
|
var react_1 = __importStar(require("react"));
|
|
37
36
|
var react_native_1 = require("react-native");
|
|
38
37
|
var generateNumbers_1 = require("../../utils/generateNumbers");
|
|
@@ -43,7 +42,7 @@ var getScrollIndex_1 = require("../../utils/getScrollIndex");
|
|
|
43
42
|
var KEY_EXTRACTOR = function (_, index) { return index.toString(); };
|
|
44
43
|
var DurationScroll = (0, react_1.forwardRef)(function (_a, ref) {
|
|
45
44
|
var _b, _c, _d, _e;
|
|
46
|
-
var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialValue, initialValue = _f === void 0 ? 0 : _f, onDurationChange = _a.onDurationChange, _g = _a.padNumbersWithZero, padNumbersWithZero = _g === void 0 ? false : _g, _h = _a.disableInfiniteScroll, disableInfiniteScroll = _h === void 0 ? false : _h, limit = _a.limit, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
|
|
45
|
+
var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialValue, initialValue = _f === void 0 ? 0 : _f, onDurationChange = _a.onDurationChange, _g = _a.padNumbersWithZero, padNumbersWithZero = _g === void 0 ? false : _g, _h = _a.disableInfiniteScroll, disableInfiniteScroll = _h === void 0 ? false : _h, limit = _a.limit, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, topPickerGradientOverlayProps = _a.topPickerGradientOverlayProps, bottomPickerGradientOverlayProps = _a.bottomPickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
|
|
47
46
|
var flatListRef = (0, react_1.useRef)(null);
|
|
48
47
|
var data = (0, generateNumbers_1.generateNumbers)(numberOfItems, {
|
|
49
48
|
padWithZero: padNumbersWithZero,
|
|
@@ -178,12 +177,12 @@ var DurationScroll = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
178
177
|
height: styles.pickerItemContainer.height * numberOfItemsToShow,
|
|
179
178
|
overflow: "hidden",
|
|
180
179
|
}}>
|
|
181
|
-
<react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={getItemLayout} initialScrollIndex={initialScrollIndex} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={KEY_EXTRACTOR} showsVerticalScrollIndicator={false} decelerationRate=
|
|
180
|
+
<react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={getItemLayout} initialScrollIndex={initialScrollIndex} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={KEY_EXTRACTOR} showsVerticalScrollIndicator={false} decelerationRate={0.9} scrollEventThrottle={16} snapToAlignment="start"
|
|
182
181
|
// used in place of snapToOffset due to bug on Android
|
|
183
182
|
snapToOffsets={__spreadArray([], Array(data.length), true).map(function (_, i) { return i * styles.pickerItemContainer.height; })} viewabilityConfigCallbackPairs={!disableInfiniteScroll
|
|
184
183
|
? viewabilityConfigCallbackPairs === null || viewabilityConfigCallbackPairs === void 0 ? void 0 : viewabilityConfigCallbackPairs.current
|
|
185
184
|
: undefined} onMomentumScrollEnd={onMomentumScrollEnd} testID="duration-scroll-flatlist"/>
|
|
186
|
-
<react_native_1.View style={styles.pickerLabelContainer}>
|
|
185
|
+
<react_native_1.View style={styles.pickerLabelContainer} pointerEvents="none">
|
|
187
186
|
{typeof label === "string" ? (<react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>) : (label !== null && label !== void 0 ? label : null)}
|
|
188
187
|
</react_native_1.View>
|
|
189
188
|
{LinearGradient ? (<>
|
|
@@ -194,7 +193,7 @@ var DurationScroll = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
194
193
|
.backgroundColor) !== null && _c !== void 0 ? _c : "white",
|
|
195
194
|
opacity: 0,
|
|
196
195
|
}),
|
|
197
|
-
]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
|
|
196
|
+
]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} pointerEvents="none" {...pickerGradientOverlayProps} {...topPickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
|
|
198
197
|
<LinearGradient colors={[
|
|
199
198
|
(0, colorToRgba_1.colorToRgba)({
|
|
200
199
|
color: (_d = styles.pickerContainer
|
|
@@ -202,7 +201,7 @@ var DurationScroll = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
202
201
|
opacity: 0,
|
|
203
202
|
}),
|
|
204
203
|
(_e = styles.pickerContainer.backgroundColor) !== null && _e !== void 0 ? _e : "white",
|
|
205
|
-
]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[
|
|
204
|
+
]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} pointerEvents="none" {...pickerGradientOverlayProps} {...bottomPickerGradientOverlayProps} style={[
|
|
206
205
|
styles.pickerGradientOverlay,
|
|
207
206
|
{ bottom: -1 },
|
|
208
207
|
]}/>
|
|
@@ -37,7 +37,9 @@ export interface TimerPickerProps {
|
|
|
37
37
|
disableInfiniteScroll?: boolean;
|
|
38
38
|
LinearGradient?: any;
|
|
39
39
|
pickerContainerProps?: React.ComponentProps<typeof View>;
|
|
40
|
-
pickerGradientOverlayProps?: LinearGradientProps
|
|
40
|
+
pickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
41
|
+
topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
42
|
+
bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
|
|
41
43
|
styles?: CustomTimerPickerStyles;
|
|
42
44
|
}
|
|
43
45
|
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimerPickerProps & React.RefAttributes<TimerPickerRef>>>;
|
|
@@ -31,7 +31,7 @@ var react_native_1 = require("react-native");
|
|
|
31
31
|
var DurationScroll_1 = __importDefault(require("./DurationScroll"));
|
|
32
32
|
var TimerPicker_styles_1 = require("./TimerPicker.styles");
|
|
33
33
|
var TimerPicker = (0, react_1.forwardRef)(function (_a, ref) {
|
|
34
|
-
var onDurationChange = _a.onDurationChange, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, LinearGradient = _a.LinearGradient, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
|
|
34
|
+
var onDurationChange = _a.onDurationChange, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, LinearGradient = _a.LinearGradient, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, topPickerGradientOverlayProps = _a.topPickerGradientOverlayProps, bottomPickerGradientOverlayProps = _a.bottomPickerGradientOverlayProps, customStyles = _a.styles;
|
|
35
35
|
var checkedPadWithNItems = padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
|
|
36
36
|
var styles = (0, react_1.useMemo)(function () {
|
|
37
37
|
return (0, TimerPicker_styles_1.generateStyles)(customStyles, {
|
|
@@ -73,9 +73,9 @@ var TimerPicker = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
73
73
|
},
|
|
74
74
|
}); });
|
|
75
75
|
return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer} testID="timer-picker">
|
|
76
|
-
{!hideHours ? (<DurationScroll_1.default ref={hoursDurationScrollRef} numberOfItems={23} label={hourLabel} initialValue={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={hourLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
|
|
77
|
-
{!hideMinutes ? (<DurationScroll_1.default ref={minutesDurationScrollRef} numberOfItems={59} label={minuteLabel} initialValue={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={minuteLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
|
|
78
|
-
{!hideSeconds ? (<DurationScroll_1.default ref={secondsDurationScrollRef} numberOfItems={59} label={secondLabel} initialValue={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={secondLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
|
|
76
|
+
{!hideHours ? (<DurationScroll_1.default ref={hoursDurationScrollRef} numberOfItems={23} label={hourLabel} initialValue={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} topPickerGradientOverlayProps={topPickerGradientOverlayProps} bottomPickerGradientOverlayProps={bottomPickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={hourLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
|
|
77
|
+
{!hideMinutes ? (<DurationScroll_1.default ref={minutesDurationScrollRef} numberOfItems={59} label={minuteLabel} initialValue={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} topPickerGradientOverlayProps={topPickerGradientOverlayProps} bottomPickerGradientOverlayProps={bottomPickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={minuteLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
|
|
78
|
+
{!hideSeconds ? (<DurationScroll_1.default ref={secondsDurationScrollRef} numberOfItems={59} label={secondLabel} initialValue={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} topPickerGradientOverlayProps={topPickerGradientOverlayProps} bottomPickerGradientOverlayProps={bottomPickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} limit={secondLimit} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
|
|
79
79
|
</react_native_1.View>);
|
|
80
80
|
});
|
|
81
81
|
exports.default = react_1.default.memo(TimerPicker);
|
|
@@ -21,7 +21,7 @@ var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
|
|
|
21
21
|
var generateStyles = function (customStyles) {
|
|
22
22
|
var _a;
|
|
23
23
|
return react_native_1.StyleSheet.create({
|
|
24
|
-
container: __assign({
|
|
24
|
+
container: __assign({ justifyContent: "center", alignItems: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
|
|
25
25
|
contentContainer: __assign({ backgroundColor: ((_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.backgroundColor) !== null && _a !== void 0 ? _a : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
|
|
26
26
|
? DARK_MODE_BACKGROUND_COLOR
|
|
27
27
|
: LIGHT_MODE_BACKGROUND_COLOR, justifyContent: "center", alignItems: "center", borderRadius: 20, padding: 20 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.contentContainer),
|
package/dist/components/index.js
CHANGED
|
@@ -32,7 +32,7 @@ var TimerPicker_1 = __importDefault(require("./TimerPicker"));
|
|
|
32
32
|
var Modal_1 = __importDefault(require("./Modal"));
|
|
33
33
|
var TimerPickerModal_styles_1 = require("./TimerPickerModal.styles");
|
|
34
34
|
var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
|
|
35
|
-
var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onDurationChange = _a.onDurationChange, closeOnOverlayPress = _a.closeOnOverlayPress, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, _o = _a.hideCancelButton, hideCancelButton = _o === void 0 ? false : _o, _p = _a.confirmButtonText, confirmButtonText = _p === void 0 ? "Confirm" : _p, _q = _a.cancelButtonText, cancelButtonText = _q === void 0 ? "Cancel" : _q, modalTitle = _a.modalTitle, LinearGradient = _a.LinearGradient, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, buttonTouchableOpacityProps = _a.buttonTouchableOpacityProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
|
|
35
|
+
var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, onDurationChange = _a.onDurationChange, closeOnOverlayPress = _a.closeOnOverlayPress, _b = _a.initialHours, initialHours = _b === void 0 ? 0 : _b, _c = _a.initialMinutes, initialMinutes = _c === void 0 ? 0 : _c, _d = _a.initialSeconds, initialSeconds = _d === void 0 ? 0 : _d, _e = _a.hideHours, hideHours = _e === void 0 ? false : _e, _f = _a.hideMinutes, hideMinutes = _f === void 0 ? false : _f, _g = _a.hideSeconds, hideSeconds = _g === void 0 ? false : _g, hourLimit = _a.hourLimit, minuteLimit = _a.minuteLimit, secondLimit = _a.secondLimit, _h = _a.hourLabel, hourLabel = _h === void 0 ? "h" : _h, _j = _a.minuteLabel, minuteLabel = _j === void 0 ? "m" : _j, _k = _a.secondLabel, secondLabel = _k === void 0 ? "s" : _k, _l = _a.padWithNItems, padWithNItems = _l === void 0 ? 1 : _l, _m = _a.disableInfiniteScroll, disableInfiniteScroll = _m === void 0 ? false : _m, _o = _a.hideCancelButton, hideCancelButton = _o === void 0 ? false : _o, _p = _a.confirmButtonText, confirmButtonText = _p === void 0 ? "Confirm" : _p, _q = _a.cancelButtonText, cancelButtonText = _q === void 0 ? "Cancel" : _q, modalTitle = _a.modalTitle, LinearGradient = _a.LinearGradient, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, buttonTouchableOpacityProps = _a.buttonTouchableOpacityProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, topPickerGradientOverlayProps = _a.topPickerGradientOverlayProps, bottomPickerGradientOverlayProps = _a.bottomPickerGradientOverlayProps, customStyles = _a.styles;
|
|
36
36
|
var styles = (0, TimerPickerModal_styles_1.generateStyles)(customStyles);
|
|
37
37
|
var _r = (0, react_1.useState)({
|
|
38
38
|
hours: initialHours,
|
|
@@ -92,7 +92,7 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
92
92
|
{modalTitle ? (<react_native_1.Text {...modalTitleProps} style={styles.modalTitle}>
|
|
93
93
|
{modalTitle}
|
|
94
94
|
</react_native_1.Text>) : null}
|
|
95
|
-
<TimerPicker_1.default ref={timerPickerRef} onDurationChange={durationChange} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLimit={hourLimit} minuteLimit={minuteLimit} secondLimit={secondLimit} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} styles={customStyles}/>
|
|
95
|
+
<TimerPicker_1.default ref={timerPickerRef} onDurationChange={durationChange} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLimit={hourLimit} minuteLimit={minuteLimit} secondLimit={secondLimit} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} topPickerGradientOverlayProps={topPickerGradientOverlayProps} bottomPickerGradientOverlayProps={bottomPickerGradientOverlayProps} styles={customStyles}/>
|
|
96
96
|
<react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
|
|
97
97
|
{!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel} {...buttonTouchableOpacityProps}>
|
|
98
98
|
<react_native_1.Text style={[
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"url": "https://github.com/troberts-28"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"version": "1.2.
|
|
9
|
+
"version": "1.2.5",
|
|
10
10
|
"main": "dist/index.js",
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
12
|
"scripts": {
|
|
@@ -115,5 +115,8 @@
|
|
|
115
115
|
"metro-react-native-babel-preset": "^0.71.1",
|
|
116
116
|
"react-test-renderer": "^18.0.0",
|
|
117
117
|
"typescript": ">=4.9.4"
|
|
118
|
+
},
|
|
119
|
+
"dependencies": {
|
|
120
|
+
"react": "18.2.0"
|
|
118
121
|
}
|
|
119
122
|
}
|