@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
201 lines (200 loc) • 11.5 kB
TypeScript
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;
/**
* 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<HTMLInputElement>;
onClear?: React.MouseEventHandler<HTMLDivElement>;
/**
* 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<HTMLDivElement>) => void;
onClickOutSide?: (e: React.MouseEvent) => void;
locale?: Locale['DatePicker'];
leftSlot?: React.ReactNode;
dateFnsLocale?: Locale['dateFnsLocale'];
yearAndMonthOpts?: ScrollItemProps<any>;
dropdownMargin?: PopoverProps['margin'];
}
export type DatePickerState = DatePickerFoundationState;
export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
static contextType: React.Context<ContextValue>;
static propTypes: {
'aria-describedby': PropTypes.Requireable<string>;
'aria-errormessage': PropTypes.Requireable<string>;
'aria-invalid': PropTypes.Requireable<boolean>;
'aria-labelledby': PropTypes.Requireable<string>;
'aria-required': PropTypes.Requireable<boolean>;
borderless: PropTypes.Requireable<boolean>;
type: PropTypes.Requireable<"date" | "month" | "dateTime" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
size: PropTypes.Requireable<"default" | "small" | "large">;
clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
density: PropTypes.Requireable<"default" | "compact">;
defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
value: PropTypes.Requireable<NonNullable<string | number | object>>;
defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
disabledTime: PropTypes.Requireable<(...args: any[]) => any>;
disabledTimePicker: PropTypes.Requireable<boolean>;
hideDisabledOptions: PropTypes.Requireable<boolean>;
format: PropTypes.Requireable<string>;
disabled: PropTypes.Requireable<boolean>;
multiple: PropTypes.Requireable<boolean>;
max: PropTypes.Requireable<number>;
placeholder: PropTypes.Requireable<NonNullable<string | any[]>>;
presets: PropTypes.Requireable<any[]>;
presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
onChange: PropTypes.Requireable<(...args: any[]) => any>;
onChangeWithDateFirst: PropTypes.Requireable<boolean>;
weekStartsOn: PropTypes.Requireable<number>;
disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
timePickerOpts: PropTypes.Requireable<object>;
showClear: PropTypes.Requireable<boolean>;
onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
open: PropTypes.Requireable<boolean>;
defaultOpen: PropTypes.Requireable<boolean>;
motion: PropTypes.Requireable<NonNullable<boolean | object>>;
className: PropTypes.Requireable<string>;
prefixCls: PropTypes.Requireable<string>;
prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
insetLabelId: PropTypes.Requireable<string>;
zIndex: PropTypes.Requireable<number>;
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<boolean>;
inputStyle: PropTypes.Requireable<object>;
timeZone: PropTypes.Requireable<NonNullable<string | number>>;
triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
autoAdjustOverflow: PropTypes.Requireable<boolean>;
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
onClear: PropTypes.Requireable<(...args: any[]) => any>;
style: PropTypes.Requireable<object>;
autoFocus: PropTypes.Requireable<boolean>;
inputReadOnly: PropTypes.Requireable<boolean>;
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
renderDate: PropTypes.Requireable<(...args: any[]) => any>;
renderFullDate: PropTypes.Requireable<(...args: any[]) => any>;
spacing: PropTypes.Requireable<NonNullable<number | object>>;
startDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
autoSwitchDate: PropTypes.Requireable<boolean>;
dropdownClassName: PropTypes.Requireable<string>;
dropdownStyle: PropTypes.Requireable<object>;
dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
topSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
bottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
dateFnsLocale: PropTypes.Requireable<object>;
syncSwitchMonth: PropTypes.Requireable<boolean>;
onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
rangeSeparator: PropTypes.Requireable<string>;
preventScroll: PropTypes.Requireable<boolean>;
yearAndMonthOpts: PropTypes.Requireable<object>;
onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
};
static __SemiComponentName__: string;
static defaultProps: any;
triggerElRef: React.MutableRefObject<HTMLElement>;
panelRef: React.RefObject<HTMLDivElement>;
monthGrid: React.RefObject<MonthsGrid>;
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<RangeType, false>): 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<DatePickerProps>): 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;
}