@douyinfe/semi-ui/lib/cjs/timePicker/TimePicker.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import PropTypes from 'prop-types';
import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
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[];
    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<any>;
    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<HTMLInputElement>;
    onChange?: TimePickerAdapter['notifyChange'];
    onChangeWithDateFirst?: boolean;
    onFocus?: React.FocusEventHandler<HTMLInputElement>;
    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<TimePickerProps, TimePickerState> {
    static contextType: React.Context<import("../configProvider/context").ContextValue>;
    static propTypes: {
        inputStyle: PropTypes.Requireable<object>;
        preventScroll: PropTypes.Requireable<boolean>;
        panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        'aria-labelledby': PropTypes.Requireable<string>;
        'aria-invalid': PropTypes.Requireable<boolean>;
        'aria-errormessage': PropTypes.Requireable<string>;
        'aria-describedby': PropTypes.Requireable<string>;
        'aria-required': PropTypes.Requireable<boolean>;
        prefixCls: PropTypes.Requireable<string>;
        borderless: PropTypes.Requireable<boolean>;
        clearText: PropTypes.Requireable<string>;
        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        value: PropTypes.Requireable<NonNullable<string | number | string[] | Date | number[] | Date[]>>;
        inputReadOnly: PropTypes.Requireable<boolean>;
        disabled: PropTypes.Requireable<boolean>;
        showClear: PropTypes.Requireable<boolean>;
        defaultValue: PropTypes.Requireable<NonNullable<string | number | string[] | Date | number[] | Date[]>>;
        open: PropTypes.Requireable<boolean>;
        defaultOpen: PropTypes.Requireable<boolean>;
        onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
        position: PropTypes.Requireable<any>;
        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
        placeholder: PropTypes.Requireable<string>;
        format: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        popupClassName: PropTypes.Requireable<string>;
        popupStyle: PropTypes.Requireable<object>;
        disabledHours: PropTypes.Requireable<(...args: any[]) => any>;
        disabledMinutes: PropTypes.Requireable<(...args: any[]) => any>;
        disabledSeconds: PropTypes.Requireable<(...args: any[]) => any>;
        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
        hideDisabledOptions: PropTypes.Requireable<boolean>;
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        use12Hours: PropTypes.Requireable<boolean>;
        hourStep: PropTypes.Requireable<number>;
        minuteStep: PropTypes.Requireable<number>;
        secondStep: PropTypes.Requireable<number>;
        focusOnOpen: PropTypes.Requireable<boolean>;
        autoFocus: PropTypes.Requireable<boolean>;
        size: PropTypes.Requireable<"default" | "small" | "large">;
        stopPropagation: PropTypes.Requireable<boolean>;
        panels: PropTypes.Requireable<PropTypes.InferProps<{
            panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
            panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        }>[]>;
        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
        locale: PropTypes.Requireable<object>;
        localeCode: PropTypes.Requireable<string>;
        dateFnsLocale: PropTypes.Requireable<object>;
        zIndex: PropTypes.Requireable<NonNullable<string | number>>;
        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        insetLabelId: PropTypes.Requireable<string>;
        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
        type: PropTypes.Requireable<Type>;
        rangeSeparator: PropTypes.Requireable<string>;
        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
        timeZone: PropTypes.Requireable<NonNullable<string | number>>;
        scrollItemProps: PropTypes.Requireable<object>;
        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
        autoAdjustOverflow: PropTypes.Requireable<boolean>;
    };
    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<HTMLDivElement>;
    savePanelRef: React.RefObject<HTMLDivElement>;
    useCustomTrigger: boolean;
    clickOutSideHandler: (e: MouseEvent) => void;
    constructor(props: TimePickerProps);
    get adapter(): TimePickerAdapter<TimePickerProps, TimePickerState>;
    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[];
    };
    getPanelElement(): React.JSX.Element;
    getPopupClassName(): string;
    focus(): void;
    blur(): void;
    handlePanelVisibleChange: (visible: boolean) => void;
    openPanel: () => void;
    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
    setTimePickerRef: React.LegacyRef<HTMLDivElement>;
    render(): React.JSX.Element;
}