shineout/css/DatePicker/Props.d.ts

Shein 前端组件库

import React, { ReactNode } from 'react';
import { GetTableConsumerProps } from '../Table/Props';
import { GetInputBorderProps } from '../hoc/Props';
import { GetInputableProps } from '../Form/Props';
import { StandardProps, RegularAttributes } from '../@types/common';
import { AbsoluteProps } from '../AnimationList/Props';
import { InputTitleProps } from '../InputTitle/Props';
export declare type DateTimeType = Date | number | string | undefined;
export declare type DatePickerValue = DateTimeType | DateTimeType[];
export declare type AreaType = 'year' | 'month' | 'week' | 'day' | 'time' | 'quick' | 'quarter';
export declare type Mode = 'year' | 'month' | 'quarter' | 'time' | 'day' | 'minute' | 'second' | 'hour';
export declare type TimeMode = 'hour' | 'minute' | 'second' | 'ampm';
export declare type DateMode = Mode | 'date';
export declare type vaildFn = (date: Date, ...args: any) => boolean;
export declare type vaildFns = ((date: Date, ...args: any) => boolean)[];
export declare type QuickType = {
    value: Date[];
    invalid: boolean;
    name: string;
};
export interface QuickSelectType<Value = Date[]> {
    name: React.ReactNode;
    value: Value;
}
export declare type DisabledRegister = (disabled: Function, mode: 'time' | 'date' | 'week' | 'month' | 'year' | 'quarter' | 'datetime' | 'day', index?: number) => void;
export declare type PickMouseEvent = (e: React.MouseEvent) => void;
export declare type DisabledType = 'start' | 'end';
export interface BaseProps<Value = DatePickerValue> extends StandardProps, Pick<AbsoluteProps, 'absolute' | 'zIndex'>, Pick<InputTitleProps, 'innerTitle'> {
    /**
     * @en If clearable is true, show clear value icon
     * @cn  是否显示清除数据图标
     * @default true
     */
    clearable?: boolean;
    /**
     * @en onChange get undefined while clear
     * @cn 清空值时抛出 undefined
     * @default false
     */
    clearWithUndefined?: boolean;
    /**
     * @en When the value is true, disabled all options; When the value is function, disable the options that this function returns true.
     * @cn 如果 disabled 为 true，禁用全部选项，如果 disabled 为函数，根据函数反回结果禁用选项
     * @default false
     */
    disabled?: ((date: Date, type?: DisabledType, value0?: Date, value1?: Date) => boolean) | boolean;
    /**
     * @en default values for different types: 'date': 'YYYY-MM-DD'; 'time': 'HH:mm:ss'; 'week': 'GGGG WW'; 'month': 'YYYY-MM'; 'week': 'GGGG WW'; 'quarter': 'YYYY-\\[Q]Q'; 'year': 'YYYY'; 'datetime': 'YYYY-MM-DD HH:mm:ss'
     * @cn 不同type对应的默认值。'date': 'YYYY-MM-DD'; 'time': 'HH:mm:ss'; 'week': 'GGGG WW'; 'month': 'YYYY-MM'; 'quarter': 'YYYY-\\[Q]Q';  'year': 'YYYY'; 'datetime': 'YYYY-MM-DD HH:mm:ss'
     */
    format?: string;
    /**
     * @en Format the selected time
     * @cn 对选中时间进行格式化
     * @default props.format
     */
    formatResult?: string | ((date: Date) => string);
    /**
     * @en a callback when the value is changing
     * @cn 值改变回调函数
     */
    onChange?: (value: Value, quickSelect?: QuickSelectType | null) => void;
    /**
     * @en placeholder text. When the range property is not empty, it is an array of length 2.
     * @cn 占位文字。range 属性不为空时，为长度为2的数组
     */
    placeholder?: string | string[];
    /**
     * @en range span，unit: **second**，When it is true, selection scope is not limited.
     * @cn 范围跨度，单位 **秒**，为 true 时表示不限制选择范围。
     */
    range?: boolean | number;
    /**
     * @en type of datepicker
     * @cn 时间类型
     * @default 'date'
     */
    type?: 'date' | 'time' | 'datetime' | 'month' | 'week' | 'quarter' | 'year';
    /**
     * @en Default time when selecting a date, the format is: 'HH:mm:ss'
     * @cn 选择日期时默认的时间, 格式为: 'HH:mm:ss'
     */
    defaultTime?: DatePickerValue;
    /**
     * @en allow single select, only in range can set
     * @cn 是否允许单选, 仅在 range 模式下有效
     * @default false
     */
    allowSingle?: boolean;
    /**
     * @en quick select, only in range can set, name: tip, value: range date
     * @cn 快速选择, 仅在 range 模式下有效, name: 文字提示, value: 时间范围
     * @override {name: string, value: Value}[]
     */
    quickSelect?: Array<QuickSelectType<DatePickerValue>>;
    /**
     * @en option min value
     * @cn 可选最小值
     */
    min?: DateTimeType;
    /**
     * @en option max value
     * @cn 可选最大值
     */
    max?: DateTimeType;
    /**
     * @en The initial month of range selection, the value is a time object, valid only in range mode, and the priority is lower than value and defaultValue
     * @cn 范围选择的初始月份, 值为时间对象 或者时间戳, 仅在 range 模式下生效, 优先级低于 value 和 defaultValue
     */
    defaultRangeMonth?: Array<DateTimeType>;
    /**
     * @en default date of panel，work under has no value
     * @cn 面板默认时间，在未选择日期时生效
     */
    defaultPickerValue?: DateTimeType | DateTimeType[];
    /**
     * @en hour step
     * @cn 小时选项步长
     */
    hourStep?: number;
    /**
     * @en minute step
     * @cn 分钟选项步长
     */
    minuteStep?: number;
    /**
     * @en second step
     * @cn 秒选项步长
     */
    secondStep?: number;
    /**
     * @en Disable the specified Time.
     * @cn 禁用指定 Time。
     */
    disabledTime?: string | ((time: string) => boolean);
    /**
     * @en horizontal align of the value
     * @cn 值水平排布方式
     * @default "center"
     *
     */
    align?: 'left' | 'right' | 'center';
    /**
     * @en value onchange callback (every type of date)
     * @cn 值改变回调，有别于 onChange, onPickerChange会在每项值改变的时候执行
     */
    onPickerChange?: (value: DatePickerValue, quickSelect: QuickSelectType | void | undefined, areaType: AreaType) => void;
    /**
     * @en Allow enter something into DatePicker
     * @cn 可输入
     * @default false
     */
    inputable?: boolean;
    /**
     * @en Set Position can control the different position of DatePicker
     * @cn 弹出框位置
     */
    position?: 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
    /**
     * @en There are three built-in size: small、default、large.
     * @cn 不同尺寸
     * @override union
     * @default 'default'
     */
    size?: RegularAttributes.Size;
    /**
     * @en Set the default time zone, the format is /^([+-]\\d{2})$/ Support '-12' to '+13'
     * @cn 设置默认时区,格式为/^([+-]\\d{2})$/ 支持 '-12' 到 '+13'
     */
    timeZone?: string;
    /**
     * @en Set visible of datepicker popup
     * @cn 控制浮层显隐
     */
    open?: boolean;
    /**
     * @en option list collapse callback
     * @cn 下拉列表展开/收起回调
     */
    onCollapse?: (collapse: boolean) => void;
}
export interface ContainerProps<T = DatePickerValue> extends Pick<BaseProps, 'disabled' | 'format' | 'formatResult' | 'inputable' | 'placeholder' | 'position' | 'range' | 'size' | 'type' | 'allowSingle' | 'defaultTime' | 'absolute' | 'zIndex' | 'quickSelect' | 'min' | 'max' | 'defaultRangeMonth' | 'defaultPickerValue' | 'hourStep' | 'minuteStep' | 'secondStep' | 'onPickerChange' | 'disabledTime' | 'align' | 'clearable' | 'clearWithUndefined' | 'innerTitle' | 'timeZone' | 'open' | 'onCollapse'> {
    /**
     * @inner 内部属性
     */
    inputFocus: boolean;
    /**
     * @en When the value is string, it needs to match the format attribute.\n When the range property is true, the value is an array of length 2.
     * @cn 值为 string 时，需要和 format 属性匹配。\n 非 string 会格式化为 string。\n range 属性为 true 时，值为长度为2的数组
     */
    value: DatePickerValue;
    /**
     * @en extra children
     * @cn 额外渲染的节点
     */
    children?: ReactNode;
    onValueBlur: () => void;
    /**
     * @en blur event callback
     * @cn blur 事件回调
     */
    onBlur: (e: any) => void;
    /**
     * @en focus event callback
     * @cn focus 事件回调
     */
    onFocus: (e: any) => void;
    onChange: (value: T, callback?: () => void, quickSelect?: QuickSelectType) => void;
}
export interface DatePickerIconProps {
    tag: string;
    name: string;
    className?: string;
    disabled?: boolean;
    onClick?: (e?: React.MouseEvent) => void;
}
export interface TimeScrollProps extends Pick<UnionPannelProps, 'range' | 'disabled' | 'disabledTime' | 'index' | 'rangeDate'>, Pick<BaseProps, 'timeZone'> {
    value: number;
    total: number;
    step?: number;
    current: Date;
    ampm?: boolean;
    min?: Date | null;
    max?: Date | null;
    onChange: (val: number) => void;
    mode: 'H' | 'h' | 'm' | 's' | 'ampm';
}
export interface TextProps {
    value: string;
    index: number;
    focus: boolean;
    timeZone?: string;
    disabled: boolean;
    className?: string;
    inputable?: boolean;
    placeholder: string;
    focusElement: HTMLSpanElement;
    format: string | ((date: Date) => string);
    onTextSpanRef: (e: HTMLSpanElement) => void;
    onChange: (date: Date | undefined, index: number, e: React.FocusEvent<Element>) => void;
}
declare type ChangeSyncFunc = (index: number, date: Date, change: boolean | undefined, _blur: boolean | undefined, _isEnd: boolean | undefined, _isQuickSelect: QuickSelectType | undefined, areaType: AreaType) => void;
export interface PickerProps extends Pick<BaseProps, 'range' | 'type'> {
    min?: Date;
    max?: Date;
    pos?: string;
    index?: number;
    format: string;
    rangeDate?: Date[];
    quicks?: QuickType[];
    rangeTemp?: Date;
    onChangeSync?: ChangeSyncFunc;
    timeZone?: string;
    defaultTime: Date[];
    current: Date | Date[];
    showTimePicker: boolean;
    value: Date;
    onDayHover?: (date: Date) => void;
    handleHover?: (index: number, isEnter: boolean) => void;
    onChange: (date: Date[] | Date, change?: boolean, blur?: boolean, isEnd?: boolean, isQuickSelect?: QuickSelectType, areaType?: AreaType) => void;
    allowSingle?: boolean;
    disabled?: ((date: Date, type?: DisabledType, value?: DatePickerValue) => boolean);
    disabledRegister: DisabledRegister;
}
export interface RangeProps extends Pick<BaseProps, 'range' | 'hourStep' | 'minuteStep' | 'secondStep' | 'disabledTime'> {
    max?: Date;
    min?: Date;
    value: Date[];
    current: Date[];
    rangeTemp?: Date;
    timeZone?: string;
    defaultTime: Date[];
    children: React.ReactNode;
    type: ContainerProps['type'];
    disabled?: ((date: Date, type?: DisabledType, value?: DatePickerValue) => boolean);
    format: string;
    onChange: (date: Date[], change?: boolean, blur?: boolean, isEnd?: boolean, isQuickSelect?: QuickSelectType, areaType?: AreaType) => void;
    quicks?: QuickType[];
    allowSingle?: boolean;
    disabledRegister: DisabledRegister;
}
export interface QuickProps extends Pick<BaseProps, 'type'> {
    onChange: (quick: QuickSelectType) => void;
    quicks?: QuickType[];
    current: Date | Date[];
    children?: ReactNode;
    timeZone?: string;
}
export interface UnionPannelProps extends Pick<BaseProps, 'range' | 'timeZone' | 'disabled' | 'allowSingle' | 'hourStep' | 'minuteStep' | 'secondStep' | 'disabledTime'> {
    max?: Date;
    min?: Date;
    value: Date;
    type?: string;
    index?: number;
    current: Date;
    format: string;
    onDayHover?: (date: Date) => void;
    rangeTemp?: Date;
    rangeDate?: Date[];
    onChangeSync?: ChangeSyncFunc;
    defaultTime: Date[];
    showTimePicker: boolean;
    onModeChange: (type: Mode) => void;
    disabledRegister: DisabledRegister;
    onChange: (date: Date, change?: boolean, blur?: boolean, isEnd?: boolean, isQuickSelect?: QuickSelectType, areaType?: AreaType) => void;
}
export declare type GetDatePickerValueProps<Props> = Omit<Props, 'onValueBlur' | 'onChange'> & Pick<BaseProps, 'onChange'>;
export declare type DatePickerPropsWidthAbsolute<T = DatePickerValue> = GetTableConsumerProps<ContainerProps<T>>;
export declare type DatePickerPropsWidthValue<T = DatePickerValue> = GetDatePickerValueProps<DatePickerPropsWidthAbsolute<T>>;
export declare type DatePickerPropsWidthInputBorder<T = DatePickerValue> = Omit<GetInputBorderProps<DatePickerPropsWidthValue<T>>, 'autoFocus'>;
export declare type DatePickerPropsWidthInputable<T = DatePickerValue> = GetInputableProps<DatePickerPropsWidthInputBorder<T>, DatePickerValue>;
/**
 * @title DatePicker
 */
export declare type DatePickerProps<T = DatePickerValue> = DatePickerPropsWidthInputable<T>;
export declare class DatePickerClass<T = DatePickerValue> extends React.Component<DatePickerProps<T>, {}> {
    render(): JSX.Element;
}
export declare type DatePickerType = typeof DatePickerClass;
export {};