@react-stately/datepicker 3.0.0-nightly.3180 → 3.0.0-rc.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/dist/main.js +44 -42
- package/dist/main.js.map +1 -1
- package/dist/module.js +40 -26
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +14 -9
- package/dist/types.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/index.ts +9 -4
- package/src/useDateFieldState.ts +5 -2
- package/src/useDatePickerState.ts +7 -6
- package/src/useDateRangePickerState.ts +43 -11
- package/src/useTimeFieldState.ts +2 -2
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAuBA,oBAA2B,IAAI,CAAC,KAAK,qBAAqB,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/utils.ts","packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/useDatePickerState.ts","packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/useDateFieldState.ts","packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/useDateRangePickerState.ts","packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/useTimeFieldState.ts","packages/@react-stately/datepicker/src/packages/@react-stately/datepicker/src/index.ts","packages/@react-stately/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useDatePickerState} from './useDatePickerState';\nexport {useDateFieldState} from './useDateFieldState';\nexport {useDateRangePickerState} from './useDateRangePickerState';\nexport {useTimeFieldState} from './useTimeFieldState';\n\nexport type {DateFieldStateOptions, DateFieldState, DateSegment, SegmentType} from './useDateFieldState';\nexport type {DatePickerStateOptions, DatePickerState} from './useDatePickerState';\nexport type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState';\nexport type {TimeFieldStateOptions} from './useTimeFieldState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-stately/datepicker",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-rc.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@internationalized/date": "3.0.0-
|
|
22
|
-
"@react-stately/
|
|
23
|
-
"@react-
|
|
24
|
-
"@react-types/
|
|
25
|
-
"
|
|
21
|
+
"@internationalized/date": "3.0.0-rc.0",
|
|
22
|
+
"@react-stately/overlays": "^3.2.0",
|
|
23
|
+
"@react-stately/utils": "^3.4.1",
|
|
24
|
+
"@react-types/datepicker": "3.0.0-rc.0",
|
|
25
|
+
"@react-types/shared": "^3.12.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": "^16.8.0 || ^17.0.0-rc.1"
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
|
|
34
34
|
}
|
package/src/index.ts
CHANGED
|
@@ -10,7 +10,12 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
export
|
|
14
|
-
export
|
|
15
|
-
export
|
|
16
|
-
export
|
|
13
|
+
export {useDatePickerState} from './useDatePickerState';
|
|
14
|
+
export {useDateFieldState} from './useDateFieldState';
|
|
15
|
+
export {useDateRangePickerState} from './useDateRangePickerState';
|
|
16
|
+
export {useTimeFieldState} from './useTimeFieldState';
|
|
17
|
+
|
|
18
|
+
export type {DateFieldStateOptions, DateFieldState, DateSegment, SegmentType} from './useDateFieldState';
|
|
19
|
+
export type {DatePickerStateOptions, DatePickerState} from './useDatePickerState';
|
|
20
|
+
export type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState';
|
|
21
|
+
export type {TimeFieldStateOptions} from './useTimeFieldState';
|
package/src/useDateFieldState.ts
CHANGED
|
@@ -50,6 +50,8 @@ export interface DateFieldState {
|
|
|
50
50
|
validationState: ValidationState,
|
|
51
51
|
/** The granularity for the field, based on the `granularity` prop and current value. */
|
|
52
52
|
granularity: Granularity,
|
|
53
|
+
/** The maximum date or time unit that is displayed in the field. */
|
|
54
|
+
maxGranularity: 'year' | 'month' | Granularity,
|
|
53
55
|
/** Whether the field is disabled. */
|
|
54
56
|
isDisabled: boolean,
|
|
55
57
|
/** Whether the field is read only. */
|
|
@@ -110,7 +112,7 @@ const TYPE_MAPPING = {
|
|
|
110
112
|
dayperiod: 'dayPeriod'
|
|
111
113
|
};
|
|
112
114
|
|
|
113
|
-
interface
|
|
115
|
+
export interface DateFieldStateOptions extends DatePickerProps<DateValue> {
|
|
114
116
|
/**
|
|
115
117
|
* The maximum unit to display in the date field.
|
|
116
118
|
* @default 'year'
|
|
@@ -132,7 +134,7 @@ interface DatePickerFieldProps extends DatePickerProps<DateValue> {
|
|
|
132
134
|
* A date field allows users to enter and edit date and time values using a keyboard.
|
|
133
135
|
* Each part of a date value is displayed in an individually editable segment.
|
|
134
136
|
*/
|
|
135
|
-
export function useDateFieldState(props:
|
|
137
|
+
export function useDateFieldState(props: DateFieldStateOptions): DateFieldState {
|
|
136
138
|
let {
|
|
137
139
|
locale,
|
|
138
140
|
createCalendar,
|
|
@@ -280,6 +282,7 @@ export function useDateFieldState(props: DatePickerFieldProps): DateFieldState {
|
|
|
280
282
|
dateFormatter,
|
|
281
283
|
validationState,
|
|
282
284
|
granularity,
|
|
285
|
+
maxGranularity: props.maxGranularity ?? 'year',
|
|
283
286
|
isDisabled,
|
|
284
287
|
isReadOnly,
|
|
285
288
|
isRequired,
|
|
@@ -15,10 +15,11 @@ import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/d
|
|
|
15
15
|
import {FieldOptions, getFormatOptions, getPlaceholderTime, useDefaultProps} from './utils';
|
|
16
16
|
import {isInvalid} from './utils';
|
|
17
17
|
import {useControlledState} from '@react-stately/utils';
|
|
18
|
+
import {useOverlayTriggerState} from '@react-stately/overlays';
|
|
18
19
|
import {useState} from 'react';
|
|
19
20
|
import {ValidationState} from '@react-types/shared';
|
|
20
21
|
|
|
21
|
-
export interface
|
|
22
|
+
export interface DatePickerStateOptions extends DatePickerProps<DateValue> {
|
|
22
23
|
/**
|
|
23
24
|
* Determines whether the date picker popover should close automatically when a date is selected.
|
|
24
25
|
* @default true
|
|
@@ -63,8 +64,8 @@ export interface DatePickerState {
|
|
|
63
64
|
* Provides state management for a date picker component.
|
|
64
65
|
* A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
|
|
65
66
|
*/
|
|
66
|
-
export function useDatePickerState(props:
|
|
67
|
-
let
|
|
67
|
+
export function useDatePickerState(props: DatePickerStateOptions): DatePickerState {
|
|
68
|
+
let overlayState = useOverlayTriggerState(props);
|
|
68
69
|
let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
|
|
69
70
|
|
|
70
71
|
let v = (value || props.placeholderValue);
|
|
@@ -106,7 +107,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
|
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
if (shouldClose) {
|
|
109
|
-
setOpen(false);
|
|
110
|
+
overlayState.setOpen(false);
|
|
110
111
|
}
|
|
111
112
|
};
|
|
112
113
|
|
|
@@ -131,7 +132,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
|
|
|
131
132
|
setTimeValue: selectTime,
|
|
132
133
|
granularity,
|
|
133
134
|
hasTime,
|
|
134
|
-
isOpen,
|
|
135
|
+
isOpen: overlayState.isOpen,
|
|
135
136
|
setOpen(isOpen) {
|
|
136
137
|
// Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.
|
|
137
138
|
// If only the time was set and not the date, don't commit. The state will be preserved until
|
|
@@ -140,7 +141,7 @@ export function useDatePickerState(props: DatePickerOptions): DatePickerState {
|
|
|
140
141
|
commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue));
|
|
141
142
|
}
|
|
142
143
|
|
|
143
|
-
setOpen(isOpen);
|
|
144
|
+
overlayState.setOpen(isOpen);
|
|
144
145
|
},
|
|
145
146
|
validationState,
|
|
146
147
|
formatValue(locale, fieldOptions) {
|
|
@@ -15,9 +15,10 @@ import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationali
|
|
|
15
15
|
import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
|
|
16
16
|
import {RangeValue, ValidationState} from '@react-types/shared';
|
|
17
17
|
import {useControlledState} from '@react-stately/utils';
|
|
18
|
+
import {useOverlayTriggerState} from '@react-stately/overlays';
|
|
18
19
|
import {useRef, useState} from 'react';
|
|
19
20
|
|
|
20
|
-
export interface
|
|
21
|
+
export interface DateRangePickerStateOptions extends DateRangePickerProps<DateValue> {
|
|
21
22
|
/**
|
|
22
23
|
* Determines whether the date picker popover should close automatically when a date is selected.
|
|
23
24
|
* @default true
|
|
@@ -62,7 +63,7 @@ export interface DateRangePickerState {
|
|
|
62
63
|
/** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */
|
|
63
64
|
validationState: ValidationState,
|
|
64
65
|
/** Formats the selected range using the given options. */
|
|
65
|
-
formatValue(locale: string, fieldOptions: FieldOptions): string,
|
|
66
|
+
formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
|
|
66
67
|
/** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */
|
|
67
68
|
confirmPlaceholder(): void
|
|
68
69
|
}
|
|
@@ -72,8 +73,8 @@ export interface DateRangePickerState {
|
|
|
72
73
|
* A date range picker combines two DateFields and a RangeCalendar popover to allow
|
|
73
74
|
* users to enter or select a date and time range.
|
|
74
75
|
*/
|
|
75
|
-
export function useDateRangePickerState(props:
|
|
76
|
-
let
|
|
76
|
+
export function useDateRangePickerState(props: DateRangePickerStateOptions): DateRangePickerState {
|
|
77
|
+
let overlayState = useOverlayTriggerState(props);
|
|
77
78
|
let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
|
|
78
79
|
let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
|
|
79
80
|
|
|
@@ -138,7 +139,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
|
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
if (shouldClose) {
|
|
141
|
-
setOpen(false);
|
|
142
|
+
overlayState.setOpen(false);
|
|
142
143
|
}
|
|
143
144
|
};
|
|
144
145
|
|
|
@@ -177,7 +178,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
|
|
|
177
178
|
},
|
|
178
179
|
setDateRange,
|
|
179
180
|
setTimeRange,
|
|
180
|
-
isOpen,
|
|
181
|
+
isOpen: overlayState.isOpen,
|
|
181
182
|
setOpen(isOpen) {
|
|
182
183
|
// Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
|
|
183
184
|
// If only the time range was set and not the date range, don't commit. The state will be preserved until
|
|
@@ -189,12 +190,12 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
|
|
|
189
190
|
});
|
|
190
191
|
}
|
|
191
192
|
|
|
192
|
-
setOpen(isOpen);
|
|
193
|
+
overlayState.setOpen(isOpen);
|
|
193
194
|
},
|
|
194
195
|
validationState,
|
|
195
196
|
formatValue(locale, fieldOptions) {
|
|
196
197
|
if (!value || !value.start || !value.end) {
|
|
197
|
-
return
|
|
198
|
+
return null;
|
|
198
199
|
}
|
|
199
200
|
|
|
200
201
|
let startTimeZone = 'timeZone' in value.start ? value.start.timeZone : undefined;
|
|
@@ -209,14 +210,42 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
|
|
|
209
210
|
hourCycle: props.hourCycle
|
|
210
211
|
});
|
|
211
212
|
|
|
213
|
+
let startDate = value.start.toDate(startTimeZone || 'UTC');
|
|
214
|
+
let endDate = value.end.toDate(endTimeZone || 'UTC');
|
|
215
|
+
|
|
212
216
|
let startFormatter = new DateFormatter(locale, startOptions);
|
|
213
217
|
let endFormatter: Intl.DateTimeFormat;
|
|
214
|
-
if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
|
|
218
|
+
if (startTimeZone === endTimeZone && startGranularity === endGranularity && value.start.compare(value.end) !== 0) {
|
|
215
219
|
// Use formatRange, as it results in shorter output when some of the fields
|
|
216
220
|
// are shared between the start and end dates (e.g. the same month).
|
|
217
221
|
// Formatting will fail if the end date is before the start date. Fall back below when that happens.
|
|
218
222
|
try {
|
|
219
|
-
|
|
223
|
+
let parts = startFormatter.formatRangeToParts(startDate, endDate);
|
|
224
|
+
|
|
225
|
+
// Find the separator between the start and end date. This is determined
|
|
226
|
+
// by finding the last shared literal before the end range.
|
|
227
|
+
let separatorIndex = -1;
|
|
228
|
+
for (let i = 0; i < parts.length; i++) {
|
|
229
|
+
let part = parts[i];
|
|
230
|
+
if (part.source === 'shared' && part.type === 'literal') {
|
|
231
|
+
separatorIndex = i;
|
|
232
|
+
} else if (part.source === 'endRange') {
|
|
233
|
+
break;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// Now we can combine the parts into start and end strings.
|
|
238
|
+
let start = '';
|
|
239
|
+
let end = '';
|
|
240
|
+
for (let i = 0; i < parts.length; i++) {
|
|
241
|
+
if (i < separatorIndex) {
|
|
242
|
+
start += parts[i].value;
|
|
243
|
+
} else if (i > separatorIndex) {
|
|
244
|
+
end += parts[i].value;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
return {start, end};
|
|
220
249
|
} catch (e) {
|
|
221
250
|
// ignore
|
|
222
251
|
}
|
|
@@ -233,7 +262,10 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
|
|
|
233
262
|
endFormatter = new DateFormatter(locale, endOptions);
|
|
234
263
|
}
|
|
235
264
|
|
|
236
|
-
return
|
|
265
|
+
return {
|
|
266
|
+
start: startFormatter.format(startDate),
|
|
267
|
+
end: endFormatter.format(endDate)
|
|
268
|
+
};
|
|
237
269
|
},
|
|
238
270
|
confirmPlaceholder() {
|
|
239
271
|
// Need to use ref value here because the value can be set in the same tick as
|
package/src/useTimeFieldState.ts
CHANGED
|
@@ -16,7 +16,7 @@ import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, to
|
|
|
16
16
|
import {useControlledState} from '@react-stately/utils';
|
|
17
17
|
import {useMemo} from 'react';
|
|
18
18
|
|
|
19
|
-
interface
|
|
19
|
+
export interface TimeFieldStateOptions extends TimePickerProps<TimeValue> {
|
|
20
20
|
/** The locale to display and edit the value according to. */
|
|
21
21
|
locale: string
|
|
22
22
|
}
|
|
@@ -26,7 +26,7 @@ interface TimeFieldProps extends TimePickerProps<TimeValue> {
|
|
|
26
26
|
* A time field allows users to enter and edit time values using a keyboard.
|
|
27
27
|
* Each part of a time value is displayed in an individually editable segment.
|
|
28
28
|
*/
|
|
29
|
-
export function useTimeFieldState(props:
|
|
29
|
+
export function useTimeFieldState(props: TimeFieldStateOptions): DateFieldState {
|
|
30
30
|
let {
|
|
31
31
|
placeholderValue = new Time(),
|
|
32
32
|
minValue,
|