import React from 'react'; import PropTypes from 'prop-types'; import BaseComponent, { ValidateStatus } from '../_base/baseComponent'; import type { PanelType } from '@douyinfe/semi-foundation/lib/cjs/timePicker/constants'; import { PopoverProps } from '../popover'; import TimePickerFoundation, { TimePickerAdapter } from '@douyinfe/semi-foundation/lib/cjs/timePicker/foundation'; import '@douyinfe/semi-foundation/lib/cjs/timePicker/timePicker.css'; import { InputSize } from '../input'; import { Position } from '../tooltip'; import { ScrollItemProps } from '../scrollList/scrollItem'; import { Locale } from '../locale/interface'; export interface Panel { panelHeader?: React.ReactNode | React.ReactNode[]; panelFooter?: React.ReactNode | React.ReactNode[]; } export type BaseValueType = string | number | Date | undefined; export type Type = 'time' | 'timeRange'; export type TimePickerProps = { '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']; autoAdjustOverflow?: boolean; autoFocus?: boolean; borderless?: boolean; className?: string; clearText?: string; clearIcon?: React.ReactNode; dateFnsLocale?: Locale['dateFnsLocale']; defaultOpen?: boolean; defaultValue?: BaseValueType | BaseValueType[]; disabled?: boolean; disabledHours?: () => number[]; disabledMinutes?: (selectedHour: number) => number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; /** * Range-only callback to derive disabled hours/minutes/seconds for the * left and right panel separately. In single mode this prop is ignored * (the top-level disabledHours / disabledMinutes / disabledSeconds props * are used instead). */ disabledTime?: (value: Date[], panelType: PanelType) => { disabledHours?: () => number[]; disabledMinutes?: (selectedHour: number) => number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; }; dropdownMargin?: PopoverProps['margin']; focusOnOpen?: boolean; format?: string; getPopupContainer?: () => HTMLElement; hideDisabledOptions?: boolean; hourStep?: number; id?: string; inputReadOnly?: boolean; inputStyle?: React.CSSProperties; insetLabel?: React.ReactNode; insetLabelId?: string; locale?: Locale['TimePicker']; localeCode?: string; minuteStep?: number; motion?: boolean; open?: boolean; panelFooter?: React.ReactNode | React.ReactNode[]; panelHeader?: React.ReactNode | React.ReactNode[]; panels?: Panel[]; placeholder?: string; popupClassName?: string; popupStyle?: React.CSSProperties; position?: Position; prefixCls?: string; preventScroll?: boolean; rangeSeparator?: string; scrollItemProps?: ScrollItemProps; secondStep?: number; showClear?: boolean; size?: InputSize; stopPropagation?: boolean; style?: React.CSSProperties; timeZone?: string | number; triggerRender?: (props?: any) => React.ReactNode; type?: Type; use12Hours?: boolean; validateStatus?: ValidateStatus; value?: BaseValueType | BaseValueType[]; zIndex?: number | string; onBlur?: React.FocusEventHandler; onChange?: TimePickerAdapter['notifyChange']; onChangeWithDateFirst?: boolean; onFocus?: React.FocusEventHandler; onOpenChange?: (open: boolean) => void; }; export interface TimePickerState { open: boolean; value: Date[]; inputValue: string; currentSelectPanel: string | number; isAM: [boolean, boolean]; showHour: boolean; showMinute: boolean; showSecond: boolean; invalid: boolean; } export default class TimePicker extends BaseComponent { static contextType: React.Context; static propTypes: { inputStyle: PropTypes.Requireable; preventScroll: PropTypes.Requireable; panelHeader: PropTypes.Requireable>; panelFooter: PropTypes.Requireable>; 'aria-labelledby': PropTypes.Requireable; 'aria-invalid': PropTypes.Requireable; 'aria-errormessage': PropTypes.Requireable; 'aria-describedby': PropTypes.Requireable; 'aria-required': PropTypes.Requireable; prefixCls: PropTypes.Requireable; borderless: PropTypes.Requireable; clearText: PropTypes.Requireable; clearIcon: PropTypes.Requireable; value: PropTypes.Requireable>; inputReadOnly: PropTypes.Requireable; disabled: PropTypes.Requireable; showClear: PropTypes.Requireable; defaultValue: PropTypes.Requireable>; open: PropTypes.Requireable; defaultOpen: PropTypes.Requireable; onOpenChange: PropTypes.Requireable<(...args: any[]) => any>; position: PropTypes.Requireable; getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>; placeholder: PropTypes.Requireable; format: PropTypes.Requireable; style: PropTypes.Requireable; className: PropTypes.Requireable; popupClassName: PropTypes.Requireable; popupStyle: PropTypes.Requireable; disabledHours: PropTypes.Requireable<(...args: any[]) => any>; disabledMinutes: PropTypes.Requireable<(...args: any[]) => any>; disabledSeconds: PropTypes.Requireable<(...args: any[]) => any>; disabledTime: PropTypes.Requireable<(...args: any[]) => any>; dropdownMargin: PropTypes.Requireable>; hideDisabledOptions: PropTypes.Requireable; onChange: PropTypes.Requireable<(...args: any[]) => any>; use12Hours: PropTypes.Requireable; hourStep: PropTypes.Requireable; minuteStep: PropTypes.Requireable; secondStep: PropTypes.Requireable; focusOnOpen: PropTypes.Requireable; autoFocus: PropTypes.Requireable; size: PropTypes.Requireable<"default" | "small" | "large">; stopPropagation: PropTypes.Requireable; panels: PropTypes.Requireable>; panelFooter: PropTypes.Requireable>; }>[]>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onBlur: PropTypes.Requireable<(...args: any[]) => any>; locale: PropTypes.Requireable; localeCode: PropTypes.Requireable; dateFnsLocale: PropTypes.Requireable; zIndex: PropTypes.Requireable>; insetLabel: PropTypes.Requireable; insetLabelId: PropTypes.Requireable; validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">; type: PropTypes.Requireable; rangeSeparator: PropTypes.Requireable; triggerRender: PropTypes.Requireable<(...args: any[]) => any>; timeZone: PropTypes.Requireable>; scrollItemProps: PropTypes.Requireable; motion: PropTypes.Requireable>; autoAdjustOverflow: PropTypes.Requireable; }; static defaultProps: { autoAdjustOverflow: boolean; borderless: boolean; getPopupContainer: () => HTMLElement; showClear: boolean; zIndex: number; rangeSeparator: " ~ "; onOpenChange: (...args: any[]) => void; clearText: string; prefixCls: string; inputReadOnly: boolean; style: {}; stopPropagation: boolean; className: string; popupClassName: string; popupStyle: { left: string; top: string; }; disabledHours: () => number[]; disabledMinutes: () => number[]; disabledSeconds: () => number[]; hideDisabledOptions: boolean; onFocus: (...args: any[]) => void; onBlur: (...args: any[]) => void; onChange: (...args: any[]) => void; onChangeWithDateFirst: boolean; use12Hours: boolean; focusOnOpen: boolean; onKeyDown: (...args: any[]) => void; size: "default"; type: "time"; motion: boolean; }; foundation: TimePickerFoundation; timePickerRef: React.MutableRefObject; savePanelRef: React.RefObject; useCustomTrigger: boolean; clickOutSideHandler: (e: MouseEvent) => void; constructor(props: TimePickerProps); get adapter(): TimePickerAdapter; static getDerivedStateFromProps(nextProps: TimePickerProps, prevState: TimePickerState): { open: boolean; }; componentDidUpdate(prevProps: TimePickerProps): void; onCurrentSelectPanelChange: (currentSelectPanel: string) => void; handlePanelChange: (value: { isAM: boolean; value: string; timeStampValue: number; }, index: number) => void; handleInput: (value: string) => void; createPanelProps: (index?: number) => { panelHeader: React.ReactNode | React.ReactNode[]; panelFooter: React.ReactNode | React.ReactNode[]; }; getDisabledTimeOptions(panelType: PanelType): { disabledHours?: () => number[]; disabledMinutes?: (selectedHour: number) => number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]; }; getPanelElement(): React.JSX.Element; getPopupClassName(): string; focus(): void; blur(): void; handlePanelVisibleChange: (visible: boolean) => void; openPanel: () => void; handleFocus: (e: React.FocusEvent) => void; handleBlur: (e: React.FocusEvent) => void; setTimePickerRef: React.LegacyRef; render(): React.JSX.Element; }