react-native-timer-picker 1.0.0 → 1.1.2
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 +386 -2
- package/dist/components/Modal/index.d.ts +2 -1
- package/dist/components/Modal/index.js +3 -3
- package/dist/components/TimerPicker/DurationScroll.d.ts +15 -3
- package/dist/components/TimerPicker/DurationScroll.js +23 -21
- package/dist/components/TimerPicker/TimerPicker.styles.d.ts +0 -5
- package/dist/components/TimerPicker/index.d.ts +4 -3
- package/dist/components/TimerPicker/index.js +5 -5
- package/dist/components/TimerPickerModal.styles.d.ts +0 -4
- package/dist/components/index.d.ts +6 -3
- package/dist/components/index.js +46 -25
- package/dist/utils/generateNumbers.d.ts +1 -1
- package/dist/utils/generateNumbers.js +6 -3
- package/package.json +41 -9
- package/dist/components/DurationPicker/DurationPicker.styles.d.ts +0 -26
- package/dist/components/DurationPicker/DurationPicker.styles.js +0 -39
- package/dist/components/DurationPicker/DurationScroll.d.ts +0 -16
- package/dist/components/DurationPicker/DurationScroll.js +0 -121
- package/dist/components/DurationPicker/index.d.ts +0 -27
- package/dist/components/DurationPicker/index.js +0 -55
- package/dist/components/DurationPickerModal.styles.d.ts +0 -23
- package/dist/components/DurationPickerModal.styles.js +0 -40
package/README.md
CHANGED
|
@@ -1,2 +1,386 @@
|
|
|
1
|
-
# React Native Timer Picker
|
|
2
|
-
|
|
1
|
+
# React Native Timer Picker ⏰🕰️⏳
|
|
2
|
+
|
|
3
|
+
[]()
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/react-native-timer-picker)
|
|
6
|
+
[](https://www.npmjs.com/package/react-native-timer-picker)
|
|
7
|
+
|
|
8
|
+
A simple, flexible, performant duration picker component for React Native apps 🔥
|
|
9
|
+
|
|
10
|
+
Great for timers, alarms and duration inputs ⏰🕰️⏳
|
|
11
|
+
|
|
12
|
+
Works with Expo and bare React Native apps.
|
|
13
|
+
|
|
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
|
+
- [TimerPickerModal](#timerpickermodal)
|
|
29
|
+
- [License 📝](#license-)
|
|
30
|
+
|
|
31
|
+
## Demos 📱
|
|
32
|
+
|
|
33
|
+
<p>
|
|
34
|
+
<img src="demos/example1.gif" width="250" height="550" style="margin-right:50px"/>
|
|
35
|
+
<img src="demos/example2.gif" width="250" height="550"/>
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
<img src="demos/example3.gif" width="250" height="550" style="margin-right:50px"/>
|
|
39
|
+
<img src="demos/example4.gif" width="250" height="550"/>
|
|
40
|
+
</p>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
## Peer Dependencies 👶
|
|
44
|
+
|
|
45
|
+
This component will work in your React Native Project **without any peer dependencies**.
|
|
46
|
+
|
|
47
|
+
If you want the numbers to fade in/out at the top and bottom of the picker, you will need to install either:
|
|
48
|
+
|
|
49
|
+
- [expo-linear-gradient](https://www.npmjs.com/package/expo-linear-gradient) (if using Expo)
|
|
50
|
+
- [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) (if using in a bare React Native project)
|
|
51
|
+
|
|
52
|
+
To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.
|
|
53
|
+
|
|
54
|
+
## Installation 🚀
|
|
55
|
+
|
|
56
|
+
Supports React Native >= 0.59.0 and React >= 16.8.0.
|
|
57
|
+
|
|
58
|
+
Just run:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npm install react-native-timer-picker
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
or
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
yarn add react-native-timer-picker
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Examples 😎
|
|
71
|
+
|
|
72
|
+
### Timer Picker Modal (Dark Mode) 🌚
|
|
73
|
+
|
|
74
|
+
```jsx
|
|
75
|
+
import { TimerPickerModal } from "react-native-timer-picker";
|
|
76
|
+
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
|
|
77
|
+
|
|
78
|
+
....
|
|
79
|
+
const [showPicker, setShowPicker] = useState(false);
|
|
80
|
+
const [alarmString, setAlarmString] = useState<
|
|
81
|
+
string | null
|
|
82
|
+
>(null);
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<View style={{backgroundColor: "#514242", alignItems: "center", justifyContent: "center"}}>
|
|
86
|
+
<Text style={{fontSize: 18, color: "#F1F1F1"}}>
|
|
87
|
+
{alarmStringExample !== null
|
|
88
|
+
? "Alarm set for"
|
|
89
|
+
: "No alarm set"}
|
|
90
|
+
</Text>
|
|
91
|
+
<TouchableOpacity
|
|
92
|
+
activeOpacity={0.7}
|
|
93
|
+
onPress={() => setShowPicker(true)}>
|
|
94
|
+
<View style={{alignItems: "center"}}>
|
|
95
|
+
{alarmString !== null ? (
|
|
96
|
+
<Text style={{color: "#F1F1F1", fontSize: 48}}>
|
|
97
|
+
{alarmString}
|
|
98
|
+
</Text>
|
|
99
|
+
) : null}
|
|
100
|
+
<TouchableOpacity
|
|
101
|
+
activeOpacity={0.7}
|
|
102
|
+
onPress={() => setShowPicker(true)}>
|
|
103
|
+
<View style={{marginTop: 30}}>
|
|
104
|
+
<Text
|
|
105
|
+
style={{
|
|
106
|
+
paddingVertical: 10,
|
|
107
|
+
paddingHorizontal: 18,
|
|
108
|
+
borderWidth: 1,
|
|
109
|
+
borderRadius: 10,
|
|
110
|
+
fontSize: 16,
|
|
111
|
+
overflow: "hidden",
|
|
112
|
+
borderColor: "#C2C2C2",
|
|
113
|
+
color: "#C2C2C2"
|
|
114
|
+
}}>
|
|
115
|
+
Set Alarm 🔔
|
|
116
|
+
</Text>
|
|
117
|
+
</View>
|
|
118
|
+
</TouchableOpacity>
|
|
119
|
+
</View>
|
|
120
|
+
</TouchableOpacity>
|
|
121
|
+
<TimerPickerModal
|
|
122
|
+
visible={showPicker}
|
|
123
|
+
setIsVisible={setShowPicker}
|
|
124
|
+
onConfirm={(pickedDuration) => {
|
|
125
|
+
setAlarmString(formatTime(pickedDuration));
|
|
126
|
+
setShowPicker(false);
|
|
127
|
+
}}
|
|
128
|
+
modalTitle="Set Alarm"
|
|
129
|
+
onCancel={() => setShowPicker(false)}
|
|
130
|
+
closeOnOverlayPress
|
|
131
|
+
LinearGradient={LinearGradient}
|
|
132
|
+
styles={{
|
|
133
|
+
theme: "dark",
|
|
134
|
+
}}
|
|
135
|
+
modalProps={{
|
|
136
|
+
overlayOpacity: 0.2,
|
|
137
|
+
}}
|
|
138
|
+
/>
|
|
139
|
+
</View>
|
|
140
|
+
)
|
|
141
|
+
|
|
142
|
+
```
|
|
143
|
+
<img src="demos/example1.gif" width="250" height="550"/>
|
|
144
|
+
|
|
145
|
+
### Timer Picker Modal (Light Mode) 🌞
|
|
146
|
+
|
|
147
|
+
```jsx
|
|
148
|
+
import { TimerPickerModal } from "react-native-timer-picker";
|
|
149
|
+
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
|
|
150
|
+
|
|
151
|
+
....
|
|
152
|
+
const [showPicker, setShowPicker] = useState(false);
|
|
153
|
+
const [alarmString, setAlarmString] = useState<
|
|
154
|
+
string | null
|
|
155
|
+
>(null);
|
|
156
|
+
|
|
157
|
+
return (
|
|
158
|
+
<View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
|
|
159
|
+
<Text style={{fontSize: 18, color: "#202020"}}>
|
|
160
|
+
{alarmStringExample !== null
|
|
161
|
+
? "Alarm set for"
|
|
162
|
+
: "No alarm set"}
|
|
163
|
+
</Text>
|
|
164
|
+
<TouchableOpacity
|
|
165
|
+
activeOpacity={0.7}
|
|
166
|
+
onPress={() => setShowPicker(true)}>
|
|
167
|
+
<View style={{alignItems: "center"}}>
|
|
168
|
+
{alarmString !== null ? (
|
|
169
|
+
<Text style={{color: "#202020", fontSize: 48}}>
|
|
170
|
+
{alarmString}
|
|
171
|
+
</Text>
|
|
172
|
+
) : null}
|
|
173
|
+
<TouchableOpacity
|
|
174
|
+
activeOpacity={0.7}
|
|
175
|
+
onPress={() => setShowPicker(true)}>
|
|
176
|
+
<View style={{marginTop: 30}}>
|
|
177
|
+
<Text
|
|
178
|
+
style={{paddingVertical: 10,
|
|
179
|
+
paddingHorizontal: 18,
|
|
180
|
+
borderWidth: 1,
|
|
181
|
+
borderRadius: 10,
|
|
182
|
+
fontSize: 16,
|
|
183
|
+
overflow: "hidden",
|
|
184
|
+
borderColor: "#8C8C8C",
|
|
185
|
+
color: "#8C8C8C"
|
|
186
|
+
}}>
|
|
187
|
+
Set Alarm 🔔
|
|
188
|
+
</Text>
|
|
189
|
+
</View>
|
|
190
|
+
</TouchableOpacity>
|
|
191
|
+
</View>
|
|
192
|
+
</TouchableOpacity>
|
|
193
|
+
<TimerPickerModal
|
|
194
|
+
visible={showPicker}
|
|
195
|
+
setIsVisible={setShowPicker}
|
|
196
|
+
onConfirm={(pickedDuration) => {
|
|
197
|
+
setAlarmString(formatTime(pickedDuration));
|
|
198
|
+
setShowPicker(false);
|
|
199
|
+
}}
|
|
200
|
+
modalTitle="Set Alarm"
|
|
201
|
+
onCancel={() => setShowPicker(false)}
|
|
202
|
+
closeOnOverlayPress
|
|
203
|
+
LinearGradient={LinearGradient}
|
|
204
|
+
styles={{
|
|
205
|
+
theme: "light",
|
|
206
|
+
}}
|
|
207
|
+
/>
|
|
208
|
+
</View>
|
|
209
|
+
)
|
|
210
|
+
|
|
211
|
+
```
|
|
212
|
+
<img src="demos/example2.gif" width="250" height="550"/>
|
|
213
|
+
|
|
214
|
+
### Timer Picker with Customisation (Dark Mode) 🌒
|
|
215
|
+
|
|
216
|
+
```jsx
|
|
217
|
+
import { TimerPicker } from "react-native-timer-picker";
|
|
218
|
+
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
|
|
219
|
+
|
|
220
|
+
....
|
|
221
|
+
const [showPicker, setShowPicker] = useState(false);
|
|
222
|
+
const [alarmString, setAlarmString] = useState<
|
|
223
|
+
string | null
|
|
224
|
+
>(null);
|
|
225
|
+
|
|
226
|
+
return (
|
|
227
|
+
<View style={{backgroundColor: "#202020", alignItems: "center", justifyContent: "center"}}>
|
|
228
|
+
<TimerPicker
|
|
229
|
+
padWithNItems={2}
|
|
230
|
+
hourLabel=":"
|
|
231
|
+
minuteLabel=":"
|
|
232
|
+
secondLabel=""
|
|
233
|
+
LinearGradient={LinearGradient}
|
|
234
|
+
styles={{
|
|
235
|
+
theme: "dark",
|
|
236
|
+
backgroundColor: "#202020",
|
|
237
|
+
pickerItem: {
|
|
238
|
+
fontSize: 34,
|
|
239
|
+
},
|
|
240
|
+
pickerLabel: {
|
|
241
|
+
fontSize: 32,
|
|
242
|
+
marginTop: 0,
|
|
243
|
+
},
|
|
244
|
+
pickerContainer: {
|
|
245
|
+
marginRight: 6,
|
|
246
|
+
},
|
|
247
|
+
}}
|
|
248
|
+
/>
|
|
249
|
+
</View>
|
|
250
|
+
)
|
|
251
|
+
|
|
252
|
+
```
|
|
253
|
+
<img src="demos/example3.gif" width="250" height="550"/>
|
|
254
|
+
|
|
255
|
+
### Timer Picker with Customisation (Light Mode) 🌔
|
|
256
|
+
|
|
257
|
+
```jsx
|
|
258
|
+
import { TimerPicker } from "react-native-timer-picker";
|
|
259
|
+
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
|
|
260
|
+
|
|
261
|
+
....
|
|
262
|
+
const [showPicker, setShowPicker] = useState(false);
|
|
263
|
+
const [alarmString, setAlarmString] = useState<
|
|
264
|
+
string | null
|
|
265
|
+
>(null);
|
|
266
|
+
|
|
267
|
+
return (
|
|
268
|
+
<View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
|
|
269
|
+
<TimerPicker
|
|
270
|
+
padWithNItems={3}
|
|
271
|
+
hideHours
|
|
272
|
+
minuteLabel="min"
|
|
273
|
+
secondLabel="sec"
|
|
274
|
+
LinearGradient={LinearGradient}
|
|
275
|
+
styles={{
|
|
276
|
+
theme: "light",
|
|
277
|
+
pickerItem: {
|
|
278
|
+
fontSize: 34,
|
|
279
|
+
},
|
|
280
|
+
pickerLabel: {
|
|
281
|
+
fontSize: 26,
|
|
282
|
+
right: -20,
|
|
283
|
+
},
|
|
284
|
+
pickerLabelContainer: {
|
|
285
|
+
width: 60,
|
|
286
|
+
},
|
|
287
|
+
pickerItemContainer: {
|
|
288
|
+
width: 150,
|
|
289
|
+
},
|
|
290
|
+
}}
|
|
291
|
+
/>
|
|
292
|
+
</View>
|
|
293
|
+
)
|
|
294
|
+
|
|
295
|
+
```
|
|
296
|
+
<img src="demos/example4.gif" width="250" height="550"/>
|
|
297
|
+
|
|
298
|
+
## Props 💅
|
|
299
|
+
|
|
300
|
+
### TimerPicker ⏲️
|
|
301
|
+
|
|
302
|
+
| Prop | Description | Type | Default Value | Required |
|
|
303
|
+
| :--------------------------:|:----------------------------------------------------------|:-------------------------------------------------:|:-------------------:|:--------:|
|
|
304
|
+
| onDurationChange | Callback when the duration changes | `(duration: { hours: number, minutes: number, seconds: number }) => void` | - | false |
|
|
305
|
+
| initialHours | Initial value for hours | Number | - | false |
|
|
306
|
+
| initialMinutes | Initial value for minutes | Number | - | false |
|
|
307
|
+
| initialSeconds | Initial value for seconds | Number | - | false |
|
|
308
|
+
| hideHours | Hide the hours picker | Boolean | false | false |
|
|
309
|
+
| hideMinutes | Hide the minutes picker | Boolean | false | false |
|
|
310
|
+
| hideSeconds | Hide the seconds picker | Boolean | false | false |
|
|
311
|
+
| hourLabel | Label for the hours picker | String | h | false |
|
|
312
|
+
| minuteLabel | Label for the minutes picker | String | m | false |
|
|
313
|
+
| secondLabel | Label for the seconds picker | String | s | false |
|
|
314
|
+
| padWithNItems | Number of items to pad the picker with on either side | Number | 1 | false |
|
|
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 |
|
|
317
|
+
| pickerContainerProps | Props for the picker container | `React.ComponentProps<typeof View>` | - | false |
|
|
318
|
+
| pickerGradientOverlayProps | Props for the gradient overlay | LinearGradientProps | - | false |
|
|
319
|
+
| styles | Custom styles for the timer picker | [CustomTimerPickerStyles](#custom-styles) | - | false |
|
|
320
|
+
|
|
321
|
+
#### Custom Styles 👗
|
|
322
|
+
|
|
323
|
+
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).
|
|
324
|
+
|
|
325
|
+
| Style Prop | Description | Type |
|
|
326
|
+
| :-------------------: | :------------------------------------- | :-----------------------------------: |
|
|
327
|
+
| theme | Theme of the component | "light" \| "dark" |
|
|
328
|
+
| backgroundColor | Main background color | string |
|
|
329
|
+
| textColor | Color for the text elements | string |
|
|
330
|
+
| pickerContainer | Main container for the picker | ViewStyle |
|
|
331
|
+
| pickerLabelContainer | Container for the picker's labels | ViewStyle |
|
|
332
|
+
| pickerLabel | Style for the picker's labels | TextStyle |
|
|
333
|
+
| pickerItemContainer | Container for each number in the picker | ViewStyle |
|
|
334
|
+
| pickerItem | Style for each individual picker number | TextStyle |
|
|
335
|
+
| pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle |
|
|
336
|
+
|
|
337
|
+
### TimerPickerModal ⏰
|
|
338
|
+
|
|
339
|
+
The TimerPickerModal component accepts all [TimerPicker props](#timerpicker), and the below additional props.
|
|
340
|
+
|
|
341
|
+
| Prop | Description | Type | Default Value | Required |
|
|
342
|
+
| :--------------------:|:----------------------------------------------------------|:---------------------------------------------------------:|:-------------------:|:--------:|
|
|
343
|
+
| visible | Determines if the modal is visible | Boolean | - | true |
|
|
344
|
+
| setIsVisible | Callback to set modal visibility | `(isVisible: boolean) => void` | - | true |
|
|
345
|
+
| onConfirm | Callback when the user confirms the selected time | `({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void` | - | true |
|
|
346
|
+
| onCancel | Callback when the user cancels the selection | `() => void` | - | false |
|
|
347
|
+
| closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean | - | false |
|
|
348
|
+
| hideCancelButton | Hide the cancel button within the modal | Boolean | - | false |
|
|
349
|
+
| confirmButtonText | Text for the confirm button | String | - | false |
|
|
350
|
+
| cancelButtonText | Text for the cancel button | String | - | false |
|
|
351
|
+
| modalTitle | Title text for the modal | String | - | false |
|
|
352
|
+
| modalProps | Props for the main modal component | `React.ComponentProps<typeof Modal>` | - | false |
|
|
353
|
+
| containerProps | Props for the main container | `React.ComponentProps<typeof View>` | - | false |
|
|
354
|
+
| contentContainerProps | Props for the content container | `React.ComponentProps<typeof View>` | - | false |
|
|
355
|
+
| buttonContainerProps | Props for the button container | `React.ComponentProps<typeof View>` | - | false |
|
|
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-1) | - | false |
|
|
358
|
+
|
|
359
|
+
#### Custom Styles 👗
|
|
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).
|
|
362
|
+
|
|
363
|
+
| Style Prop | Description | Type |
|
|
364
|
+
| :---------------: | :------------------------------------- | :-------: |
|
|
365
|
+
| container | Main container's style | ViewStyle |
|
|
366
|
+
| contentContainer | Style for the content's container | ViewStyle |
|
|
367
|
+
| buttonContainer | Style for the container around the buttons | ViewStyle |
|
|
368
|
+
| button | General style for both buttons | ViewStyle |
|
|
369
|
+
| cancelButton | Style for the cancel button | ViewStyle |
|
|
370
|
+
| confirmButton | Style for the confirm button | ViewStyle |
|
|
371
|
+
| modalTitle | Style for the title of the modal | TextStyle |
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
## Methods 🔄
|
|
375
|
+
|
|
376
|
+
### TimerPickerModal
|
|
377
|
+
|
|
378
|
+
`reset` - imperative method to reset the selected duration to their initial values.
|
|
379
|
+
|
|
380
|
+
```javascript
|
|
381
|
+
timerPickerModalRef.current.reset();
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
## License 📝
|
|
385
|
+
|
|
386
|
+
This project is licensed under the MIT License.
|
|
@@ -9,6 +9,7 @@ interface ModalProps {
|
|
|
9
9
|
modalProps?: any;
|
|
10
10
|
contentStyle?: any;
|
|
11
11
|
overlayStyle?: any;
|
|
12
|
+
testID?: string;
|
|
12
13
|
}
|
|
13
|
-
export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, }: ModalProps) => React.ReactElement;
|
|
14
|
+
export declare const Modal: ({ children, onOverlayPress, onHide, isVisible, animationDuration, overlayOpacity, modalProps, contentStyle, overlayStyle, testID }: ModalProps) => React.ReactElement;
|
|
14
15
|
export default Modal;
|
|
@@ -29,7 +29,7 @@ var react_1 = __importStar(require("react"));
|
|
|
29
29
|
var react_native_1 = require("react-native");
|
|
30
30
|
var Modal_styles_1 = require("./Modal.styles");
|
|
31
31
|
var Modal = function (_a) {
|
|
32
|
-
var children = _a.children, onOverlayPress = _a.onOverlayPress, onHide = _a.onHide, _b = _a.isVisible, isVisible = _b === void 0 ? false : _b, _c = _a.animationDuration, animationDuration = _c === void 0 ? 300 : _c, _d = _a.overlayOpacity, overlayOpacity = _d === void 0 ? 0.4 : _d, modalProps = _a.modalProps, contentStyle = _a.contentStyle, overlayStyle = _a.overlayStyle;
|
|
32
|
+
var children = _a.children, onOverlayPress = _a.onOverlayPress, onHide = _a.onHide, _b = _a.isVisible, isVisible = _b === void 0 ? false : _b, _c = _a.animationDuration, animationDuration = _c === void 0 ? 300 : _c, _d = _a.overlayOpacity, overlayOpacity = _d === void 0 ? 0.4 : _d, modalProps = _a.modalProps, contentStyle = _a.contentStyle, overlayStyle = _a.overlayStyle, testID = _a.testID;
|
|
33
33
|
var _e = (0, react_1.useState)(react_native_1.Dimensions.get("window").height), screenHeight = _e[0], setScreenHeight = _e[1];
|
|
34
34
|
var _f = (0, react_1.useState)(react_native_1.Dimensions.get("window").width), screenWidth = _f[0], setScreenWidth = _f[1];
|
|
35
35
|
var isMounted = (0, react_1.useRef)(false);
|
|
@@ -103,8 +103,8 @@ var Modal = function (_a) {
|
|
|
103
103
|
}
|
|
104
104
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
105
105
|
}, [isVisible]);
|
|
106
|
-
return (<react_native_1.Modal transparent animationType="fade" visible={isVisible} {...modalProps}>
|
|
107
|
-
<react_native_1.TouchableWithoutFeedback onPress={onOverlayPress}>
|
|
106
|
+
return (<react_native_1.Modal transparent animationType="fade" visible={isVisible} {...modalProps} testID={testID !== null && testID !== void 0 ? testID : "modal"}>
|
|
107
|
+
<react_native_1.TouchableWithoutFeedback onPress={onOverlayPress} testID="modal-backdrop">
|
|
108
108
|
<react_native_1.Animated.View style={[
|
|
109
109
|
Modal_styles_1.styles.backdrop,
|
|
110
110
|
backdropAnimatedStyle,
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { View } from "react-native";
|
|
3
3
|
import { generateStyles } from "./TimerPicker.styles";
|
|
4
|
+
type LinearGradientPoint = {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
};
|
|
8
|
+
export type LinearGradientProps = React.ComponentProps<typeof View> & {
|
|
9
|
+
colors: string[];
|
|
10
|
+
locations?: number[] | null;
|
|
11
|
+
start?: LinearGradientPoint | null;
|
|
12
|
+
end?: LinearGradientPoint | null;
|
|
13
|
+
};
|
|
4
14
|
interface DurationScrollProps {
|
|
5
15
|
numberOfItems: number;
|
|
6
16
|
label?: string;
|
|
@@ -9,8 +19,10 @@ interface DurationScrollProps {
|
|
|
9
19
|
padNumbersWithZero?: boolean;
|
|
10
20
|
disableInfiniteScroll?: boolean;
|
|
11
21
|
padWithNItems: number;
|
|
12
|
-
pickerGradientOverlayProps?:
|
|
22
|
+
pickerGradientOverlayProps?: LinearGradientProps;
|
|
23
|
+
LinearGradient?: any;
|
|
24
|
+
testID?: string;
|
|
13
25
|
styles: ReturnType<typeof generateStyles>;
|
|
14
26
|
}
|
|
15
|
-
declare const DurationScroll: ({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, padWithNItems, pickerGradientOverlayProps, styles, }: DurationScrollProps) => React.ReactElement;
|
|
27
|
+
declare const DurationScroll: ({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, padWithNItems, pickerGradientOverlayProps, LinearGradient, testID, styles, }: DurationScrollProps) => React.ReactElement;
|
|
16
28
|
export default DurationScroll;
|
|
@@ -32,14 +32,14 @@ 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 */
|
|
35
36
|
var react_1 = __importStar(require("react"));
|
|
36
37
|
var react_native_1 = require("react-native");
|
|
37
|
-
var expo_linear_gradient_1 = require("expo-linear-gradient");
|
|
38
38
|
var generateNumbers_1 = require("../../utils/generateNumbers");
|
|
39
39
|
var colorToRgba_1 = require("../../utils/colorToRgba");
|
|
40
40
|
var DurationScroll = function (_a) {
|
|
41
41
|
var _b, _c, _d, _e;
|
|
42
|
-
var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialIndex, initialIndex = _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, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, styles = _a.styles;
|
|
42
|
+
var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialIndex, initialIndex = _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, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, LinearGradient = _a.LinearGradient, testID = _a.testID, styles = _a.styles;
|
|
43
43
|
var flatListRef = (0, react_1.useRef)(null);
|
|
44
44
|
var data = (0, generateNumbers_1.generateNumbers)(numberOfItems, {
|
|
45
45
|
padWithZero: padNumbersWithZero,
|
|
@@ -50,7 +50,7 @@ var DurationScroll = function (_a) {
|
|
|
50
50
|
var numberOfItemsToShow = 1 + padWithNItems * 2;
|
|
51
51
|
var renderItem = function (_a) {
|
|
52
52
|
var item = _a.item;
|
|
53
|
-
return (<react_native_1.View key={item} style={styles.pickerItemContainer}>
|
|
53
|
+
return (<react_native_1.View key={item} style={styles.pickerItemContainer} testID="picker-item">
|
|
54
54
|
<react_native_1.Text style={styles.pickerItem}>{item}</react_native_1.Text>
|
|
55
55
|
</react_native_1.View>);
|
|
56
56
|
};
|
|
@@ -78,7 +78,7 @@ var DurationScroll = function (_a) {
|
|
|
78
78
|
onViewableItemsChanged: onViewableItemsChanged,
|
|
79
79
|
},
|
|
80
80
|
]);
|
|
81
|
-
return (<react_native_1.View style={{
|
|
81
|
+
return (<react_native_1.View testID={testID} style={{
|
|
82
82
|
height: styles.pickerItemContainer.height * numberOfItemsToShow,
|
|
83
83
|
overflow: "hidden",
|
|
84
84
|
}}>
|
|
@@ -89,33 +89,35 @@ var DurationScroll = function (_a) {
|
|
|
89
89
|
}); }} initialScrollIndex={(initialIndex % numberOfItems) +
|
|
90
90
|
numberOfItems +
|
|
91
91
|
(disableInfiniteScroll ? padWithNItems : 0) -
|
|
92
|
-
(padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={function (_, index) { return index.toString(); }} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={
|
|
92
|
+
(padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={function (_, index) { return index.toString(); }} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={16} snapToAlignment="start"
|
|
93
93
|
// used in place of snapToOffset due to bug on Android
|
|
94
94
|
snapToOffsets={__spreadArray([], Array(data.length), true).map(function (_, i) { return i * styles.pickerItemContainer.height; })} viewabilityConfigCallbackPairs={!disableInfiniteScroll
|
|
95
95
|
? viewabilityConfigCallbackPairs === null || viewabilityConfigCallbackPairs === void 0 ? void 0 : viewabilityConfigCallbackPairs.current
|
|
96
96
|
: undefined} onMomentumScrollEnd={function (e) {
|
|
97
97
|
var newIndex = Math.round(e.nativeEvent.contentOffset.y /
|
|
98
98
|
styles.pickerItemContainer.height);
|
|
99
|
-
onDurationChange((disableInfiniteScroll ? newIndex : newIndex) %
|
|
99
|
+
onDurationChange((disableInfiniteScroll ? newIndex : newIndex + padWithNItems) %
|
|
100
100
|
(numberOfItems + 1));
|
|
101
|
-
}}/>
|
|
101
|
+
}} testID="duration-scroll-flatlist"/>
|
|
102
102
|
<react_native_1.View style={styles.pickerLabelContainer}>
|
|
103
103
|
<react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>
|
|
104
104
|
</react_native_1.View>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
105
|
+
{LinearGradient ? (<>
|
|
106
|
+
<LinearGradient colors={[
|
|
107
|
+
(_b = styles.pickerContainer.backgroundColor) !== null && _b !== void 0 ? _b : "white",
|
|
108
|
+
(0, colorToRgba_1.colorToRgba)({
|
|
109
|
+
color: (_c = styles.pickerContainer.backgroundColor) !== null && _c !== void 0 ? _c : "white",
|
|
110
|
+
opacity: 0,
|
|
111
|
+
}),
|
|
112
|
+
]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
|
|
113
|
+
<LinearGradient colors={[
|
|
114
|
+
(0, colorToRgba_1.colorToRgba)({
|
|
115
|
+
color: (_d = styles.pickerContainer.backgroundColor) !== null && _d !== void 0 ? _d : "white",
|
|
116
|
+
opacity: 0,
|
|
117
|
+
}),
|
|
118
|
+
(_e = styles.pickerContainer.backgroundColor) !== null && _e !== void 0 ? _e : "white",
|
|
119
|
+
]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { bottom: -1 }]}/>
|
|
120
|
+
</>) : null}
|
|
119
121
|
</react_native_1.View>);
|
|
120
122
|
};
|
|
121
123
|
exports.default = DurationScroll;
|
|
@@ -7,11 +7,6 @@ export interface CustomTimerPickerStyles {
|
|
|
7
7
|
pickerLabel?: any;
|
|
8
8
|
pickerItemContainer?: any;
|
|
9
9
|
pickerItem?: any;
|
|
10
|
-
buttonContainer?: any;
|
|
11
|
-
button?: any;
|
|
12
|
-
cancelButton?: any;
|
|
13
|
-
confirmButton?: any;
|
|
14
|
-
modalTitle?: any;
|
|
15
10
|
pickerGradientOverlay?: any;
|
|
16
11
|
}
|
|
17
12
|
export declare const generateStyles: (customStyles: CustomTimerPickerStyles | undefined, options: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
-
import { LinearGradient } from "expo-linear-gradient";
|
|
4
3
|
import { CustomTimerPickerStyles } from "./TimerPicker.styles";
|
|
4
|
+
import { LinearGradientProps } from "./DurationScroll";
|
|
5
5
|
export interface TimerPickerProps {
|
|
6
6
|
onDurationChange?: (duration: {
|
|
7
7
|
hours: number;
|
|
@@ -19,9 +19,10 @@ export interface TimerPickerProps {
|
|
|
19
19
|
secondLabel?: string;
|
|
20
20
|
padWithNItems?: number;
|
|
21
21
|
disableInfiniteScroll?: boolean;
|
|
22
|
+
LinearGradient?: any;
|
|
22
23
|
pickerContainerProps?: React.ComponentProps<typeof View>;
|
|
23
|
-
pickerGradientOverlayProps?:
|
|
24
|
+
pickerGradientOverlayProps?: LinearGradientProps;
|
|
24
25
|
styles?: CustomTimerPickerStyles;
|
|
25
26
|
}
|
|
26
|
-
declare const TimerPicker: ({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement;
|
|
27
|
+
declare const TimerPicker: ({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, LinearGradient, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: TimerPickerProps) => React.ReactElement;
|
|
27
28
|
export default TimerPicker;
|
|
@@ -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 = function (_a) {
|
|
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, _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, 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, _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;
|
|
35
35
|
var checkedPadWithNItems = padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
|
|
36
36
|
var styles = (0, TimerPicker_styles_1.generateStyles)(customStyles, {
|
|
37
37
|
padWithNItems: checkedPadWithNItems,
|
|
@@ -47,10 +47,10 @@ var TimerPicker = function (_a) {
|
|
|
47
47
|
});
|
|
48
48
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
49
|
}, [selectedHours, selectedMinutes, selectedSeconds]);
|
|
50
|
-
return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer}>
|
|
51
|
-
{!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
52
|
-
{!hideMinutes ? (<DurationScroll_1.default numberOfItems={59} label={minuteLabel} initialIndex={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
53
|
-
{!hideSeconds ? (<DurationScroll_1.default numberOfItems={59} label={secondLabel} initialIndex={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
50
|
+
return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer} testID="timer-picker">
|
|
51
|
+
{!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-hour"/>) : null}
|
|
52
|
+
{!hideMinutes ? (<DurationScroll_1.default numberOfItems={59} label={minuteLabel} initialIndex={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-minute"/>) : null}
|
|
53
|
+
{!hideSeconds ? (<DurationScroll_1.default numberOfItems={59} label={secondLabel} initialIndex={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} LinearGradient={LinearGradient} styles={styles} testID="duration-scroll-second"/>) : null}
|
|
54
54
|
</react_native_1.View>);
|
|
55
55
|
};
|
|
56
56
|
exports.default = TimerPicker;
|
|
@@ -2,10 +2,6 @@ import type { CustomTimerPickerStyles } from "./TimerPicker/TimerPicker.styles";
|
|
|
2
2
|
export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
|
|
3
3
|
container?: any;
|
|
4
4
|
contentContainer?: any;
|
|
5
|
-
pickerContainer?: any;
|
|
6
|
-
pickerLabel?: any;
|
|
7
|
-
pickerItemContainer?: any;
|
|
8
|
-
pickerItem?: any;
|
|
9
5
|
buttonContainer?: any;
|
|
10
6
|
button?: any;
|
|
11
7
|
cancelButton?: any;
|
|
@@ -3,7 +3,10 @@ import { View, Text } from "react-native";
|
|
|
3
3
|
import { TimerPickerProps } from "./TimerPicker";
|
|
4
4
|
import Modal from "./Modal";
|
|
5
5
|
import { CustomTimerPickerModalStyles } from "./TimerPickerModal.styles";
|
|
6
|
-
|
|
6
|
+
interface TimePickerModalRef {
|
|
7
|
+
reset: () => void;
|
|
8
|
+
}
|
|
9
|
+
export interface TimerPickerModalProps extends TimerPickerProps {
|
|
7
10
|
visible: boolean;
|
|
8
11
|
setIsVisible: (isVisible: boolean) => void;
|
|
9
12
|
onConfirm: ({ hours, minutes, seconds, }: {
|
|
@@ -11,7 +14,7 @@ export interface TimerPickerModalProps extends Omit<TimerPickerProps, "onDuratio
|
|
|
11
14
|
minutes: number;
|
|
12
15
|
seconds: number;
|
|
13
16
|
}) => void;
|
|
14
|
-
onCancel
|
|
17
|
+
onCancel?: () => void;
|
|
15
18
|
closeOnOverlayPress?: boolean;
|
|
16
19
|
hideCancelButton?: boolean;
|
|
17
20
|
confirmButtonText?: string;
|
|
@@ -24,5 +27,5 @@ export interface TimerPickerModalProps extends Omit<TimerPickerProps, "onDuratio
|
|
|
24
27
|
modalTitleProps?: React.ComponentProps<typeof Text>;
|
|
25
28
|
styles?: CustomTimerPickerModalStyles;
|
|
26
29
|
}
|
|
27
|
-
declare const TimerPickerModal:
|
|
30
|
+
declare const TimerPickerModal: React.ForwardRefExoticComponent<TimerPickerModalProps & React.RefAttributes<TimePickerModalRef>>;
|
|
28
31
|
export default TimerPickerModal;
|
package/dist/components/index.js
CHANGED
|
@@ -31,8 +31,8 @@ var react_native_1 = require("react-native");
|
|
|
31
31
|
var TimerPicker_1 = __importDefault(require("./TimerPicker"));
|
|
32
32
|
var Modal_1 = __importDefault(require("./Modal"));
|
|
33
33
|
var TimerPickerModal_styles_1 = require("./TimerPickerModal.styles");
|
|
34
|
-
var TimerPickerModal = function (_a) {
|
|
35
|
-
var visible = _a.visible, setIsVisible = _a.setIsVisible, onConfirm = _a.onConfirm, onCancel = _a.onCancel, 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, _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, modalProps = _a.modalProps, containerProps = _a.containerProps, contentContainerProps = _a.contentContainerProps, pickerContainerProps = _a.pickerContainerProps, buttonContainerProps = _a.buttonContainerProps, modalTitleProps = _a.modalTitleProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
|
|
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, _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;
|
|
36
36
|
var styles = (0, TimerPickerModal_styles_1.generateStyles)(customStyles);
|
|
37
37
|
var _r = (0, react_1.useState)({
|
|
38
38
|
hours: initialHours,
|
|
@@ -53,35 +53,56 @@ var TimerPickerModal = function (_a) {
|
|
|
53
53
|
setIsVisible(false);
|
|
54
54
|
};
|
|
55
55
|
var confirm = function () {
|
|
56
|
-
onConfirm(selectedDuration);
|
|
57
56
|
setConfirmedDuration(selectedDuration);
|
|
57
|
+
onConfirm(selectedDuration);
|
|
58
58
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
59
|
+
var cancel = function () {
|
|
60
|
+
setIsVisible(false);
|
|
61
|
+
setSelectedDuration(confirmedDuration);
|
|
62
|
+
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
63
|
+
};
|
|
64
|
+
(0, react_1.useImperativeHandle)(ref, function () { return ({
|
|
65
|
+
reset: function () {
|
|
66
|
+
var initialDuration = {
|
|
67
|
+
hours: initialHours,
|
|
68
|
+
minutes: initialMinutes,
|
|
69
|
+
seconds: initialSeconds,
|
|
70
|
+
};
|
|
71
|
+
setSelectedDuration(initialDuration);
|
|
72
|
+
setConfirmedDuration(initialDuration);
|
|
73
|
+
setIsVisible(false);
|
|
74
|
+
},
|
|
75
|
+
}); });
|
|
76
|
+
return (<Modal_1.default isVisible={visible} onOverlayPress={closeOnOverlayPress ? hideModal : undefined} {...modalProps} testID="timer-picker-modal">
|
|
77
|
+
<react_native_1.View {...containerProps} style={styles.container}>
|
|
78
|
+
<react_native_1.View {...contentContainerProps} style={styles.contentContainer}>
|
|
79
|
+
{modalTitle ? (<react_native_1.Text {...modalTitleProps} style={styles.modalTitle}>
|
|
80
|
+
{modalTitle}
|
|
81
|
+
</react_native_1.Text>) : null}
|
|
82
|
+
<TimerPicker_1.default onDurationChange={function (duration) {
|
|
83
|
+
setSelectedDuration(duration);
|
|
84
|
+
onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange(duration);
|
|
85
|
+
}} initialHours={confirmedDuration.hours} initialMinutes={confirmedDuration.minutes} initialSeconds={confirmedDuration.seconds} hideHours={hideHours} hideMinutes={hideMinutes} hideSeconds={hideSeconds} hourLabel={hourLabel} minuteLabel={minuteLabel} secondLabel={secondLabel} padWithNItems={padWithNItems} disableInfiniteScroll={disableInfiniteScroll} LinearGradient={LinearGradient} pickerContainerProps={pickerContainerProps} pickerGradientOverlayProps={pickerGradientOverlayProps} styles={customStyles}/>
|
|
86
|
+
<react_native_1.View {...buttonContainerProps} style={styles.buttonContainer}>
|
|
87
|
+
{!hideCancelButton ? (<react_native_1.TouchableOpacity onPress={cancel}>
|
|
88
|
+
<react_native_1.Text style={[
|
|
71
89
|
styles.cancelButton,
|
|
72
90
|
styles.button,
|
|
73
91
|
]}>
|
|
74
|
-
|
|
92
|
+
{cancelButtonText}
|
|
93
|
+
</react_native_1.Text>
|
|
94
|
+
</react_native_1.TouchableOpacity>) : null}
|
|
95
|
+
<react_native_1.TouchableOpacity onPress={confirm}>
|
|
96
|
+
<react_native_1.Text style={[
|
|
97
|
+
styles.confirmButton,
|
|
98
|
+
styles.button,
|
|
99
|
+
]}>
|
|
100
|
+
{confirmButtonText}
|
|
75
101
|
</react_native_1.Text>
|
|
76
|
-
</react_native_1.TouchableOpacity>
|
|
77
|
-
|
|
78
|
-
<react_native_1.Text style={[styles.confirmButton, styles.button]}>
|
|
79
|
-
{confirmButtonText}
|
|
80
|
-
</react_native_1.Text>
|
|
81
|
-
</react_native_1.TouchableOpacity>
|
|
102
|
+
</react_native_1.TouchableOpacity>
|
|
103
|
+
</react_native_1.View>
|
|
82
104
|
</react_native_1.View>
|
|
83
105
|
</react_native_1.View>
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
};
|
|
106
|
+
</Modal_1.default>);
|
|
107
|
+
});
|
|
87
108
|
exports.default = TimerPickerModal;
|
|
@@ -2,16 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.generateNumbers = void 0;
|
|
4
4
|
var padWithZero_1 = require("./padWithZero");
|
|
5
|
-
var generateNumbers = function (
|
|
5
|
+
var generateNumbers = function (numberOfItems, options) {
|
|
6
6
|
var _a;
|
|
7
|
+
if (numberOfItems <= 0) {
|
|
8
|
+
return [];
|
|
9
|
+
}
|
|
7
10
|
var numbers = [];
|
|
8
11
|
if (options.padWithZero) {
|
|
9
|
-
for (var i = 0; i <=
|
|
12
|
+
for (var i = 0; i <= numberOfItems; i++) {
|
|
10
13
|
numbers.push((0, padWithZero_1.padWithZero)(i));
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
else {
|
|
14
|
-
for (var i = 0; i <=
|
|
17
|
+
for (var i = 0; i <= numberOfItems; i++) {
|
|
15
18
|
numbers.push(String(i));
|
|
16
19
|
}
|
|
17
20
|
}
|
package/package.json
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-timer-picker",
|
|
3
|
-
"description": "A simple, flexible, performant duration picker for Expo React Native apps
|
|
3
|
+
"description": "A simple, flexible, performant duration picker for Expo React Native apps 🔥\n\nGreat for timers, alarms and duration inputs ⏰🕰️⏳",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Tim Roberts",
|
|
6
6
|
"url": "https://github.com/troberts-28"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"version": "1.
|
|
9
|
+
"version": "1.1.2",
|
|
10
10
|
"main": "dist/index.js",
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
12
|
"scripts": {
|
|
13
|
+
"test": "jest --forceExit --silent",
|
|
13
14
|
"build": "tsc",
|
|
14
15
|
"build:dev": "tsc --noEmit",
|
|
15
16
|
"clean": "rm yarn.lock && rm -rf ./node_modules && yarn install",
|
|
16
|
-
"start": "cp -Rf src example && cd example && yarn install && npx expo start"
|
|
17
|
+
"start": "cp -Rf src example && cd example && yarn add expo && npx expo install && npx expo start",
|
|
18
|
+
"lint": "eslint --ext .ts,.tsx .",
|
|
19
|
+
"lint:fix": "eslint --ext .ts,.tsx . --fix"
|
|
17
20
|
},
|
|
18
21
|
"homepage": "https://github.com/troberts-28/react-native-timer-picker",
|
|
19
22
|
"bugs": {
|
|
@@ -28,7 +31,6 @@
|
|
|
28
31
|
"registry": "https://registry.npmjs.org/"
|
|
29
32
|
},
|
|
30
33
|
"files": [
|
|
31
|
-
"index.ts",
|
|
32
34
|
"dist",
|
|
33
35
|
"package.json",
|
|
34
36
|
"README.md",
|
|
@@ -43,16 +45,22 @@
|
|
|
43
45
|
"time",
|
|
44
46
|
"timer",
|
|
45
47
|
"alarm",
|
|
48
|
+
"modal",
|
|
46
49
|
"durationpicker",
|
|
47
50
|
"duration-picker",
|
|
51
|
+
"duration-picker-modal",
|
|
48
52
|
"react-native-duration-picker",
|
|
53
|
+
"react-native-duration-picker-modal",
|
|
49
54
|
"timepicker",
|
|
50
55
|
"time-picker",
|
|
51
56
|
"alarmpicker",
|
|
52
57
|
"alarm-picker",
|
|
53
|
-
"
|
|
58
|
+
"alarm-picker-modal",
|
|
59
|
+
"react-native-alarm-picker",
|
|
54
60
|
"timerpicker",
|
|
55
61
|
"timer-picker",
|
|
62
|
+
"timer-picker-modal",
|
|
63
|
+
"react-native-duration-picker-modal",
|
|
56
64
|
"expo-duration-picker",
|
|
57
65
|
"expo-time-picker",
|
|
58
66
|
"expo-timepicker",
|
|
@@ -65,23 +73,47 @@
|
|
|
65
73
|
"engines": {
|
|
66
74
|
"node": ">=16.0.0"
|
|
67
75
|
},
|
|
76
|
+
"jest": {
|
|
77
|
+
"preset": "react-native",
|
|
78
|
+
"moduleFileExtensions": [
|
|
79
|
+
"ts",
|
|
80
|
+
"tsx",
|
|
81
|
+
"js",
|
|
82
|
+
"jsx",
|
|
83
|
+
"json",
|
|
84
|
+
"node"
|
|
85
|
+
],
|
|
86
|
+
"testEnvironment": "node",
|
|
87
|
+
"modulePathIgnorePatterns": [
|
|
88
|
+
"<rootDir>/dist/",
|
|
89
|
+
"<rootDir>/example/"
|
|
90
|
+
],
|
|
91
|
+
"transformIgnorePatterns": []
|
|
92
|
+
},
|
|
68
93
|
"private": false,
|
|
69
94
|
"typings": "./dist/index.d.ts",
|
|
70
95
|
"peerDependencies": {
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"react": ">=18.1.0",
|
|
74
|
-
"react-native": ">=0.70.8"
|
|
96
|
+
"react": ">=16.8.0",
|
|
97
|
+
"react-native": ">=0.59.0"
|
|
75
98
|
},
|
|
76
99
|
"devDependencies": {
|
|
77
100
|
"@babel/core": ">=7.20.0",
|
|
101
|
+
"@babel/plugin-transform-class-properties": "^7.22.5",
|
|
102
|
+
"@babel/plugin-transform-flow-strip-types": "^7.22.5",
|
|
103
|
+
"@babel/plugin-transform-private-methods": "^7.22.5",
|
|
104
|
+
"@testing-library/react-native": "^12.0.0",
|
|
105
|
+
"@types/jest": "^29.0.0",
|
|
78
106
|
"@types/react": ">=18.0.27",
|
|
79
107
|
"@types/react-native": ">=0.70.6",
|
|
80
108
|
"@typescript-eslint/eslint-plugin": ">=5.49.0",
|
|
81
109
|
"@typescript-eslint/parser": ">=5.49.0",
|
|
110
|
+
"babel-jest": "^29.6.2",
|
|
82
111
|
"eslint": ">=8.44.0",
|
|
83
112
|
"eslint-plugin-react": ">=7.33.1",
|
|
84
113
|
"eslint-plugin-react-hooks": ">=4.6.0",
|
|
114
|
+
"jest": "^29.0.0",
|
|
115
|
+
"metro-react-native-babel-preset": "^0.71.1",
|
|
116
|
+
"react-test-renderer": "^18.0.0",
|
|
85
117
|
"typescript": ">=4.9.4"
|
|
86
118
|
}
|
|
87
119
|
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export interface CustomDurationPickerStyles {
|
|
2
|
-
theme?: "light" | "dark";
|
|
3
|
-
backgroundColor?: string;
|
|
4
|
-
textColor?: string;
|
|
5
|
-
pickerContainer?: any;
|
|
6
|
-
pickerLabelContainer?: any;
|
|
7
|
-
pickerLabel?: any;
|
|
8
|
-
pickerItemContainer?: any;
|
|
9
|
-
pickerItem?: any;
|
|
10
|
-
buttonContainer?: any;
|
|
11
|
-
button?: any;
|
|
12
|
-
cancelButton?: any;
|
|
13
|
-
confirmButton?: any;
|
|
14
|
-
modalTitle?: any;
|
|
15
|
-
pickerGradientOverlay?: any;
|
|
16
|
-
}
|
|
17
|
-
export declare const generateStyles: (customStyles: CustomDurationPickerStyles | undefined, options: {
|
|
18
|
-
padWithNItems: number;
|
|
19
|
-
}) => {
|
|
20
|
-
pickerContainer: any;
|
|
21
|
-
pickerLabelContainer: any;
|
|
22
|
-
pickerLabel: any;
|
|
23
|
-
pickerItemContainer: any;
|
|
24
|
-
pickerItem: any;
|
|
25
|
-
pickerGradientOverlay: any;
|
|
26
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.generateStyles = void 0;
|
|
15
|
-
var react_native_1 = require("react-native");
|
|
16
|
-
var DARK_MODE_BACKGROUND_COLOR = "#232323";
|
|
17
|
-
var DARK_MODE_TEXT_COLOR = "#E9E9E9";
|
|
18
|
-
var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
|
|
19
|
-
var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
|
|
20
|
-
var generateStyles = function (customStyles, options) {
|
|
21
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
22
|
-
return react_native_1.StyleSheet.create({
|
|
23
|
-
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"
|
|
24
|
-
? DARK_MODE_BACKGROUND_COLOR
|
|
25
|
-
: LIGHT_MODE_BACKGROUND_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerContainer),
|
|
26
|
-
pickerLabelContainer: __assign({ position: "absolute", right: 4, top: 0, bottom: 0, justifyContent: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabelContainer),
|
|
27
|
-
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: (_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"
|
|
28
|
-
? DARK_MODE_TEXT_COLOR
|
|
29
|
-
: LIGHT_MODE_TEXT_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel),
|
|
30
|
-
pickerItemContainer: __assign({ height: 50, justifyContent: "center", alignItems: "center", width: ((_f = (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 25) * 3.6 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer),
|
|
31
|
-
pickerItem: __assign({ textAlignVertical: "center", fontSize: 25, color: (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _g !== void 0 ? _g : ((customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark"
|
|
32
|
-
? DARK_MODE_TEXT_COLOR
|
|
33
|
-
: LIGHT_MODE_TEXT_COLOR) }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem),
|
|
34
|
-
pickerGradientOverlay: __assign({ position: "absolute", left: 0, right: 0, height: options.padWithNItems === 0
|
|
35
|
-
? "30%"
|
|
36
|
-
: ((_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 50) * 0.8 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay),
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
exports.generateStyles = generateStyles;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { LinearGradient } from "expo-linear-gradient";
|
|
3
|
-
import { generateStyles } from "./DurationPicker.styles";
|
|
4
|
-
interface DurationScrollProps {
|
|
5
|
-
numberOfItems: number;
|
|
6
|
-
label?: string;
|
|
7
|
-
initialIndex?: number;
|
|
8
|
-
onDurationChange: (duration: number) => void;
|
|
9
|
-
padNumbersWithZero?: boolean;
|
|
10
|
-
disableInfiniteScroll?: boolean;
|
|
11
|
-
padWithNItems: number;
|
|
12
|
-
pickerGradientOverlayProps?: React.ComponentProps<typeof LinearGradient>;
|
|
13
|
-
styles: ReturnType<typeof generateStyles>;
|
|
14
|
-
}
|
|
15
|
-
declare const DurationScroll: ({ numberOfItems, label, initialIndex, onDurationChange, padNumbersWithZero, disableInfiniteScroll, padWithNItems, pickerGradientOverlayProps, styles, }: DurationScrollProps) => React.ReactElement;
|
|
16
|
-
export default DurationScroll;
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
-
if (ar || !(i in from)) {
|
|
28
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
-
ar[i] = from[i];
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
-
};
|
|
34
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
35
|
-
var react_1 = __importStar(require("react"));
|
|
36
|
-
var react_native_1 = require("react-native");
|
|
37
|
-
var expo_linear_gradient_1 = require("expo-linear-gradient");
|
|
38
|
-
var generateNumbers_1 = require("../../utils/generateNumbers");
|
|
39
|
-
var colorToRgba_1 = require("../../utils/colorToRgba");
|
|
40
|
-
var DurationScroll = function (_a) {
|
|
41
|
-
var _b, _c, _d, _e;
|
|
42
|
-
var numberOfItems = _a.numberOfItems, label = _a.label, _f = _a.initialIndex, initialIndex = _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, padWithNItems = _a.padWithNItems, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, styles = _a.styles;
|
|
43
|
-
var flatListRef = (0, react_1.useRef)(null);
|
|
44
|
-
var data = (0, generateNumbers_1.generateNumbers)(numberOfItems, {
|
|
45
|
-
padWithZero: padNumbersWithZero,
|
|
46
|
-
repeatNTimes: 3,
|
|
47
|
-
disableInfiniteScroll: disableInfiniteScroll,
|
|
48
|
-
padWithNItems: padWithNItems,
|
|
49
|
-
});
|
|
50
|
-
var numberOfItemsToShow = 1 + padWithNItems * 2;
|
|
51
|
-
var renderItem = function (_a) {
|
|
52
|
-
var item = _a.item;
|
|
53
|
-
return (<react_native_1.View key={item} style={styles.pickerItemContainer}>
|
|
54
|
-
<react_native_1.Text style={styles.pickerItem}>{item}</react_native_1.Text>
|
|
55
|
-
</react_native_1.View>);
|
|
56
|
-
};
|
|
57
|
-
var onViewableItemsChanged = (0, react_1.useCallback)(function (_a) {
|
|
58
|
-
var _b, _c, _d, _e;
|
|
59
|
-
var viewableItems = _a.viewableItems;
|
|
60
|
-
if (((_b = viewableItems[0]) === null || _b === void 0 ? void 0 : _b.index) &&
|
|
61
|
-
viewableItems[0].index < numberOfItems * 0.5) {
|
|
62
|
-
(_c = flatListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToIndex({
|
|
63
|
-
animated: false,
|
|
64
|
-
index: viewableItems[0].index + numberOfItems,
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
else if (((_d = viewableItems[0]) === null || _d === void 0 ? void 0 : _d.index) &&
|
|
68
|
-
viewableItems[0].index >= numberOfItems * 2.5) {
|
|
69
|
-
(_e = flatListRef.current) === null || _e === void 0 ? void 0 : _e.scrollToIndex({
|
|
70
|
-
animated: false,
|
|
71
|
-
index: viewableItems[0].index - numberOfItems,
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
}, []);
|
|
75
|
-
var viewabilityConfigCallbackPairs = (0, react_1.useRef)([
|
|
76
|
-
{
|
|
77
|
-
viewabilityConfig: { viewAreaCoveragePercentThreshold: 25 },
|
|
78
|
-
onViewableItemsChanged: onViewableItemsChanged,
|
|
79
|
-
},
|
|
80
|
-
]);
|
|
81
|
-
return (<react_native_1.View style={{
|
|
82
|
-
height: styles.pickerItemContainer.height * numberOfItemsToShow,
|
|
83
|
-
overflow: "hidden",
|
|
84
|
-
}}>
|
|
85
|
-
<react_native_1.FlatList ref={flatListRef} data={data} getItemLayout={function (_, index) { return ({
|
|
86
|
-
length: styles.pickerItemContainer.height,
|
|
87
|
-
offset: styles.pickerItemContainer.height * index,
|
|
88
|
-
index: index,
|
|
89
|
-
}); }} initialScrollIndex={(initialIndex % numberOfItems) +
|
|
90
|
-
numberOfItems +
|
|
91
|
-
(disableInfiniteScroll ? padWithNItems : 0) -
|
|
92
|
-
(padWithNItems - 1)} windowSize={numberOfItemsToShow} renderItem={renderItem} keyExtractor={function (_, index) { return index.toString(); }} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={10} snapToAlignment="start"
|
|
93
|
-
// used in place of snapToOffset due to bug on Android
|
|
94
|
-
snapToOffsets={__spreadArray([], Array(data.length), true).map(function (_, i) { return i * styles.pickerItemContainer.height; })} viewabilityConfigCallbackPairs={!disableInfiniteScroll
|
|
95
|
-
? viewabilityConfigCallbackPairs === null || viewabilityConfigCallbackPairs === void 0 ? void 0 : viewabilityConfigCallbackPairs.current
|
|
96
|
-
: undefined} onMomentumScrollEnd={function (e) {
|
|
97
|
-
var newIndex = Math.round(e.nativeEvent.contentOffset.y /
|
|
98
|
-
styles.pickerItemContainer.height);
|
|
99
|
-
onDurationChange((disableInfiniteScroll ? newIndex : newIndex) %
|
|
100
|
-
(numberOfItems + 1));
|
|
101
|
-
}}/>
|
|
102
|
-
<react_native_1.View style={styles.pickerLabelContainer}>
|
|
103
|
-
<react_native_1.Text style={styles.pickerLabel}>{label}</react_native_1.Text>
|
|
104
|
-
</react_native_1.View>
|
|
105
|
-
<expo_linear_gradient_1.LinearGradient colors={[
|
|
106
|
-
(_b = styles.pickerContainer.backgroundColor) !== null && _b !== void 0 ? _b : "white",
|
|
107
|
-
(0, colorToRgba_1.colorToRgba)({
|
|
108
|
-
color: (_c = styles.pickerContainer.backgroundColor) !== null && _c !== void 0 ? _c : "white",
|
|
109
|
-
opacity: 0,
|
|
110
|
-
}),
|
|
111
|
-
]} start={{ x: 1, y: 0.3 }} end={{ x: 1, y: 1 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { top: 0 }]}/>
|
|
112
|
-
<expo_linear_gradient_1.LinearGradient colors={[
|
|
113
|
-
(0, colorToRgba_1.colorToRgba)({
|
|
114
|
-
color: (_d = styles.pickerContainer.backgroundColor) !== null && _d !== void 0 ? _d : "white",
|
|
115
|
-
opacity: 0,
|
|
116
|
-
}),
|
|
117
|
-
(_e = styles.pickerContainer.backgroundColor) !== null && _e !== void 0 ? _e : "white",
|
|
118
|
-
]} start={{ x: 1, y: 0 }} end={{ x: 1, y: 0.7 }} {...pickerGradientOverlayProps} style={[styles.pickerGradientOverlay, { bottom: -1 }]}/>
|
|
119
|
-
</react_native_1.View>);
|
|
120
|
-
};
|
|
121
|
-
exports.default = DurationScroll;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
3
|
-
import { LinearGradient } from "expo-linear-gradient";
|
|
4
|
-
import { CustomDurationPickerStyles } from "./DurationPicker.styles";
|
|
5
|
-
export interface DurationPickerProps {
|
|
6
|
-
onDurationChange?: (duration: {
|
|
7
|
-
hours: number;
|
|
8
|
-
minutes: number;
|
|
9
|
-
seconds: number;
|
|
10
|
-
}) => void;
|
|
11
|
-
initialHours?: number;
|
|
12
|
-
initialMinutes?: number;
|
|
13
|
-
initialSeconds?: number;
|
|
14
|
-
hideHours?: boolean;
|
|
15
|
-
hideMinutes?: boolean;
|
|
16
|
-
hideSeconds?: boolean;
|
|
17
|
-
hourLabel?: string;
|
|
18
|
-
minuteLabel?: string;
|
|
19
|
-
secondLabel?: string;
|
|
20
|
-
padWithNItems?: number;
|
|
21
|
-
disableInfiniteScroll?: boolean;
|
|
22
|
-
pickerContainerProps?: React.ComponentProps<typeof View>;
|
|
23
|
-
pickerGradientOverlayProps?: React.ComponentProps<typeof LinearGradient>;
|
|
24
|
-
styles?: CustomDurationPickerStyles;
|
|
25
|
-
}
|
|
26
|
-
declare const DurationPicker: ({ onDurationChange, initialHours, initialMinutes, initialSeconds, hideHours, hideMinutes, hideSeconds, hourLabel, minuteLabel, secondLabel, padWithNItems, disableInfiniteScroll, pickerContainerProps, pickerGradientOverlayProps, styles: customStyles, }: DurationPickerProps) => React.ReactElement;
|
|
27
|
-
export default DurationPicker;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
var react_1 = __importStar(require("react"));
|
|
30
|
-
var react_native_1 = require("react-native");
|
|
31
|
-
var DurationScroll_1 = __importDefault(require("./DurationScroll"));
|
|
32
|
-
var DurationPicker_styles_1 = require("./DurationPicker.styles");
|
|
33
|
-
var DurationPicker = function (_a) {
|
|
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, _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, pickerContainerProps = _a.pickerContainerProps, pickerGradientOverlayProps = _a.pickerGradientOverlayProps, customStyles = _a.styles;
|
|
35
|
-
var checkedPadWithNItems = padWithNItems >= 0 ? Math.round(padWithNItems) : 0;
|
|
36
|
-
var styles = (0, DurationPicker_styles_1.generateStyles)(customStyles, {
|
|
37
|
-
padWithNItems: checkedPadWithNItems,
|
|
38
|
-
});
|
|
39
|
-
var _o = (0, react_1.useState)(initialHours), selectedHours = _o[0], setSelectedHours = _o[1];
|
|
40
|
-
var _p = (0, react_1.useState)(initialMinutes), selectedMinutes = _p[0], setSelectedMinutes = _p[1];
|
|
41
|
-
var _q = (0, react_1.useState)(initialSeconds), selectedSeconds = _q[0], setSelectedSeconds = _q[1];
|
|
42
|
-
(0, react_1.useEffect)(function () {
|
|
43
|
-
onDurationChange === null || onDurationChange === void 0 ? void 0 : onDurationChange({
|
|
44
|
-
hours: selectedHours,
|
|
45
|
-
minutes: selectedMinutes,
|
|
46
|
-
seconds: selectedSeconds,
|
|
47
|
-
});
|
|
48
|
-
}, [selectedHours, selectedMinutes, selectedSeconds]);
|
|
49
|
-
return (<react_native_1.View {...pickerContainerProps} style={styles.pickerContainer}>
|
|
50
|
-
{!hideHours ? (<DurationScroll_1.default numberOfItems={23} label={hourLabel} initialIndex={initialHours} onDurationChange={setSelectedHours} pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
51
|
-
{!hideMinutes ? (<DurationScroll_1.default numberOfItems={59} label={minuteLabel} initialIndex={initialMinutes} onDurationChange={setSelectedMinutes} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
52
|
-
{!hideSeconds ? (<DurationScroll_1.default numberOfItems={59} label={secondLabel} initialIndex={initialSeconds} onDurationChange={setSelectedSeconds} padNumbersWithZero pickerGradientOverlayProps={pickerGradientOverlayProps} disableInfiniteScroll={disableInfiniteScroll} padWithNItems={checkedPadWithNItems} styles={styles}/>) : null}
|
|
53
|
-
</react_native_1.View>);
|
|
54
|
-
};
|
|
55
|
-
exports.default = DurationPicker;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { CustomDurationPickerStyles } from "./DurationPicker/DurationPicker.styles";
|
|
2
|
-
export interface CustomDurationPickerModalStyles extends CustomDurationPickerStyles {
|
|
3
|
-
container?: any;
|
|
4
|
-
contentContainer?: any;
|
|
5
|
-
pickerContainer?: any;
|
|
6
|
-
pickerLabel?: any;
|
|
7
|
-
pickerItemContainer?: any;
|
|
8
|
-
pickerItem?: any;
|
|
9
|
-
buttonContainer?: any;
|
|
10
|
-
button?: any;
|
|
11
|
-
cancelButton?: any;
|
|
12
|
-
confirmButton?: any;
|
|
13
|
-
modalTitle?: any;
|
|
14
|
-
}
|
|
15
|
-
export declare const generateStyles: (customStyles: CustomDurationPickerModalStyles | undefined) => {
|
|
16
|
-
container: any;
|
|
17
|
-
contentContainer: any;
|
|
18
|
-
buttonContainer: any;
|
|
19
|
-
button: any;
|
|
20
|
-
cancelButton: any;
|
|
21
|
-
confirmButton: any;
|
|
22
|
-
modalTitle: any;
|
|
23
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.generateStyles = void 0;
|
|
15
|
-
var react_native_1 = require("react-native");
|
|
16
|
-
var DARK_MODE_BACKGROUND_COLOR = "#232323";
|
|
17
|
-
var DARK_MODE_TEXT_COLOR = "#E9E9E9";
|
|
18
|
-
var LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
|
|
19
|
-
var LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
|
|
20
|
-
var generateStyles = function (customStyles) {
|
|
21
|
-
var _a, _b, _c, _d;
|
|
22
|
-
return react_native_1.StyleSheet.create({
|
|
23
|
-
container: __assign({ flex: 1, justifyContent: "center", alignItems: "center" }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
|
|
24
|
-
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")
|
|
25
|
-
? DARK_MODE_BACKGROUND_COLOR
|
|
26
|
-
: LIGHT_MODE_BACKGROUND_COLOR, justifyContent: "center", alignItems: "center", borderRadius: 20, padding: 20 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.contentContainer),
|
|
27
|
-
buttonContainer: __assign({ flexDirection: "row", marginTop: 25 }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.buttonContainer),
|
|
28
|
-
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),
|
|
29
|
-
cancelButton: __assign({ borderColor: "gray", color: ((_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.textColor) !== null && _b !== void 0 ? _b : (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark")
|
|
30
|
-
? DARK_MODE_TEXT_COLOR
|
|
31
|
-
: "gray", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "gray" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.cancelButton),
|
|
32
|
-
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")
|
|
33
|
-
? DARK_MODE_TEXT_COLOR
|
|
34
|
-
: "green", backgroundColor: (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? "green" : undefined }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.confirmButton),
|
|
35
|
-
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")
|
|
36
|
-
? DARK_MODE_TEXT_COLOR
|
|
37
|
-
: LIGHT_MODE_TEXT_COLOR }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.modalTitle),
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
exports.generateStyles = generateStyles;
|