react-native-timer-picker 1.1.2 → 1.1.4
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
CHANGED
|
@@ -11,7 +11,7 @@ Great for timers, alarms and duration inputs ⏰🕰️⏳
|
|
|
11
11
|
|
|
12
12
|
Works with Expo and bare React Native apps.
|
|
13
13
|
|
|
14
|
-
- [Demos 📱](#demos
|
|
14
|
+
- [Demos 📱](#demos-📱)
|
|
15
15
|
- [Peer Dependencies 👶](#peer-dependencies-)
|
|
16
16
|
- [Installation 🚀](#installation-)
|
|
17
17
|
- [Examples 😎](#examples-)
|
|
@@ -23,7 +23,7 @@ Works with Expo and bare React Native apps.
|
|
|
23
23
|
- [TimerPicker ⏲️](#timerpicker-️)
|
|
24
24
|
- [Custom Styles 👗](#custom-styles-)
|
|
25
25
|
- [TimerPickerModal ⏰](#timerpickermodal-)
|
|
26
|
-
- [Custom Styles
|
|
26
|
+
- [Custom Styles 👕](#custom-styles--1)
|
|
27
27
|
- [Methods 🔄](#methods-)
|
|
28
28
|
- [TimerPickerModal](#timerpickermodal)
|
|
29
29
|
- [License 📝](#license-)
|
|
@@ -299,7 +299,7 @@ return (
|
|
|
299
299
|
|
|
300
300
|
### TimerPicker ⏲️
|
|
301
301
|
|
|
302
|
-
| Prop | Description | Type | Default
|
|
302
|
+
| Prop | Description | Type | Default | Required |
|
|
303
303
|
| :--------------------------:|:----------------------------------------------------------|:-------------------------------------------------:|:-------------------:|:--------:|
|
|
304
304
|
| onDurationChange | Callback when the duration changes | `(duration: { hours: number, minutes: number, seconds: number }) => void` | - | false |
|
|
305
305
|
| initialHours | Initial value for hours | Number | - | false |
|
|
@@ -313,10 +313,10 @@ return (
|
|
|
313
313
|
| secondLabel | Label for the seconds picker | String | s | false |
|
|
314
314
|
| padWithNItems | Number of items to pad the picker with on either side | Number | 1 | false |
|
|
315
315
|
| disableInfiniteScroll | Disable the infinite scroll feature | Boolean | false | false |
|
|
316
|
-
| LinearGradient | Linear Gradient Component | expo-linear-gradient.LinearGradient or react-native-linear-gradient.default | - | false |
|
|
316
|
+
| 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 |
|
|
317
317
|
| pickerContainerProps | Props for the picker container | `React.ComponentProps<typeof View>` | - | false |
|
|
318
318
|
| pickerGradientOverlayProps | Props for the gradient overlay | LinearGradientProps | - | false |
|
|
319
|
-
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles) | - | false |
|
|
319
|
+
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles-) | - | false |
|
|
320
320
|
|
|
321
321
|
#### Custom Styles 👗
|
|
322
322
|
|
|
@@ -326,7 +326,7 @@ The following custom styles can be supplied to re-style the component in any way
|
|
|
326
326
|
| :-------------------: | :------------------------------------- | :-----------------------------------: |
|
|
327
327
|
| theme | Theme of the component | "light" \| "dark" |
|
|
328
328
|
| backgroundColor | Main background color | string |
|
|
329
|
-
|
|
|
329
|
+
| text | Base text style | TextStyle |
|
|
330
330
|
| pickerContainer | Main container for the picker | ViewStyle |
|
|
331
331
|
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
|
|
332
332
|
| pickerLabel | Style for the picker's labels | TextStyle |
|
|
@@ -336,38 +336,38 @@ The following custom styles can be supplied to re-style the component in any way
|
|
|
336
336
|
|
|
337
337
|
### TimerPickerModal ⏰
|
|
338
338
|
|
|
339
|
-
The TimerPickerModal component accepts all [TimerPicker props](#timerpicker), and the below additional props.
|
|
339
|
+
The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️), and the below additional props.
|
|
340
340
|
|
|
341
|
-
| Prop | Description | Type | Default
|
|
341
|
+
| Prop | Description | Type | Default | Required |
|
|
342
342
|
| :--------------------:|:----------------------------------------------------------|:---------------------------------------------------------:|:-------------------:|:--------:|
|
|
343
343
|
| visible | Determines if the modal is visible | Boolean | - | true |
|
|
344
344
|
| setIsVisible | Callback to set modal visibility | `(isVisible: boolean) => void` | - | true |
|
|
345
345
|
| onConfirm | Callback when the user confirms the selected time | `({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void` | - | true |
|
|
346
346
|
| onCancel | Callback when the user cancels the selection | `() => void` | - | false |
|
|
347
|
-
| closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean |
|
|
348
|
-
| hideCancelButton | Hide the cancel button within the modal | Boolean |
|
|
349
|
-
| confirmButtonText | Text for the confirm button | String |
|
|
350
|
-
| cancelButtonText | Text for the cancel button | String |
|
|
347
|
+
| closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean | false | false |
|
|
348
|
+
| hideCancelButton | Hide the cancel button within the modal | Boolean | false | false |
|
|
349
|
+
| confirmButtonText | Text for the confirm button | String | Confirm | false |
|
|
350
|
+
| cancelButtonText | Text for the cancel button | String | Cancel | false |
|
|
351
351
|
| modalTitle | Title text for the modal | String | - | false |
|
|
352
352
|
| modalProps | Props for the main modal component | `React.ComponentProps<typeof Modal>` | - | false |
|
|
353
353
|
| containerProps | Props for the main container | `React.ComponentProps<typeof View>` | - | false |
|
|
354
354
|
| contentContainerProps | Props for the content container | `React.ComponentProps<typeof View>` | - | false |
|
|
355
355
|
| buttonContainerProps | Props for the button container | `React.ComponentProps<typeof View>` | - | false |
|
|
356
356
|
| modalTitleProps | Props for the modal title text component | `React.ComponentProps<typeof Text>` | - | false |
|
|
357
|
-
| styles | Custom styles for the timer picker modal | [CustomTimerPickerModalStyles](#custom-styles
|
|
357
|
+
| styles | Custom styles for the timer picker modal | [CustomTimerPickerModalStyles](#custom-styles--1) | - | false |
|
|
358
358
|
|
|
359
|
-
#### Custom Styles
|
|
359
|
+
#### Custom Styles 👕
|
|
360
360
|
|
|
361
|
-
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).
|
|
361
|
+
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).
|
|
362
362
|
|
|
363
363
|
| Style Prop | Description | Type |
|
|
364
364
|
| :---------------: | :------------------------------------- | :-------: |
|
|
365
365
|
| container | Main container's style | ViewStyle |
|
|
366
366
|
| contentContainer | Style for the content's container | ViewStyle |
|
|
367
367
|
| buttonContainer | Style for the container around the buttons | ViewStyle |
|
|
368
|
-
| button | General style for both buttons |
|
|
369
|
-
| cancelButton | Style for the cancel button |
|
|
370
|
-
| confirmButton | Style for the confirm button |
|
|
368
|
+
| button | General style for both buttons | TextStyle |
|
|
369
|
+
| cancelButton | Style for the cancel button | TextStyle |
|
|
370
|
+
| confirmButton | Style for the confirm button | TextStyle |
|
|
371
371
|
| modalTitle | Style for the title of the modal | TextStyle |
|
|
372
372
|
|
|
373
373
|
|
|
@@ -383,4 +383,4 @@ timerPickerModalRef.current.reset();
|
|
|
383
383
|
|
|
384
384
|
## License 📝
|
|
385
385
|
|
|
386
|
-
This project is licensed under the MIT License.
|
|
386
|
+
This project is licensed under the [MIT License](LICENSE).
|
|
@@ -19,22 +19,22 @@ var DARK_MODE_TEXT_COLOR = "#E9E9E9";
|
|
|
19
19
|
var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
|
|
20
20
|
var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
|
|
21
21
|
var generateStyles = function (customStyles, options) {
|
|
22
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
22
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
23
23
|
return react_native_1.StyleSheet.create({
|
|
24
24
|
pickerContainer: __assign({ flexDirection: "row", marginRight: "8%", 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"
|
|
25
25
|
? DARK_MODE_BACKGROUND_COLOR
|
|
26
26
|
: LIGHT_MODE_BACKGROUND_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerContainer),
|
|
27
27
|
pickerLabelContainer: __assign({ position: "absolute", right: 4, top: 0, bottom: 0, justifyContent: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabelContainer),
|
|
28
|
-
pickerLabel: __assign({ fontSize: 18, fontWeight: "bold", marginTop: ((_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 25) / 6, color: (
|
|
28
|
+
pickerLabel: __assign(__assign({ fontSize: 18, fontWeight: "bold", marginTop: ((_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 25) / 6, color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
|
|
29
29
|
? DARK_MODE_TEXT_COLOR
|
|
30
|
-
: LIGHT_MODE_TEXT_COLOR
|
|
31
|
-
pickerItemContainer: __assign({ height: 50, justifyContent: "center", alignItems: "center", width: ((
|
|
32
|
-
pickerItem: __assign({ textAlignVertical: "center", fontSize: 25, color: (
|
|
30
|
+
: LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel),
|
|
31
|
+
pickerItemContainer: __assign({ height: 50, justifyContent: "center", alignItems: "center", width: ((_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : 25) * 3.6 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer),
|
|
32
|
+
pickerItem: __assign(__assign({ textAlignVertical: "center", fontSize: 25, color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
|
|
33
33
|
? DARK_MODE_TEXT_COLOR
|
|
34
|
-
: LIGHT_MODE_TEXT_COLOR
|
|
34
|
+
: LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem),
|
|
35
35
|
pickerGradientOverlay: __assign({ position: "absolute", left: 0, right: 0, height: options.padWithNItems === 0
|
|
36
36
|
? "30%"
|
|
37
|
-
: ((
|
|
37
|
+
: ((_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 50) * 0.8 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay),
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
exports.generateStyles = generateStyles;
|
|
@@ -19,23 +19,19 @@ var DARK_MODE_TEXT_COLOR = "#E9E9E9";
|
|
|
19
19
|
var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
|
|
20
20
|
var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
|
|
21
21
|
var generateStyles = function (customStyles) {
|
|
22
|
-
var _a
|
|
22
|
+
var _a;
|
|
23
23
|
return react_native_1.StyleSheet.create({
|
|
24
24
|
container: __assign({ flex: 1, 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),
|
|
28
28
|
buttonContainer: __assign({ flexDirection: "row", marginTop: 25 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.buttonContainer),
|
|
29
|
-
button: __assign({ marginHorizontal: 12, paddingVertical: 10, paddingHorizontal: 20, borderWidth: 1, borderRadius: 10, fontSize: 16, overflow: "hidden" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
|
|
30
|
-
cancelButton: __assign({ borderColor: "gray", color: (
|
|
29
|
+
button: __assign(__assign({ marginHorizontal: 12, paddingVertical: 10, paddingHorizontal: 20, borderWidth: 1, borderRadius: 10, fontSize: 16, overflow: "hidden" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
|
|
30
|
+
cancelButton: __assign(__assign({ borderColor: "gray", color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? DARK_MODE_TEXT_COLOR : "gray", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "gray" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.cancelButton),
|
|
31
|
+
confirmButton: __assign(__assign({ borderColor: "green", color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? DARK_MODE_TEXT_COLOR : "green", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "green" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.confirmButton),
|
|
32
|
+
modalTitle: __assign(__assign({ fontSize: 24, fontWeight: "bold", marginBottom: 15, color: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
|
|
31
33
|
? DARK_MODE_TEXT_COLOR
|
|
32
|
-
:
|
|
33
|
-
confirmButton: __assign({ borderColor: "green", color: ((_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _c !== void 0 ? _c : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
|
|
34
|
-
? DARK_MODE_TEXT_COLOR
|
|
35
|
-
: "green", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "green" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.confirmButton),
|
|
36
|
-
modalTitle: __assign({ fontSize: 24, fontWeight: "bold", marginBottom: 15, color: ((_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _d !== void 0 ? _d : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
|
|
37
|
-
? DARK_MODE_TEXT_COLOR
|
|
38
|
-
: LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.modalTitle),
|
|
34
|
+
: LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.text), customStyles === null || customStyles === void 0 ? void 0 : customStyles.modalTitle),
|
|
39
35
|
});
|
|
40
36
|
};
|
|
41
37
|
exports.generateStyles = generateStyles;
|