@react-stately/datepicker
Advanced tools
@react-stately/datepicker - npm Package Compare versions
Comparing version 3.0.0-nightly.3180 to 3.0.0-nightly-4980928d3-240906
784
dist/main.js
@@ -1,777 +0,31 @@ | ||
| var $h2qOe$internationalizeddate = require("@internationalized/date"); | ||
| var $h2qOe$reactstatelyutils = require("@react-stately/utils"); | ||
| var $h2qOe$react = require("react"); | ||
| var $aaab7a647e17e1fd$exports = require("./useDatePickerState.main.js"); | ||
| var $596a1f0f523d6752$exports = require("./useDateFieldState.main.js"); | ||
| var $7072d26f58deb33b$exports = require("./useDateRangePickerState.main.js"); | ||
| var $2654e87be0231a69$exports = require("./useTimeFieldState.main.js"); | ||
| function $parcel$exportWildcard(dest, source) { | ||
| Object.keys(source).forEach(function(key) { | ||
| if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) { | ||
| return; | ||
| } | ||
| Object.defineProperty(dest, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return source[key]; | ||
| } | ||
| }); | ||
| }); | ||
| return dest; | ||
| } | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $aaab7a647e17e1fd$exports = {}; | ||
| $parcel$export($aaab7a647e17e1fd$exports, "useDatePickerState", () => $aaab7a647e17e1fd$export$87194bb378cc3ac2); | ||
| $parcel$export(module.exports, "useDatePickerState", () => $aaab7a647e17e1fd$exports.useDatePickerState); | ||
| $parcel$export(module.exports, "useDateFieldState", () => $596a1f0f523d6752$exports.useDateFieldState); | ||
| $parcel$export(module.exports, "useDateRangePickerState", () => $7072d26f58deb33b$exports.useDateRangePickerState); | ||
| $parcel$export(module.exports, "useTimeFieldState", () => $2654e87be0231a69$exports.useTimeFieldState); | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| function $50d5d6a623389320$export$eac50920cf2fd59a(value, minValue, maxValue) { | ||
| return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0); | ||
| } | ||
| const $50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS = { | ||
| year: 'numeric', | ||
| month: 'numeric', | ||
| day: 'numeric', | ||
| hour: 'numeric', | ||
| minute: '2-digit', | ||
| second: '2-digit' | ||
| }; | ||
| function $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, options) { | ||
| fieldOptions = { | ||
| ...$50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS, | ||
| ...fieldOptions | ||
| }; | ||
| let granularity = options.granularity || 'minute'; | ||
| let keys = Object.keys(fieldOptions); | ||
| var _maxGranularity; | ||
| let startIdx = keys.indexOf((_maxGranularity = options.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year'); | ||
| if (startIdx < 0) startIdx = 0; | ||
| let endIdx = keys.indexOf(granularity); | ||
| if (endIdx < 0) endIdx = 2; | ||
| if (startIdx > endIdx) throw new Error('maxGranularity must be greater than granularity'); | ||
| let opts1 = keys.slice(startIdx, endIdx + 1).reduce((opts, key)=>{ | ||
| opts[key] = fieldOptions[key]; | ||
| return opts; | ||
| }, { | ||
| }); | ||
| if (options.hourCycle != null) opts1.hour12 = options.hourCycle === 12; | ||
| opts1.timeZone = options.timeZone || 'UTC'; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second'; | ||
| if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short'; | ||
| return opts1; | ||
| } | ||
| function $50d5d6a623389320$export$c5221a78ef73c5e9(placeholderValue) { | ||
| if (placeholderValue && 'hour' in placeholderValue) return placeholderValue; | ||
| return new $h2qOe$internationalizeddate.Time(); | ||
| } | ||
| function $50d5d6a623389320$export$61a490a80c552550(value, calendar) { | ||
| if (value === null) return null; | ||
| if (!value) return undefined; | ||
| return $h2qOe$internationalizeddate.toCalendar(value, calendar); | ||
| } | ||
| function $50d5d6a623389320$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) { | ||
| if (placeholderValue) return $50d5d6a623389320$export$61a490a80c552550(placeholderValue, calendar); | ||
| let date = $h2qOe$internationalizeddate.toCalendar($h2qOe$internationalizeddate.now(timeZone).set({ | ||
| hour: 0, | ||
| minute: 0, | ||
| second: 0, | ||
| millisecond: 0 | ||
| }), calendar); | ||
| if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $h2qOe$internationalizeddate.toCalendarDate(date); | ||
| if (!timeZone) return $h2qOe$internationalizeddate.toCalendarDateTime(date); | ||
| return date; | ||
| } | ||
| function $50d5d6a623389320$export$2440da353cedad43(v, granularity) { | ||
| // Compute default granularity and time zone from the value. If the value becomes null, keep the last values. | ||
| let lastValue = $h2qOe$react.useRef(v); | ||
| if (v) lastValue.current = v; | ||
| v = lastValue.current; | ||
| let defaultTimeZone = v && 'timeZone' in v ? v.timeZone : undefined; | ||
| granularity = granularity || (v && 'minute' in v ? 'minute' : 'day'); | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString()); | ||
| return [ | ||
| granularity, | ||
| defaultTimeZone | ||
| ]; | ||
| } | ||
| function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) { | ||
| var ref; | ||
| let [isOpen1, setOpen] = $h2qOe$react.useState(false); | ||
| let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange); | ||
| let v = value || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity); | ||
| let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| var _shouldCloseOnSelect; | ||
| let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true; | ||
| let [selectedDate, setSelectedDate] = $h2qOe$react.useState(null); | ||
| let [selectedTime, setSelectedTime] = $h2qOe$react.useState(null); | ||
| if (value) { | ||
| selectedDate = value; | ||
| if ('hour' in value) selectedTime = value; | ||
| } | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString()); | ||
| let commitValue = (date, time)=>{ | ||
| setValue('timeZone' in time ? time.set($h2qOe$internationalizeddate.toCalendarDate(date)) : $h2qOe$internationalizeddate.toCalendarDateTime(date, time)); | ||
| }; | ||
| // Intercept setValue to make sure the Time section is not changed by date selection in Calendar | ||
| let selectDate = (newValue)=>{ | ||
| let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect; | ||
| if (hasTime) { | ||
| if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)); | ||
| else setSelectedDate(newValue); | ||
| } else setValue(newValue); | ||
| if (shouldClose) setOpen(false); | ||
| }; | ||
| let selectTime = (newValue)=>{ | ||
| if (selectedDate) commitValue(selectedDate, newValue); | ||
| else setSelectedTime(newValue); | ||
| }; | ||
| let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null) || (value && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value)) ? 'invalid' : null); | ||
| return { | ||
| value: value, | ||
| setValue: setValue, | ||
| dateValue: selectedDate, | ||
| timeValue: selectedTime, | ||
| setDateValue: selectDate, | ||
| setTimeValue: selectTime, | ||
| granularity: granularity, | ||
| hasTime: hasTime, | ||
| isOpen: isOpen1, | ||
| setOpen (isOpen) { | ||
| // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| // If only the time was set and not the date, don't commit. The state will be preserved until | ||
| // the user opens the popover again. | ||
| if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)); | ||
| setOpen(isOpen); | ||
| }, | ||
| validationState: validationState, | ||
| formatValue (locale, fieldOptions) { | ||
| if (!dateValue) return ''; | ||
| let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: granularity, | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions); | ||
| return formatter.format(dateValue); | ||
| } | ||
| }; | ||
| } | ||
| var $596a1f0f523d6752$exports = {}; | ||
| $parcel$export($596a1f0f523d6752$exports, "useDateFieldState", () => $596a1f0f523d6752$export$60e84778edff6d26); | ||
| const $596a1f0f523d6752$var$EDITABLE_SEGMENTS = { | ||
| year: true, | ||
| month: true, | ||
| day: true, | ||
| hour: true, | ||
| minute: true, | ||
| second: true, | ||
| dayPeriod: true, | ||
| era: true | ||
| }; | ||
| const $596a1f0f523d6752$var$PAGE_STEP = { | ||
| year: 5, | ||
| month: 2, | ||
| day: 7, | ||
| hour: 2, | ||
| minute: 15, | ||
| second: 15 | ||
| }; | ||
| // Node seems to convert everything to lowercase... | ||
| const $596a1f0f523d6752$var$TYPE_MAPPING = { | ||
| dayperiod: 'dayPeriod' | ||
| }; | ||
| function $596a1f0f523d6752$export$60e84778edff6d26(props) { | ||
| let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired } = props; | ||
| let v1 = props.value || props.defaultValue || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v1, props.granularity); | ||
| let timeZone = defaultTimeZone || 'UTC'; | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v1 && !(granularity in v1)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v1.toString()); | ||
| var _maxGranularity; | ||
| let formatOpts = $h2qOe$react.useMemo(()=>({ | ||
| granularity: granularity, | ||
| maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year', | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }) | ||
| , [ | ||
| props.maxGranularity, | ||
| granularity, | ||
| props.hourCycle, | ||
| defaultTimeZone, | ||
| hideTimeZone | ||
| ]); | ||
| let opts = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$7e319ea407e63bc0({ | ||
| }, formatOpts) | ||
| , [ | ||
| formatOpts | ||
| ]); | ||
| let dateFormatter = $h2qOe$react.useMemo(()=>new $h2qOe$internationalizeddate.DateFormatter(locale, opts) | ||
| , [ | ||
| locale, | ||
| opts | ||
| ]); | ||
| let resolvedOptions = $h2qOe$react.useMemo(()=>dateFormatter.resolvedOptions() | ||
| , [ | ||
| dateFormatter | ||
| ]); | ||
| let calendar = $h2qOe$react.useMemo(()=>createCalendar(resolvedOptions.calendar) | ||
| , [ | ||
| createCalendar, | ||
| resolvedOptions.calendar | ||
| ]); | ||
| // Determine how many editable segments there are for validation purposes. | ||
| // The result is cached for performance. | ||
| let allSegments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$596a1f0f523d6752$var$EDITABLE_SEGMENTS[seg.type] | ||
| ).reduce((p, seg)=>(p[seg.type] = true, p) | ||
| , { | ||
| }) | ||
| , [ | ||
| dateFormatter | ||
| ]); | ||
| let [validSegments, setValidSegments] = $h2qOe$react.useState(()=>props.value || props.defaultValue ? { | ||
| ...allSegments | ||
| } : { | ||
| } | ||
| ); | ||
| // We keep track of the placeholder date separately in state so that onChange is not called | ||
| // until all segments are set. If the value === null (not undefined), then assume the component | ||
| // is controlled, so use the placeholder as the value until all segments are entered so it doesn't | ||
| // change from uncontrolled to controlled and emit a warning. | ||
| let [placeholderDate, setPlaceholderDate] = $h2qOe$react.useState(()=>$50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| // Reset placeholder when calendar changes | ||
| let lastCalendarIdentifier = $h2qOe$react.useRef(calendar.identifier); | ||
| $h2qOe$react.useEffect(()=>{ | ||
| if (calendar.identifier !== lastCalendarIdentifier.current) { | ||
| lastCalendarIdentifier.current = calendar.identifier; | ||
| setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $h2qOe$internationalizeddate.toCalendar(placeholder, calendar) : $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| } | ||
| }, [ | ||
| calendar, | ||
| granularity, | ||
| validSegments, | ||
| defaultTimeZone, | ||
| props.placeholderValue | ||
| ]); | ||
| let [value1, setDate] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange); | ||
| let calendarValue = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$61a490a80c552550(value1, calendar) | ||
| , [ | ||
| value1, | ||
| calendar | ||
| ]); | ||
| // If there is a value prop, and some segments were previously placeholders, mark them all as valid. | ||
| if (value1 && Object.keys(validSegments).length < Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| ...allSegments | ||
| }; | ||
| setValidSegments(validSegments); | ||
| } | ||
| // If the value is set to null and all segments are valid, reset the placeholder. | ||
| if (value1 == null && Object.keys(validSegments).length === Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| }; | ||
| setValidSegments(validSegments); | ||
| setPlaceholderDate($50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)); | ||
| } | ||
| // If all segments are valid, use the date from state, otherwise use the placeholder date. | ||
| let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate; | ||
| let setValue = (newValue)=>{ | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| if (Object.keys(validSegments).length >= Object.keys(allSegments).length) { | ||
| // The display calendar should not have any effect on the emitted value. | ||
| // Emit dates in the same calendar as the original value, if any, otherwise gregorian. | ||
| newValue = $h2qOe$internationalizeddate.toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $h2qOe$internationalizeddate.GregorianCalendar()); | ||
| setDate(newValue); | ||
| } else setPlaceholderDate(newValue); | ||
| }; | ||
| let dateValue = $h2qOe$react.useMemo(()=>displayValue.toDate(timeZone) | ||
| , [ | ||
| displayValue, | ||
| timeZone | ||
| ]); | ||
| let segments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{ | ||
| let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type]; | ||
| if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false; | ||
| return { | ||
| type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type, | ||
| text: segment.value, | ||
| ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, segment.type, resolvedOptions), | ||
| isPlaceholder: $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type], | ||
| isEditable: isEditable | ||
| }; | ||
| }) | ||
| , [ | ||
| dateValue, | ||
| validSegments, | ||
| dateFormatter, | ||
| resolvedOptions, | ||
| displayValue, | ||
| calendar | ||
| ]); | ||
| let hasEra = $h2qOe$react.useMemo(()=>segments.some((s)=>s.type === 'era' | ||
| ) | ||
| , [ | ||
| segments | ||
| ]); | ||
| let markValid = (part)=>{ | ||
| validSegments[part] = true; | ||
| if (part === 'year' && hasEra) validSegments.era = true; | ||
| setValidSegments({ | ||
| ...validSegments | ||
| }); | ||
| }; | ||
| let adjustSegment = (type, amount)=>{ | ||
| markValid(type); | ||
| setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions)); | ||
| }; | ||
| let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null); | ||
| return { | ||
| value: calendarValue, | ||
| dateValue: dateValue, | ||
| setValue: setValue, | ||
| segments: segments, | ||
| dateFormatter: dateFormatter, | ||
| validationState: validationState, | ||
| granularity: granularity, | ||
| isDisabled: isDisabled, | ||
| isReadOnly: isReadOnly, | ||
| isRequired: isRequired, | ||
| increment (part) { | ||
| adjustSegment(part, 1); | ||
| }, | ||
| decrement (part) { | ||
| adjustSegment(part, -1); | ||
| }, | ||
| incrementPage (part) { | ||
| adjustSegment(part, $596a1f0f523d6752$var$PAGE_STEP[part] || 1); | ||
| }, | ||
| decrementPage (part) { | ||
| adjustSegment(part, -($596a1f0f523d6752$var$PAGE_STEP[part] || 1)); | ||
| }, | ||
| setSegment (part, v) { | ||
| markValid(part); | ||
| setValue($596a1f0f523d6752$var$setSegment(displayValue, part, v, resolvedOptions)); | ||
| }, | ||
| confirmPlaceholder (part) { | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| if (!part) { | ||
| // Confirm the rest of the placeholder if any of the segments are valid. | ||
| let numValid = Object.keys(validSegments).length; | ||
| if (numValid > 0 && numValid < Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| ...allSegments | ||
| }; | ||
| setValidSegments(validSegments); | ||
| setValue(displayValue.copy()); | ||
| } | ||
| } else if (!validSegments[part]) { | ||
| markValid(part); | ||
| setValue(displayValue.copy()); | ||
| } | ||
| }, | ||
| clearSegment (part) { | ||
| delete validSegments[part]; | ||
| setValidSegments({ | ||
| ...validSegments | ||
| }); | ||
| let placeholder = $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone); | ||
| let value = displayValue; | ||
| // Reset day period to default without changing the hour. | ||
| if (part === 'dayPeriod' && 'hour' in displayValue && 'hour' in placeholder) { | ||
| let isPM = displayValue.hour >= 12; | ||
| let shouldBePM = placeholder.hour >= 12; | ||
| if (isPM && !shouldBePM) value = displayValue.set({ | ||
| hour: displayValue.hour - 12 | ||
| }); | ||
| else if (!isPM && shouldBePM) value = displayValue.set({ | ||
| hour: displayValue.hour + 12 | ||
| }); | ||
| } else if (part in displayValue) value = displayValue.set({ | ||
| [part]: placeholder[part] | ||
| }); | ||
| setDate(null); | ||
| setValue(value); | ||
| }, | ||
| formatValue (fieldOptions) { | ||
| if (!calendarValue) return ''; | ||
| let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, formatOpts); | ||
| let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions); | ||
| return formatter.format(dateValue); | ||
| } | ||
| }; | ||
| } | ||
| function $596a1f0f523d6752$var$getSegmentLimits(date, type, options) { | ||
| switch(type){ | ||
| case 'era': | ||
| { | ||
| let eras = date.calendar.getEras(); | ||
| return { | ||
| value: eras.indexOf(date.era), | ||
| minValue: 0, | ||
| maxValue: eras.length - 1 | ||
| }; | ||
| } | ||
| case 'year': | ||
| return { | ||
| value: date.year, | ||
| minValue: 1, | ||
| maxValue: date.calendar.getYearsInEra(date) | ||
| }; | ||
| case 'month': | ||
| return { | ||
| value: date.month, | ||
| minValue: $h2qOe$internationalizeddate.getMinimumMonthInYear(date), | ||
| maxValue: date.calendar.getMonthsInYear(date) | ||
| }; | ||
| case 'day': | ||
| return { | ||
| value: date.day, | ||
| minValue: $h2qOe$internationalizeddate.getMinimumDayInMonth(date), | ||
| maxValue: date.calendar.getDaysInMonth(date) | ||
| }; | ||
| } | ||
| if ('hour' in date) switch(type){ | ||
| case 'dayPeriod': | ||
| return { | ||
| value: date.hour >= 12 ? 12 : 0, | ||
| minValue: 0, | ||
| maxValue: 12 | ||
| }; | ||
| case 'hour': | ||
| if (options.hour12) { | ||
| let isPM = date.hour >= 12; | ||
| return { | ||
| value: date.hour, | ||
| minValue: isPM ? 12 : 0, | ||
| maxValue: isPM ? 23 : 11 | ||
| }; | ||
| } | ||
| return { | ||
| value: date.hour, | ||
| minValue: 0, | ||
| maxValue: 23 | ||
| }; | ||
| case 'minute': | ||
| return { | ||
| value: date.minute, | ||
| minValue: 0, | ||
| maxValue: 59 | ||
| }; | ||
| case 'second': | ||
| return { | ||
| value: date.second, | ||
| minValue: 0, | ||
| maxValue: 59 | ||
| }; | ||
| } | ||
| return { | ||
| }; | ||
| } | ||
| function $596a1f0f523d6752$var$addSegment(value, part, amount, options) { | ||
| switch(part){ | ||
| case 'era': | ||
| case 'year': | ||
| case 'month': | ||
| case 'day': | ||
| return value.cycle(part, amount, { | ||
| round: part === 'year' | ||
| }); | ||
| } | ||
| if ('hour' in value) switch(part){ | ||
| case 'dayPeriod': | ||
| { | ||
| let hours = value.hour; | ||
| let isPM = hours >= 12; | ||
| return value.set({ | ||
| hour: isPM ? hours - 12 : hours + 12 | ||
| }); | ||
| } | ||
| case 'hour': | ||
| case 'minute': | ||
| case 'second': | ||
| return value.cycle(part, amount, { | ||
| round: part !== 'hour', | ||
| hourCycle: options.hour12 ? 12 : 24 | ||
| }); | ||
| } | ||
| } | ||
| function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) { | ||
| switch(part){ | ||
| case 'day': | ||
| case 'month': | ||
| case 'year': | ||
| return value.set({ | ||
| [part]: segmentValue | ||
| }); | ||
| } | ||
| if ('hour' in value) switch(part){ | ||
| case 'dayPeriod': | ||
| { | ||
| let hours = value.hour; | ||
| let wasPM = hours >= 12; | ||
| let isPM = segmentValue >= 12; | ||
| if (isPM === wasPM) return value; | ||
| return value.set({ | ||
| hour: wasPM ? hours - 12 : hours + 12 | ||
| }); | ||
| } | ||
| case 'hour': | ||
| // In 12 hour time, ensure that AM/PM does not change | ||
| if (options.hour12) { | ||
| let hours = value.hour; | ||
| let wasPM = hours >= 12; | ||
| if (!wasPM && segmentValue === 12) segmentValue = 0; | ||
| if (wasPM && segmentValue < 12) segmentValue += 12; | ||
| } | ||
| // fallthrough | ||
| case 'minute': | ||
| case 'second': | ||
| return value.set({ | ||
| [part]: segmentValue | ||
| }); | ||
| } | ||
| } | ||
| var $7072d26f58deb33b$exports = {}; | ||
| $parcel$export($7072d26f58deb33b$exports, "useDateRangePickerState", () => $7072d26f58deb33b$export$e50a61c1de9f574); | ||
| function $7072d26f58deb33b$export$e50a61c1de9f574(props) { | ||
| var ref, ref1; | ||
| let [isOpen1, setOpen] = $h2qOe$react.useState(false); | ||
| let [controlledValue, setControlledValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange); | ||
| let [placeholderValue, setPlaceholderValue] = $h2qOe$react.useState(()=>controlledValue || { | ||
| start: null, | ||
| end: null | ||
| } | ||
| ); | ||
| // Reset the placeholder if the value prop is set to null. | ||
| if (controlledValue == null && placeholderValue.start && placeholderValue.end) { | ||
| placeholderValue = { | ||
| start: null, | ||
| end: null | ||
| }; | ||
| setPlaceholderValue(placeholderValue); | ||
| } | ||
| let value1 = controlledValue || placeholderValue; | ||
| let valueRef = $h2qOe$react.useRef(value1); | ||
| valueRef.current = value1; | ||
| let setValue = (value)=>{ | ||
| valueRef.current = value; | ||
| setPlaceholderValue(value); | ||
| if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value); | ||
| else setControlledValue(null); | ||
| }; | ||
| let v = (value1 === null || value1 === void 0 ? void 0 : value1.start) || (value1 === null || value1 === void 0 ? void 0 : value1.end) || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity); | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| var _shouldCloseOnSelect; | ||
| let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true; | ||
| let [dateRange1, setSelectedDateRange] = $h2qOe$react.useState(null); | ||
| let [timeRange1, setSelectedTimeRange] = $h2qOe$react.useState(null); | ||
| if (value1 && value1.start && value1.end) { | ||
| dateRange1 = value1; | ||
| if ('hour' in value1.start) timeRange1 = value1; | ||
| } | ||
| let commitValue = (dateRange, timeRange)=>{ | ||
| setValue({ | ||
| start: 'timeZone' in timeRange.start ? timeRange.start.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.start)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.start, timeRange.start), | ||
| end: 'timeZone' in timeRange.end ? timeRange.end.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.end)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.end, timeRange.end) | ||
| }); | ||
| }; | ||
| // Intercept setValue to make sure the Time section is not changed by date selection in Calendar | ||
| let setDateRange = (range)=>{ | ||
| let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect; | ||
| if (hasTime) { | ||
| if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, { | ||
| start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue), | ||
| end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue) | ||
| }); | ||
| else setSelectedDateRange(range); | ||
| } else if (range.start && range.end) setValue(range); | ||
| else setSelectedDateRange(range); | ||
| if (shouldClose) setOpen(false); | ||
| }; | ||
| let setTimeRange = (range)=>{ | ||
| if ((dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && range.start && range.end) commitValue(dateRange1, range); | ||
| else setSelectedTimeRange(range); | ||
| }; | ||
| let validationState = props.validationState || (value1 != null && ($50d5d6a623389320$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $50d5d6a623389320$export$eac50920cf2fd59a(value1.end, props.minValue, props.maxValue) || value1.end != null && value1.start != null && value1.end.compare(value1.start) < 0 || (value1 === null || value1 === void 0 ? void 0 : value1.start) && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value1.start)) || (value1 === null || value1 === void 0 ? void 0 : value1.end) && ((ref1 = props.isDateUnavailable) === null || ref1 === void 0 ? void 0 : ref1.call(props, value1.end))) ? 'invalid' : null); | ||
| return { | ||
| value: value1, | ||
| setValue: setValue, | ||
| dateRange: dateRange1, | ||
| timeRange: timeRange1, | ||
| granularity: granularity, | ||
| hasTime: hasTime, | ||
| setDate (part, date) { | ||
| setDateRange({ | ||
| ...dateRange1, | ||
| [part]: date | ||
| }); | ||
| }, | ||
| setTime (part, time) { | ||
| setTimeRange({ | ||
| ...timeRange1, | ||
| [part]: time | ||
| }); | ||
| }, | ||
| setDateTime (part, dateTime) { | ||
| setValue({ | ||
| ...value1, | ||
| [part]: dateTime | ||
| }); | ||
| }, | ||
| setDateRange: setDateRange, | ||
| setTimeRange: setTimeRange, | ||
| isOpen: isOpen1, | ||
| setOpen (isOpen) { | ||
| // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| // If only the time range was set and not the date range, don't commit. The state will be preserved until | ||
| // the user opens the popover again. | ||
| if (!isOpen && !((value1 === null || value1 === void 0 ? void 0 : value1.start) && (value1 === null || value1 === void 0 ? void 0 : value1.end)) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && hasTime) commitValue(dateRange1, { | ||
| start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue), | ||
| end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue) | ||
| }); | ||
| setOpen(isOpen); | ||
| }, | ||
| validationState: validationState, | ||
| formatValue (locale, fieldOptions) { | ||
| if (!value1 || !value1.start || !value1.end) return ''; | ||
| let startTimeZone = 'timeZone' in value1.start ? value1.start.timeZone : undefined; | ||
| let startGranularity = props.granularity || (value1.start && 'minute' in value1.start ? 'minute' : 'day'); | ||
| let endTimeZone = 'timeZone' in value1.end ? value1.end.timeZone : undefined; | ||
| let endGranularity = props.granularity || (value1.end && 'minute' in value1.end ? 'minute' : 'day'); | ||
| let startOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: startGranularity, | ||
| timeZone: startTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| let startFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, startOptions); | ||
| let endFormatter; | ||
| if (startTimeZone === endTimeZone && startGranularity === endGranularity) { | ||
| // Use formatRange, as it results in shorter output when some of the fields | ||
| // are shared between the start and end dates (e.g. the same month). | ||
| // Formatting will fail if the end date is before the start date. Fall back below when that happens. | ||
| try { | ||
| return startFormatter.formatRange(value1.start.toDate(startTimeZone), value1.end.toDate(endTimeZone)); | ||
| } catch (e) { | ||
| // ignore | ||
| } | ||
| endFormatter = startFormatter; | ||
| } else { | ||
| let endOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: endGranularity, | ||
| timeZone: endTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| endFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, endOptions); | ||
| } | ||
| return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`; | ||
| }, | ||
| confirmPlaceholder () { | ||
| // Need to use ref value here because the value can be set in the same tick as | ||
| // a blur, which means the component won't have re-rendered yet. | ||
| let value = valueRef.current; | ||
| if (value && Boolean(value.start) !== Boolean(value.end)) { | ||
| let calendar = (value.start || value.end).calendar; | ||
| let placeholder = $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone); | ||
| setValue({ | ||
| start: value.start || placeholder, | ||
| end: value.end || placeholder | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var $2654e87be0231a69$exports = {}; | ||
| $parcel$export($2654e87be0231a69$exports, "useTimeFieldState", () => $2654e87be0231a69$export$fd53cef0cc796101); | ||
| function $2654e87be0231a69$export$fd53cef0cc796101(props) { | ||
| let { placeholderValue: placeholderValue = new $h2qOe$internationalizeddate.Time() , minValue: minValue , maxValue: maxValue , granularity: granularity } = props; | ||
| let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange); | ||
| let v = value || placeholderValue; | ||
| let day = v && 'day' in v ? v : undefined; | ||
| let placeholderDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(placeholderValue) | ||
| , [ | ||
| placeholderValue | ||
| ]); | ||
| let minDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(minValue, day) | ||
| , [ | ||
| minValue, | ||
| day | ||
| ]); | ||
| let maxDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(maxValue, day) | ||
| , [ | ||
| maxValue, | ||
| day | ||
| ]); | ||
| let dateTime = $h2qOe$react.useMemo(()=>value == null ? null : $2654e87be0231a69$var$convertValue(value) | ||
| , [ | ||
| value | ||
| ]); | ||
| let onChange = (newValue)=>{ | ||
| setValue(v && 'day' in v ? newValue : newValue && $h2qOe$internationalizeddate.toTime(newValue)); | ||
| }; | ||
| return $596a1f0f523d6752$export$60e84778edff6d26({ | ||
| ...props, | ||
| value: dateTime, | ||
| defaultValue: undefined, | ||
| minValue: minDate, | ||
| maxValue: maxDate, | ||
| onChange: onChange, | ||
| granularity: granularity || 'minute', | ||
| maxGranularity: 'hour', | ||
| placeholderValue: placeholderDate, | ||
| // Calendar should not matter for time fields. | ||
| createCalendar: ()=>new $h2qOe$internationalizeddate.GregorianCalendar() | ||
| }); | ||
| } | ||
| function $2654e87be0231a69$var$convertValue(value, date = $h2qOe$internationalizeddate.today($h2qOe$internationalizeddate.getLocalTimeZone())) { | ||
| if (!value) return null; | ||
| if ('day' in value) return value; | ||
| return $h2qOe$internationalizeddate.toCalendarDateTime(date, value); | ||
| } | ||
| $parcel$exportWildcard(module.exports, $aaab7a647e17e1fd$exports); | ||
| $parcel$exportWildcard(module.exports, $596a1f0f523d6752$exports); | ||
| $parcel$exportWildcard(module.exports, $7072d26f58deb33b$exports); | ||
| $parcel$exportWildcard(module.exports, $2654e87be0231a69$exports); | ||
| //# sourceMappingURL=main.js.map |
@@ -1,758 +0,23 @@ | ||
| import {toCalendarDate as $7UzoM$toCalendarDate, toCalendarDateTime as $7UzoM$toCalendarDateTime, DateFormatter as $7UzoM$DateFormatter, Time as $7UzoM$Time, toCalendar as $7UzoM$toCalendar, now as $7UzoM$now, GregorianCalendar as $7UzoM$GregorianCalendar, getMinimumMonthInYear as $7UzoM$getMinimumMonthInYear, getMinimumDayInMonth as $7UzoM$getMinimumDayInMonth, toTime as $7UzoM$toTime, today as $7UzoM$today, getLocalTimeZone as $7UzoM$getLocalTimeZone} from "@internationalized/date"; | ||
| import {useControlledState as $7UzoM$useControlledState} from "@react-stately/utils"; | ||
| import {useState as $7UzoM$useState, useRef as $7UzoM$useRef, useMemo as $7UzoM$useMemo, useEffect as $7UzoM$useEffect} from "react"; | ||
| import {useDatePickerState as $ab5bf3f618090389$export$87194bb378cc3ac2} from "./useDatePickerState.module.js"; | ||
| import {useDateFieldState as $3c0fc76039f1c516$export$60e84778edff6d26} from "./useDateFieldState.module.js"; | ||
| import {useDateRangePickerState as $93c38a5e28be6249$export$e50a61c1de9f574} from "./useDateRangePickerState.module.js"; | ||
| import {useTimeFieldState as $eff5d8ee529ac4bb$export$fd53cef0cc796101} from "./useTimeFieldState.module.js"; | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $ab5bf3f618090389$exports = {}; | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| $parcel$export($ab5bf3f618090389$exports, "useDatePickerState", () => $ab5bf3f618090389$export$87194bb378cc3ac2); | ||
| function $35a22f14a1f04b11$export$eac50920cf2fd59a(value, minValue, maxValue) { | ||
| return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0); | ||
| } | ||
| const $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS = { | ||
| year: 'numeric', | ||
| month: 'numeric', | ||
| day: 'numeric', | ||
| hour: 'numeric', | ||
| minute: '2-digit', | ||
| second: '2-digit' | ||
| }; | ||
| function $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, options) { | ||
| fieldOptions = { | ||
| ...$35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS, | ||
| ...fieldOptions | ||
| }; | ||
| let granularity = options.granularity || 'minute'; | ||
| let keys = Object.keys(fieldOptions); | ||
| var _maxGranularity; | ||
| let startIdx = keys.indexOf((_maxGranularity = options.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year'); | ||
| if (startIdx < 0) startIdx = 0; | ||
| let endIdx = keys.indexOf(granularity); | ||
| if (endIdx < 0) endIdx = 2; | ||
| if (startIdx > endIdx) throw new Error('maxGranularity must be greater than granularity'); | ||
| let opts1 = keys.slice(startIdx, endIdx + 1).reduce((opts, key)=>{ | ||
| opts[key] = fieldOptions[key]; | ||
| return opts; | ||
| }, { | ||
| }); | ||
| if (options.hourCycle != null) opts1.hour12 = options.hourCycle === 12; | ||
| opts1.timeZone = options.timeZone || 'UTC'; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second'; | ||
| if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short'; | ||
| return opts1; | ||
| } | ||
| function $35a22f14a1f04b11$export$c5221a78ef73c5e9(placeholderValue) { | ||
| if (placeholderValue && 'hour' in placeholderValue) return placeholderValue; | ||
| return new $7UzoM$Time(); | ||
| } | ||
| function $35a22f14a1f04b11$export$61a490a80c552550(value, calendar) { | ||
| if (value === null) return null; | ||
| if (!value) return undefined; | ||
| return $7UzoM$toCalendar(value, calendar); | ||
| } | ||
| function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) { | ||
| if (placeholderValue) return $35a22f14a1f04b11$export$61a490a80c552550(placeholderValue, calendar); | ||
| let date = $7UzoM$toCalendar($7UzoM$now(timeZone).set({ | ||
| hour: 0, | ||
| minute: 0, | ||
| second: 0, | ||
| millisecond: 0 | ||
| }), calendar); | ||
| if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $7UzoM$toCalendarDate(date); | ||
| if (!timeZone) return $7UzoM$toCalendarDateTime(date); | ||
| return date; | ||
| } | ||
| function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) { | ||
| // Compute default granularity and time zone from the value. If the value becomes null, keep the last values. | ||
| let lastValue = $7UzoM$useRef(v); | ||
| if (v) lastValue.current = v; | ||
| v = lastValue.current; | ||
| let defaultTimeZone = v && 'timeZone' in v ? v.timeZone : undefined; | ||
| granularity = granularity || (v && 'minute' in v ? 'minute' : 'day'); | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString()); | ||
| return [ | ||
| granularity, | ||
| defaultTimeZone | ||
| ]; | ||
| } | ||
| function $ab5bf3f618090389$export$87194bb378cc3ac2(props) { | ||
| var ref; | ||
| let [isOpen1, setOpen] = $7UzoM$useState(false); | ||
| let [value, setValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange); | ||
| let v = value || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity); | ||
| let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| var _shouldCloseOnSelect; | ||
| let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true; | ||
| let [selectedDate, setSelectedDate] = $7UzoM$useState(null); | ||
| let [selectedTime, setSelectedTime] = $7UzoM$useState(null); | ||
| if (value) { | ||
| selectedDate = value; | ||
| if ('hour' in value) selectedTime = value; | ||
| } | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v && !(granularity in v)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString()); | ||
| let commitValue = (date, time)=>{ | ||
| setValue('timeZone' in time ? time.set($7UzoM$toCalendarDate(date)) : $7UzoM$toCalendarDateTime(date, time)); | ||
| }; | ||
| // Intercept setValue to make sure the Time section is not changed by date selection in Calendar | ||
| let selectDate = (newValue)=>{ | ||
| let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect; | ||
| if (hasTime) { | ||
| if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue)); | ||
| else setSelectedDate(newValue); | ||
| } else setValue(newValue); | ||
| if (shouldClose) setOpen(false); | ||
| }; | ||
| let selectTime = (newValue)=>{ | ||
| if (selectedDate) commitValue(selectedDate, newValue); | ||
| else setSelectedTime(newValue); | ||
| }; | ||
| let validationState = props.validationState || ($35a22f14a1f04b11$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null) || (value && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value)) ? 'invalid' : null); | ||
| return { | ||
| value: value, | ||
| setValue: setValue, | ||
| dateValue: selectedDate, | ||
| timeValue: selectedTime, | ||
| setDateValue: selectDate, | ||
| setTimeValue: selectTime, | ||
| granularity: granularity, | ||
| hasTime: hasTime, | ||
| isOpen: isOpen1, | ||
| setOpen (isOpen) { | ||
| // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| // If only the time was set and not the date, don't commit. The state will be preserved until | ||
| // the user opens the popover again. | ||
| if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue)); | ||
| setOpen(isOpen); | ||
| }, | ||
| validationState: validationState, | ||
| formatValue (locale, fieldOptions) { | ||
| if (!dateValue) return ''; | ||
| let formatOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: granularity, | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| let formatter = new $7UzoM$DateFormatter(locale, formatOptions); | ||
| return formatter.format(dateValue); | ||
| } | ||
| }; | ||
| } | ||
| var $3c0fc76039f1c516$exports = {}; | ||
| $parcel$export($3c0fc76039f1c516$exports, "useDateFieldState", () => $3c0fc76039f1c516$export$60e84778edff6d26); | ||
| const $3c0fc76039f1c516$var$EDITABLE_SEGMENTS = { | ||
| year: true, | ||
| month: true, | ||
| day: true, | ||
| hour: true, | ||
| minute: true, | ||
| second: true, | ||
| dayPeriod: true, | ||
| era: true | ||
| }; | ||
| const $3c0fc76039f1c516$var$PAGE_STEP = { | ||
| year: 5, | ||
| month: 2, | ||
| day: 7, | ||
| hour: 2, | ||
| minute: 15, | ||
| second: 15 | ||
| }; | ||
| // Node seems to convert everything to lowercase... | ||
| const $3c0fc76039f1c516$var$TYPE_MAPPING = { | ||
| dayperiod: 'dayPeriod' | ||
| }; | ||
| function $3c0fc76039f1c516$export$60e84778edff6d26(props) { | ||
| let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired } = props; | ||
| let v1 = props.value || props.defaultValue || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v1, props.granularity); | ||
| let timeZone = defaultTimeZone || 'UTC'; | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v1 && !(granularity in v1)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v1.toString()); | ||
| var _maxGranularity; | ||
| let formatOpts = $7UzoM$useMemo(()=>({ | ||
| granularity: granularity, | ||
| maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year', | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }) | ||
| , [ | ||
| props.maxGranularity, | ||
| granularity, | ||
| props.hourCycle, | ||
| defaultTimeZone, | ||
| hideTimeZone | ||
| ]); | ||
| let opts = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$7e319ea407e63bc0({ | ||
| }, formatOpts) | ||
| , [ | ||
| formatOpts | ||
| ]); | ||
| let dateFormatter = $7UzoM$useMemo(()=>new $7UzoM$DateFormatter(locale, opts) | ||
| , [ | ||
| locale, | ||
| opts | ||
| ]); | ||
| let resolvedOptions = $7UzoM$useMemo(()=>dateFormatter.resolvedOptions() | ||
| , [ | ||
| dateFormatter | ||
| ]); | ||
| let calendar = $7UzoM$useMemo(()=>createCalendar(resolvedOptions.calendar) | ||
| , [ | ||
| createCalendar, | ||
| resolvedOptions.calendar | ||
| ]); | ||
| // Determine how many editable segments there are for validation purposes. | ||
| // The result is cached for performance. | ||
| let allSegments = $7UzoM$useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$3c0fc76039f1c516$var$EDITABLE_SEGMENTS[seg.type] | ||
| ).reduce((p, seg)=>(p[seg.type] = true, p) | ||
| , { | ||
| }) | ||
| , [ | ||
| dateFormatter | ||
| ]); | ||
| let [validSegments, setValidSegments] = $7UzoM$useState(()=>props.value || props.defaultValue ? { | ||
| ...allSegments | ||
| } : { | ||
| } | ||
| ); | ||
| // We keep track of the placeholder date separately in state so that onChange is not called | ||
| // until all segments are set. If the value === null (not undefined), then assume the component | ||
| // is controlled, so use the placeholder as the value until all segments are entered so it doesn't | ||
| // change from uncontrolled to controlled and emit a warning. | ||
| let [placeholderDate, setPlaceholderDate] = $7UzoM$useState(()=>$35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| // Reset placeholder when calendar changes | ||
| let lastCalendarIdentifier = $7UzoM$useRef(calendar.identifier); | ||
| $7UzoM$useEffect(()=>{ | ||
| if (calendar.identifier !== lastCalendarIdentifier.current) { | ||
| lastCalendarIdentifier.current = calendar.identifier; | ||
| setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $7UzoM$toCalendar(placeholder, calendar) : $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| } | ||
| }, [ | ||
| calendar, | ||
| granularity, | ||
| validSegments, | ||
| defaultTimeZone, | ||
| props.placeholderValue | ||
| ]); | ||
| let [value1, setDate] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange); | ||
| let calendarValue = $7UzoM$useMemo(()=>$35a22f14a1f04b11$export$61a490a80c552550(value1, calendar) | ||
| , [ | ||
| value1, | ||
| calendar | ||
| ]); | ||
| // If there is a value prop, and some segments were previously placeholders, mark them all as valid. | ||
| if (value1 && Object.keys(validSegments).length < Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| ...allSegments | ||
| }; | ||
| setValidSegments(validSegments); | ||
| } | ||
| // If the value is set to null and all segments are valid, reset the placeholder. | ||
| if (value1 == null && Object.keys(validSegments).length === Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| }; | ||
| setValidSegments(validSegments); | ||
| setPlaceholderDate($35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)); | ||
| } | ||
| // If all segments are valid, use the date from state, otherwise use the placeholder date. | ||
| let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate; | ||
| let setValue = (newValue)=>{ | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| if (Object.keys(validSegments).length >= Object.keys(allSegments).length) { | ||
| // The display calendar should not have any effect on the emitted value. | ||
| // Emit dates in the same calendar as the original value, if any, otherwise gregorian. | ||
| newValue = $7UzoM$toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $7UzoM$GregorianCalendar()); | ||
| setDate(newValue); | ||
| } else setPlaceholderDate(newValue); | ||
| }; | ||
| let dateValue = $7UzoM$useMemo(()=>displayValue.toDate(timeZone) | ||
| , [ | ||
| displayValue, | ||
| timeZone | ||
| ]); | ||
| let segments = $7UzoM$useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{ | ||
| let isEditable = $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type]; | ||
| if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false; | ||
| return { | ||
| type: $3c0fc76039f1c516$var$TYPE_MAPPING[segment.type] || segment.type, | ||
| text: segment.value, | ||
| ...$3c0fc76039f1c516$var$getSegmentLimits(displayValue, segment.type, resolvedOptions), | ||
| isPlaceholder: $3c0fc76039f1c516$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type], | ||
| isEditable: isEditable | ||
| }; | ||
| }) | ||
| , [ | ||
| dateValue, | ||
| validSegments, | ||
| dateFormatter, | ||
| resolvedOptions, | ||
| displayValue, | ||
| calendar | ||
| ]); | ||
| let hasEra = $7UzoM$useMemo(()=>segments.some((s)=>s.type === 'era' | ||
| ) | ||
| , [ | ||
| segments | ||
| ]); | ||
| let markValid = (part)=>{ | ||
| validSegments[part] = true; | ||
| if (part === 'year' && hasEra) validSegments.era = true; | ||
| setValidSegments({ | ||
| ...validSegments | ||
| }); | ||
| }; | ||
| let adjustSegment = (type, amount)=>{ | ||
| markValid(type); | ||
| setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions)); | ||
| }; | ||
| let validationState = props.validationState || ($35a22f14a1f04b11$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null); | ||
| return { | ||
| value: calendarValue, | ||
| dateValue: dateValue, | ||
| setValue: setValue, | ||
| segments: segments, | ||
| dateFormatter: dateFormatter, | ||
| validationState: validationState, | ||
| granularity: granularity, | ||
| isDisabled: isDisabled, | ||
| isReadOnly: isReadOnly, | ||
| isRequired: isRequired, | ||
| increment (part) { | ||
| adjustSegment(part, 1); | ||
| }, | ||
| decrement (part) { | ||
| adjustSegment(part, -1); | ||
| }, | ||
| incrementPage (part) { | ||
| adjustSegment(part, $3c0fc76039f1c516$var$PAGE_STEP[part] || 1); | ||
| }, | ||
| decrementPage (part) { | ||
| adjustSegment(part, -($3c0fc76039f1c516$var$PAGE_STEP[part] || 1)); | ||
| }, | ||
| setSegment (part, v) { | ||
| markValid(part); | ||
| setValue($3c0fc76039f1c516$var$setSegment(displayValue, part, v, resolvedOptions)); | ||
| }, | ||
| confirmPlaceholder (part) { | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| if (!part) { | ||
| // Confirm the rest of the placeholder if any of the segments are valid. | ||
| let numValid = Object.keys(validSegments).length; | ||
| if (numValid > 0 && numValid < Object.keys(allSegments).length) { | ||
| validSegments = { | ||
| ...allSegments | ||
| }; | ||
| setValidSegments(validSegments); | ||
| setValue(displayValue.copy()); | ||
| } | ||
| } else if (!validSegments[part]) { | ||
| markValid(part); | ||
| setValue(displayValue.copy()); | ||
| } | ||
| }, | ||
| clearSegment (part) { | ||
| delete validSegments[part]; | ||
| setValidSegments({ | ||
| ...validSegments | ||
| }); | ||
| let placeholder = $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone); | ||
| let value = displayValue; | ||
| // Reset day period to default without changing the hour. | ||
| if (part === 'dayPeriod' && 'hour' in displayValue && 'hour' in placeholder) { | ||
| let isPM = displayValue.hour >= 12; | ||
| let shouldBePM = placeholder.hour >= 12; | ||
| if (isPM && !shouldBePM) value = displayValue.set({ | ||
| hour: displayValue.hour - 12 | ||
| }); | ||
| else if (!isPM && shouldBePM) value = displayValue.set({ | ||
| hour: displayValue.hour + 12 | ||
| }); | ||
| } else if (part in displayValue) value = displayValue.set({ | ||
| [part]: placeholder[part] | ||
| }); | ||
| setDate(null); | ||
| setValue(value); | ||
| }, | ||
| formatValue (fieldOptions) { | ||
| if (!calendarValue) return ''; | ||
| let formatOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, formatOpts); | ||
| let formatter = new $7UzoM$DateFormatter(locale, formatOptions); | ||
| return formatter.format(dateValue); | ||
| } | ||
| }; | ||
| } | ||
| function $3c0fc76039f1c516$var$getSegmentLimits(date, type, options) { | ||
| switch(type){ | ||
| case 'era': | ||
| { | ||
| let eras = date.calendar.getEras(); | ||
| return { | ||
| value: eras.indexOf(date.era), | ||
| minValue: 0, | ||
| maxValue: eras.length - 1 | ||
| }; | ||
| } | ||
| case 'year': | ||
| return { | ||
| value: date.year, | ||
| minValue: 1, | ||
| maxValue: date.calendar.getYearsInEra(date) | ||
| }; | ||
| case 'month': | ||
| return { | ||
| value: date.month, | ||
| minValue: $7UzoM$getMinimumMonthInYear(date), | ||
| maxValue: date.calendar.getMonthsInYear(date) | ||
| }; | ||
| case 'day': | ||
| return { | ||
| value: date.day, | ||
| minValue: $7UzoM$getMinimumDayInMonth(date), | ||
| maxValue: date.calendar.getDaysInMonth(date) | ||
| }; | ||
| } | ||
| if ('hour' in date) switch(type){ | ||
| case 'dayPeriod': | ||
| return { | ||
| value: date.hour >= 12 ? 12 : 0, | ||
| minValue: 0, | ||
| maxValue: 12 | ||
| }; | ||
| case 'hour': | ||
| if (options.hour12) { | ||
| let isPM = date.hour >= 12; | ||
| return { | ||
| value: date.hour, | ||
| minValue: isPM ? 12 : 0, | ||
| maxValue: isPM ? 23 : 11 | ||
| }; | ||
| } | ||
| return { | ||
| value: date.hour, | ||
| minValue: 0, | ||
| maxValue: 23 | ||
| }; | ||
| case 'minute': | ||
| return { | ||
| value: date.minute, | ||
| minValue: 0, | ||
| maxValue: 59 | ||
| }; | ||
| case 'second': | ||
| return { | ||
| value: date.second, | ||
| minValue: 0, | ||
| maxValue: 59 | ||
| }; | ||
| } | ||
| return { | ||
| }; | ||
| } | ||
| function $3c0fc76039f1c516$var$addSegment(value, part, amount, options) { | ||
| switch(part){ | ||
| case 'era': | ||
| case 'year': | ||
| case 'month': | ||
| case 'day': | ||
| return value.cycle(part, amount, { | ||
| round: part === 'year' | ||
| }); | ||
| } | ||
| if ('hour' in value) switch(part){ | ||
| case 'dayPeriod': | ||
| { | ||
| let hours = value.hour; | ||
| let isPM = hours >= 12; | ||
| return value.set({ | ||
| hour: isPM ? hours - 12 : hours + 12 | ||
| }); | ||
| } | ||
| case 'hour': | ||
| case 'minute': | ||
| case 'second': | ||
| return value.cycle(part, amount, { | ||
| round: part !== 'hour', | ||
| hourCycle: options.hour12 ? 12 : 24 | ||
| }); | ||
| } | ||
| } | ||
| function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) { | ||
| switch(part){ | ||
| case 'day': | ||
| case 'month': | ||
| case 'year': | ||
| return value.set({ | ||
| [part]: segmentValue | ||
| }); | ||
| } | ||
| if ('hour' in value) switch(part){ | ||
| case 'dayPeriod': | ||
| { | ||
| let hours = value.hour; | ||
| let wasPM = hours >= 12; | ||
| let isPM = segmentValue >= 12; | ||
| if (isPM === wasPM) return value; | ||
| return value.set({ | ||
| hour: wasPM ? hours - 12 : hours + 12 | ||
| }); | ||
| } | ||
| case 'hour': | ||
| // In 12 hour time, ensure that AM/PM does not change | ||
| if (options.hour12) { | ||
| let hours = value.hour; | ||
| let wasPM = hours >= 12; | ||
| if (!wasPM && segmentValue === 12) segmentValue = 0; | ||
| if (wasPM && segmentValue < 12) segmentValue += 12; | ||
| } | ||
| // fallthrough | ||
| case 'minute': | ||
| case 'second': | ||
| return value.set({ | ||
| [part]: segmentValue | ||
| }); | ||
| } | ||
| } | ||
| var $93c38a5e28be6249$exports = {}; | ||
| $parcel$export($93c38a5e28be6249$exports, "useDateRangePickerState", () => $93c38a5e28be6249$export$e50a61c1de9f574); | ||
| function $93c38a5e28be6249$export$e50a61c1de9f574(props) { | ||
| var ref, ref1; | ||
| let [isOpen1, setOpen] = $7UzoM$useState(false); | ||
| let [controlledValue, setControlledValue] = $7UzoM$useControlledState(props.value, props.defaultValue || null, props.onChange); | ||
| let [placeholderValue, setPlaceholderValue] = $7UzoM$useState(()=>controlledValue || { | ||
| start: null, | ||
| end: null | ||
| } | ||
| ); | ||
| // Reset the placeholder if the value prop is set to null. | ||
| if (controlledValue == null && placeholderValue.start && placeholderValue.end) { | ||
| placeholderValue = { | ||
| start: null, | ||
| end: null | ||
| }; | ||
| setPlaceholderValue(placeholderValue); | ||
| } | ||
| let value1 = controlledValue || placeholderValue; | ||
| let valueRef = $7UzoM$useRef(value1); | ||
| valueRef.current = value1; | ||
| let setValue = (value)=>{ | ||
| valueRef.current = value; | ||
| setPlaceholderValue(value); | ||
| if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value); | ||
| else setControlledValue(null); | ||
| }; | ||
| let v = (value1 === null || value1 === void 0 ? void 0 : value1.start) || (value1 === null || value1 === void 0 ? void 0 : value1.end) || props.placeholderValue; | ||
| let [granularity, defaultTimeZone] = $35a22f14a1f04b11$export$2440da353cedad43(v, props.granularity); | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| var _shouldCloseOnSelect; | ||
| let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true; | ||
| let [dateRange1, setSelectedDateRange] = $7UzoM$useState(null); | ||
| let [timeRange1, setSelectedTimeRange] = $7UzoM$useState(null); | ||
| if (value1 && value1.start && value1.end) { | ||
| dateRange1 = value1; | ||
| if ('hour' in value1.start) timeRange1 = value1; | ||
| } | ||
| let commitValue = (dateRange, timeRange)=>{ | ||
| setValue({ | ||
| start: 'timeZone' in timeRange.start ? timeRange.start.set($7UzoM$toCalendarDate(dateRange.start)) : $7UzoM$toCalendarDateTime(dateRange.start, timeRange.start), | ||
| end: 'timeZone' in timeRange.end ? timeRange.end.set($7UzoM$toCalendarDate(dateRange.end)) : $7UzoM$toCalendarDateTime(dateRange.end, timeRange.end) | ||
| }); | ||
| }; | ||
| // Intercept setValue to make sure the Time section is not changed by date selection in Calendar | ||
| let setDateRange = (range)=>{ | ||
| let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect; | ||
| if (hasTime) { | ||
| if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, { | ||
| start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue), | ||
| end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue) | ||
| }); | ||
| else setSelectedDateRange(range); | ||
| } else if (range.start && range.end) setValue(range); | ||
| else setSelectedDateRange(range); | ||
| if (shouldClose) setOpen(false); | ||
| }; | ||
| let setTimeRange = (range)=>{ | ||
| if ((dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && range.start && range.end) commitValue(dateRange1, range); | ||
| else setSelectedTimeRange(range); | ||
| }; | ||
| let validationState = props.validationState || (value1 != null && ($35a22f14a1f04b11$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $35a22f14a1f04b11$export$eac50920cf2fd59a(value1.end, props.minValue, props.maxValue) || value1.end != null && value1.start != null && value1.end.compare(value1.start) < 0 || (value1 === null || value1 === void 0 ? void 0 : value1.start) && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value1.start)) || (value1 === null || value1 === void 0 ? void 0 : value1.end) && ((ref1 = props.isDateUnavailable) === null || ref1 === void 0 ? void 0 : ref1.call(props, value1.end))) ? 'invalid' : null); | ||
| return { | ||
| value: value1, | ||
| setValue: setValue, | ||
| dateRange: dateRange1, | ||
| timeRange: timeRange1, | ||
| granularity: granularity, | ||
| hasTime: hasTime, | ||
| setDate (part, date) { | ||
| setDateRange({ | ||
| ...dateRange1, | ||
| [part]: date | ||
| }); | ||
| }, | ||
| setTime (part, time) { | ||
| setTimeRange({ | ||
| ...timeRange1, | ||
| [part]: time | ||
| }); | ||
| }, | ||
| setDateTime (part, dateTime) { | ||
| setValue({ | ||
| ...value1, | ||
| [part]: dateTime | ||
| }); | ||
| }, | ||
| setDateRange: setDateRange, | ||
| setTimeRange: setTimeRange, | ||
| isOpen: isOpen1, | ||
| setOpen (isOpen) { | ||
| // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| // If only the time range was set and not the date range, don't commit. The state will be preserved until | ||
| // the user opens the popover again. | ||
| if (!isOpen && !((value1 === null || value1 === void 0 ? void 0 : value1.start) && (value1 === null || value1 === void 0 ? void 0 : value1.end)) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && hasTime) commitValue(dateRange1, { | ||
| start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue), | ||
| end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $35a22f14a1f04b11$export$c5221a78ef73c5e9(props.placeholderValue) | ||
| }); | ||
| setOpen(isOpen); | ||
| }, | ||
| validationState: validationState, | ||
| formatValue (locale, fieldOptions) { | ||
| if (!value1 || !value1.start || !value1.end) return ''; | ||
| let startTimeZone = 'timeZone' in value1.start ? value1.start.timeZone : undefined; | ||
| let startGranularity = props.granularity || (value1.start && 'minute' in value1.start ? 'minute' : 'day'); | ||
| let endTimeZone = 'timeZone' in value1.end ? value1.end.timeZone : undefined; | ||
| let endGranularity = props.granularity || (value1.end && 'minute' in value1.end ? 'minute' : 'day'); | ||
| let startOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: startGranularity, | ||
| timeZone: startTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| let startFormatter = new $7UzoM$DateFormatter(locale, startOptions); | ||
| let endFormatter; | ||
| if (startTimeZone === endTimeZone && startGranularity === endGranularity) { | ||
| // Use formatRange, as it results in shorter output when some of the fields | ||
| // are shared between the start and end dates (e.g. the same month). | ||
| // Formatting will fail if the end date is before the start date. Fall back below when that happens. | ||
| try { | ||
| return startFormatter.formatRange(value1.start.toDate(startTimeZone), value1.end.toDate(endTimeZone)); | ||
| } catch (e) { | ||
| // ignore | ||
| } | ||
| endFormatter = startFormatter; | ||
| } else { | ||
| let endOptions = $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, { | ||
| granularity: endGranularity, | ||
| timeZone: endTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| endFormatter = new $7UzoM$DateFormatter(locale, endOptions); | ||
| } | ||
| return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.end.toDate(endTimeZone))}`; | ||
| }, | ||
| confirmPlaceholder () { | ||
| // Need to use ref value here because the value can be set in the same tick as | ||
| // a blur, which means the component won't have re-rendered yet. | ||
| let value = valueRef.current; | ||
| if (value && Boolean(value.start) !== Boolean(value.end)) { | ||
| let calendar = (value.start || value.end).calendar; | ||
| let placeholder = $35a22f14a1f04b11$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone); | ||
| setValue({ | ||
| start: value.start || placeholder, | ||
| end: value.end || placeholder | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var $eff5d8ee529ac4bb$exports = {}; | ||
| $parcel$export($eff5d8ee529ac4bb$exports, "useTimeFieldState", () => $eff5d8ee529ac4bb$export$fd53cef0cc796101); | ||
| function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) { | ||
| let { placeholderValue: placeholderValue = new $7UzoM$Time() , minValue: minValue , maxValue: maxValue , granularity: granularity } = props; | ||
| let [value, setValue] = $7UzoM$useControlledState(props.value, props.defaultValue, props.onChange); | ||
| let v = value || placeholderValue; | ||
| let day = v && 'day' in v ? v : undefined; | ||
| let placeholderDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(placeholderValue) | ||
| , [ | ||
| placeholderValue | ||
| ]); | ||
| let minDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(minValue, day) | ||
| , [ | ||
| minValue, | ||
| day | ||
| ]); | ||
| let maxDate = $7UzoM$useMemo(()=>$eff5d8ee529ac4bb$var$convertValue(maxValue, day) | ||
| , [ | ||
| maxValue, | ||
| day | ||
| ]); | ||
| let dateTime = $7UzoM$useMemo(()=>value == null ? null : $eff5d8ee529ac4bb$var$convertValue(value) | ||
| , [ | ||
| value | ||
| ]); | ||
| let onChange = (newValue)=>{ | ||
| setValue(v && 'day' in v ? newValue : newValue && $7UzoM$toTime(newValue)); | ||
| }; | ||
| return $3c0fc76039f1c516$export$60e84778edff6d26({ | ||
| ...props, | ||
| value: dateTime, | ||
| defaultValue: undefined, | ||
| minValue: minDate, | ||
| maxValue: maxDate, | ||
| onChange: onChange, | ||
| granularity: granularity || 'minute', | ||
| maxGranularity: 'hour', | ||
| placeholderValue: placeholderDate, | ||
| // Calendar should not matter for time fields. | ||
| createCalendar: ()=>new $7UzoM$GregorianCalendar() | ||
| }); | ||
| } | ||
| function $eff5d8ee529ac4bb$var$convertValue(value, date = $7UzoM$today($7UzoM$getLocalTimeZone())) { | ||
| if (!value) return null; | ||
| if ('day' in value) return value; | ||
| return $7UzoM$toCalendarDateTime(date, value); | ||
| } | ||
| export {$ab5bf3f618090389$export$87194bb378cc3ac2 as useDatePickerState, $3c0fc76039f1c516$export$60e84778edff6d26 as useDateFieldState, $93c38a5e28be6249$export$e50a61c1de9f574 as useDateRangePickerState, $eff5d8ee529ac4bb$export$fd53cef0cc796101 as useTimeFieldState}; | ||
| //# sourceMappingURL=module.js.map |
@@ -1,6 +0,17 @@ | ||
| import { CalendarDate, Calendar, DateFormatter } from "@internationalized/date"; | ||
| import { DatePickerProps, DateValue, Granularity, TimeValue, DateRange, DateRangePickerProps, TimePickerProps } from "@react-types/datepicker"; | ||
| import { CalendarDate, DateFormatter, Calendar, Time } from "@internationalized/date"; | ||
| import { FormValidationState } from "@react-stately/form"; | ||
| import { OverlayTriggerState } from "@react-stately/overlays"; | ||
| import { ValidationState, RangeValue } from "@react-types/shared"; | ||
| type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>; | ||
| export interface DatePickerOptions extends DatePickerProps<DateValue> { | ||
| interface FormatterOptions { | ||
| timeZone?: string; | ||
| hideTimeZone?: boolean; | ||
| granularity?: DatePickerProps<any>['granularity']; | ||
| maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity']; | ||
| hourCycle?: 12 | 24; | ||
| showEra?: boolean; | ||
| shouldForceLeadingZeros?: boolean; | ||
| } | ||
| export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> { | ||
| /** | ||
@@ -12,7 +23,7 @@ * Determines whether the date picker popover should close automatically when a date is selected. | ||
| } | ||
| export interface DatePickerState { | ||
| export interface DatePickerState extends OverlayTriggerState, FormValidationState { | ||
| /** The currently selected date. */ | ||
| value: DateValue; | ||
| value: DateValue | null; | ||
| /** Sets the selected date. */ | ||
| setValue(value: DateValue): void; | ||
| setValue(value: DateValue | null): void; | ||
| /** | ||
@@ -40,6 +51,13 @@ * The date portion of the value. This may be set prior to `value` if the user has | ||
| setOpen(isOpen: boolean): void; | ||
| /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState; | ||
| /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean; | ||
| /** Formats the selected value using the given options. */ | ||
| formatValue(locale: string, fieldOptions: FieldOptions): string; | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter; | ||
| } | ||
@@ -50,3 +68,3 @@ /** | ||
| */ | ||
| export function useDatePickerState(props: DatePickerOptions): DatePickerState; | ||
| export function useDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState; | ||
| export type SegmentType = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName'; | ||
@@ -66,6 +84,8 @@ export interface DateSegment { | ||
| isPlaceholder: boolean; | ||
| /** A placeholder string for the segment. */ | ||
| placeholder: string; | ||
| /** Whether the segment is editable. */ | ||
| isEditable: boolean; | ||
| } | ||
| export interface DateFieldState { | ||
| export interface DateFieldState extends FormValidationState { | ||
| /** The current field value. */ | ||
@@ -75,2 +95,4 @@ value: DateValue; | ||
| dateValue: Date; | ||
| /** The calendar system currently in use. */ | ||
| calendar: Calendar; | ||
| /** Sets the field's value. */ | ||
@@ -82,6 +104,13 @@ setValue(value: DateValue): void; | ||
| dateFormatter: DateFormatter; | ||
| /** The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState; | ||
| /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean; | ||
| /** The granularity for the field, based on the `granularity` prop and current value. */ | ||
| granularity: Granularity; | ||
| /** The maximum date or time unit that is displayed in the field. */ | ||
| maxGranularity: 'year' | 'month' | Granularity; | ||
| /** Whether the field is disabled. */ | ||
@@ -110,8 +139,6 @@ isDisabled: boolean; | ||
| /** Sets the value of the given segment. */ | ||
| setSegment(type: 'era', value: string): void; | ||
| setSegment(type: SegmentType, value: number): void; | ||
| /** | ||
| * Replaces the value of the date field with the placeholder value. | ||
| * If a segment type is provided, only that segment is confirmed. Otherwise, all segments that have not been entered yet are confirmed. | ||
| */ | ||
| confirmPlaceholder(type?: SegmentType): void; | ||
| /** Updates the remaining unfilled segments with the placeholder value. */ | ||
| confirmPlaceholder(): void; | ||
| /** Clears the value of the given segment, reverting it to the placeholder. */ | ||
@@ -121,4 +148,6 @@ clearSegment(type: SegmentType): void; | ||
| formatValue(fieldOptions: FieldOptions): string; | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter; | ||
| } | ||
| interface DatePickerFieldProps extends DatePickerProps<DateValue> { | ||
| export interface DateFieldStateOptions<T extends DateValue = DateValue> extends DatePickerProps<T> { | ||
| /** | ||
@@ -144,4 +173,4 @@ * The maximum unit to display in the date field. | ||
| */ | ||
| export function useDateFieldState(props: DatePickerFieldProps): DateFieldState; | ||
| export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> { | ||
| export function useDateFieldState<T extends DateValue = DateValue>(props: DateFieldStateOptions<T>): DateFieldState; | ||
| export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> { | ||
| /** | ||
@@ -154,7 +183,7 @@ * Determines whether the date picker popover should close automatically when a date is selected. | ||
| type TimeRange = RangeValue<TimeValue>; | ||
| export interface DateRangePickerState { | ||
| export interface DateRangePickerState extends OverlayTriggerState, FormValidationState { | ||
| /** The currently selected date range. */ | ||
| value: DateRange; | ||
| value: DateRange | null; | ||
| /** Sets the selected date range. */ | ||
| setValue(value: DateRange): void; | ||
| setValue(value: DateRange | null): void; | ||
| /** | ||
@@ -164,3 +193,3 @@ * The date portion of the selected range. This may be set prior to `value` if the user has | ||
| */ | ||
| dateRange: DateRange; | ||
| dateRange: DateRange | null; | ||
| /** Sets the date portion of the selected range. */ | ||
@@ -172,3 +201,3 @@ setDateRange(value: DateRange): void; | ||
| */ | ||
| timeRange: TimeRange; | ||
| timeRange: TimeRange | null; | ||
| /** Sets the time portion of the selected range. */ | ||
@@ -190,8 +219,16 @@ setTimeRange(value: TimeRange): void; | ||
| setOpen(isOpen: boolean): void; | ||
| /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date range picker, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState; | ||
| /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean; | ||
| /** Formats the selected range using the given options. */ | ||
| formatValue(locale: string, fieldOptions: FieldOptions): string; | ||
| /** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */ | ||
| confirmPlaceholder(): void; | ||
| formatValue(locale: string, fieldOptions: FieldOptions): { | ||
| start: string; | ||
| end: string; | ||
| }; | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter; | ||
| } | ||
@@ -203,7 +240,11 @@ /** | ||
| */ | ||
| export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState; | ||
| interface TimeFieldProps extends TimePickerProps<TimeValue> { | ||
| export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState; | ||
| export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> { | ||
| /** The locale to display and edit the value according to. */ | ||
| locale: string; | ||
| } | ||
| export interface TimeFieldState extends DateFieldState { | ||
| /** The current time value. */ | ||
| timeValue: Time; | ||
| } | ||
| /** | ||
@@ -214,4 +255,4 @@ * Provides state management for a time field component. | ||
| */ | ||
| export function useTimeFieldState(props: TimeFieldProps): DateFieldState; | ||
| export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): TimeFieldState; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-stately/datepicker", | ||
| "version": "3.0.0-nightly.3180+0bba35ae3", | ||
| "version": "3.0.0-nightly-4980928d3-240906", | ||
| "description": "Spectrum UI components in React", | ||
@@ -8,2 +8,7 @@ "license": "Apache-2.0", | ||
| "module": "dist/module.js", | ||
| "exports": { | ||
| "types": "./dist/types.d.ts", | ||
| "import": "./dist/import.mjs", | ||
| "require": "./dist/main.js" | ||
| }, | ||
| "types": "dist/types.d.ts", | ||
@@ -21,11 +26,13 @@ "source": "src/index.ts", | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.6.2", | ||
| "@internationalized/date": "3.0.0-nightly.3180+0bba35ae3", | ||
| "@react-stately/utils": "3.0.0-nightly.1481+0bba35ae3", | ||
| "@react-types/datepicker": "3.0.0-nightly.3180+0bba35ae3", | ||
| "@react-types/shared": "3.0.0-nightly.1481+0bba35ae3", | ||
| "date-fns": "^1.30.1" | ||
| "@internationalized/date": "^3.0.0-nightly-4980928d3-240906", | ||
| "@internationalized/string": "^3.0.0-nightly-4980928d3-240906", | ||
| "@react-stately/form": "^3.0.0-nightly-4980928d3-240906", | ||
| "@react-stately/overlays": "^3.0.0-nightly-4980928d3-240906", | ||
| "@react-stately/utils": "^3.0.0-nightly-4980928d3-240906", | ||
| "@react-types/datepicker": "^3.0.0-nightly-4980928d3-240906", | ||
| "@react-types/shared": "^3.0.0-nightly-4980928d3-240906", | ||
| "@swc/helpers": "^0.5.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0-rc.1" | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
| }, | ||
@@ -35,3 +42,3 @@ "publishConfig": { | ||
| }, | ||
| "gitHead": "0bba35ae36b5d220570385215860d3ca3b549656" | ||
| } | ||
| "stableVersion": "3.10.2" | ||
| } |
@@ -13,5 +13,10 @@ /* | ||
| export * from './useDatePickerState'; | ||
| export * from './useDateFieldState'; | ||
| export * from './useDateRangePickerState'; | ||
| export * from './useTimeFieldState'; | ||
| export {useDatePickerState} from './useDatePickerState'; | ||
| export {useDateFieldState} from './useDateFieldState'; | ||
| export {useDateRangePickerState} from './useDateRangePickerState'; | ||
| export {useTimeFieldState} from './useTimeFieldState'; | ||
| export type {DateFieldStateOptions, DateFieldState, DateSegment, SegmentType} from './useDateFieldState'; | ||
| export type {DatePickerStateOptions, DatePickerState} from './useDatePickerState'; | ||
| export type {DateRangePickerStateOptions, DateRangePickerState} from './useDateRangePickerState'; | ||
| export type {TimeFieldStateOptions, TimeFieldState} from './useTimeFieldState'; |
@@ -14,4 +14,6 @@ /* | ||
| import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date'; | ||
| import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils'; | ||
| import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils'; | ||
| import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker'; | ||
| import {FormValidationState, useFormValidationState} from '@react-stately/form'; | ||
| import {getPlaceholder} from './placeholders'; | ||
| import {useControlledState} from '@react-stately/utils'; | ||
@@ -35,2 +37,4 @@ import {useEffect, useMemo, useRef, useState} from 'react'; | ||
| isPlaceholder: boolean, | ||
| /** A placeholder string for the segment. */ | ||
| placeholder: string, | ||
| /** Whether the segment is editable. */ | ||
@@ -40,3 +44,3 @@ isEditable: boolean | ||
| export interface DateFieldState { | ||
| export interface DateFieldState extends FormValidationState { | ||
| /** The current field value. */ | ||
@@ -46,2 +50,4 @@ value: DateValue, | ||
| dateValue: Date, | ||
| /** The calendar system currently in use. */ | ||
| calendar: Calendar, | ||
| /** Sets the field's value. */ | ||
@@ -53,6 +59,13 @@ setValue(value: DateValue): void, | ||
| dateFormatter: DateFormatter, | ||
| /** The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState, | ||
| /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean, | ||
| /** The granularity for the field, based on the `granularity` prop and current value. */ | ||
| granularity: Granularity, | ||
| /** The maximum date or time unit that is displayed in the field. */ | ||
| maxGranularity: 'year' | 'month' | Granularity, | ||
| /** Whether the field is disabled. */ | ||
@@ -81,12 +94,12 @@ isDisabled: boolean, | ||
| /** Sets the value of the given segment. */ | ||
| setSegment(type: 'era', value: string): void, | ||
| setSegment(type: SegmentType, value: number): void, | ||
| /** | ||
| * Replaces the value of the date field with the placeholder value. | ||
| * If a segment type is provided, only that segment is confirmed. Otherwise, all segments that have not been entered yet are confirmed. | ||
| */ | ||
| confirmPlaceholder(type?: SegmentType): void, | ||
| /** Updates the remaining unfilled segments with the placeholder value. */ | ||
| confirmPlaceholder(): void, | ||
| /** Clears the value of the given segment, reverting it to the placeholder. */ | ||
| clearSegment(type: SegmentType): void, | ||
| /** Formats the current date value using the given options. */ | ||
| formatValue(fieldOptions: FieldOptions): string | ||
| formatValue(fieldOptions: FieldOptions): string, | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter | ||
| } | ||
@@ -119,3 +132,3 @@ | ||
| interface DatePickerFieldProps extends DatePickerProps<DateValue> { | ||
| export interface DateFieldStateOptions<T extends DateValue = DateValue> extends DatePickerProps<T> { | ||
| /** | ||
@@ -142,3 +155,3 @@ * The maximum unit to display in the date field. | ||
| */ | ||
| export function useDateFieldState(props: DatePickerFieldProps): DateFieldState { | ||
| export function useDateFieldState<T extends DateValue = DateValue>(props: DateFieldStateOptions<T>): DateFieldState { | ||
| let { | ||
@@ -150,3 +163,6 @@ locale, | ||
| isReadOnly, | ||
| isRequired | ||
| isRequired, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable | ||
| } = props; | ||
@@ -163,2 +179,23 @@ | ||
| let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]); | ||
| let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]); | ||
| let [value, setDate] = useControlledState<DateValue>( | ||
| props.value, | ||
| props.defaultValue, | ||
| props.onChange | ||
| ); | ||
| let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]); | ||
| // We keep track of the placeholder date separately in state so that onChange is not called | ||
| // until all segments are set. If the value === null (not undefined), then assume the component | ||
| // is controlled, so use the placeholder as the value until all segments are entered so it doesn't | ||
| // change from uncontrolled to controlled and emit a warning. | ||
| let [placeholderDate, setPlaceholderDate] = useState( | ||
| () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| let val = calendarValue || placeholderDate; | ||
| let showEra = calendar.identifier === 'gregory' && val.era === 'BC'; | ||
| let formatOpts = useMemo(() => ({ | ||
@@ -169,4 +206,6 @@ granularity, | ||
| hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }), [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]); | ||
| hourCycle: props.hourCycle, | ||
| showEra, | ||
| shouldForceLeadingZeros: props.shouldForceLeadingZeros | ||
| }), [props.maxGranularity, granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, hideTimeZone, showEra]); | ||
| let opts = useMemo(() => getFormatOptions({}, formatOpts), [formatOpts]); | ||
@@ -176,7 +215,6 @@ | ||
| let resolvedOptions = useMemo(() => dateFormatter.resolvedOptions(), [dateFormatter]); | ||
| let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]); | ||
| // Determine how many editable segments there are for validation purposes. | ||
| // The result is cached for performance. | ||
| let allSegments = useMemo(() => | ||
| let allSegments: Partial<typeof EDITABLE_SEGMENTS> = useMemo(() => | ||
| dateFormatter.formatToParts(new Date()) | ||
@@ -191,9 +229,3 @@ .filter(seg => EDITABLE_SEGMENTS[seg.type]) | ||
| // We keep track of the placeholder date separately in state so that onChange is not called | ||
| // until all segments are set. If the value === null (not undefined), then assume the component | ||
| // is controlled, so use the placeholder as the value until all segments are entered so it doesn't | ||
| // change from uncontrolled to controlled and emit a warning. | ||
| let [placeholderDate, setPlaceholderDate] = useState( | ||
| () => createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone) | ||
| ); | ||
| let clearedSegment = useRef<string>(undefined); | ||
@@ -213,10 +245,2 @@ // Reset placeholder when calendar changes | ||
| let [value, setDate] = useControlledState<DateValue>( | ||
| props.value, | ||
| props.defaultValue, | ||
| props.onChange | ||
| ); | ||
| let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]); | ||
| // If there is a value prop, and some segments were previously placeholders, mark them all as valid. | ||
@@ -241,4 +265,11 @@ if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) { | ||
| } | ||
| let validKeys = Object.keys(validSegments); | ||
| let allKeys = Object.keys(allSegments); | ||
| if (Object.keys(validSegments).length >= Object.keys(allSegments).length) { | ||
| // if all the segments are completed or a timefield with everything but am/pm set the time, also ignore when am/pm cleared | ||
| if (newValue == null) { | ||
| setDate(null); | ||
| setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)); | ||
| setValidSegments({}); | ||
| } else if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')) { | ||
| // The display calendar should not have any effect on the emitted value. | ||
@@ -251,2 +282,3 @@ // Emit dates in the same calendar as the original value, if any, otherwise gregorian. | ||
| } | ||
| clearedSegment.current = null; | ||
| }; | ||
@@ -263,17 +295,28 @@ | ||
| let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type]; | ||
| let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null; | ||
| return { | ||
| type: TYPE_MAPPING[segment.type] || segment.type, | ||
| text: segment.value, | ||
| text: isPlaceholder ? placeholder : segment.value, | ||
| ...getSegmentLimits(displayValue, segment.type, resolvedOptions), | ||
| isPlaceholder: EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type], | ||
| isPlaceholder, | ||
| placeholder, | ||
| isEditable | ||
| } as DateSegment; | ||
| }) | ||
| , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar]); | ||
| , [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale]); | ||
| let hasEra = useMemo(() => segments.some(s => s.type === 'era'), [segments]); | ||
| // When the era field appears, mark it valid if the year field is already valid. | ||
| // If the era field disappears, remove it from the valid segments. | ||
| if (allSegments.era && validSegments.year && !validSegments.era) { | ||
| validSegments.era = true; | ||
| setValidSegments({...validSegments}); | ||
| } else if (!allSegments.era && validSegments.era) { | ||
| delete validSegments.era; | ||
| setValidSegments({...validSegments}); | ||
| } | ||
| let markValid = (part: Intl.DateTimeFormatPartTypes) => { | ||
| validSegments[part] = true; | ||
| if (part === 'year' && hasEra) { | ||
| if (part === 'year' && allSegments.era) { | ||
| validSegments.era = true; | ||
@@ -285,12 +328,36 @@ } | ||
| let adjustSegment = (type: Intl.DateTimeFormatPartTypes, amount: number) => { | ||
| markValid(type); | ||
| setValue(addSegment(displayValue, type, amount, resolvedOptions)); | ||
| if (!validSegments[type]) { | ||
| markValid(type); | ||
| let validKeys = Object.keys(validSegments); | ||
| let allKeys = Object.keys(allSegments); | ||
| if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)) { | ||
| setValue(displayValue); | ||
| } | ||
| } else { | ||
| setValue(addSegment(displayValue, type, amount, resolvedOptions)); | ||
| } | ||
| }; | ||
| let validationState: ValidationState = props.validationState || | ||
| (isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null); | ||
| let builtinValidation = useMemo(() => getValidationResult( | ||
| value, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable, | ||
| formatOpts | ||
| ), [value, minValue, maxValue, isDateUnavailable, formatOpts]); | ||
| let validation = useFormValidationState({ | ||
| ...props, | ||
| value, | ||
| builtinValidation | ||
| }); | ||
| let isValueInvalid = validation.displayValidation.isInvalid; | ||
| let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null); | ||
| return { | ||
| ...validation, | ||
| value: calendarValue, | ||
| dateValue, | ||
| calendar, | ||
| setValue, | ||
@@ -300,3 +367,5 @@ segments, | ||
| validationState, | ||
| isInvalid: isValueInvalid, | ||
| granularity, | ||
| maxGranularity: props.maxGranularity ?? 'year', | ||
| isDisabled, | ||
@@ -321,3 +390,3 @@ isReadOnly, | ||
| }, | ||
| confirmPlaceholder(part) { | ||
| confirmPlaceholder() { | ||
| if (props.isDisabled || props.isReadOnly) { | ||
@@ -327,12 +396,8 @@ return; | ||
| if (!part) { | ||
| // Confirm the rest of the placeholder if any of the segments are valid. | ||
| let numValid = Object.keys(validSegments).length; | ||
| if (numValid > 0 && numValid < Object.keys(allSegments).length) { | ||
| validSegments = {...allSegments}; | ||
| setValidSegments(validSegments); | ||
| setValue(displayValue.copy()); | ||
| } | ||
| } else if (!validSegments[part]) { | ||
| markValid(part); | ||
| // Confirm the placeholder if only the day period is not filled in. | ||
| let validKeys = Object.keys(validSegments); | ||
| let allKeys = Object.keys(allSegments); | ||
| if (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod) { | ||
| validSegments = {...allSegments}; | ||
| setValidSegments(validSegments); | ||
| setValue(displayValue.copy()); | ||
@@ -343,2 +408,3 @@ } | ||
| delete validSegments[part]; | ||
| clearedSegment.current = part; | ||
| setValidSegments({...validSegments}); | ||
@@ -373,2 +439,7 @@ | ||
| return formatter.format(dateValue); | ||
| }, | ||
| getDateFormatter(locale, formatOptions: FormatterOptions) { | ||
| let newOptions = {...formatOpts, ...formatOptions}; | ||
| let newFormatOptions = getFormatOptions({}, newOptions); | ||
| return new DateFormatter(locale, newFormatOptions); | ||
| } | ||
@@ -481,2 +552,3 @@ }; | ||
| case 'year': | ||
| case 'era': | ||
| return value.set({[part]: segmentValue}); | ||
@@ -483,0 +555,0 @@ } |
@@ -15,9 +15,10 @@ /* | ||
| import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker'; | ||
| import {FieldOptions, getFormatOptions, getPlaceholderTime, useDefaultProps} from './utils'; | ||
| import {isInvalid} from './utils'; | ||
| import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils'; | ||
| import {FormValidationState, useFormValidationState} from '@react-stately/form'; | ||
| import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useState} from 'react'; | ||
| import {useMemo, useState} from 'react'; | ||
| import {ValidationState} from '@react-types/shared'; | ||
| export interface DatePickerOptions extends DatePickerProps<DateValue> { | ||
| export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> { | ||
| /** | ||
@@ -30,7 +31,7 @@ * Determines whether the date picker popover should close automatically when a date is selected. | ||
| export interface DatePickerState { | ||
| export interface DatePickerState extends OverlayTriggerState, FormValidationState { | ||
| /** The currently selected date. */ | ||
| value: DateValue, | ||
| value: DateValue | null, | ||
| /** Sets the selected date. */ | ||
| setValue(value: DateValue): void, | ||
| setValue(value: DateValue | null): void, | ||
| /** | ||
@@ -58,6 +59,13 @@ * The date portion of the value. This may be set prior to `value` if the user has | ||
| setOpen(isOpen: boolean): void, | ||
| /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState, | ||
| /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean, | ||
| /** Formats the selected value using the given options. */ | ||
| formatValue(locale: string, fieldOptions: FieldOptions): string | ||
| formatValue(locale: string, fieldOptions: FieldOptions): string, | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter | ||
| } | ||
@@ -69,4 +77,4 @@ | ||
| */ | ||
| export function useDatePickerState(props: DatePickerOptions): DatePickerState { | ||
| let [isOpen, setOpen] = useState(false); | ||
| export function useDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState { | ||
| let overlayState = useOverlayTriggerState(props); | ||
| let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange); | ||
@@ -77,3 +85,3 @@ | ||
| let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second'; | ||
| let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true; | ||
@@ -96,4 +104,35 @@ | ||
| let showEra = value?.calendar.identifier === 'gregory' && value.era === 'BC'; | ||
| let formatOpts = useMemo(() => ({ | ||
| granularity, | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle, | ||
| shouldForceLeadingZeros: props.shouldForceLeadingZeros, | ||
| showEra | ||
| }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]); | ||
| let {minValue, maxValue, isDateUnavailable} = props; | ||
| let builtinValidation = useMemo(() => getValidationResult( | ||
| value, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable, | ||
| formatOpts | ||
| ), [value, minValue, maxValue, isDateUnavailable, formatOpts]); | ||
| let validation = useFormValidationState({ | ||
| ...props, | ||
| value, | ||
| builtinValidation | ||
| }); | ||
| let isValueInvalid = validation.displayValidation.isInvalid; | ||
| let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null); | ||
| let commitValue = (date: DateValue, time: TimeValue) => { | ||
| setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time)); | ||
| setSelectedDate(null); | ||
| setSelectedTime(null); | ||
| validation.commitValidation(); | ||
| }; | ||
@@ -112,6 +151,7 @@ | ||
| setValue(newValue); | ||
| validation.commitValidation(); | ||
| } | ||
| if (shouldClose) { | ||
| setOpen(false); | ||
| overlayState.setOpen(false); | ||
| } | ||
@@ -121,3 +161,3 @@ }; | ||
| let selectTime = (newValue: TimeValue) => { | ||
| if (selectedDate) { | ||
| if (selectedDate && newValue) { | ||
| commitValue(selectedDate, newValue); | ||
@@ -129,7 +169,4 @@ } else { | ||
| let validationState: ValidationState = props.validationState || | ||
| (isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : null) || | ||
| (value && props.isDateUnavailable?.(value) ? 'invalid' : null); | ||
| return { | ||
| ...validation, | ||
| value, | ||
@@ -143,3 +180,3 @@ setValue, | ||
| hasTime, | ||
| isOpen, | ||
| ...overlayState, | ||
| setOpen(isOpen) { | ||
@@ -153,5 +190,6 @@ // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| setOpen(isOpen); | ||
| overlayState.setOpen(isOpen); | ||
| }, | ||
| validationState, | ||
| isInvalid: isValueInvalid, | ||
| formatValue(locale, fieldOptions) { | ||
@@ -162,13 +200,12 @@ if (!dateValue) { | ||
| let formatOptions = getFormatOptions(fieldOptions, { | ||
| granularity, | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| }); | ||
| let formatOptions = getFormatOptions(fieldOptions, formatOpts); | ||
| let formatter = new DateFormatter(locale, formatOptions); | ||
| return formatter.format(dateValue); | ||
| }, | ||
| getDateFormatter(locale, formatOptions: FormatterOptions) { | ||
| let newOptions = {...formatOpts, ...formatOptions}; | ||
| let newFormatOptions = getFormatOptions({}, newOptions); | ||
| return new DateFormatter(locale, newFormatOptions); | ||
| } | ||
| }; | ||
| } |
@@ -13,10 +13,13 @@ /* | ||
| import {createPlaceholderDate, FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils'; | ||
| import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; | ||
| import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker'; | ||
| import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils'; | ||
| import {FormValidationState, useFormValidationState} from '@react-stately/form'; | ||
| import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays'; | ||
| import {RangeValue, ValidationState} from '@react-types/shared'; | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useRef, useState} from 'react'; | ||
| import {useMemo, useState} from 'react'; | ||
| export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> { | ||
| export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> { | ||
| /** | ||
@@ -30,7 +33,7 @@ * Determines whether the date picker popover should close automatically when a date is selected. | ||
| type TimeRange = RangeValue<TimeValue>; | ||
| export interface DateRangePickerState { | ||
| export interface DateRangePickerState extends OverlayTriggerState, FormValidationState { | ||
| /** The currently selected date range. */ | ||
| value: DateRange, | ||
| value: DateRange | null, | ||
| /** Sets the selected date range. */ | ||
| setValue(value: DateRange): void, | ||
| setValue(value: DateRange | null): void, | ||
| /** | ||
@@ -40,3 +43,3 @@ * The date portion of the selected range. This may be set prior to `value` if the user has | ||
| */ | ||
| dateRange: DateRange, | ||
| dateRange: DateRange | null, | ||
| /** Sets the date portion of the selected range. */ | ||
@@ -48,3 +51,3 @@ setDateRange(value: DateRange): void, | ||
| */ | ||
| timeRange: TimeRange, | ||
| timeRange: TimeRange | null, | ||
| /** Sets the time portion of the selected range. */ | ||
@@ -66,8 +69,13 @@ setTimeRange(value: TimeRange): void, | ||
| setOpen(isOpen: boolean): void, | ||
| /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */ | ||
| /** | ||
| * The current validation state of the date range picker, based on the `validationState`, `minValue`, and `maxValue` props. | ||
| * @deprecated Use `isInvalid` instead. | ||
| */ | ||
| validationState: ValidationState, | ||
| /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */ | ||
| isInvalid: boolean, | ||
| /** Formats the selected range using the given options. */ | ||
| formatValue(locale: string, fieldOptions: FieldOptions): string, | ||
| /** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */ | ||
| confirmPlaceholder(): void | ||
| formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string}, | ||
| /** Gets a formatter based on state's props. */ | ||
| getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter | ||
| } | ||
@@ -80,4 +88,4 @@ | ||
| */ | ||
| export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState { | ||
| let [isOpen, setOpen] = useState(false); | ||
| export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState { | ||
| let overlayState = useOverlayTriggerState(props); | ||
| let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange); | ||
@@ -93,8 +101,5 @@ let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null}); | ||
| let value = controlledValue || placeholderValue; | ||
| let valueRef = useRef(value); | ||
| valueRef.current = value; | ||
| let setValue = (value: DateRange) => { | ||
| valueRef.current = value; | ||
| setPlaceholderValue(value); | ||
| setPlaceholderValue(value || {start: null, end: null}); | ||
| if (value?.start && value.end) { | ||
@@ -109,3 +114,3 @@ setControlledValue(value); | ||
| let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity); | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond'; | ||
| let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second'; | ||
| let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true; | ||
@@ -128,2 +133,5 @@ | ||
| }); | ||
| setSelectedDateRange(null); | ||
| setSelectedTimeRange(null); | ||
| validation.commitValidation(); | ||
| }; | ||
@@ -145,2 +153,3 @@ | ||
| setValue(range); | ||
| validation.commitValidation(); | ||
| } else { | ||
@@ -151,3 +160,3 @@ setSelectedDateRange(range); | ||
| if (shouldClose) { | ||
| setOpen(false); | ||
| overlayState.setOpen(false); | ||
| } | ||
@@ -164,12 +173,33 @@ }; | ||
| let validationState: ValidationState = props.validationState | ||
| || (value != null && ( | ||
| isInvalid(value.start, props.minValue, props.maxValue) || | ||
| isInvalid(value.end, props.minValue, props.maxValue) || | ||
| (value.end != null && value.start != null && value.end.compare(value.start) < 0) || | ||
| (value?.start && props.isDateUnavailable?.(value.start)) || | ||
| (value?.end && props.isDateUnavailable?.(value.end)) | ||
| ) ? 'invalid' : null); | ||
| let showEra = (value?.start?.calendar.identifier === 'gregory' && value.start.era === 'BC') || (value?.end?.calendar.identifier === 'gregory' && value.end.era === 'BC'); | ||
| let formatOpts = useMemo(() => ({ | ||
| granularity, | ||
| timeZone: defaultTimeZone, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle, | ||
| shouldForceLeadingZeros: props.shouldForceLeadingZeros, | ||
| showEra | ||
| }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]); | ||
| let {minValue, maxValue, isDateUnavailable} = props; | ||
| let builtinValidation = useMemo(() => getRangeValidationResult( | ||
| value, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable, | ||
| formatOpts | ||
| ), [value, minValue, maxValue, isDateUnavailable, formatOpts]); | ||
| let validation = useFormValidationState({ | ||
| ...props, | ||
| value: controlledValue, | ||
| name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]), | ||
| builtinValidation | ||
| }); | ||
| let isValueInvalid = validation.displayValidation.isInvalid; | ||
| let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null); | ||
| return { | ||
| ...validation, | ||
| value, | ||
@@ -192,3 +222,3 @@ setValue, | ||
| setTimeRange, | ||
| isOpen, | ||
| ...overlayState, | ||
| setOpen(isOpen) { | ||
@@ -205,8 +235,9 @@ // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set. | ||
| setOpen(isOpen); | ||
| overlayState.setOpen(isOpen); | ||
| }, | ||
| validationState, | ||
| isInvalid: isValueInvalid, | ||
| formatValue(locale, fieldOptions) { | ||
| if (!value || !value.start || !value.end) { | ||
| return ''; | ||
| return null; | ||
| } | ||
@@ -223,8 +254,13 @@ | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle | ||
| hourCycle: props.hourCycle, | ||
| showEra: (value.start.calendar.identifier === 'gregory' && value.start.era === 'BC') || | ||
| (value.end.calendar.identifier === 'gregory' && value.end.era === 'BC') | ||
| }); | ||
| let startDate = value.start.toDate(startTimeZone || 'UTC'); | ||
| let endDate = value.end.toDate(endTimeZone || 'UTC'); | ||
| let startFormatter = new DateFormatter(locale, startOptions); | ||
| let endFormatter: Intl.DateTimeFormat; | ||
| if (startTimeZone === endTimeZone && startGranularity === endGranularity) { | ||
| if (startTimeZone === endTimeZone && startGranularity === endGranularity && value.start.compare(value.end) !== 0) { | ||
| // Use formatRange, as it results in shorter output when some of the fields | ||
@@ -234,3 +270,28 @@ // are shared between the start and end dates (e.g. the same month). | ||
| try { | ||
| return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone)); | ||
| let parts = startFormatter.formatRangeToParts(startDate, endDate); | ||
| // Find the separator between the start and end date. This is determined | ||
| // by finding the last shared literal before the end range. | ||
| let separatorIndex = -1; | ||
| for (let i = 0; i < parts.length; i++) { | ||
| let part = parts[i]; | ||
| if (part.source === 'shared' && part.type === 'literal') { | ||
| separatorIndex = i; | ||
| } else if (part.source === 'endRange') { | ||
| break; | ||
| } | ||
| } | ||
| // Now we can combine the parts into start and end strings. | ||
| let start = ''; | ||
| let end = ''; | ||
| for (let i = 0; i < parts.length; i++) { | ||
| if (i < separatorIndex) { | ||
| start += parts[i].value; | ||
| } else if (i > separatorIndex) { | ||
| end += parts[i].value; | ||
| } | ||
| } | ||
| return {start, end}; | ||
| } catch (e) { | ||
@@ -252,18 +313,13 @@ // ignore | ||
| return `${startFormatter.format(value.start.toDate(startTimeZone))} – ${endFormatter.format(value.end.toDate(endTimeZone))}`; | ||
| return { | ||
| start: startFormatter.format(startDate), | ||
| end: endFormatter.format(endDate) | ||
| }; | ||
| }, | ||
| confirmPlaceholder() { | ||
| // Need to use ref value here because the value can be set in the same tick as | ||
| // a blur, which means the component won't have re-rendered yet. | ||
| let value = valueRef.current; | ||
| if (value && Boolean(value.start) !== Boolean(value.end)) { | ||
| let calendar = (value.start || value.end).calendar; | ||
| let placeholder = createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone); | ||
| setValue({ | ||
| start: value.start || placeholder, | ||
| end: value.end || placeholder | ||
| }); | ||
| } | ||
| getDateFormatter(locale, formatOptions: FormatterOptions) { | ||
| let newOptions = {...formatOpts, ...formatOptions}; | ||
| let newFormatOptions = getFormatOptions({}, newOptions); | ||
| return new DateFormatter(locale, newFormatOptions); | ||
| } | ||
| }; | ||
| } |
@@ -15,7 +15,7 @@ /* | ||
| import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker'; | ||
| import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime} from '@internationalized/date'; | ||
| import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date'; | ||
| import {useCallback, useMemo} from 'react'; | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useMemo} from 'react'; | ||
| interface TimeFieldProps extends TimePickerProps<TimeValue> { | ||
| export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> { | ||
| /** The locale to display and edit the value according to. */ | ||
@@ -25,2 +25,7 @@ locale: string | ||
| export interface TimeFieldState extends DateFieldState { | ||
| /** The current time value. */ | ||
| timeValue: Time | ||
| } | ||
| /** | ||
@@ -31,3 +36,3 @@ * Provides state management for a time field component. | ||
| */ | ||
| export function useTimeFieldState(props: TimeFieldProps): DateFieldState { | ||
| export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): TimeFieldState { | ||
| let { | ||
@@ -37,3 +42,4 @@ placeholderValue = new Time(), | ||
| maxValue, | ||
| granularity | ||
| granularity, | ||
| validate | ||
| } = props; | ||
@@ -49,12 +55,18 @@ | ||
| let day = v && 'day' in v ? v : undefined; | ||
| let placeholderDate = useMemo(() => convertValue(placeholderValue), [placeholderValue]); | ||
| let defaultValueTimeZone = props.defaultValue && 'timeZone' in props.defaultValue ? props.defaultValue.timeZone : undefined; | ||
| let placeholderDate = useMemo(() => { | ||
| let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined; | ||
| return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : convertValue(placeholderValue); | ||
| }, [placeholderValue, v, defaultValueTimeZone]); | ||
| let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]); | ||
| let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]); | ||
| let timeValue = useMemo(() => value && 'day' in value ? toTime(value) : value as Time, [value]); | ||
| let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]); | ||
| let onChange = newValue => { | ||
| setValue(v && 'day' in v ? newValue : newValue && toTime(newValue)); | ||
| setValue(day || defaultValueTimeZone ? newValue : newValue && toTime(newValue)); | ||
| }; | ||
| return useDateFieldState({ | ||
| let state = useDateFieldState({ | ||
| ...props, | ||
@@ -70,4 +82,10 @@ value: dateTime, | ||
| // Calendar should not matter for time fields. | ||
| createCalendar: () => new GregorianCalendar() | ||
| createCalendar: () => new GregorianCalendar(), | ||
| validate: useCallback(() => validate?.(value as any), [validate, value]) | ||
| }); | ||
| return { | ||
| ...state, | ||
| timeValue | ||
| }; | ||
| } | ||
@@ -74,0 +92,0 @@ |
158
src/utils.ts
@@ -13,15 +13,115 @@ /* | ||
| import {Calendar, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; | ||
| import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date'; | ||
| import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker'; | ||
| import {useRef} from 'react'; | ||
| // @ts-ignore | ||
| import i18nMessages from '../intl/*.json'; | ||
| import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; | ||
| import {mergeValidation, VALID_VALIDITY_STATE} from '@react-stately/form'; | ||
| import {RangeValue, ValidationResult} from '@react-types/shared'; | ||
| import {useState} from 'react'; | ||
| export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) { | ||
| return value != null && ( | ||
| (minValue != null && value.compare(minValue) < 0) || | ||
| (maxValue != null && value.compare(maxValue) > 0) | ||
| const dictionary = new LocalizedStringDictionary(i18nMessages); | ||
| function getLocale() { | ||
| // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided | ||
| // validation messages, which to not respect our provider's language. | ||
| // @ts-ignore | ||
| return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US'; | ||
| } | ||
| export function getValidationResult( | ||
| value: DateValue, | ||
| minValue: DateValue, | ||
| maxValue: DateValue, | ||
| isDateUnavailable: (v: DateValue) => boolean, | ||
| options: FormatterOptions | ||
| ): ValidationResult { | ||
| let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0; | ||
| let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0; | ||
| let isUnavailable = (value != null && isDateUnavailable?.(value)) || false; | ||
| let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable; | ||
| let errors = []; | ||
| if (isInvalid) { | ||
| let locale = getLocale(); | ||
| let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary; | ||
| let formatter = new LocalizedStringFormatter(locale, strings); | ||
| let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options)); | ||
| let timeZone = dateFormatter.resolvedOptions().timeZone; | ||
| if (rangeUnderflow) { | ||
| errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))})); | ||
| } | ||
| if (rangeOverflow) { | ||
| errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))})); | ||
| } | ||
| if (isUnavailable) { | ||
| errors.push(formatter.format('unavailableDate')); | ||
| } | ||
| } | ||
| return { | ||
| isInvalid, | ||
| validationErrors: errors, | ||
| validationDetails: { | ||
| badInput: isUnavailable, | ||
| customError: false, | ||
| patternMismatch: false, | ||
| rangeOverflow, | ||
| rangeUnderflow, | ||
| stepMismatch: false, | ||
| tooLong: false, | ||
| tooShort: false, | ||
| typeMismatch: false, | ||
| valueMissing: false, | ||
| valid: !isInvalid | ||
| } | ||
| }; | ||
| } | ||
| export function getRangeValidationResult( | ||
| value: RangeValue<DateValue>, | ||
| minValue: DateValue, | ||
| maxValue: DateValue, | ||
| isDateUnavailable: (v: DateValue) => boolean, | ||
| options: FormatterOptions | ||
| ) { | ||
| let startValidation = getValidationResult( | ||
| value?.start, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable, | ||
| options | ||
| ); | ||
| let endValidation = getValidationResult( | ||
| value?.end, | ||
| minValue, | ||
| maxValue, | ||
| isDateUnavailable, | ||
| options | ||
| ); | ||
| let result = mergeValidation(startValidation, endValidation); | ||
| if (value.end != null && value.start != null && value.end.compare(value.start) < 0) { | ||
| let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary; | ||
| result = mergeValidation(result, { | ||
| isInvalid: true, | ||
| validationErrors: [strings.getStringForLocale('rangeReversed', getLocale())], | ||
| validationDetails: { | ||
| ...VALID_VALIDITY_STATE, | ||
| rangeUnderflow: true, | ||
| rangeOverflow: true, | ||
| valid: false | ||
| } | ||
| }); | ||
| } | ||
| return result; | ||
| } | ||
| export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>; | ||
| interface FormatterOptions { | ||
| export interface FormatterOptions { | ||
| timeZone?: string, | ||
@@ -31,3 +131,5 @@ hideTimeZone?: boolean, | ||
| maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'], | ||
| hourCycle?: 12 | 24 | ||
| hourCycle?: 12 | 24, | ||
| showEra?: boolean, | ||
| shouldForceLeadingZeros?: boolean | ||
| } | ||
@@ -44,2 +146,11 @@ | ||
| const TWO_DIGIT_FIELD_OPTIONS: FieldOptions = { | ||
| year: 'numeric', | ||
| month: '2-digit', | ||
| day: '2-digit', | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| second: '2-digit' | ||
| }; | ||
| export function getFormatOptions( | ||
@@ -49,3 +160,4 @@ fieldOptions: FieldOptions, | ||
| ): Intl.DateTimeFormatOptions { | ||
| fieldOptions = {...DEFAULT_FIELD_OPTIONS, ...fieldOptions}; | ||
| let defaultFieldOptions = options.shouldForceLeadingZeros ? TWO_DIGIT_FIELD_OPTIONS : DEFAULT_FIELD_OPTIONS; | ||
| fieldOptions = {...defaultFieldOptions, ...fieldOptions}; | ||
| let granularity = options.granularity || 'minute'; | ||
@@ -83,2 +195,6 @@ let keys = Object.keys(fieldOptions); | ||
| if (options.showEra && startIdx === 0) { | ||
| opts.era = 'short'; | ||
| } | ||
| return opts; | ||
@@ -133,17 +249,23 @@ } | ||
| // Compute default granularity and time zone from the value. If the value becomes null, keep the last values. | ||
| let lastValue = useRef(v); | ||
| if (v) { | ||
| lastValue.current = v; | ||
| } | ||
| v = lastValue.current; | ||
| let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined); | ||
| granularity = granularity || (v && 'minute' in v ? 'minute' : 'day'); | ||
| let defaultGranularity: Granularity = (v && 'minute' in v ? 'minute' : 'day'); | ||
| // props.granularity must actually exist in the value if one is provided. | ||
| if (v && !(granularity in v)) { | ||
| if (v && granularity && !(granularity in v)) { | ||
| throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString()); | ||
| } | ||
| return [granularity, defaultTimeZone]; | ||
| let [lastValue, setLastValue] = useState<[Granularity, string]>([defaultGranularity, defaultTimeZone]); | ||
| // If the granularity or time zone changed, update the last value. | ||
| if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone)) { | ||
| setLastValue([defaultGranularity, defaultTimeZone]); | ||
| } | ||
| if (!granularity) { | ||
| granularity = v ? defaultGranularity : lastValue[0]; | ||
| } | ||
| let timeZone = v ? defaultTimeZone : lastValue[1]; | ||
| return [granularity, timeZone]; | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by105.48%
566062
- Number of package files
- increased by1373.33%
221
- Lines of code
- increased by165.48%
7152
Worsened metrics
- Dependency count
- increased by28.57%
9
Dependency changes
+ Added@internationalized/string@^3.0.0-nightly-4980928d3-240906
+ Added@react-stately/overlays@^3.0.0-nightly-4980928d3-240906
+ Added@swc/helpers@^0.5.0
+ Added@internationalized/date@3.5.5(transitive)
+ Added@internationalized/string@3.2.3(transitive)
+ Added@react-stately/form@3.0.5(transitive)
+ Added@react-stately/overlays@3.6.10(transitive)
+ Added@react-stately/utils@3.10.3(transitive)
+ Added@react-types/calendar@3.4.9(transitive)
+ Added@react-types/datepicker@3.8.2(transitive)
+ Added@react-types/overlays@3.8.9(transitive)
+ Added@react-types/shared@3.24.1(transitive)
+ Added@swc/helpers@0.5.13(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedtslib@2.7.0(transitive)
- Removed@babel/runtime@^7.6.2
- Removeddate-fns@^1.30.1
- Removed@babel/runtime@7.25.6(transitive)
- Removeddate-fns@1.30.1(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedreact@17.0.2(transitive)
- Removedregenerator-runtime@0.14.1(transitive)
Updated@internationalized/date@^3.0.0-nightly-4980928d3-240906
Updated@react-types/datepicker@^3.0.0-nightly-4980928d3-240906