import React from 'react'; import PropTypes from 'prop-types'; import { ContextValue } from '../configProvider/context'; import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation'; import BaseComponent from '../_base/baseComponent'; import { PopoverProps } from '../popover/index'; import { DateInputProps } from './dateInput'; import MonthsGrid, { MonthsGridProps } from './monthsGrid'; import { YearAndMonthProps } from './yearAndMonth'; import '@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css'; import { Locale } from '../locale/interface'; import { TimePickerProps } from '../timePicker/TimePicker'; import { ScrollItemProps } from '../scrollList/scrollItem'; import { InsetInputChangeProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation'; export interface DatePickerProps extends DatePickerFoundationProps { 'aria-describedby'?: React.AriaAttributes['aria-describedby']; 'aria-errormessage'?: React.AriaAttributes['aria-errormessage']; 'aria-invalid'?: React.AriaAttributes['aria-invalid']; 'aria-labelledby'?: React.AriaAttributes['aria-labelledby']; 'aria-required'?: React.AriaAttributes['aria-required']; clearIcon?: React.ReactNode; timePickerOpts?: TimePickerProps; bottomSlot?: React.ReactNode; insetLabel?: React.ReactNode; insetLabelId?: string; prefix?: React.ReactNode; topSlot?: React.ReactNode; rightSlot?: React.ReactNode; renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode; renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode; triggerRender?: (props: DatePickerProps) => React.ReactNode; /** * Only affects rendering of the separator between range inputs. * String parsing / formatting still relies on `rangeSeparator`. */ rangeSeparatorNode?: React.ReactNode; /** * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times. * * Use `onOpenChange` or `onClickOutSide` instead */ onBlur?: React.MouseEventHandler; onClear?: React.MouseEventHandler; /** * There are multiple input boxes when selecting a range, and the input boxes will be focused multiple times. * * Use `onOpenChange` or `triggerRender` instead */ onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void; onPresetClick?: (item: PresetType, e: React.MouseEvent) => void; onClickOutSide?: (e: React.MouseEvent) => void; locale?: Locale['DatePicker']; leftSlot?: React.ReactNode; dateFnsLocale?: Locale['dateFnsLocale']; yearAndMonthOpts?: ScrollItemProps; dropdownMargin?: PopoverProps['margin']; } export type DatePickerState = DatePickerFoundationState; export default class DatePicker extends BaseComponent { static contextType: React.Context; static propTypes: { 'aria-describedby': PropTypes.Requireable; 'aria-errormessage': PropTypes.Requireable; 'aria-invalid': PropTypes.Requireable; 'aria-labelledby': PropTypes.Requireable; 'aria-required': PropTypes.Requireable; borderless: PropTypes.Requireable; type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "monthRange" | "dateTimeRange">; size: PropTypes.Requireable<"default" | "small" | "large">; clearIcon: PropTypes.Requireable; density: PropTypes.Requireable<"default" | "compact">; defaultValue: PropTypes.Requireable>; value: PropTypes.Requireable>; defaultPickerValue: PropTypes.Requireable>; disabledTime: PropTypes.Requireable<(...args: any[]) => any>; disabledTimePicker: PropTypes.Requireable; hideDisabledOptions: PropTypes.Requireable; format: PropTypes.Requireable; disabled: PropTypes.Requireable; multiple: PropTypes.Requireable; max: PropTypes.Requireable; placeholder: PropTypes.Requireable>; presets: PropTypes.Requireable; presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">; onChange: PropTypes.Requireable<(...args: any[]) => any>; onChangeWithDateFirst: PropTypes.Requireable; weekStartsOn: PropTypes.Requireable; disabledDate: PropTypes.Requireable<(...args: any[]) => any>; timePickerOpts: PropTypes.Requireable; showClear: PropTypes.Requireable; onOpenChange: PropTypes.Requireable<(...args: any[]) => any>; open: PropTypes.Requireable; defaultOpen: PropTypes.Requireable; motion: PropTypes.Requireable>; className: PropTypes.Requireable; prefixCls: PropTypes.Requireable; prefix: PropTypes.Requireable; insetLabel: PropTypes.Requireable; insetLabelId: PropTypes.Requireable; zIndex: PropTypes.Requireable; position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">; getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>; onCancel: PropTypes.Requireable<(...args: any[]) => any>; onConfirm: PropTypes.Requireable<(...args: any[]) => any>; needConfirm: PropTypes.Requireable; inputStyle: PropTypes.Requireable; timeZone: PropTypes.Requireable>; triggerRender: PropTypes.Requireable<(...args: any[]) => any>; stopPropagation: PropTypes.Requireable>; autoAdjustOverflow: PropTypes.Requireable; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onClear: PropTypes.Requireable<(...args: any[]) => any>; style: PropTypes.Requireable; autoFocus: PropTypes.Requireable; inputReadOnly: PropTypes.Requireable; validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">; renderDate: PropTypes.Requireable<(...args: any[]) => any>; renderFullDate: PropTypes.Requireable<(...args: any[]) => any>; spacing: PropTypes.Requireable>; startDateOffset: PropTypes.Requireable<(...args: any[]) => any>; endDateOffset: PropTypes.Requireable<(...args: any[]) => any>; autoSwitchDate: PropTypes.Requireable; dropdownClassName: PropTypes.Requireable; dropdownStyle: PropTypes.Requireable; dropdownMargin: PropTypes.Requireable>; topSlot: PropTypes.Requireable; bottomSlot: PropTypes.Requireable; dateFnsLocale: PropTypes.Requireable; syncSwitchMonth: PropTypes.Requireable; onPanelChange: PropTypes.Requireable<(...args: any[]) => any>; rangeSeparator: PropTypes.Requireable; rangeSeparatorNode: PropTypes.Requireable; preventScroll: PropTypes.Requireable; yearAndMonthOpts: PropTypes.Requireable; onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>; }; static __SemiComponentName__: string; static defaultProps: any; triggerElRef: React.MutableRefObject; panelRef: React.RefObject; monthGrid: React.RefObject; inputRef: DateInputProps['inputRef']; rangeInputStartRef: DateInputProps['rangeInputStartRef']; rangeInputEndRef: DateInputProps['rangeInputEndRef']; focusRecordsRef: React.RefObject<{ rangeStart: boolean; rangeEnd: boolean; }>; clickOutSideHandler: (e: MouseEvent) => void; _mounted: boolean; foundation: DatePickerFoundation; context: ContextValue; constructor(props: DatePickerProps); get adapter(): DatePickerAdapter; isRangeType(type: Type, triggerRender: DatePickerProps['triggerRender']): boolean; componentDidUpdate(prevProps: DatePickerProps): void; componentDidMount(): void; componentWillUnmount(): void; open(): void; close(): void; /** * * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box * * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel * * 范围选择时,默认聚焦在开始输入框,传入 `rangeEnd` 可以聚焦在结束输入框 * * `insetInput` 打开时,由于 trigger 禁用,会把焦点放在弹出面板的输入框上 */ focus(focusType?: Exclude): void; blur(): void; setTriggerRef: (node: HTMLDivElement) => HTMLDivElement; handleSelectedChange: MonthsGridProps['onChange']; handleYMSelectedChange: YearAndMonthProps['onSelect']; disabledDisposeDate: MonthsGridProps['disabledDate']; disabledDisposeTime: MonthsGridProps['disabledTime']; renderMonthGrid(locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']): React.JSX.Element; renderQuickControls(): React.JSX.Element; renderDateInput(): React.JSX.Element; handleOpenPanel: () => void; handleInputChange: DatePickerFoundation['handleInputChange']; handleInsetInputChange: (options: InsetInputChangeProps) => void; handleInputComplete: DatePickerFoundation['handleInputComplete']; handleInputBlur: DateInputProps['onBlur']; handleInputFocus: DatePickerFoundation['handleInputFocus']; handleInputClear: DatePickerFoundation['handleInputClear']; handleTriggerWrapperClick: DatePickerFoundation['handleTriggerWrapperClick']; handleSetRangeFocus: DatePickerFoundation['handleSetRangeFocus']; handleRangeInputBlur: (value: any, e: any) => void; handleRangeInputClear: DatePickerFoundation['handleRangeInputClear']; handleRangeEndTabPress: DatePickerFoundation['handleRangeEndTabPress']; isAnotherPanelHasOpened: (currentRangeInput: RangeType) => boolean; handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void; handleInsetTimeFocus: () => void; handlePanelVisibleChange: (visible: boolean) => void; renderInner(extraProps?: Partial): React.JSX.Element; handleConfirm: (e: React.MouseEvent) => void; handleCancel: (e: React.MouseEvent) => void; renderFooter: (locale: Locale['DatePicker'], localeCode: string) => React.JSX.Element; renderPanel: (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => React.JSX.Element; renderYearMonthPanel: (locale: Locale['DatePicker'], localeCode: string) => React.JSX.Element; wrapPopover: (children: React.ReactNode) => React.JSX.Element; render(): React.JSX.Element; }