| 1 | {"version":3,"file":"DatePicker.types.js","sourceRoot":"../src/","sources":["components/DatePicker/DatePicker.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { DayOfWeek, ICalendarProps } from '../../Calendar';\nimport { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';\nimport { ICalendarFormatDateCallbacks, ICalendarStrings } from '../Calendar/Calendar.types';\nimport { IStyle, ITheme } from '../../Styling';\nimport { IRefObject, IBaseProps, IStyleFunctionOrObject, IComponentAs } from '../../Utilities';\nimport { ICalloutProps } from '../Callout/Callout.types';\nimport { ITextFieldProps } from '../TextField/TextField.types';\n\n/**\n * {@docCategory DatePicker}\n */\nexport interface IDatePicker {\n /** Sets focus to the text field */\n focus(): void;\n\n /** Reset the state of the picker to the default */\n reset(): void;\n}\n\n/**\n * {@docCategory DatePicker}\n */\nexport interface IDatePickerProps extends IBaseProps<IDatePicker>, React.HTMLAttributes<HTMLElement> {\n /**\n * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IDatePicker>;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles>;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme?: ITheme;\n\n /**\n * Pass callout props to callout component\n */\n calloutProps?: ICalloutProps;\n\n /**\n * Pass calendar props to calendar component\n */\n calendarProps?: ICalendarProps;\n\n /**\n * Pass textField props to textField component.\n * Prop name is \"textField\" for compatiblity with upcoming slots work.\n */\n textField?: ITextFieldProps;\n\n /**\n * Custom Calendar to be used for date picking\n */\n calendarAs?: IComponentAs<ICalendarProps>;\n\n /**\n * Callback issued when a date is selected\n */\n onSelectDate?: (date: Date | null | undefined) => void;\n\n /**\n * Label for the DatePicker\n */\n label?: string;\n\n /**\n * Whether the DatePicker is a required field or not\n * @defaultvalue false\n */\n isRequired?: boolean;\n\n /**\n * Disabled state of the DatePicker.\n * @defaultvalue false\n */\n disabled?: boolean;\n\n /**\n * Aria Label for TextField of the DatePicker for screen reader users.\n */\n ariaLabel?: string;\n\n /**\n * Whether or not the Textfield of the DatePicker is underlined.\n * @defaultvalue false\n */\n underlined?: boolean;\n\n /**\n * Aria label for date picker popup for screen reader users.\n * @defaultvalue Calendar\n */\n pickerAriaLabel?: string;\n\n /**\n * Whether the month picker is shown beside the day picker or hidden.\n * @defaultvalue true\n */\n isMonthPickerVisible?: boolean;\n\n /**\n * Show month picker on top of date picker when visible.\n * @defaultvalue false\n */\n showMonthPickerAsOverlay?: boolean;\n\n /**\n * Whether the DatePicker allows input a date string directly or not\n * @defaultvalue false\n */\n allowTextInput?: boolean;\n\n /**\n * Whether the DatePicker should open automatically when the control is focused\n * @defaultvalue false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Placeholder text for the DatePicker\n */\n placeholder?: string;\n\n /**\n * Value of today. If null, current time in client machine will be used.\n */\n today?: Date;\n\n /**\n * Default value of the DatePicker, if any\n */\n value?: Date;\n\n /**\n * Optional method to format the chosen date to a string to display in the DatePicker\n * @defaultvalue date.toString()\n */\n formatDate?: (date?: Date) => string;\n\n /**\n * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true\n * @defaultvalue new Date(Date.parse(dateStr))\n */\n parseDateFromString?: (dateStr: string) => Date | null;\n\n /**\n * The first day of the week for your locale.\n * @defaultvalue DayOfWeek.Sunday\n */\n firstDayOfWeek?: DayOfWeek;\n\n /**\n * Localized strings to use in the DatePicker\n */\n strings?: IDatePickerStrings;\n\n /**\n * Whether the month picker should highlight the current month\n * @defaultvalue false\n */\n highlightCurrentMonth?: boolean;\n\n /**\n * Whether the month picker should highlight the selected month\n * @defaultvalue false\n */\n highlightSelectedMonth?: boolean;\n\n /**\n * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n * @defaultvalue false\n */\n showWeekNumbers?: boolean;\n\n /**\n * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,\n * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values\n * @defaultvalue FirstWeekOfYear.FirstFullWeek\n */\n firstWeekOfYear?: FirstWeekOfYear;\n\n /**\n * Whether the \"Go to today\" link should be shown or not\n */\n showGoToToday?: boolean;\n\n /**\n * Determines if DatePicker has a border.\n * @defaultvalue false\n */\n borderless?: boolean;\n\n /**\n * Optional Classname for datepicker root element .\n */\n className?: string;\n\n /**\n * Apply additional formating to dates, for example localized date formatting.\n */\n dateTimeFormatter?: ICalendarFormatDateCallbacks;\n\n /**\n * The minimum allowable date.\n */\n minDate?: Date;\n\n /**\n * The maximum allowable date.\n */\n maxDate?: Date;\n\n /**\n * The initially highlighted date in the calendar picker\n */\n initialPickerDate?: Date;\n\n /**\n * Allows all elements to be focused, including disabled ones\n * @defaultvalue false\n */\n allFocusable?: boolean;\n\n /**\n * Callback that runs after DatePicker's menu (Calendar) is closed\n */\n onAfterMenuDismiss?: () => void;\n\n /**\n * Whether the CalendarDay close button should be shown or not.\n */\n showCloseButton?: boolean;\n\n /**\n * The tabIndex of the TextField\n */\n tabIndex?: number;\n}\n\n/**\n * {@docCategory DatePicker}\n */\nexport interface IDatePickerStrings extends ICalendarStrings {\n /**\n * Error message to render for TextField if isRequired validation fails.\n */\n isRequiredErrorMessage?: string;\n\n /**\n * Error message to render for TextField if input date string parsing fails.\n */\n invalidInputErrorMessage?: string;\n\n /**\n * Error message to render for TextField if date boundary (minDate, maxDate) validation fails.\n */\n isOutOfBoundsErrorMessage?: string;\n}\n\n/**\n * {@docCategory DatePicker}\n */\nexport interface IDatePickerStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n // Insert DatePicker style props below\n disabled?: boolean;\n underlined?: boolean;\n label?: boolean;\n isDatePickerShown?: boolean;\n}\n\n/**\n * {@docCategory DatePicker}\n */\nexport interface IDatePickerStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n textField: IStyle;\n callout: IStyle;\n icon: IStyle;\n wrapper?: IStyle;\n readOnlyTextField?: IStyle;\n readOnlyPlaceholder?: IStyle;\n}\n"]} |