react-native-paper-dates 0.4.5 → 0.6.0
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 +80 -16
- package/lib/commonjs/Date/AnimatedCrossView.js +9 -8
- package/lib/commonjs/Date/AnimatedCrossView.js.map +1 -1
- package/lib/commonjs/Date/AutoSizer.js +6 -5
- package/lib/commonjs/Date/AutoSizer.js.map +1 -1
- package/lib/commonjs/Date/Calendar.js +46 -39
- package/lib/commonjs/Date/Calendar.js.map +1 -1
- package/lib/commonjs/Date/CalendarEdit.js +35 -110
- package/lib/commonjs/Date/CalendarEdit.js.map +1 -1
- package/lib/commonjs/Date/CalendarHeader.js +19 -12
- package/lib/commonjs/Date/CalendarHeader.js.map +1 -1
- package/lib/commonjs/Date/DatePickerInput.js +93 -20
- package/lib/commonjs/Date/DatePickerInput.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModal.js +4 -6
- package/lib/commonjs/Date/DatePickerModal.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModalContent.js +9 -5
- package/lib/commonjs/Date/DatePickerModalContent.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModalContentHeader.js +42 -34
- package/lib/commonjs/Date/DatePickerModalContentHeader.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModalHeader.js +14 -6
- package/lib/commonjs/Date/DatePickerModalHeader.js.map +1 -1
- package/lib/commonjs/Date/DatePickerModalHeaderBackground.js +6 -5
- package/lib/commonjs/Date/DatePickerModalHeaderBackground.js.map +1 -1
- package/lib/commonjs/Date/DateRangeInput.js +23 -24
- package/lib/commonjs/Date/DateRangeInput.js.map +1 -1
- package/lib/commonjs/Date/Day.js +7 -3
- package/lib/commonjs/Date/Day.js.map +1 -1
- package/lib/commonjs/Date/DayName.js +6 -5
- package/lib/commonjs/Date/DayName.js.map +1 -1
- package/lib/commonjs/Date/DayNames.js +7 -6
- package/lib/commonjs/Date/DayNames.js.map +1 -1
- package/lib/commonjs/Date/DayRange.js +9 -8
- package/lib/commonjs/Date/DayRange.js.map +1 -1
- package/lib/commonjs/Date/Month.js +57 -49
- package/lib/commonjs/Date/Month.js.map +1 -1
- package/lib/commonjs/Date/Swiper.js +35 -29
- package/lib/commonjs/Date/Swiper.js.map +1 -1
- package/lib/commonjs/Date/Swiper.native.js +29 -23
- package/lib/commonjs/Date/Swiper.native.js.map +1 -1
- package/lib/commonjs/Date/SwiperUtils.js +7 -6
- package/lib/commonjs/Date/SwiperUtils.js.map +1 -1
- package/lib/commonjs/Date/YearPicker.js +28 -20
- package/lib/commonjs/Date/YearPicker.js.map +1 -1
- package/lib/commonjs/Date/dateUtils.js +107 -38
- package/lib/commonjs/Date/dateUtils.js.map +1 -1
- package/lib/commonjs/Date/inputUtils.js +84 -0
- package/lib/commonjs/Date/inputUtils.js.map +1 -0
- package/lib/commonjs/TextInputMask.js +11 -10
- package/lib/commonjs/TextInputMask.js.map +1 -1
- package/lib/commonjs/Time/AmPmSwitcher.js +37 -19
- package/lib/commonjs/Time/AmPmSwitcher.js.map +1 -1
- package/lib/commonjs/Time/AnalogClock.js +28 -26
- package/lib/commonjs/Time/AnalogClock.js.map +1 -1
- package/lib/commonjs/Time/AnalogClockHours.js +18 -12
- package/lib/commonjs/Time/AnalogClockHours.js.map +1 -1
- package/lib/commonjs/Time/AnalogClockMinutes.js +9 -8
- package/lib/commonjs/Time/AnalogClockMinutes.js.map +1 -1
- package/lib/commonjs/Time/AnimatedClockSwitcher.js +8 -7
- package/lib/commonjs/Time/AnimatedClockSwitcher.js.map +1 -1
- package/lib/commonjs/Time/TimeInput.js +16 -12
- package/lib/commonjs/Time/TimeInput.js.map +1 -1
- package/lib/commonjs/Time/TimeInputs.js +12 -11
- package/lib/commonjs/Time/TimeInputs.js.map +1 -1
- package/lib/commonjs/Time/TimePicker.js +39 -17
- package/lib/commonjs/Time/TimePicker.js.map +1 -1
- package/lib/commonjs/Time/TimePickerModal.js +19 -15
- package/lib/commonjs/Time/TimePickerModal.js.map +1 -1
- package/lib/commonjs/Time/timeUtils.js +17 -9
- package/lib/commonjs/Time/timeUtils.js.map +1 -1
- package/lib/commonjs/index.js +66 -5
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/translations/en.js +20 -0
- package/lib/commonjs/translations/en.js.map +1 -0
- package/lib/commonjs/translations/enGB.js +20 -0
- package/lib/commonjs/translations/enGB.js.map +1 -0
- package/lib/commonjs/translations/nl.js +20 -0
- package/lib/commonjs/translations/nl.js.map +1 -0
- package/lib/commonjs/translations/pl.js +20 -0
- package/lib/commonjs/translations/pl.js.map +1 -0
- package/lib/commonjs/translations/utils.js +31 -0
- package/lib/commonjs/translations/utils.js.map +1 -0
- package/lib/commonjs/utils.js +19 -9
- package/lib/commonjs/utils.js.map +1 -1
- package/lib/module/Date/AnimatedCrossView.js +7 -6
- package/lib/module/Date/AnimatedCrossView.js.map +1 -1
- package/lib/module/Date/AutoSizer.js +4 -3
- package/lib/module/Date/AutoSizer.js.map +1 -1
- package/lib/module/Date/Calendar.js +46 -39
- package/lib/module/Date/Calendar.js.map +1 -1
- package/lib/module/Date/CalendarEdit.js +31 -103
- package/lib/module/Date/CalendarEdit.js.map +1 -1
- package/lib/module/Date/CalendarHeader.js +16 -9
- package/lib/module/Date/CalendarHeader.js.map +1 -1
- package/lib/module/Date/DatePickerInput.js +88 -18
- package/lib/module/Date/DatePickerInput.js.map +1 -1
- package/lib/module/Date/DatePickerModal.js +3 -5
- package/lib/module/Date/DatePickerModal.js.map +1 -1
- package/lib/module/Date/DatePickerModalContent.js +7 -3
- package/lib/module/Date/DatePickerModalContent.js.map +1 -1
- package/lib/module/Date/DatePickerModalContentHeader.js +37 -30
- package/lib/module/Date/DatePickerModalContentHeader.js.map +1 -1
- package/lib/module/Date/DatePickerModalHeader.js +11 -4
- package/lib/module/Date/DatePickerModalHeader.js.map +1 -1
- package/lib/module/Date/DatePickerModalHeaderBackground.js +4 -3
- package/lib/module/Date/DatePickerModalHeaderBackground.js.map +1 -1
- package/lib/module/Date/DateRangeInput.js +22 -22
- package/lib/module/Date/DateRangeInput.js.map +1 -1
- package/lib/module/Date/Day.js +5 -1
- package/lib/module/Date/Day.js.map +1 -1
- package/lib/module/Date/DayName.js +4 -3
- package/lib/module/Date/DayName.js.map +1 -1
- package/lib/module/Date/DayNames.js +5 -4
- package/lib/module/Date/DayNames.js.map +1 -1
- package/lib/module/Date/DayRange.js +7 -6
- package/lib/module/Date/DayRange.js.map +1 -1
- package/lib/module/Date/Month.js +52 -45
- package/lib/module/Date/Month.js.map +1 -1
- package/lib/module/Date/Swiper.js +32 -26
- package/lib/module/Date/Swiper.js.map +1 -1
- package/lib/module/Date/Swiper.native.js +27 -21
- package/lib/module/Date/Swiper.native.js.map +1 -1
- package/lib/module/Date/SwiperUtils.js +5 -4
- package/lib/module/Date/SwiperUtils.js.map +1 -1
- package/lib/module/Date/YearPicker.js +26 -18
- package/lib/module/Date/YearPicker.js.map +1 -1
- package/lib/module/Date/dateUtils.js +79 -30
- package/lib/module/Date/dateUtils.js.map +1 -1
- package/lib/module/Date/inputUtils.js +70 -0
- package/lib/module/Date/inputUtils.js.map +1 -0
- package/lib/module/TextInputMask.js +9 -8
- package/lib/module/TextInputMask.js.map +1 -1
- package/lib/module/Time/AmPmSwitcher.js +35 -18
- package/lib/module/Time/AmPmSwitcher.js.map +1 -1
- package/lib/module/Time/AnalogClock.js +20 -17
- package/lib/module/Time/AnalogClock.js.map +1 -1
- package/lib/module/Time/AnalogClockHours.js +15 -10
- package/lib/module/Time/AnalogClockHours.js.map +1 -1
- package/lib/module/Time/AnalogClockMinutes.js +6 -5
- package/lib/module/Time/AnalogClockMinutes.js.map +1 -1
- package/lib/module/Time/AnimatedClockSwitcher.js +6 -5
- package/lib/module/Time/AnimatedClockSwitcher.js.map +1 -1
- package/lib/module/Time/TimeInput.js +14 -10
- package/lib/module/Time/TimeInput.js.map +1 -1
- package/lib/module/Time/TimeInputs.js +10 -9
- package/lib/module/Time/TimeInputs.js.map +1 -1
- package/lib/module/Time/TimePicker.js +34 -13
- package/lib/module/Time/TimePicker.js.map +1 -1
- package/lib/module/Time/TimePickerModal.js +17 -13
- package/lib/module/Time/TimePickerModal.js.map +1 -1
- package/lib/module/Time/timeUtils.js +8 -2
- package/lib/module/Time/timeUtils.js.map +1 -1
- package/lib/module/index.js +6 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/translations/en.js +13 -0
- package/lib/module/translations/en.js.map +1 -0
- package/lib/module/translations/enGB.js +13 -0
- package/lib/module/translations/enGB.js.map +1 -0
- package/lib/module/translations/nl.js +13 -0
- package/lib/module/translations/nl.js.map +1 -0
- package/lib/module/translations/pl.js +13 -0
- package/lib/module/translations/pl.js.map +1 -0
- package/lib/module/translations/utils.js +22 -0
- package/lib/module/translations/utils.js.map +1 -0
- package/lib/module/utils.js +11 -5
- package/lib/module/utils.js.map +1 -1
- package/lib/typescript/{src/Date → Date}/AnimatedCrossView.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/AutoSizer.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/Calendar.d.ts +5 -3
- package/lib/typescript/{src/Date → Date}/CalendarEdit.d.ts +4 -3
- package/lib/typescript/{src/Date → Date}/CalendarHeader.d.ts +1 -1
- package/lib/typescript/Date/DatePickerInput.d.ts +18 -0
- package/lib/typescript/{src/Date → Date}/DatePickerModal.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/DatePickerModalContent.d.ts +2 -0
- package/lib/typescript/{src/Date → Date}/DatePickerModalContentHeader.d.ts +4 -4
- package/lib/typescript/{src/Date → Date}/DatePickerModalHeader.d.ts +1 -0
- package/lib/typescript/{src/Date → Date}/DatePickerModalHeaderBackground.d.ts +0 -0
- package/lib/typescript/Date/DateRangeInput.d.ts +3 -0
- package/lib/typescript/{src/Date → Date}/Day.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/DayName.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/DayNames.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/DayRange.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/Month.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/Swiper.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/Swiper.native.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/SwiperUtils.d.ts +1 -1
- package/lib/typescript/{src/Date → Date}/Week.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/YearPicker.d.ts +0 -0
- package/lib/typescript/{src/Date → Date}/dateUtils.d.ts +15 -0
- package/lib/typescript/{src/Date → Date}/dateUtils.test.d.ts +0 -0
- package/lib/typescript/Date/inputUtils.d.ts +14 -0
- package/lib/typescript/TextInputMask.d.ts +11 -0
- package/lib/typescript/Time/AmPmSwitcher.d.ts +4 -0
- package/lib/typescript/{src/Time → Time}/AnalogClock.d.ts +1 -2
- package/lib/typescript/{src/Time → Time}/AnalogClockHours.d.ts +0 -0
- package/lib/typescript/{src/Time → Time}/AnalogClockMinutes.d.ts +0 -0
- package/lib/typescript/{src/Time → Time}/AnimatedClockSwitcher.d.ts +0 -0
- package/lib/typescript/{src/Time → Time}/TimeInput.d.ts +0 -0
- package/lib/typescript/{src/Time → Time}/TimeInputs.d.ts +1 -1
- package/lib/typescript/{src/Time → Time}/TimePicker.d.ts +4 -0
- package/lib/typescript/{src/Time → Time}/TimePickerModal.d.ts +1 -1
- package/lib/typescript/{src/Time → Time}/timeUtils.d.ts +1 -0
- package/lib/typescript/index.d.ts +13 -0
- package/lib/typescript/translations/en.d.ts +3 -0
- package/lib/typescript/translations/enGB.d.ts +3 -0
- package/lib/typescript/translations/nl.d.ts +3 -0
- package/lib/typescript/translations/pl.d.ts +3 -0
- package/lib/typescript/translations/utils.d.ts +13 -0
- package/lib/typescript/utils.d.ts +58 -0
- package/package.json +39 -31
- package/src/.DS_Store +0 -0
- package/src/Date/Calendar.tsx +14 -13
- package/src/Date/CalendarEdit.tsx +21 -120
- package/src/Date/CalendarHeader.tsx +15 -3
- package/src/Date/DatePickerInput.tsx +103 -25
- package/src/Date/DatePickerModal.tsx +3 -8
- package/src/Date/DatePickerModalContent.tsx +6 -0
- package/src/Date/DatePickerModalContentHeader.tsx +21 -12
- package/src/Date/DatePickerModalHeader.tsx +13 -2
- package/src/Date/DateRangeInput.tsx +26 -17
- package/src/Date/Day.tsx +4 -0
- package/src/Date/Month.tsx +18 -44
- package/src/Date/Swiper.tsx +1 -0
- package/src/Date/SwiperUtils.ts +1 -1
- package/src/Date/YearPicker.tsx +4 -1
- package/src/Date/dateUtils.tsx +71 -10
- package/src/Date/inputUtils.ts +94 -0
- package/src/TextInputMask.tsx +10 -3
- package/src/Time/AmPmSwitcher.tsx +20 -11
- package/src/Time/AnalogClock.tsx +10 -18
- package/src/Time/AnalogClockHours.tsx +15 -6
- package/src/Time/AnalogClockMinutes.tsx +5 -2
- package/src/Time/TimeInput.tsx +3 -0
- package/src/Time/TimeInputs.tsx +1 -5
- package/src/Time/TimePicker.tsx +46 -23
- package/src/Time/TimePickerModal.tsx +4 -1
- package/src/Time/timeUtils.ts +7 -1
- package/src/index.tsx +7 -0
- package/src/translations/en.ts +15 -0
- package/src/translations/enGB.ts +15 -0
- package/src/translations/nl.ts +15 -0
- package/src/translations/pl.ts +15 -0
- package/src/translations/utils.ts +42 -0
- package/src/utils.ts +13 -5
- package/lib/typescript/src/Date/DatePickerInput.d.ts +0 -1
- package/lib/typescript/src/Date/DateRangeInput.d.ts +0 -1
- package/lib/typescript/src/TextInputMask.d.ts +0 -3
- package/lib/typescript/src/Time/AmPmSwitcher.d.ts +0 -4
- package/lib/typescript/src/index.d.ts +0 -6
- package/lib/typescript/src/utils.d.ts +0 -7
package/README.md
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
- Smooth and fast cross platform Material Design **date** picker and **time** picker for ([react-native-paper](https://callstack.github.io/react-native-paper/))
|
|
15
15
|
- Tested on Android, iOS and the web
|
|
16
|
-
- Uses the native Date.Intl API's which work out of the box on the web / iOS (automatic day name, month translations without bundle size increase)
|
|
17
|
-
- For Android Intl support
|
|
16
|
+
- Uses the native Date.Intl API's which work out of the box on the web / iOS an on Android with Hermes from RN version 0.66 (automatic day name, month translations without bundle size increase)
|
|
17
|
+
- For RN below 0.66 see for Android Intl support the [android-caveats guide](https://github.com/web-ridge/react-native-paper-dates#android-caveats)
|
|
18
18
|
- Simple API
|
|
19
19
|
- Typesafe
|
|
20
20
|
- Endless (virtual) scrolling
|
|
@@ -55,9 +55,47 @@ npm install react-native-paper-dates --save
|
|
|
55
55
|
```
|
|
56
56
|
|
|
57
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 only have en/nl/pl translations but it's really easy to add one extra since it are only some labels and error messages
|
|
61
|
+
```tsx
|
|
62
|
+
// e.g in your index.js
|
|
63
|
+
import {
|
|
64
|
+
// en,
|
|
65
|
+
// nl,
|
|
66
|
+
// pl,
|
|
67
|
+
enGB,
|
|
68
|
+
registerTranslation,
|
|
69
|
+
} from 'react-native-paper-dates'
|
|
70
|
+
// registerTranslation('en', en)
|
|
71
|
+
// registerTranslation('nl', nl)
|
|
72
|
+
// registerTranslation('pl', pl)
|
|
73
|
+
registerTranslation('en-GB', enGB)
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### or register your own
|
|
77
|
+
Please send a PR with your language to make sure all locales are there next time
|
|
78
|
+
```tsx
|
|
79
|
+
import {
|
|
80
|
+
registerTranslation,
|
|
81
|
+
} from 'react-native-paper-dates'
|
|
82
|
+
registerTranslation("pl", {
|
|
83
|
+
save: 'Save',
|
|
84
|
+
selectSingle: 'Select date',
|
|
85
|
+
selectMultiple: 'Select dates',
|
|
86
|
+
selectRange: 'Select period',
|
|
87
|
+
notAccordingToDateFormat: (inputFormat: string) =>
|
|
88
|
+
`Date format must be ${inputFormat}`,
|
|
89
|
+
mustBeHigherThan: 'Must be later then',
|
|
90
|
+
mustBeLowerThan: 'Must be earlier then',
|
|
91
|
+
mustBeBetween: 'Must be between',
|
|
92
|
+
dateIsDisabled: 'Day is not allowed',
|
|
93
|
+
})
|
|
94
|
+
```
|
|
95
|
+
|
|
58
96
|
## Usage
|
|
59
97
|
|
|
60
|
-
### Single date Picker
|
|
98
|
+
### Single date Picker (modal)
|
|
61
99
|
|
|
62
100
|
```tsx
|
|
63
101
|
import * as React from 'react';
|
|
@@ -86,7 +124,7 @@ export default function ReadMeExampleSingle() {
|
|
|
86
124
|
Pick single date
|
|
87
125
|
</Button>
|
|
88
126
|
<DatePickerModal
|
|
89
|
-
|
|
127
|
+
locale="en"
|
|
90
128
|
mode="single"
|
|
91
129
|
visible={open}
|
|
92
130
|
onDismiss={onDismissSingle}
|
|
@@ -95,6 +133,7 @@ export default function ReadMeExampleSingle() {
|
|
|
95
133
|
// validRange={{
|
|
96
134
|
// startDate: new Date(2021, 1, 2), // optional
|
|
97
135
|
// endDate: new Date(), // optional
|
|
136
|
+
// disabledDates: [new Date()] // optional
|
|
98
137
|
// }}
|
|
99
138
|
// onChange={} // same props as onConfirm but triggered without confirmed by user
|
|
100
139
|
// saveLabel="Save" // optional
|
|
@@ -106,7 +145,7 @@ export default function ReadMeExampleSingle() {
|
|
|
106
145
|
}
|
|
107
146
|
```
|
|
108
147
|
|
|
109
|
-
### Range picker
|
|
148
|
+
### Range picker (modal)
|
|
110
149
|
```tsx
|
|
111
150
|
import * as React from 'react';
|
|
112
151
|
import { Button } from 'react-native-paper';
|
|
@@ -139,7 +178,7 @@ export default function ReadMeExampleRange() {
|
|
|
139
178
|
Pick range
|
|
140
179
|
</Button>
|
|
141
180
|
<DatePickerModal
|
|
142
|
-
|
|
181
|
+
locale="en"
|
|
143
182
|
mode="range"
|
|
144
183
|
visible={open}
|
|
145
184
|
onDismiss={onDismiss}
|
|
@@ -149,9 +188,9 @@ export default function ReadMeExampleRange() {
|
|
|
149
188
|
// validRange={{
|
|
150
189
|
// startDate: new Date(2021, 1, 2), // optional
|
|
151
190
|
// endDate: new Date(), // optional
|
|
191
|
+
// disabledDates: [new Date()] // optional
|
|
152
192
|
// }}
|
|
153
193
|
// onChange={} // same props as onConfirm but triggered without confirmed by user
|
|
154
|
-
// locale={'nl'} // optional
|
|
155
194
|
// saveLabel="Save" // optional
|
|
156
195
|
// label="Select period" // optional
|
|
157
196
|
// startLabel="From" // optional
|
|
@@ -193,7 +232,7 @@ export default function ReadMeExampleMultiple() {
|
|
|
193
232
|
</Button>
|
|
194
233
|
|
|
195
234
|
<DatePickerModal
|
|
196
|
-
|
|
235
|
+
locale="en"
|
|
197
236
|
mode="multiple"
|
|
198
237
|
visible={open}
|
|
199
238
|
onDismiss={onDismiss}
|
|
@@ -203,8 +242,8 @@ export default function ReadMeExampleMultiple() {
|
|
|
203
242
|
// validRange={{
|
|
204
243
|
// startDate: new Date(2021, 1, 2), // optional
|
|
205
244
|
// endDate: new Date(), // optional
|
|
245
|
+
// disabledDates: [new Date()] // optional
|
|
206
246
|
// }}
|
|
207
|
-
// locale={'nl'} // optional
|
|
208
247
|
// saveLabel="Save" // optional
|
|
209
248
|
// label="Select period" // optional
|
|
210
249
|
// startLabel="From" // optional
|
|
@@ -216,6 +255,28 @@ export default function ReadMeExampleMultiple() {
|
|
|
216
255
|
}
|
|
217
256
|
```
|
|
218
257
|
|
|
258
|
+
### Input date with modal button
|
|
259
|
+
```tsx
|
|
260
|
+
export default function ReadMeExampleDatePickerInput() {
|
|
261
|
+
const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
|
|
262
|
+
|
|
263
|
+
return (
|
|
264
|
+
<>
|
|
265
|
+
<DatePickerInput
|
|
266
|
+
locale="en"
|
|
267
|
+
label="Birthdate"
|
|
268
|
+
value={inputDate}
|
|
269
|
+
onChange={(d) => setInputDate(d)}
|
|
270
|
+
inputMode="start"
|
|
271
|
+
// mode="outlined" (see react-native-paper docs)
|
|
272
|
+
// other react native TextInput props
|
|
273
|
+
/>
|
|
274
|
+
</>
|
|
275
|
+
)
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
```
|
|
279
|
+
|
|
219
280
|
### Time picker
|
|
220
281
|
```tsx
|
|
221
282
|
import * as React from 'react'
|
|
@@ -249,7 +310,7 @@ export default function TimePickerPage() {
|
|
|
249
310
|
cancelLabel="Cancel" // optional, default: 'Cancel'
|
|
250
311
|
confirmLabel="Ok" // optional, default: 'Ok'
|
|
251
312
|
animationType="fade" // optional, default is 'none'
|
|
252
|
-
locale=
|
|
313
|
+
locale="en" // optional, default is automically detected by your system
|
|
253
314
|
/>
|
|
254
315
|
<Button onPress={()=> setVisible(true)}>
|
|
255
316
|
Pick time
|
|
@@ -282,12 +343,14 @@ This is to prevent the need to press 2 times before save or close button in moda
|
|
|
282
343
|
[React Native Issue: #10138](https://github.com/facebook/react-native/issues/10138)
|
|
283
344
|
|
|
284
345
|
## Android Caveats
|
|
285
|
-
|
|
346
|
+
We recommend Hermes with React Native >= 0.66 you won't need these polyfills at all!
|
|
347
|
+
### Below React Native 0.66
|
|
286
348
|
You will need to add a polyfill for the Intl API on Android if:
|
|
287
349
|
|
|
288
|
-
- You have [Hermes](https://github.com/facebook/hermes/issues/23) enabled
|
|
350
|
+
- You have [Hermes](https://github.com/facebook/hermes/issues/23) enabled and are below React Native 0.66
|
|
289
351
|
- 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
|
|
290
352
|
|
|
353
|
+
|
|
291
354
|
Install polyfills with Yarn
|
|
292
355
|
|
|
293
356
|
```
|
|
@@ -304,11 +367,11 @@ In your app starting entrypoint e.g. `./index.js` or even better use a `index.an
|
|
|
304
367
|
|
|
305
368
|
```javascript
|
|
306
369
|
// on top of your index.android.js file
|
|
307
|
-
const isAndroid = require('react-native').Platform.OS === 'android';
|
|
308
|
-
const isHermesEnabled = !!global.HermesInternal;
|
|
370
|
+
const isAndroid = require('react-native').Platform.OS === 'android'; // this line is only needed if you don't use an .android.js file
|
|
371
|
+
const isHermesEnabled = !!global.HermesInternal; // this line is only needed if you don't use an .android.js file
|
|
309
372
|
|
|
310
373
|
// in your index.js file
|
|
311
|
-
if (isHermesEnabled || isAndroid) {
|
|
374
|
+
if (isHermesEnabled || isAndroid) { // this line is only needed if you don't use an .android.js file
|
|
312
375
|
|
|
313
376
|
require('@formatjs/intl-getcanonicallocales/polyfill');
|
|
314
377
|
require('@formatjs/intl-locale/polyfill');
|
|
@@ -349,7 +412,7 @@ if (isHermesEnabled || isAndroid) {
|
|
|
349
412
|
// require("expo-localization").timezone
|
|
350
413
|
// );
|
|
351
414
|
}
|
|
352
|
-
}
|
|
415
|
+
} // this line is only needed if you don't use an .android.js file
|
|
353
416
|
```
|
|
354
417
|
|
|
355
418
|
## Contributing
|
|
@@ -362,6 +425,7 @@ MIT
|
|
|
362
425
|
|
|
363
426
|
|
|
364
427
|
### Checkout our other libraries
|
|
428
|
+
- 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)
|
|
365
429
|
- 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)
|
|
366
430
|
- Simple translations in React (Native): [react-ridge-translations](https://github.com/web-ridge/react-ridge-translations)
|
|
367
431
|
- Simple global state management in React (Native): [react-ridge-state](https://github.com/web-ridge/react-ridge-state)
|
|
@@ -11,16 +11,17 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _reactNativePaper = require("react-native-paper");
|
|
13
13
|
|
|
14
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
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
|
|
|
16
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
|
|
18
|
-
function AnimatedCrossView({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
function AnimatedCrossView(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
// visible,
|
|
21
|
+
collapsed,
|
|
22
|
+
calendar,
|
|
23
|
+
calendarEdit
|
|
24
|
+
} = _ref;
|
|
24
25
|
const theme = (0, _reactNativePaper.useTheme)();
|
|
25
26
|
const calendarOpacity = React.useRef(new _reactNative.Animated.Value(collapsed ? 1 : 0));
|
|
26
27
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AnimatedCrossView.tsx"],"names":["AnimatedCrossView","collapsed","calendar","calendarEdit","theme","calendarOpacity","React","useRef","Animated","Value","useEffect","timing","current","toValue","duration","useNativeDriver","start","styles","root","opacity","transform","scaleY","interpolate","inputRange","outputRange","scaleX","backgroundColor","colors","surface","scale","StyleSheet","create","flex","position","left","right"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEe,SAASA,iBAAT,
|
|
1
|
+
{"version":3,"sources":["AnimatedCrossView.tsx"],"names":["AnimatedCrossView","collapsed","calendar","calendarEdit","theme","calendarOpacity","React","useRef","Animated","Value","useEffect","timing","current","toValue","duration","useNativeDriver","start","styles","root","opacity","transform","scaleY","interpolate","inputRange","outputRange","scaleX","backgroundColor","colors","surface","scale","StyleSheet","create","flex","position","left","right"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Animated, StyleSheet, View } from 'react-native'\nimport { useTheme } from 'react-native-paper'\n\nexport default function AnimatedCrossView({\n // visible,\n collapsed,\n calendar,\n calendarEdit,\n}: {\n calendar: any\n calendarEdit: any\n // visible: boolean\n collapsed: boolean\n}) {\n const theme = useTheme()\n const calendarOpacity = React.useRef<Animated.Value>(\n new Animated.Value(collapsed ? 1 : 0)\n )\n React.useEffect(() => {\n // if (visible) {\n Animated.timing(calendarOpacity.current, {\n toValue: collapsed ? 1 : 0,\n duration: 250,\n useNativeDriver: true,\n }).start()\n // }\n }, [collapsed])\n\n return (\n <View style={styles.root}>\n <Animated.View\n pointerEvents={collapsed ? 'auto' : 'none'}\n style={[\n styles.calendar,\n {\n opacity: calendarOpacity.current,\n transform: [\n {\n scaleY: calendarOpacity.current.interpolate({\n inputRange: [0, 1],\n outputRange: [0.85, 1],\n }),\n },\n {\n scaleX: calendarOpacity.current.interpolate({\n inputRange: [0, 1],\n outputRange: [0.95, 1],\n }),\n },\n ],\n },\n ]}\n >\n {calendar}\n </Animated.View>\n <Animated.View\n pointerEvents={collapsed ? 'none' : 'auto'}\n style={[\n styles.calendarEdit,\n {\n backgroundColor: theme.colors.surface,\n opacity: calendarOpacity.current.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0],\n }),\n transform: [\n {\n scale: calendarOpacity.current.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0.95],\n }),\n },\n ],\n },\n ]}\n >\n {calendarEdit}\n </Animated.View>\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n root: { flex: 1 },\n calendarEdit: {\n position: 'absolute',\n\n left: 0,\n right: 0,\n },\n calendar: {\n flex: 1,\n },\n})\n"]}
|
|
@@ -9,13 +9,14 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
12
|
+
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); }
|
|
13
13
|
|
|
14
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
15
|
|
|
16
|
-
function AutoSizer({
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
function AutoSizer(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
children
|
|
19
|
+
} = _ref;
|
|
19
20
|
const [layout, setLayout] = React.useState(null);
|
|
20
21
|
const onLayout = React.useCallback(event => {
|
|
21
22
|
const nl = event.nativeEvent.layout; // https://github.com/necolas/react-native-web/issues/1704
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AutoSizer.tsx"],"names":["AutoSizer","children","layout","setLayout","React","useState","onLayout","useCallback","event","nl","nativeEvent","width","height","styles","autoSizer","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAOe,SAASA,SAAT,
|
|
1
|
+
{"version":3,"sources":["AutoSizer.tsx"],"names":["AutoSizer","children","layout","setLayout","React","useState","onLayout","useCallback","event","nl","nativeEvent","width","height","styles","autoSizer","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAOe,SAASA,SAAT,OAIZ;AAAA,MAJ+B;AAChCC,IAAAA;AADgC,GAI/B;AACD,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,KAAK,CAACC,QAAN,CAAsC,IAAtC,CAA5B;AACA,QAAMC,QAAQ,GAAGF,KAAK,CAACG,WAAN,CACdC,KAAD,IAA8B;AAC5B,UAAMC,EAAE,GAAGD,KAAK,CAACE,WAAN,CAAkBR,MAA7B,CAD4B,CAG5B;;AACA,QAAI,CAACA,MAAD,IAAWA,MAAM,CAACS,KAAP,KAAiBF,EAAE,CAACE,KAA/B,IAAwCT,MAAM,CAACU,MAAP,KAAkBH,EAAE,CAACG,MAAjE,EAAyE;AACvET,MAAAA,SAAS,CAAC;AAAEQ,QAAAA,KAAK,EAAEF,EAAE,CAACE,KAAZ;AAAmBC,QAAAA,MAAM,EAAEH,EAAE,CAACG;AAA9B,OAAD,CAAT;AACD;AACF,GARc,EASf,CAACV,MAAD,EAASC,SAAT,CATe,CAAjB;AAWA,sBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBZ,MAAM,IAAIA,MAA7B,CAAb;AAAmD,IAAA,QAAQ,EAAEI;AAA7D,KACGJ,MAAM,GAAGD,QAAQ,CAACC,MAAD,CAAX,GAAsB,IAD/B,CADF;AAKD;;AAED,MAAMW,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import * as React from 'react'\nimport { LayoutChangeEvent, StyleSheet, View } from 'react-native'\n\ntype WidthAndHeight = {\n width: number\n height: number\n}\n\nexport default function AutoSizer({\n children,\n}: {\n children: ({ width, height }: WidthAndHeight) => any\n}) {\n const [layout, setLayout] = React.useState<WidthAndHeight | null>(null)\n const onLayout = React.useCallback(\n (event: LayoutChangeEvent) => {\n const nl = event.nativeEvent.layout\n\n // https://github.com/necolas/react-native-web/issues/1704\n if (!layout || layout.width !== nl.width || layout.height !== nl.height) {\n setLayout({ width: nl.width, height: nl.height })\n }\n },\n [layout, setLayout]\n )\n return (\n <View style={[styles.autoSizer, layout && layout]} onLayout={onLayout}>\n {layout ? children(layout) : null}\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n autoSizer: {\n flex: 1,\n overflow: 'hidden',\n },\n})\n"]}
|
|
@@ -27,9 +27,9 @@ var _utils = require("../utils");
|
|
|
27
27
|
|
|
28
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
29
|
|
|
30
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
30
|
+
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); }
|
|
31
31
|
|
|
32
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
33
|
|
|
34
34
|
function Calendar(props) {
|
|
35
35
|
const {
|
|
@@ -41,15 +41,16 @@ function Calendar(props) {
|
|
|
41
41
|
date,
|
|
42
42
|
disableWeekDays,
|
|
43
43
|
dates,
|
|
44
|
-
validRange
|
|
44
|
+
validRange,
|
|
45
|
+
dateMode
|
|
45
46
|
} = props;
|
|
46
47
|
const theme = (0, _reactNativePaper.useTheme)();
|
|
47
48
|
const selectColor = (0, React.useMemo)(() => {
|
|
48
49
|
if (theme.dark) {
|
|
49
|
-
return (0, _color.default)(theme.colors.primary).hex();
|
|
50
|
+
return (0, _utils.darkenBy)((0, _color.default)(theme.colors.primary), 0.9).hex();
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
return (0, _color.default)(theme.colors.primary)
|
|
53
|
+
return (0, _utils.lightenBy)((0, _color.default)(theme.colors.primary), 0.9).hex();
|
|
53
54
|
}, [theme]);
|
|
54
55
|
const scrollMode = mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal';
|
|
55
56
|
const [selectedYear, setSelectedYear] = React.useState(undefined);
|
|
@@ -68,7 +69,7 @@ function Calendar(props) {
|
|
|
68
69
|
if (mode === 'single') {
|
|
69
70
|
;
|
|
70
71
|
onChangeRef.current({
|
|
71
|
-
date: d
|
|
72
|
+
date: dateMode === 'start' ? d : (0, _dateUtils.getEndOfDay)(d)
|
|
72
73
|
});
|
|
73
74
|
} else if (mode === 'range') {
|
|
74
75
|
const sd = startDateRef.current;
|
|
@@ -82,7 +83,7 @@ function Calendar(props) {
|
|
|
82
83
|
;
|
|
83
84
|
onChangeRef.current({
|
|
84
85
|
startDate: isStart ? d : sd,
|
|
85
|
-
endDate: !isStart ?
|
|
86
|
+
endDate: !isStart ? (0, _dateUtils.getEndOfDay)(d) : undefined
|
|
86
87
|
});
|
|
87
88
|
} else if (mode === 'multiple') {
|
|
88
89
|
datesRef.current = datesRef.current || [];
|
|
@@ -95,7 +96,7 @@ function Calendar(props) {
|
|
|
95
96
|
change: exists ? 'removed' : 'added'
|
|
96
97
|
});
|
|
97
98
|
}
|
|
98
|
-
}, [mode, onChangeRef, startDateRef, endDateRef, datesRef]);
|
|
99
|
+
}, [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef]);
|
|
99
100
|
const firstDate = startDate || date || (dates === null || dates === void 0 ? void 0 : dates[0]);
|
|
100
101
|
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
101
102
|
style: styles.root
|
|
@@ -103,37 +104,43 @@ function Calendar(props) {
|
|
|
103
104
|
initialIndex: (0, _dateUtils.getInitialIndex)(firstDate),
|
|
104
105
|
selectedYear: selectedYear,
|
|
105
106
|
scrollMode: scrollMode,
|
|
106
|
-
renderItem:
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
107
|
+
renderItem: _ref => {
|
|
108
|
+
let {
|
|
109
|
+
index
|
|
110
|
+
} = _ref;
|
|
111
|
+
return /*#__PURE__*/React.createElement(_Month.default, {
|
|
112
|
+
locale: locale,
|
|
113
|
+
mode: mode,
|
|
114
|
+
key: index,
|
|
115
|
+
validRange: validRange,
|
|
116
|
+
index: index,
|
|
117
|
+
startDate: startDate,
|
|
118
|
+
endDate: endDate,
|
|
119
|
+
date: date,
|
|
120
|
+
dates: dates,
|
|
121
|
+
onPressYear: onPressYear,
|
|
122
|
+
selectingYear: selectingYear,
|
|
123
|
+
onPressDate: onPressDate,
|
|
124
|
+
scrollMode: scrollMode,
|
|
125
|
+
primaryColor: theme.colors.primary,
|
|
126
|
+
selectColor: selectColor,
|
|
127
|
+
roundness: theme.roundness,
|
|
128
|
+
disableWeekDays: disableWeekDays
|
|
129
|
+
});
|
|
130
|
+
},
|
|
131
|
+
renderHeader: _ref2 => {
|
|
132
|
+
let {
|
|
133
|
+
onPrev,
|
|
134
|
+
onNext
|
|
135
|
+
} = _ref2;
|
|
136
|
+
return /*#__PURE__*/React.createElement(_CalendarHeader.default, {
|
|
137
|
+
locale: locale,
|
|
138
|
+
onPrev: onPrev,
|
|
139
|
+
onNext: onNext,
|
|
140
|
+
scrollMode: scrollMode,
|
|
141
|
+
disableWeekDays: disableWeekDays
|
|
142
|
+
});
|
|
143
|
+
}
|
|
137
144
|
}), scrollMode === 'horizontal' ? /*#__PURE__*/React.createElement(_YearPicker.default, {
|
|
138
145
|
selectedYear: selectedYear,
|
|
139
146
|
selectingYear: selectingYear,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Calendar.tsx"],"names":["Calendar","props","locale","mode","onChange","startDate","endDate","date","disableWeekDays","dates","validRange","theme","selectColor","dark","colors","primary","hex","lighten","scrollMode","selectedYear","setSelectedYear","React","useState","undefined","selectingYear","setSelectingYear","onPressYear","year","prev","startDateRef","endDateRef","onChangeRef","datesRef","onPressDate","d","current","sd","ed","isStart","Date","getFullYear","getMonth","getDate","exists","some","newDates","filter","sort","a","b","getTime","datePressed","change","firstDate","styles","root","index","roundness","onPrev","onNext","StyleSheet","create","flex","viewPager","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport Swiper from './Swiper'\n\nimport Month from './Month'\nimport {\n areDatesOnSameDay,\n dateToUnix,\n DisableWeekDaysType,\n getInitialIndex,\n} from './dateUtils'\n\nimport CalendarHeader from './CalendarHeader'\nimport { useCallback, useMemo } from 'react'\nimport YearPicker from './YearPicker'\nimport Color from 'color'\nimport { useTheme } from 'react-native-paper'\nimport { useLatest } from '../utils'\n\nexport type ModeType = 'single' | 'range' | 'multiple'\n\nexport type ScrollModeType = 'horizontal' | 'vertical'\n\nexport type ValidRangeType = {\n startDate?: Date\n endDate?: Date\n}\n\nexport type BaseCalendarProps = {\n locale?: undefined | string\n disableWeekDays?: DisableWeekDaysType\n validRange?: ValidRangeType\n\n // here they are optional but in final implemenation they are required\n date?: CalendarDate\n dates?: CalendarDates\n startDate?: CalendarDate\n endDate?: CalendarDate\n}\n\nexport type CalendarDate = Date | undefined\nexport type CalendarDates = Date[] | undefined | null\n\nexport type RangeChange = (params: {\n startDate: CalendarDate\n endDate: CalendarDate\n}) => any\n\nexport type SingleChange = (params: { date: CalendarDate }) => any\n\nexport type MultiChange = (params: {\n dates: CalendarDates\n datePressed: Date\n change: 'added' | 'removed'\n}) => any\n\nexport type MultiConfirm = (params: { dates: Date[] }) => any\n\nexport interface CalendarSingleProps extends BaseCalendarProps {\n mode: 'single'\n date: CalendarDate\n onChange: SingleChange\n}\n\nexport interface CalendarRangeProps extends BaseCalendarProps {\n mode: 'range'\n startDate: CalendarDate\n endDate: CalendarDate\n onChange: RangeChange\n}\n\nexport interface CalendarMultiProps extends BaseCalendarProps {\n mode: 'multiple'\n dates: CalendarDates\n onChange: MultiChange\n}\n\nfunction Calendar(\n props: CalendarSingleProps | CalendarRangeProps | CalendarMultiProps\n) {\n const {\n locale,\n mode,\n onChange,\n startDate,\n endDate,\n date,\n disableWeekDays,\n dates,\n validRange,\n } = props\n\n const theme = useTheme()\n\n const selectColor = useMemo<string>(() => {\n if (theme.dark) {\n return Color(theme.colors.primary).hex()\n }\n return Color(theme.colors.primary).lighten(0.9).hex()\n }, [theme])\n\n const scrollMode =\n mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal'\n\n const [selectedYear, setSelectedYear] = React.useState<number | undefined>(\n undefined\n )\n const [selectingYear, setSelectingYear] = React.useState<boolean>(false)\n const onPressYear = useCallback(\n (year: number) => {\n setSelectedYear(year)\n setSelectingYear((prev) => !prev)\n },\n [setSelectingYear]\n )\n\n // prevent re-rendering all months when something changed we only need the\n // latest version of the props and we don't want the useCallback to change\n const startDateRef = useLatest<CalendarDate>(startDate)\n const endDateRef = useLatest<CalendarDate>(endDate)\n const onChangeRef = useLatest<RangeChange | SingleChange | MultiChange>(\n onChange\n )\n const datesRef = useLatest<CalendarDates>(dates)\n\n const onPressDate = useCallback(\n (d: Date) => {\n if (mode === 'single') {\n ;(onChangeRef.current as SingleChange)({\n date: d,\n })\n } else if (mode === 'range') {\n const sd = startDateRef.current\n const ed = endDateRef.current\n let isStart: boolean = true\n if (sd && !ed && dateToUnix(d) > dateToUnix(sd!)) {\n isStart = false\n }\n ;(onChangeRef.current as RangeChange)({\n startDate: isStart ? d : sd,\n endDate: !isStart\n ? new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)\n : undefined,\n })\n } else if (mode === 'multiple') {\n datesRef.current = datesRef.current || []\n const exists = datesRef.current.some((ed) => areDatesOnSameDay(ed, d))\n\n const newDates = exists\n ? datesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))\n : [...datesRef.current, d]\n\n newDates.sort((a, b) => a.getTime() - b.getTime())\n ;(onChangeRef.current as MultiChange)({\n dates: newDates,\n datePressed: d,\n change: exists ? 'removed' : 'added',\n })\n }\n },\n [mode, onChangeRef, startDateRef, endDateRef, datesRef]\n )\n\n const firstDate = startDate || date || dates?.[0]\n return (\n <View style={styles.root}>\n <Swiper\n initialIndex={getInitialIndex(firstDate)}\n selectedYear={selectedYear}\n scrollMode={scrollMode}\n renderItem={({ index }) => (\n <Month\n locale={locale}\n mode={mode}\n key={index}\n validRange={validRange}\n index={index}\n startDate={startDate}\n endDate={endDate}\n date={date}\n dates={dates}\n onPressYear={onPressYear}\n selectingYear={selectingYear}\n onPressDate={onPressDate}\n scrollMode={scrollMode}\n primaryColor={theme.colors.primary}\n selectColor={selectColor}\n roundness={theme.roundness}\n disableWeekDays={disableWeekDays}\n />\n )}\n renderHeader={({ onPrev, onNext }) => (\n <CalendarHeader\n locale={locale}\n onPrev={onPrev}\n onNext={onNext}\n scrollMode={scrollMode}\n disableWeekDays={disableWeekDays}\n />\n )}\n />\n {scrollMode === 'horizontal' ? (\n <YearPicker\n selectedYear={selectedYear}\n selectingYear={selectingYear}\n onPressYear={onPressYear}\n />\n ) : null}\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n root: { flex: 1 },\n viewPager: { flex: 1 },\n})\n\nexport default React.memo(Calendar)\n"]}
|
|
1
|
+
{"version":3,"sources":["Calendar.tsx"],"names":["Calendar","props","locale","mode","onChange","startDate","endDate","date","disableWeekDays","dates","validRange","dateMode","theme","selectColor","dark","colors","primary","hex","scrollMode","selectedYear","setSelectedYear","React","useState","undefined","selectingYear","setSelectingYear","onPressYear","year","prev","startDateRef","endDateRef","onChangeRef","datesRef","onPressDate","d","current","sd","ed","isStart","exists","some","newDates","filter","sort","a","b","getTime","datePressed","change","firstDate","styles","root","index","roundness","onPrev","onNext","StyleSheet","create","flex","viewPager","memo"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport Swiper from './Swiper'\nimport Month from './Month'\nimport {\n areDatesOnSameDay,\n dateToUnix,\n DisableWeekDaysType,\n getEndOfDay,\n getInitialIndex,\n} from './dateUtils'\n\nimport CalendarHeader from './CalendarHeader'\nimport { useCallback, useMemo } from 'react'\nimport YearPicker from './YearPicker'\nimport Color from 'color'\nimport { useTheme } from 'react-native-paper'\nimport { useLatest, lightenBy, darkenBy } from '../utils'\n\nexport type ModeType = 'single' | 'range' | 'multiple'\n\nexport type ScrollModeType = 'horizontal' | 'vertical'\n\nexport type ValidRangeType = {\n startDate?: Date\n endDate?: Date\n disabledDates?: Date[]\n}\n\nexport type BaseCalendarProps = {\n locale: string\n disableWeekDays?: DisableWeekDaysType\n validRange?: ValidRangeType\n\n // here they are optional but in final implemenation they are required\n date?: CalendarDate\n dates?: CalendarDates\n startDate?: CalendarDate\n endDate?: CalendarDate\n dateMode?: 'start' | 'end'\n}\n\nexport type CalendarDate = Date | undefined\nexport type CalendarDates = Date[] | undefined | null\n\nexport type RangeChange = (params: {\n startDate: CalendarDate\n endDate: CalendarDate\n}) => any\n\nexport type SingleChange = (params: { date: CalendarDate }) => void\n\nexport type MultiChange = (params: {\n dates: CalendarDates\n datePressed: Date\n change: 'added' | 'removed'\n}) => any\n\nexport type MultiConfirm = (params: { dates: Date[] }) => void\n\nexport interface CalendarSingleProps extends BaseCalendarProps {\n mode: 'single'\n date: CalendarDate\n onChange: SingleChange\n}\n\nexport interface CalendarRangeProps extends BaseCalendarProps {\n mode: 'range'\n startDate: CalendarDate\n endDate: CalendarDate\n onChange: RangeChange\n}\n\nexport interface CalendarMultiProps extends BaseCalendarProps {\n mode: 'multiple'\n dates: CalendarDates\n onChange: MultiChange\n}\n\nfunction Calendar(\n props: CalendarSingleProps | CalendarRangeProps | CalendarMultiProps\n) {\n const {\n locale,\n mode,\n onChange,\n startDate,\n endDate,\n date,\n disableWeekDays,\n dates,\n validRange,\n dateMode,\n } = props\n\n const theme = useTheme()\n\n const selectColor = useMemo<string>(() => {\n if (theme.dark) {\n return darkenBy(Color(theme.colors.primary), 0.9).hex()\n }\n return lightenBy(Color(theme.colors.primary), 0.9).hex()\n }, [theme])\n\n const scrollMode =\n mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal'\n\n const [selectedYear, setSelectedYear] = React.useState<number | undefined>(\n undefined\n )\n const [selectingYear, setSelectingYear] = React.useState<boolean>(false)\n const onPressYear = useCallback(\n (year: number) => {\n setSelectedYear(year)\n setSelectingYear((prev) => !prev)\n },\n [setSelectingYear]\n )\n\n // prevent re-rendering all months when something changed we only need the\n // latest version of the props and we don't want the useCallback to change\n const startDateRef = useLatest<CalendarDate>(startDate)\n const endDateRef = useLatest<CalendarDate>(endDate)\n const onChangeRef = useLatest<RangeChange | SingleChange | MultiChange>(\n onChange\n )\n const datesRef = useLatest<CalendarDates>(dates)\n\n const onPressDate = useCallback(\n (d: Date) => {\n if (mode === 'single') {\n ;(onChangeRef.current as SingleChange)({\n date: dateMode === 'start' ? d : getEndOfDay(d),\n })\n } else if (mode === 'range') {\n const sd = startDateRef.current\n const ed = endDateRef.current\n let isStart: boolean = true\n if (sd && !ed && dateToUnix(d) > dateToUnix(sd!)) {\n isStart = false\n }\n ;(onChangeRef.current as RangeChange)({\n startDate: isStart ? d : sd,\n endDate: !isStart ? getEndOfDay(d) : undefined,\n })\n } else if (mode === 'multiple') {\n datesRef.current = datesRef.current || []\n const exists = datesRef.current.some((ed) => areDatesOnSameDay(ed, d))\n\n const newDates = exists\n ? datesRef.current.filter((ed) => !areDatesOnSameDay(ed, d))\n : [...datesRef.current, d]\n\n newDates.sort((a, b) => a.getTime() - b.getTime())\n ;(onChangeRef.current as MultiChange)({\n dates: newDates,\n datePressed: d,\n change: exists ? 'removed' : 'added',\n })\n }\n },\n [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef]\n )\n\n const firstDate = startDate || date || dates?.[0]\n\n return (\n <View style={styles.root}>\n <Swiper\n initialIndex={getInitialIndex(firstDate)}\n selectedYear={selectedYear}\n scrollMode={scrollMode}\n renderItem={({ index }) => (\n <Month\n locale={locale}\n mode={mode}\n key={index}\n validRange={validRange}\n index={index}\n startDate={startDate}\n endDate={endDate}\n date={date}\n dates={dates}\n onPressYear={onPressYear}\n selectingYear={selectingYear}\n onPressDate={onPressDate}\n scrollMode={scrollMode}\n primaryColor={theme.colors.primary}\n selectColor={selectColor}\n roundness={theme.roundness}\n disableWeekDays={disableWeekDays}\n />\n )}\n renderHeader={({ onPrev, onNext }) => (\n <CalendarHeader\n locale={locale}\n onPrev={onPrev}\n onNext={onNext}\n scrollMode={scrollMode}\n disableWeekDays={disableWeekDays}\n />\n )}\n />\n {scrollMode === 'horizontal' ? (\n <YearPicker\n selectedYear={selectedYear}\n selectingYear={selectingYear}\n onPressYear={onPressYear}\n />\n ) : null}\n </View>\n )\n}\n\nconst styles = StyleSheet.create({\n root: { flex: 1 },\n viewPager: { flex: 1 },\n})\n\nexport default React.memo(Calendar)\n"]}
|