/* * 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. */ import { AriaLabelingProps, DOMProps, FocusableProps, HelpTextProps, InputBase, InputDOMProps, LabelableProps, RangeValue, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps, Validation, ValueBase } from '@react-types/shared'; import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date'; import {OverlayTriggerProps} from '@react-types/overlays'; import {PageBehavior} from '@react-types/calendar'; export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; type MappedDateValue = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never; export type Granularity = 'day' | 'hour' | 'minute' | 'second'; interface DateFieldBase extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, OverlayTriggerProps { /** The minimum allowed date that a user may select. */ minValue?: DateValue | null, /** The maximum allowed date that a user may select. */ maxValue?: DateValue | null, /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ isDateUnavailable?: (date: DateValue) => boolean, /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */ placeholderValue?: T | null, /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ hourCycle?: 12 | 24, /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */ granularity?: Granularity, /** * Whether to hide the time zone abbreviation. * @default false */ hideTimeZone?: boolean, /** * Whether to always show leading zeros in the month, day, and hour fields. * By default, this is determined by the user's locale. */ shouldForceLeadingZeros?: boolean } interface AriaDateFieldBaseProps extends DateFieldBase, AriaLabelingProps, DOMProps {} export interface DateFieldProps extends DateFieldBase, ValueBase | null> {} export interface AriaDateFieldProps extends DateFieldProps, AriaDateFieldBaseProps, InputDOMProps {} interface DatePickerBase extends DateFieldBase, OverlayTriggerProps { /** * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. * @default visible */ pageBehavior?: PageBehavior } export interface AriaDatePickerBaseProps extends DatePickerBase, AriaLabelingProps, DOMProps {} export interface DatePickerProps extends DatePickerBase, ValueBase | null> {} export interface AriaDatePickerProps extends DatePickerProps, AriaDatePickerBaseProps, InputDOMProps {} export type DateRange = RangeValue; export interface DateRangePickerProps extends Omit, 'validate'>, Validation>>, ValueBase | null, RangeValue> | null> { /** * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, * i.e. ranges containing unavailable dates, may be selected. */ allowsNonContiguousRanges?: boolean, /** * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */ startName?: string, /** * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */ endName?: string } export interface AriaDateRangePickerProps extends Omit, 'validate'>, DateRangePickerProps {} interface SpectrumDateFieldBase extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation>, StyleProps { /** * Whether the date picker should be displayed with a quiet style. * @default false */ isQuiet?: boolean, /** * Whether to show the localized date format as help text below the field. * @default false */ showFormatHelpText?: boolean } interface SpectrumDatePickerBase extends SpectrumDateFieldBase, SpectrumLabelableProps, StyleProps { /** * The maximum number of months to display at once in the calendar popover, if screen space permits. * @default 1 */ maxVisibleMonths?: number, /** * Whether the calendar popover should automatically flip direction when space is limited. * @default true */ shouldFlip?: boolean } export interface SpectrumDatePickerProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumDatePickerBase {} export interface SpectrumDateRangePickerProps extends Omit, 'isInvalid' | 'validationState'>, Omit, 'validate'> {} export interface SpectrumDateFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumDateFieldBase {} export type TimeValue = Time | CalendarDateTime | ZonedDateTime; type MappedTimeValue = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends Time ? Time : never; export interface TimePickerProps extends InputBase, Validation>, FocusableProps, LabelableProps, HelpTextProps, ValueBase | null> { /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */ hourCycle?: 12 | 24, /** * Determines the smallest unit that is displayed in the time picker. * @default 'minute' */ granularity?: 'hour' | 'minute' | 'second', /** Whether to hide the time zone abbreviation. */ hideTimeZone?: boolean, /** * Whether to always show leading zeros in the hour field. * By default, this is determined by the user's locale. */ shouldForceLeadingZeros?: boolean, /** * A placeholder time that influences the format of the placeholder shown when no value is selected. * Defaults to 12:00 AM or 00:00 depending on the hour cycle. */ placeholderValue?: T, /** The minimum allowed time that a user may select. */ minValue?: TimeValue | null, /** The maximum allowed time that a user may select. */ maxValue?: TimeValue | null } export interface AriaTimeFieldProps extends TimePickerProps, AriaLabelingProps, DOMProps, InputDOMProps {} export interface SpectrumTimeFieldProps extends Omit, 'isInvalid' | 'validationState'>, SpectrumFieldValidation>, SpectrumLabelableProps, StyleProps, InputDOMProps { /** * Whether the time field should be displayed with a quiet style. * @default false */ isQuiet?: boolean } // backward compatibility export type SpectrumTimePickerProps = SpectrumTimeFieldProps;