react-native-timer-picker 1.2.1 → 1.2.3

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.
Files changed (4) hide show
  1. package/README.md +16 -2
  2. package/dist/components/index.d.ts +2 -1
  3. package/dist/components/index.js +5 -5
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -25,9 +25,12 @@ Works with Expo and bare React Native apps.
25
25
  - [TimerPickerModal ⏰](#timerpickermodal-)
26
26
  - [Custom Styles 👕](#custom-styles--1)
27
27
  - [Methods 🔄](#methods-)
28
+ - [TimerPicker](#timerpicker)
28
29
  - [TimerPickerModal](#timerpickermodal)
29
30
  - [License 📝](#license-)
30
31
 
32
+ <br>
33
+
31
34
  ## Demos 📱
32
35
 
33
36
  <p>
@@ -39,6 +42,7 @@ Works with Expo and bare React Native apps.
39
42
  <img src="demos/example4.gif" width="250" height="550"/>
40
43
  </p>
41
44
 
45
+ <br>
42
46
 
43
47
  ## Peer Dependencies 👶
44
48
 
@@ -49,7 +53,9 @@ If you want the numbers to fade in/out at the top and bottom of the picker, you
49
53
  - [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient) (if using Expo)
50
54
  - [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) (if using in a bare React Native project)
51
55
 
52
- To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.
56
+ **To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.**
57
+
58
+ <br>
53
59
 
54
60
  ## Installation 🚀
55
61
 
@@ -67,6 +73,8 @@ or
67
73
  yarn add react-native-timer-picker
68
74
  ```
69
75
 
76
+ <br>
77
+
70
78
  ## Examples 😎
71
79
 
72
80
  ### Timer Picker Modal (Dark Mode) 🌚
@@ -295,6 +303,8 @@ return (
295
303
  ```
296
304
  <img src="demos/example4.gif" width="250" height="550"/>
297
305
 
306
+ <br>
307
+
298
308
  ## Props 💅
299
309
 
300
310
  ### TimerPicker ⏲️
@@ -356,7 +366,8 @@ The TimerPickerModal component accepts all [TimerPicker props](#timerpicker-️)
356
366
  | modalProps | Props for the main modal component | `React.ComponentProps<typeof Modal>` | - | false |
357
367
  | containerProps | Props for the main container | `React.ComponentProps<typeof View>` | - | false |
358
368
  | contentContainerProps | Props for the content container | `React.ComponentProps<typeof View>` | - | false |
359
- | buttonContainerProps | Props for the button container | `React.ComponentProps<typeof View>` | - | false |
369
+ | buttonContainerProps | Props for the button containers | `React.ComponentProps<typeof View>` | - | false |
370
+ | buttonTouchableOpacityProps | Props for the button touchable opacities | `React.ComponentProps<typeof TouchableOpacity>` | - | false |
360
371
  | modalTitleProps | Props for the modal title text component | `React.ComponentProps<typeof Text>` | - | false |
361
372
  | styles | Custom styles for the timer picker modal | [CustomTimerPickerModalStyles](#custom-styles--1) | - | false |
362
373
 
@@ -374,6 +385,7 @@ The following custom styles can be supplied to re-style the component in any way
374
385
  | confirmButton | Style for the confirm button | TextStyle |
375
386
  | modalTitle | Style for the title of the modal | TextStyle |
376
387
 
388
+ <br>
377
389
 
378
390
  ## Methods 🔄
379
391
 
@@ -403,6 +415,8 @@ timerPickerRef.current.setValue({ hours: number, minutes: number, seconds: numbe
403
415
 
404
416
  An identical ref is also exposed for the TimerPickerModal component.
405
417
 
418
+ <br>
419
+
406
420
  ## License 📝
407
421
 
408
422
  This project is licensed under the [MIT License](LICENSE).
package/dist/components/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { View, Text } from "react-native";
2
+ import { View, Text, TouchableOpacity } from "react-native";
3
3
  import { TimerPickerProps } from "./TimerPicker";
4
4
  import Modal from "./Modal";
5
5
  import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
@@ -33,6 +33,7 @@ export interface TimerPickerModalProps extends TimerPickerProps {
33
33
  containerProps?: React.ComponentProps<typeof View>;
34
34
  contentContainerProps?: React.ComponentProps<typeof View>;
35
35
  buttonContainerProps?: React.ComponentProps<typeof View>;
36
+ buttonTouchableOpacityProps?: React.ComponentProps<typeof TouchableOpacity>;
36
37
  modalTitleProps?: React.ComponentProps<typeof Text>;
37
38
  styles?: CustomTimerPickerModalStyles;
38
39
  }
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, 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, 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,
@@ -94,18 +94,18 @@ var TimerPickerModal = (0, react_1.forwardRef)(function (_a, ref) {
94
94
  </react_native_1.Text>) : null}
95
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}/>
96
96
  <react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
97
- {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel}>
97
+ {!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel} {...buttonTouchableOpacityProps}>
98
98
  <react_native_1.Text style={[
99
- styles.cancelButton,
100
99
  styles.button,
100
+ styles.cancelButton,
101
101
  ]}>
102
102
  {cancelButtonText}
103
103
  </react_native_1.Text>
104
104
  </react_native_1.TouchableOpacity>) : null}
105
- <react_native_1.TouchableOpacity onPress={confirm}>
105
+ <react_native_1.TouchableOpacity onPress={confirm} {...buttonTouchableOpacityProps}>
106
106
  <react_native_1.Text style={[
107
- styles.confirmButton,
108
107
  styles.button,
108
+ styles.confirmButton,
109
109
  ]}>
110
110
  {confirmButtonText}
111
111
  </react_native_1.Text>
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.1",
9
+ "version": "1.2.3",
10
10
  "main": "dist/index.js",
11
11
  "types": "dist/index.d.ts",
12
12
  "scripts": {