react-native-paper-dates 0.11.0 → 0.11.1
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/LICENSE +1 -1
- package/README.md +8 -442
- package/lib/commonjs/Date/DatePickerModalContent.js +3 -3
- package/lib/commonjs/Date/DatePickerModalContent.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModalHeader.js +2 -2
- package/lib/commonjs/Date/DatePickerModalHeader.js.map +1 -1
- package/lib/commonjs/Date/inputUtils.js +4 -4
- package/lib/commonjs/Date/inputUtils.js.map +1 -1
- package/lib/commonjs/translations/ar.js.map +1 -1
- package/lib/commonjs/translations/de.js.map +1 -1
- package/lib/commonjs/translations/es.js +25 -0
- package/lib/commonjs/translations/es.js.map +1 -0
- package/lib/commonjs/translations/fr.js +1 -1
- package/lib/commonjs/translations/fr.js.map +1 -1
- package/lib/module/Date/DatePickerModalContent.js +3 -3
- package/lib/module/Date/DatePickerModalContent.js.map +1 -1
- package/lib/module/Date/DatePickerModalHeader.js +2 -2
- package/lib/module/Date/DatePickerModalHeader.js.map +1 -1
- package/lib/module/Date/inputUtils.js +1 -1
- package/lib/module/Date/inputUtils.js.map +1 -1
- package/lib/module/translations/ar.js.map +1 -1
- package/lib/module/translations/de.js.map +1 -1
- package/lib/module/translations/es.js +18 -0
- package/lib/module/translations/es.js.map +1 -0
- package/lib/module/translations/fr.js +1 -1
- package/lib/module/translations/fr.js.map +1 -1
- package/lib/typescript/Date/DatePickerModalContent.d.ts +1 -0
- package/lib/typescript/translations/es.d.ts +3 -0
- package/package.json +17 -8
- package/src/Date/DatePickerModalContent.tsx +4 -3
- package/src/Date/DatePickerModalHeader.tsx +2 -2
- package/src/Date/inputUtils.ts +2 -2
- package/src/translations/ar.ts +1 -1
- package/src/translations/de.ts +1 -0
- package/src/translations/es.ts +21 -0
- package/src/translations/fr.ts +16 -18
- package/lib/commonjs/Date/dateUtils.test.js +0 -9
- package/lib/commonjs/Date/dateUtils.test.js.map +0 -1
- package/lib/module/Date/dateUtils.test.js +0 -6
- package/lib/module/Date/dateUtils.test.js.map +0 -1
- package/lib/typescript/Date/dateUtils.test.d.ts +0 -1
- package/src/Date/dateUtils.test.ts +0 -9
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
<img align="left" width="56" height="56" src="https://user-images.githubusercontent.com/6492229/98982291-70b42480-251f-11eb-8d67-4b0b1b6e917b.png"> react-native-paper-dates
|
|
3
3
|
---
|
|
4
|
+
|
|
4
5
|
<br>
|
|
5
6
|
|
|
6
7
|
<p float="left">
|
|
@@ -24,457 +25,22 @@
|
|
|
24
25
|
|
|
25
26
|
[](https://www.youtube.com/watch?v=SHhQU2doTug)
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
## Documentation
|
|
29
|
+
|
|
30
|
+
Check out the official docs: [web-ridge.github.io/react-native-paper-dates](https://web-ridge.github.io/react-native-paper-dates/)
|
|
31
|
+
|
|
32
|
+
## Demo
|
|
28
33
|
|
|
29
|
-
|
|
34
|
+
[reactnativepaperdates.com](https://www.reactnativepaperdates.com/)
|
|
30
35
|
|
|
31
36
|
## About us
|
|
37
|
+
|
|
32
38
|
We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.
|
|
33
39
|
|
|
34
40
|
Give us a follow on Twitter:
|
|
35
41
|
[RichardLindhout](https://twitter.com/RichardLindhout),
|
|
36
42
|
[web_ridge](https://twitter.com/web_ridge)
|
|
37
43
|
|
|
38
|
-
## Donate
|
|
39
|
-
Please contribute or donate so we can spend more time on this library
|
|
40
|
-
|
|
41
|
-
[Donate with PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7B9KKQLXTEW9Q&source=url)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Getting started
|
|
45
|
-
First install and follow the guides at [react-native-paper](https://callstack.github.io/react-native-paper/)
|
|
46
|
-
|
|
47
|
-
Yarn
|
|
48
|
-
```
|
|
49
|
-
yarn add react-native-paper-dates
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
npm
|
|
53
|
-
```
|
|
54
|
-
npm install react-native-paper-dates --save
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
## Import some localized strings
|
|
59
|
-
Ideally you do this somewhere in your `index.js` before `react-native-paper-dates` is used.
|
|
60
|
-
Currently we have en/nl/de/pl/pt/ar/ko/fr/it translations but it's really easy to add one extra since it are only some labels and error messages.
|
|
61
|
-
|
|
62
|
-
```tsx
|
|
63
|
-
// e.g in your index.js
|
|
64
|
-
import {
|
|
65
|
-
// en,
|
|
66
|
-
// nl,
|
|
67
|
-
// de,
|
|
68
|
-
// pl,
|
|
69
|
-
// pt,
|
|
70
|
-
// ar,
|
|
71
|
-
// ko
|
|
72
|
-
// fr
|
|
73
|
-
// it,
|
|
74
|
-
enGB,
|
|
75
|
-
registerTranslation,
|
|
76
|
-
} from 'react-native-paper-dates'
|
|
77
|
-
// registerTranslation('en', en)
|
|
78
|
-
// registerTranslation('nl', nl)
|
|
79
|
-
// registerTranslation('fr', fr)
|
|
80
|
-
// registerTranslation('pl', pl)
|
|
81
|
-
// registerTranslation('pt', pt)
|
|
82
|
-
// registerTranslation('de', de)
|
|
83
|
-
// registerTranslation('ar', ar)
|
|
84
|
-
// registerTranslation('ko', ko)
|
|
85
|
-
// registerTranslation('fr', fr)
|
|
86
|
-
// registerTranslation('it', it)
|
|
87
|
-
registerTranslation('en-GB', enGB)
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### or register your own
|
|
91
|
-
Please send a PR with your language to make sure all locales are there next time
|
|
92
|
-
```tsx
|
|
93
|
-
import {
|
|
94
|
-
registerTranslation,
|
|
95
|
-
} from 'react-native-paper-dates'
|
|
96
|
-
registerTranslation("pl", {
|
|
97
|
-
save: 'Save',
|
|
98
|
-
selectSingle: 'Select date',
|
|
99
|
-
selectMultiple: 'Select dates',
|
|
100
|
-
selectRange: 'Select period',
|
|
101
|
-
notAccordingToDateFormat: (inputFormat) =>
|
|
102
|
-
`Date format must be ${inputFormat}`,
|
|
103
|
-
mustBeHigherThan: (date) => `Must be later then ${date}`,
|
|
104
|
-
mustBeLowerThan: (date) => `Must be earlier then ${date}`,
|
|
105
|
-
mustBeBetween: (startDate, endDate) =>
|
|
106
|
-
`Must be between ${startDate} - ${endDate}`,
|
|
107
|
-
dateIsDisabled: 'Day is not allowed',
|
|
108
|
-
previous: 'Previous',
|
|
109
|
-
next: 'Next',
|
|
110
|
-
typeInDate: 'Type in date',
|
|
111
|
-
pickDateFromCalendar: 'Pick date from calendar',
|
|
112
|
-
close: 'Close',
|
|
113
|
-
})
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## Usage
|
|
117
|
-
|
|
118
|
-
### Single date Picker (modal)
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
import * as React from 'react';
|
|
122
|
-
import { Button } from 'react-native-paper';
|
|
123
|
-
import { DatePickerModal } from 'react-native-paper-dates';
|
|
124
|
-
|
|
125
|
-
export default function ReadMeExampleSingle() {
|
|
126
|
-
const [date, setDate] = React.useState<Date | undefined>(undefined);
|
|
127
|
-
const [open, setOpen] = React.useState(false);
|
|
128
|
-
|
|
129
|
-
const onDismissSingle = React.useCallback(() => {
|
|
130
|
-
setOpen(false);
|
|
131
|
-
}, [setOpen]);
|
|
132
|
-
|
|
133
|
-
const onConfirmSingle = React.useCallback(
|
|
134
|
-
(params) => {
|
|
135
|
-
setOpen(false);
|
|
136
|
-
setDate(params.date);
|
|
137
|
-
},
|
|
138
|
-
[setOpen, setDate]
|
|
139
|
-
);
|
|
140
|
-
|
|
141
|
-
return (
|
|
142
|
-
<>
|
|
143
|
-
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
|
|
144
|
-
Pick single date
|
|
145
|
-
</Button>
|
|
146
|
-
<DatePickerModal
|
|
147
|
-
locale="en"
|
|
148
|
-
mode="single"
|
|
149
|
-
visible={open}
|
|
150
|
-
onDismiss={onDismissSingle}
|
|
151
|
-
date={date}
|
|
152
|
-
onConfirm={onConfirmSingle}
|
|
153
|
-
// validRange={{
|
|
154
|
-
// startDate: new Date(2021, 1, 2), // optional
|
|
155
|
-
// endDate: new Date(), // optional
|
|
156
|
-
// disabledDates: [new Date()] // optional
|
|
157
|
-
// }}
|
|
158
|
-
// onChange={} // same props as onConfirm but triggered without confirmed by user
|
|
159
|
-
// saveLabel="Save" // optional
|
|
160
|
-
// saveLabelDisabled={true} // optional, default is false
|
|
161
|
-
// uppercase={false} // optional, default is true
|
|
162
|
-
// label="Select date" // optional
|
|
163
|
-
// animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
|
|
164
|
-
// startYear={2000} // optional, default is 1800
|
|
165
|
-
// endYear={2100} // optional, default is 2200
|
|
166
|
-
// closeIcon="close" // optional, default is "close"
|
|
167
|
-
// editIcon="pencil" // optional, default is "pencil"
|
|
168
|
-
// calendarIcon="calendar" // optional, default is "calendar"
|
|
169
|
-
/>
|
|
170
|
-
</>
|
|
171
|
-
);
|
|
172
|
-
}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Range picker (modal)
|
|
176
|
-
```tsx
|
|
177
|
-
import * as React from 'react';
|
|
178
|
-
import { Button } from 'react-native-paper';
|
|
179
|
-
|
|
180
|
-
import { DatePickerModal } from 'react-native-paper-dates';
|
|
181
|
-
|
|
182
|
-
export default function ReadMeExampleRange() {
|
|
183
|
-
const [range, setRange] = React.useState<{
|
|
184
|
-
startDate: Date | undefined;
|
|
185
|
-
endDate: Date | undefined;
|
|
186
|
-
}>({ startDate: undefined, endDate: undefined });
|
|
187
|
-
|
|
188
|
-
const [open, setOpen] = React.useState(false);
|
|
189
|
-
|
|
190
|
-
const onDismiss = React.useCallback(() => {
|
|
191
|
-
setOpen(false);
|
|
192
|
-
}, [setOpen]);
|
|
193
|
-
|
|
194
|
-
const onConfirm = React.useCallback(
|
|
195
|
-
({ startDate, endDate }) => {
|
|
196
|
-
setOpen(false);
|
|
197
|
-
setRange({ startDate, endDate });
|
|
198
|
-
},
|
|
199
|
-
[setOpen, setRange]
|
|
200
|
-
);
|
|
201
|
-
|
|
202
|
-
return (
|
|
203
|
-
<>
|
|
204
|
-
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
|
|
205
|
-
Pick range
|
|
206
|
-
</Button>
|
|
207
|
-
<DatePickerModal
|
|
208
|
-
locale="en"
|
|
209
|
-
mode="range"
|
|
210
|
-
visible={open}
|
|
211
|
-
onDismiss={onDismiss}
|
|
212
|
-
startDate={range.startDate}
|
|
213
|
-
endDate={range.endDate}
|
|
214
|
-
onConfirm={onConfirm}
|
|
215
|
-
// validRange={{
|
|
216
|
-
// startDate: new Date(2021, 1, 2), // optional
|
|
217
|
-
// endDate: new Date(), // optional
|
|
218
|
-
// disabledDates: [new Date()] // optional
|
|
219
|
-
// }}
|
|
220
|
-
// onChange={} // same props as onConfirm but triggered without confirmed by user
|
|
221
|
-
// saveLabel="Save" // optional
|
|
222
|
-
// saveLabelDisabled={true} // optional, default is false
|
|
223
|
-
// uppercase={false} // optional, default is true
|
|
224
|
-
// label="Select period" // optional
|
|
225
|
-
// startLabel="From" // optional
|
|
226
|
-
// endLabel="To" // optional
|
|
227
|
-
// animationType="slide" // optional, default is slide on ios/android and none on web
|
|
228
|
-
// startYear={2000} // optional, default is 1800
|
|
229
|
-
// endYear={2100} // optional, default is 2200
|
|
230
|
-
// closeIcon="close" // optional, default is "close"
|
|
231
|
-
// editIcon="pencil" // optional, default is "pencil"
|
|
232
|
-
// calendarIcon="calendar" // optional, default is "calendar"
|
|
233
|
-
/>
|
|
234
|
-
</>
|
|
235
|
-
);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
### Multiple dates picker
|
|
242
|
-
```tsx
|
|
243
|
-
import * as React from 'react';
|
|
244
|
-
import { Button } from 'react-native-paper';
|
|
245
|
-
|
|
246
|
-
import { DatePickerModal } from 'react-native-paper-dates';
|
|
247
|
-
|
|
248
|
-
export default function ReadMeExampleMultiple() {
|
|
249
|
-
const [dates, setDates] = React.useState<Date[] | undefined>();
|
|
250
|
-
const [open, setOpen] = React.useState(false);
|
|
251
|
-
|
|
252
|
-
const onDismiss = React.useCallback(() => {
|
|
253
|
-
setOpen(false);
|
|
254
|
-
}, [setOpen]);
|
|
255
|
-
|
|
256
|
-
const onConfirm = React.useCallback((params) => {
|
|
257
|
-
setOpen(false);
|
|
258
|
-
setDates(params.dates);
|
|
259
|
-
console.log('[on-change-multi]', params);
|
|
260
|
-
}, []);
|
|
261
|
-
|
|
262
|
-
return (
|
|
263
|
-
<>
|
|
264
|
-
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
|
|
265
|
-
Pick multiple dates
|
|
266
|
-
</Button>
|
|
267
|
-
|
|
268
|
-
<DatePickerModal
|
|
269
|
-
locale="en"
|
|
270
|
-
mode="multiple"
|
|
271
|
-
visible={open}
|
|
272
|
-
onDismiss={onDismiss}
|
|
273
|
-
dates={dates}
|
|
274
|
-
onConfirm={onConfirm}
|
|
275
|
-
// moreLabel="More"
|
|
276
|
-
// validRange={{
|
|
277
|
-
// startDate: new Date(2021, 1, 2), // optional
|
|
278
|
-
// endDate: new Date(), // optional
|
|
279
|
-
// disabledDates: [new Date()] // optional
|
|
280
|
-
// }}
|
|
281
|
-
// saveLabel="Save" // optional
|
|
282
|
-
// uppercase={false} // optional, default is true
|
|
283
|
-
// label="Select period" // optional
|
|
284
|
-
// startLabel="From" // optional
|
|
285
|
-
// saveLabelDisabled={true} // optional, default is false
|
|
286
|
-
// endLabel="To" // optional
|
|
287
|
-
// animationType="slide" // optional, default is slide on ios/android and none on web
|
|
288
|
-
// startYear={2000} // optional, default is 1800
|
|
289
|
-
// endYear={2100} // optional, default is 2200
|
|
290
|
-
// closeIcon="close" // optional, default is "close"
|
|
291
|
-
/>
|
|
292
|
-
</>
|
|
293
|
-
);
|
|
294
|
-
}
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
### Input date with modal button
|
|
298
|
-
```tsx
|
|
299
|
-
export default function ReadMeExampleDatePickerInput() {
|
|
300
|
-
const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
|
|
301
|
-
|
|
302
|
-
return (
|
|
303
|
-
<>
|
|
304
|
-
<DatePickerInput
|
|
305
|
-
locale="en"
|
|
306
|
-
label="Birthdate"
|
|
307
|
-
value={inputDate}
|
|
308
|
-
onChange={(d) => setInputDate(d)}
|
|
309
|
-
inputMode="start"
|
|
310
|
-
// mode="outlined" (see react-native-paper docs)
|
|
311
|
-
// calendarIcon="calendar" // optional, default is "calendar"
|
|
312
|
-
// other react native TextInput props
|
|
313
|
-
/>
|
|
314
|
-
</>
|
|
315
|
-
)
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
### Time picker
|
|
321
|
-
```tsx
|
|
322
|
-
import * as React from 'react'
|
|
323
|
-
import { Button } from 'react-native-paper'
|
|
324
|
-
import { TimePickerModal } from 'react-native-paper-dates'
|
|
325
|
-
|
|
326
|
-
export default function TimePickerPage() {
|
|
327
|
-
const [visible, setVisible] = React.useState(false)
|
|
328
|
-
const onDismiss = React.useCallback(() => {
|
|
329
|
-
setVisible(false)
|
|
330
|
-
}, [setVisible])
|
|
331
|
-
|
|
332
|
-
const onConfirm = React.useCallback(
|
|
333
|
-
({ hours, minutes }) => {
|
|
334
|
-
setVisible(false);
|
|
335
|
-
console.log({ hours, minutes });
|
|
336
|
-
},
|
|
337
|
-
[setVisible]
|
|
338
|
-
);
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
return (
|
|
342
|
-
<>
|
|
343
|
-
<TimePickerModal
|
|
344
|
-
visible={visible}
|
|
345
|
-
onDismiss={onDismiss}
|
|
346
|
-
onConfirm={onConfirm}
|
|
347
|
-
hours={12} // default: current hours
|
|
348
|
-
minutes={14} // default: current minutes
|
|
349
|
-
label="Select time" // optional, default 'Select time'
|
|
350
|
-
uppercase={false} // optional, default is true
|
|
351
|
-
cancelLabel="Cancel" // optional, default: 'Cancel'
|
|
352
|
-
confirmLabel="Ok" // optional, default: 'Ok'
|
|
353
|
-
animationType="fade" // optional, default is 'none'
|
|
354
|
-
locale="en" // optional, default is automically detected by your system
|
|
355
|
-
// keyboardIcon="keyboard-outline" // optional, default is "keyboard-outline"
|
|
356
|
-
// clockIcon="clock-outline" // optional, default is "clock-outline"
|
|
357
|
-
/>
|
|
358
|
-
<Button onPress={()=> setVisible(true)}>
|
|
359
|
-
Pick time
|
|
360
|
-
</Button>
|
|
361
|
-
</>
|
|
362
|
-
)
|
|
363
|
-
}
|
|
364
|
-
```
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
## Roadmap
|
|
372
|
-
Things on our roadmap have labels with `enhancement`.
|
|
373
|
-
https://github.com/web-ridge/react-native-paper-dates/issues
|
|
374
|
-
|
|
375
|
-
## Tips & Tricks
|
|
376
|
-
- Use 0.14+ version of React-Native-Web (Modal and better number input)
|
|
377
|
-
- Try to avoid putting the Picker Modals inside of a scrollView
|
|
378
|
-
If that is **not possible** use the following props on the surrounding ScrollViews/Flatlists
|
|
379
|
-
|
|
380
|
-
```javascript
|
|
381
|
-
keyboardDismissMode="on-drag"
|
|
382
|
-
keyboardShouldPersistTaps="handled"
|
|
383
|
-
contentInsetAdjustmentBehavior="always"
|
|
384
|
-
```
|
|
385
|
-
This is to prevent the need to press 2 times before save or close button in modal works (1 press for closing keyboard, 1 press for confirm/close)
|
|
386
|
-
[React Native Issue: #10138](https://github.com/facebook/react-native/issues/10138)
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
## Android Caveats
|
|
391
|
-
We recommend Hermes with React Native >= 0.66 **you won't need these polyfills at all!**
|
|
392
|
-
|
|
393
|
-
### Below React Native 0.66
|
|
394
|
-
You will need to add a polyfill for the Intl API on Android if:
|
|
395
|
-
|
|
396
|
-
- You have [Hermes](https://github.com/facebook/hermes/issues/23) enabled and are below React Native 0.66
|
|
397
|
-
- You have [Hermes](https://github.com/facebook/hermes/issues/23) disabled and you want to support locales outside of en-US and you don't have the org.webkit:android-jsc-intl:+ variant enabled in your app/build.gradle
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
Install polyfills with Yarn
|
|
401
|
-
|
|
402
|
-
```
|
|
403
|
-
yarn add react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat
|
|
404
|
-
```
|
|
405
|
-
|
|
406
|
-
or npm
|
|
407
|
-
|
|
408
|
-
```
|
|
409
|
-
npm install react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat --save
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
If using Expo, omit `react-native-localize` and use `expo install expo-localization` instead. Read more [here](https://docs.expo.dev/versions/latest/sdk/localization/#installation).
|
|
413
|
-
|
|
414
|
-
In your app starting entrypoint e.g. `./index.js` or even better use a `index.android.js` to prevent importing on iOS/web put the following code. (don't forget to import the languages you want to support, in the example only english language is supported)
|
|
415
|
-
|
|
416
|
-
```javascript
|
|
417
|
-
// on top of your index.android.js file
|
|
418
|
-
const isAndroid = require('react-native').Platform.OS === 'android'; // this line is only needed if you don't use an .android.js file
|
|
419
|
-
const isHermesEnabled = !!global.HermesInternal; // this line is only needed if you don't use an .android.js file
|
|
420
|
-
|
|
421
|
-
// in your index.js file
|
|
422
|
-
if (isHermesEnabled || isAndroid) { // this line is only needed if you don't use an .android.js file
|
|
423
|
-
|
|
424
|
-
require('@formatjs/intl-getcanonicallocales/polyfill');
|
|
425
|
-
require('@formatjs/intl-locale/polyfill');
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
require('@formatjs/intl-pluralrules/polyfill');
|
|
429
|
-
require('@formatjs/intl-pluralrules/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
430
|
-
|
|
431
|
-
require('@formatjs/intl-displaynames/polyfill');
|
|
432
|
-
require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
433
|
-
|
|
434
|
-
require('@formatjs/intl-listformat/polyfill');
|
|
435
|
-
require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
436
|
-
|
|
437
|
-
require('@formatjs/intl-numberformat/polyfill');
|
|
438
|
-
require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
439
|
-
|
|
440
|
-
require('@formatjs/intl-relativetimeformat/polyfill');
|
|
441
|
-
require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
442
|
-
|
|
443
|
-
require('@formatjs/intl-datetimeformat/polyfill');
|
|
444
|
-
require('@formatjs/intl-datetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
|
|
445
|
-
|
|
446
|
-
require('@formatjs/intl-datetimeformat/add-golden-tz.js');
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
// https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone
|
|
451
|
-
|
|
452
|
-
if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
|
|
453
|
-
|
|
454
|
-
// If you are using react-native-cli
|
|
455
|
-
let RNLocalize = require('react-native-localize');
|
|
456
|
-
Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());
|
|
457
|
-
|
|
458
|
-
// Are you using Expo, use this instead of previous 2 lines
|
|
459
|
-
// Intl.DateTimeFormat.__setDefaultTimeZone(
|
|
460
|
-
// require("expo-localization").timezone
|
|
461
|
-
// );
|
|
462
|
-
}
|
|
463
|
-
} // this line is only needed if you don't use an .android.js file
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
## Contributing
|
|
467
|
-
|
|
468
|
-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
469
|
-
|
|
470
44
|
## License
|
|
471
45
|
|
|
472
46
|
MIT
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
### Checkout our other libraries
|
|
476
|
-
- Simple form library for React Native with great UX for developer and end-user [react-native-use-form](https://github.com/web-ridge/react-native-use-form)
|
|
477
|
-
- Smooth and fast cross platform Material Design Tabs for React Native Paper: [react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
|
|
478
|
-
- Simple translations in React (Native): [react-ridge-translations](https://github.com/web-ridge/react-ridge-translations)
|
|
479
|
-
- Simple global state management in React (Native): [react-ridge-state](https://github.com/web-ridge/react-ridge-state)
|
|
480
|
-
- 1 command utility for React Native (Web) project: [create-react-native-web-application](https://github.com/web-ridge/create-react-native-web-application)
|
|
@@ -91,8 +91,8 @@ function DatePickerModalContent(props) {
|
|
|
91
91
|
onSave: onInnerConfirm,
|
|
92
92
|
onDismiss: onDismiss,
|
|
93
93
|
saveLabel: props.saveLabel,
|
|
94
|
-
saveLabelDisabled: props.saveLabelDisabled
|
|
95
|
-
uppercase: props.uppercase
|
|
94
|
+
saveLabelDisabled: props.saveLabelDisabled ?? false,
|
|
95
|
+
uppercase: props.uppercase ?? true,
|
|
96
96
|
disableSafeTop: disableSafeTop,
|
|
97
97
|
closeIcon: props.closeIcon
|
|
98
98
|
}), /*#__PURE__*/React.createElement(_DatePickerModalContentHeader.default, {
|
|
@@ -106,7 +106,7 @@ function DatePickerModalContent(props) {
|
|
|
106
106
|
moreLabel: props.moreLabel,
|
|
107
107
|
startLabel: props.startLabel,
|
|
108
108
|
endLabel: props.endLabel,
|
|
109
|
-
uppercase: props.uppercase
|
|
109
|
+
uppercase: props.uppercase ?? true,
|
|
110
110
|
locale: locale,
|
|
111
111
|
editIcon: props.editIcon,
|
|
112
112
|
calendarIcon: props.calendarIcon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DatePickerModalContent","props","mode","onChange","onConfirm","onDismiss","disableSafeTop","disableWeekDays","locale","validRange","dateMode","startYear","endYear","anyProps","state","setState","React","useState","date","startDate","endDate","dates","useEffect","collapsed","setCollapsed","onInnerChange","useCallback","params","prev","onInnerConfirm","onToggleCollapse","saveLabel","saveLabelDisabled","uppercase","closeIcon","headerSeparator","emptyLabel","label","moreLabel","startLabel","endLabel","editIcon","calendarIcon","memo"],"sources":["DatePickerModalContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport Calendar, {\n BaseCalendarProps,\n CalendarDate,\n CalendarDates,\n MultiChange,\n MultiConfirm,\n RangeChange,\n SingleChange,\n} from './Calendar'\n\nimport AnimatedCrossView from './AnimatedCrossView'\n\nimport DatePickerModalHeader from './DatePickerModalHeader'\nimport DatePickerModalContentHeader, {\n HeaderPickProps,\n} from './DatePickerModalContentHeader'\nimport CalendarEdit from './CalendarEdit'\nimport DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'\n\nexport type LocalState = {\n startDate: CalendarDate\n endDate: CalendarDate\n date: CalendarDate\n dates: CalendarDates\n}\n\ninterface DatePickerModalContentBaseProps {\n inputFormat?: string\n locale: string\n onDismiss: () => any\n disableSafeTop?: boolean\n saveLabelDisabled?: boolean\n}\n\nexport interface DatePickerModalContentRangeProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'range'\n startDate: CalendarDate\n endDate: CalendarDate\n onChange?: RangeChange\n onConfirm: RangeChange\n}\n\nexport interface DatePickerModalContentSingleProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'single'\n date?: CalendarDate\n onChange?: SingleChange\n onConfirm: SingleChange\n dateMode?: 'start' | 'end'\n}\n\nexport interface DatePickerModalContentMultiProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'multiple'\n dates?: CalendarDates\n onChange?: MultiChange\n onConfirm: MultiConfirm\n}\n\nexport function DatePickerModalContent(\n props:\n | DatePickerModalContentRangeProps\n | DatePickerModalContentSingleProps\n | DatePickerModalContentMultiProps\n) {\n const {\n mode,\n onChange,\n onConfirm,\n onDismiss,\n disableSafeTop,\n disableWeekDays,\n locale,\n validRange,\n dateMode,\n startYear,\n endYear,\n } = props\n\n const anyProps = props as any\n\n // use local state to add only onConfirm state changes\n const [state, setState] = React.useState<LocalState>({\n date: anyProps.date,\n startDate: anyProps.startDate,\n endDate: anyProps.endDate,\n dates: anyProps.dates,\n })\n\n // update local state if changed from outside or if modal is opened\n React.useEffect(() => {\n setState({\n date: anyProps.date,\n startDate: anyProps.startDate,\n endDate: anyProps.endDate,\n dates: anyProps.dates,\n })\n }, [anyProps.date, anyProps.startDate, anyProps.endDate, anyProps.dates])\n\n const [collapsed, setCollapsed] = React.useState<boolean>(true)\n\n const onInnerChange = React.useCallback(\n (params: any) => {\n onChange && onChange(params)\n setState((prev) => ({ ...prev, ...params }))\n },\n [onChange, setState]\n )\n\n const onInnerConfirm = React.useCallback(() => {\n if (mode === 'single') {\n ;(onConfirm as DatePickerModalContentSingleProps['onConfirm'])({\n date: state.date,\n })\n } else if (mode === 'range') {\n ;(onConfirm as DatePickerModalContentRangeProps['onConfirm'])({\n startDate: state.startDate,\n endDate: state.endDate,\n })\n } else if (mode === 'multiple') {\n ;(onConfirm as DatePickerModalContentMultiProps['onConfirm'])({\n dates: state.dates || [],\n })\n }\n }, [state, mode, onConfirm])\n\n const onToggleCollapse = React.useCallback(() => {\n setCollapsed((prev) => !prev)\n }, [setCollapsed])\n\n return (\n <>\n <DatePickerModalHeaderBackground>\n <DatePickerModalHeader\n locale={locale}\n onSave={onInnerConfirm}\n onDismiss={onDismiss}\n saveLabel={props.saveLabel}\n saveLabelDisabled={props.saveLabelDisabled
|
|
1
|
+
{"version":3,"names":["DatePickerModalContent","props","mode","onChange","onConfirm","onDismiss","disableSafeTop","disableWeekDays","locale","validRange","dateMode","startYear","endYear","anyProps","state","setState","React","useState","date","startDate","endDate","dates","useEffect","collapsed","setCollapsed","onInnerChange","useCallback","params","prev","onInnerConfirm","onToggleCollapse","saveLabel","saveLabelDisabled","uppercase","closeIcon","headerSeparator","emptyLabel","label","moreLabel","startLabel","endLabel","editIcon","calendarIcon","memo"],"sources":["DatePickerModalContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport Calendar, {\n BaseCalendarProps,\n CalendarDate,\n CalendarDates,\n MultiChange,\n MultiConfirm,\n RangeChange,\n SingleChange,\n} from './Calendar'\n\nimport AnimatedCrossView from './AnimatedCrossView'\n\nimport DatePickerModalHeader from './DatePickerModalHeader'\nimport DatePickerModalContentHeader, {\n HeaderPickProps,\n} from './DatePickerModalContentHeader'\nimport CalendarEdit from './CalendarEdit'\nimport DatePickerModalHeaderBackground from './DatePickerModalHeaderBackground'\n\nexport type LocalState = {\n startDate: CalendarDate\n endDate: CalendarDate\n date: CalendarDate\n dates: CalendarDates\n}\n\ninterface DatePickerModalContentBaseProps {\n inputFormat?: string\n locale: string\n onDismiss: () => any\n disableSafeTop?: boolean\n saveLabelDisabled?: boolean\n uppercase?: boolean\n}\n\nexport interface DatePickerModalContentRangeProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'range'\n startDate: CalendarDate\n endDate: CalendarDate\n onChange?: RangeChange\n onConfirm: RangeChange\n}\n\nexport interface DatePickerModalContentSingleProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'single'\n date?: CalendarDate\n onChange?: SingleChange\n onConfirm: SingleChange\n dateMode?: 'start' | 'end'\n}\n\nexport interface DatePickerModalContentMultiProps\n extends HeaderPickProps,\n BaseCalendarProps,\n DatePickerModalContentBaseProps {\n mode: 'multiple'\n dates?: CalendarDates\n onChange?: MultiChange\n onConfirm: MultiConfirm\n}\n\nexport function DatePickerModalContent(\n props:\n | DatePickerModalContentRangeProps\n | DatePickerModalContentSingleProps\n | DatePickerModalContentMultiProps\n) {\n const {\n mode,\n onChange,\n onConfirm,\n onDismiss,\n disableSafeTop,\n disableWeekDays,\n locale,\n validRange,\n dateMode,\n startYear,\n endYear,\n } = props\n\n const anyProps = props as any\n\n // use local state to add only onConfirm state changes\n const [state, setState] = React.useState<LocalState>({\n date: anyProps.date,\n startDate: anyProps.startDate,\n endDate: anyProps.endDate,\n dates: anyProps.dates,\n })\n\n // update local state if changed from outside or if modal is opened\n React.useEffect(() => {\n setState({\n date: anyProps.date,\n startDate: anyProps.startDate,\n endDate: anyProps.endDate,\n dates: anyProps.dates,\n })\n }, [anyProps.date, anyProps.startDate, anyProps.endDate, anyProps.dates])\n\n const [collapsed, setCollapsed] = React.useState<boolean>(true)\n\n const onInnerChange = React.useCallback(\n (params: any) => {\n onChange && onChange(params)\n setState((prev) => ({ ...prev, ...params }))\n },\n [onChange, setState]\n )\n\n const onInnerConfirm = React.useCallback(() => {\n if (mode === 'single') {\n ;(onConfirm as DatePickerModalContentSingleProps['onConfirm'])({\n date: state.date,\n })\n } else if (mode === 'range') {\n ;(onConfirm as DatePickerModalContentRangeProps['onConfirm'])({\n startDate: state.startDate,\n endDate: state.endDate,\n })\n } else if (mode === 'multiple') {\n ;(onConfirm as DatePickerModalContentMultiProps['onConfirm'])({\n dates: state.dates || [],\n })\n }\n }, [state, mode, onConfirm])\n\n const onToggleCollapse = React.useCallback(() => {\n setCollapsed((prev) => !prev)\n }, [setCollapsed])\n\n return (\n <>\n <DatePickerModalHeaderBackground>\n <DatePickerModalHeader\n locale={locale}\n onSave={onInnerConfirm}\n onDismiss={onDismiss}\n saveLabel={props.saveLabel}\n saveLabelDisabled={props.saveLabelDisabled ?? false}\n uppercase={props.uppercase ?? true}\n disableSafeTop={disableSafeTop}\n closeIcon={props.closeIcon}\n />\n <DatePickerModalContentHeader\n state={state}\n mode={mode}\n collapsed={collapsed}\n onToggle={onToggleCollapse}\n headerSeparator={props.headerSeparator}\n emptyLabel={props.emptyLabel}\n label={props.label}\n moreLabel={props.moreLabel}\n startLabel={props.startLabel}\n endLabel={props.endLabel}\n uppercase={props.uppercase ?? true}\n locale={locale}\n editIcon={props.editIcon}\n calendarIcon={props.calendarIcon}\n />\n </DatePickerModalHeaderBackground>\n\n <AnimatedCrossView\n collapsed={collapsed}\n calendar={\n <Calendar\n locale={locale}\n mode={mode}\n startDate={state.startDate}\n endDate={state.endDate}\n date={state.date}\n onChange={onInnerChange}\n disableWeekDays={disableWeekDays}\n dates={state.dates}\n validRange={validRange}\n dateMode={dateMode}\n startYear={startYear}\n endYear={endYear}\n />\n }\n calendarEdit={\n <CalendarEdit\n mode={mode}\n state={state}\n label={props.label}\n startLabel={props.startLabel}\n endLabel={props.endLabel}\n collapsed={collapsed}\n onChange={onInnerChange}\n validRange={validRange}\n locale={locale}\n />\n }\n />\n </>\n )\n}\n\nexport default React.memo(DatePickerModalContent)\n"],"mappings":"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"}
|
|
@@ -50,8 +50,8 @@ function DatePickerModalHeader(props) {
|
|
|
50
50
|
color: color,
|
|
51
51
|
textColor: color,
|
|
52
52
|
onPress: props.onSave,
|
|
53
|
-
disabled: props.saveLabelDisabled
|
|
54
|
-
uppercase: props.uppercase
|
|
53
|
+
disabled: props.saveLabelDisabled ?? false,
|
|
54
|
+
uppercase: props.uppercase ?? true,
|
|
55
55
|
testID: "react-native-paper-dates-save"
|
|
56
56
|
}, saveLabel)));
|
|
57
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DatePickerModalHeader","props","disableSafeTop","locale","closeIcon","saveLabel","getTranslation","color","useHeaderTextColor","insets","useSafeAreaInsets","styles","animated","paddingTop","top","paddingLeft","left","paddingRight","right","appbarHeader","onDismiss","onSave","saveLabelDisabled","uppercase","StyleSheet","create","fill","flex","elevation","header","height","alignItems","flexDirection","headerContentContainer","marginTop","label","letterSpacing","fontSize","singleHeaderText","rangeHeaderText","headerTextFilled","headerTextEmpty","headerSeparator","backgroundColor"],"sources":["DatePickerModalHeader.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Animated, StyleSheet } from 'react-native'\nimport { Appbar, Button } from 'react-native-paper'\n\nimport { useHeaderTextColor } from '../utils'\nimport { getTranslation } from '../translations/utils'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport interface DatePickerModalHeaderProps {\n disableSafeTop?: boolean\n saveLabel?: string\n saveLabelDisabled?: boolean\n uppercase?: boolean\n onDismiss: () => void\n onSave: () => void\n locale: string | undefined\n closeIcon?: string\n}\n\nexport default function DatePickerModalHeader(\n props: DatePickerModalHeaderProps\n) {\n const { disableSafeTop, locale, closeIcon = 'close' } = props\n const saveLabel = props.saveLabel || getTranslation(locale, 'save')\n const color = useHeaderTextColor()\n const insets = useSafeAreaInsets()\n\n return (\n <Animated.View\n style={[\n styles.animated,\n {\n paddingTop: disableSafeTop ? 0 : insets.top,\n paddingLeft: insets.left,\n paddingRight: insets.right,\n },\n ]}\n >\n <Appbar style={styles.appbarHeader}>\n <Appbar.Action\n icon={closeIcon}\n accessibilityLabel={getTranslation(locale, 'close')}\n onPress={props.onDismiss}\n color={color}\n testID=\"react-native-paper-dates-close\"\n />\n <Appbar.Content title={''} />\n <Button\n color={color}\n textColor={color}\n onPress={props.onSave}\n disabled={props.saveLabelDisabled
|
|
1
|
+
{"version":3,"names":["DatePickerModalHeader","props","disableSafeTop","locale","closeIcon","saveLabel","getTranslation","color","useHeaderTextColor","insets","useSafeAreaInsets","styles","animated","paddingTop","top","paddingLeft","left","paddingRight","right","appbarHeader","onDismiss","onSave","saveLabelDisabled","uppercase","StyleSheet","create","fill","flex","elevation","header","height","alignItems","flexDirection","headerContentContainer","marginTop","label","letterSpacing","fontSize","singleHeaderText","rangeHeaderText","headerTextFilled","headerTextEmpty","headerSeparator","backgroundColor"],"sources":["DatePickerModalHeader.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Animated, StyleSheet } from 'react-native'\nimport { Appbar, Button } from 'react-native-paper'\n\nimport { useHeaderTextColor } from '../utils'\nimport { getTranslation } from '../translations/utils'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport interface DatePickerModalHeaderProps {\n disableSafeTop?: boolean\n saveLabel?: string\n saveLabelDisabled?: boolean\n uppercase?: boolean\n onDismiss: () => void\n onSave: () => void\n locale: string | undefined\n closeIcon?: string\n}\n\nexport default function DatePickerModalHeader(\n props: DatePickerModalHeaderProps\n) {\n const { disableSafeTop, locale, closeIcon = 'close' } = props\n const saveLabel = props.saveLabel || getTranslation(locale, 'save')\n const color = useHeaderTextColor()\n const insets = useSafeAreaInsets()\n\n return (\n <Animated.View\n style={[\n styles.animated,\n {\n paddingTop: disableSafeTop ? 0 : insets.top,\n paddingLeft: insets.left,\n paddingRight: insets.right,\n },\n ]}\n >\n <Appbar style={styles.appbarHeader}>\n <Appbar.Action\n icon={closeIcon}\n accessibilityLabel={getTranslation(locale, 'close')}\n onPress={props.onDismiss}\n color={color}\n testID=\"react-native-paper-dates-close\"\n />\n <Appbar.Content title={''} />\n <Button\n color={color}\n textColor={color}\n onPress={props.onSave}\n disabled={props.saveLabelDisabled ?? false}\n uppercase={props.uppercase ?? true}\n testID=\"react-native-paper-dates-save\"\n >\n {saveLabel}\n </Button>\n </Appbar>\n </Animated.View>\n )\n}\n\nconst styles = StyleSheet.create({\n fill: {\n flex: 1,\n },\n animated: {\n elevation: 4,\n },\n\n header: {\n height: 75,\n alignItems: 'center',\n flexDirection: 'row',\n paddingLeft: 24,\n paddingRight: 12,\n },\n headerContentContainer: { marginTop: 5, flexDirection: 'row' },\n label: { color: '#fff', letterSpacing: 1, fontSize: 13 },\n singleHeaderText: { color: '#fff', fontSize: 25 },\n rangeHeaderText: { color: '#fff', fontSize: 25 },\n headerTextFilled: { color: 'rgba(255,255,255,1)' },\n headerTextEmpty: { color: 'rgba(255,255,255,0.5)' },\n headerSeparator: {\n color: 'rgba(255,255,255,1)',\n fontSize: 25,\n paddingLeft: 6,\n paddingRight: 6,\n },\n appbarHeader: {\n elevation: 0,\n backgroundColor: 'transparent',\n // alignItems:'center'\n },\n})\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAae,SAASA,qBAAT,CACbC,KADa,EAEb;EACA,MAAM;IAAEC,cAAF;IAAkBC,MAAlB;IAA0BC,SAAS,GAAG;EAAtC,IAAkDH,KAAxD;EACA,MAAMI,SAAS,GAAGJ,KAAK,CAACI,SAAN,IAAmB,IAAAC,sBAAA,EAAeH,MAAf,EAAuB,MAAvB,CAArC;EACA,MAAMI,KAAK,GAAG,IAAAC,yBAAA,GAAd;EACA,MAAMC,MAAM,GAAG,IAAAC,6CAAA,GAAf;EAEA,oBACE,oBAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,QADF,EAEL;MACEC,UAAU,EAAEX,cAAc,GAAG,CAAH,GAAOO,MAAM,CAACK,GAD1C;MAEEC,WAAW,EAAEN,MAAM,CAACO,IAFtB;MAGEC,YAAY,EAAER,MAAM,CAACS;IAHvB,CAFK;EADT,gBAUE,oBAAC,wBAAD;IAAQ,KAAK,EAAEP,MAAM,CAACQ;EAAtB,gBACE,oBAAC,wBAAD,CAAQ,MAAR;IACE,IAAI,EAAEf,SADR;IAEE,kBAAkB,EAAE,IAAAE,sBAAA,EAAeH,MAAf,EAAuB,OAAvB,CAFtB;IAGE,OAAO,EAAEF,KAAK,CAACmB,SAHjB;IAIE,KAAK,EAAEb,KAJT;IAKE,MAAM,EAAC;EALT,EADF,eAQE,oBAAC,wBAAD,CAAQ,OAAR;IAAgB,KAAK,EAAE;EAAvB,EARF,eASE,oBAAC,wBAAD;IACE,KAAK,EAAEA,KADT;IAEE,SAAS,EAAEA,KAFb;IAGE,OAAO,EAAEN,KAAK,CAACoB,MAHjB;IAIE,QAAQ,EAAEpB,KAAK,CAACqB,iBAAN,IAA2B,KAJvC;IAKE,SAAS,EAAErB,KAAK,CAACsB,SAAN,IAAmB,IALhC;IAME,MAAM,EAAC;EANT,GAQGlB,SARH,CATF,CAVF,CADF;AAiCD;;AAED,MAAMM,MAAM,GAAGa,uBAAA,CAAWC,MAAX,CAAkB;EAC/BC,IAAI,EAAE;IACJC,IAAI,EAAE;EADF,CADyB;EAI/Bf,QAAQ,EAAE;IACRgB,SAAS,EAAE;EADH,CAJqB;EAQ/BC,MAAM,EAAE;IACNC,MAAM,EAAE,EADF;IAENC,UAAU,EAAE,QAFN;IAGNC,aAAa,EAAE,KAHT;IAINjB,WAAW,EAAE,EAJP;IAKNE,YAAY,EAAE;EALR,CARuB;EAe/BgB,sBAAsB,EAAE;IAAEC,SAAS,EAAE,CAAb;IAAgBF,aAAa,EAAE;EAA/B,CAfO;EAgB/BG,KAAK,EAAE;IAAE5B,KAAK,EAAE,MAAT;IAAiB6B,aAAa,EAAE,CAAhC;IAAmCC,QAAQ,EAAE;EAA7C,CAhBwB;EAiB/BC,gBAAgB,EAAE;IAAE/B,KAAK,EAAE,MAAT;IAAiB8B,QAAQ,EAAE;EAA3B,CAjBa;EAkB/BE,eAAe,EAAE;IAAEhC,KAAK,EAAE,MAAT;IAAiB8B,QAAQ,EAAE;EAA3B,CAlBc;EAmB/BG,gBAAgB,EAAE;IAAEjC,KAAK,EAAE;EAAT,CAnBa;EAoB/BkC,eAAe,EAAE;IAAElC,KAAK,EAAE;EAAT,CApBc;EAqB/BmC,eAAe,EAAE;IACfnC,KAAK,EAAE,qBADQ;IAEf8B,QAAQ,EAAE,EAFK;IAGftB,WAAW,EAAE,CAHE;IAIfE,YAAY,EAAE;EAJC,CArBc;EA2B/BE,YAAY,EAAE;IACZS,SAAS,EAAE,CADC;IAEZe,eAAe,EAAE,aAFL,CAGZ;;EAHY;AA3BiB,CAAlB,CAAf"}
|
|
@@ -9,7 +9,7 @@ var _dateUtils = require("./dateUtils");
|
|
|
9
9
|
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _utils = require("../translations/utils");
|
|
13
13
|
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
|
|
@@ -48,19 +48,19 @@ function useDateInput(_ref) {
|
|
|
48
48
|
const month = Number(date.slice(monthIndex, monthIndex + 2));
|
|
49
49
|
|
|
50
50
|
if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
|
|
51
|
-
setError((0,
|
|
51
|
+
setError((0, _utils.getTranslation)(locale, 'notAccordingToDateFormat', () => 'notAccordingToDateFormat')(inputFormat));
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
const finalDate = inputMode === 'end' ? new Date(year, month - 1, day, 23, 59, 59) : new Date(year, month - 1, day);
|
|
56
56
|
|
|
57
57
|
if (isDisabled(finalDate)) {
|
|
58
|
-
setError((0,
|
|
58
|
+
setError((0, _utils.getTranslation)(locale, 'dateIsDisabled'));
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
if (!isWithinValidRange(finalDate)) {
|
|
63
|
-
let errors = validStart && validEnd ? [`${(0,
|
|
63
|
+
let errors = validStart && validEnd ? [`${(0, _utils.getTranslation)(locale, 'mustBeBetween', () => 'mustBeBetween')(formatter.format(validStart), formatter.format(validEnd))}`] : [validStart ? (0, _utils.getTranslation)(locale, 'mustBeHigherThan', () => 'mustBeHigherThan')(formatter.format(validStart)) : '', validEnd ? (0, _utils.getTranslation)(locale, 'mustBeLowerThan', () => 'mustBeLowerThan')(formatter.format(validEnd)) : ''];
|
|
64
64
|
setError(errors.filter(n => n).join(' '));
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDateInput","locale","value","validRange","inputMode","onChange","isDisabled","isWithinValidRange","validStart","validEnd","useRangeChecker","error","setError","React","useState","formatter","useInputFormatter","inputFormat","useInputFormat","formattedValue","format","onChangeText","date","dayIndex","indexOf","monthIndex","yearIndex","day","Number","slice","year","month","isNaN","getTranslation","finalDate","Date","errors","filter","n","join"],"sources":["inputUtils.ts"],"sourcesContent":["import { useInputFormat, useInputFormatter, useRangeChecker } from './dateUtils'\nimport * as React from 'react'\nimport type { ValidRangeType } from './Calendar'\nimport { getTranslation } from '
|
|
1
|
+
{"version":3,"names":["useDateInput","locale","value","validRange","inputMode","onChange","isDisabled","isWithinValidRange","validStart","validEnd","useRangeChecker","error","setError","React","useState","formatter","useInputFormatter","inputFormat","useInputFormat","formattedValue","format","onChangeText","date","dayIndex","indexOf","monthIndex","yearIndex","day","Number","slice","year","month","isNaN","getTranslation","finalDate","Date","errors","filter","n","join"],"sources":["inputUtils.ts"],"sourcesContent":["import { useInputFormat, useInputFormatter, useRangeChecker } from './dateUtils'\nimport * as React from 'react'\nimport type { ValidRangeType } from './Calendar'\nimport { getTranslation } from '../translations/utils'\n\nexport default function useDateInput({\n locale,\n value,\n validRange,\n inputMode,\n onChange,\n}: {\n onChange: (d: Date) => void\n locale: undefined | string\n value: Date | undefined\n validRange: ValidRangeType | undefined\n inputMode: 'start' | 'end'\n}) {\n const { isDisabled, isWithinValidRange, validStart, validEnd } =\n useRangeChecker(validRange)\n const [error, setError] = React.useState<null | string>(null)\n const formatter = useInputFormatter({ locale })\n const inputFormat = useInputFormat({ formatter, locale })\n const formattedValue = value !== null ? formatter.format(value) : ''\n const onChangeText = (date: string) => {\n const dayIndex = inputFormat.indexOf('DD')\n const monthIndex = inputFormat.indexOf('MM')\n const yearIndex =\n locale === 'pt'\n ? inputFormat.indexOf('AAAA')\n : inputFormat.indexOf('YYYY')\n\n const day = Number(date.slice(dayIndex, dayIndex + 2))\n const year = Number(date.slice(yearIndex, yearIndex + 4))\n const month = Number(date.slice(monthIndex, monthIndex + 2))\n\n if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {\n setError(\n getTranslation(\n locale,\n 'notAccordingToDateFormat',\n () => 'notAccordingToDateFormat'\n )(inputFormat)\n )\n return\n }\n\n const finalDate =\n inputMode === 'end'\n ? new Date(year, month - 1, day, 23, 59, 59)\n : new Date(year, month - 1, day)\n\n if (isDisabled(finalDate)) {\n setError(getTranslation(locale, 'dateIsDisabled'))\n return\n }\n if (!isWithinValidRange(finalDate)) {\n let errors =\n validStart && validEnd\n ? [\n `${getTranslation(\n locale,\n 'mustBeBetween',\n () => 'mustBeBetween'\n )(formatter.format(validStart), formatter.format(validEnd))}`,\n ]\n : [\n validStart\n ? getTranslation(\n locale,\n 'mustBeHigherThan',\n () => 'mustBeHigherThan'\n )(formatter.format(validStart))\n : '',\n validEnd\n ? getTranslation(\n locale,\n 'mustBeLowerThan',\n () => 'mustBeLowerThan'\n )(formatter.format(validEnd))\n : '',\n ]\n setError(errors.filter((n) => n).join(' '))\n return\n }\n\n setError(null)\n if (inputMode === 'end') {\n onChange(finalDate)\n } else {\n onChange(finalDate)\n }\n }\n return {\n onChange,\n error,\n formattedValue,\n onChangeText,\n inputFormat,\n }\n}\n"],"mappings":"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"}
|