jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
111 lines (110 loc) • 4.6 kB
TypeScript
/**
* @description 自定义日期范围时间选择器组件
*/
import React from 'react';
import type { Moment } from 'moment';
import moment from 'moment';
import type { DateRangePickerProps } from '../../types';
interface DateRangePickerState {
isOpened: boolean;
isFocused: boolean;
/** 开始时间 */
startDate?: moment.Moment;
/** 结束时间 */
endDate?: moment.Moment;
/** 最近一次confirm的开始时间 */
oldStartDate?: moment.Moment;
/** 最近一次confirm的结束时间 */
oldEndDate?: moment.Moment;
/** 开始时间输入值 */
startInputValue?: string;
/** 结束时间输入值 */
endInputValue?: string;
/**
* 当前聚焦的模式
*/
focusedMode?: 'start' | 'end' | '';
/**
* 当前更新来源的mode
*/
changedFromMode?: 'start' | 'end';
}
export declare class DateRangePicker extends React.Component<DateRangePickerProps, Partial<DateRangePickerState>> {
static defaultProps: Partial<DateRangePickerProps>;
static formatValue(newValue: {
startDate: Moment;
endDate: Moment;
}, format: string, joinValues: boolean, delimiter: string, utc?: boolean): string | string[];
static unFormatValue(value: any, format: string, joinValues: boolean, delimiter: string): {
startDate: Moment | undefined;
endDate: Moment | undefined;
};
innerDom: any;
popover: any;
input?: HTMLInputElement;
isFirstClick: boolean;
dom: React.RefObject<HTMLDivElement>;
calendarRef: React.RefObject<HTMLDivElement>;
startInputRef: React.RefObject<HTMLInputElement>;
endInputRef: React.RefObject<HTMLInputElement>;
separatorRef: React.RefObject<HTMLSpanElement>;
constructor(props: DateRangePickerProps);
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(prevProps: DateRangePickerProps): void;
formatValue: (startDate: Moment, endDate: Moment) => string | string[];
handleOutClick(e: Event): void;
focus(): void;
blur(): void;
handleFocus(e: React.SyntheticEvent<HTMLDivElement>): void;
handleBlur(e: React.SyntheticEvent<HTMLDivElement>): void;
open(): void;
toggleOpen: () => void;
openStart(): void;
openEnd(): void;
close(isConfirm?: boolean): void;
handleClick: () => void;
handlePopOverClick(e: React.MouseEvent<any>): void;
handleKeyPress(e: React.KeyboardEvent): void;
confirm: () => void;
filterDate(date: moment.Moment, originValue?: moment.Moment, timeFormat?: string, type?: 'start' | 'end'): moment.Moment;
isTimeRange: () => boolean;
handleChangeStartDate: (newValue: moment.Moment) => void;
handleChangeEndDate(newValue: moment.Moment): void;
handleDateChange: (newState: Partial<DateRangePickerState>, nextStartDate?: Moment, nextEndDate?: Moment) => void;
startInputChange(e: React.ChangeEvent<HTMLInputElement>): void;
endInputChange(e: React.ChangeEvent<HTMLInputElement>): void;
/**
* 根据 maxDate/minDate/minDuration/maxDuration 修复结束时间
*/
adjustEndDate: (newValue: moment.Moment, startDate?: Moment | undefined) => Moment;
/**
* 根据 minDate/maxDate/minDuration/maxDuration 修复起始时间
*/
adjustStartDate: (newValue: moment.Moment, endDate?: Moment) => Moment;
handleTimeStartChange: (newValue: moment.Moment) => void;
handleTimeEndChange(newValue: moment.Moment): void;
handleMobileChange(data: any, callback?: () => void): void;
setRangeDate: (range: {
startDate: (now: Moment) => Moment;
endDate: (now: Moment) => Moment;
}) => void;
renderRanges: (ranges: DateRangePickerProps["ranges"]) => JSX.Element | null;
clearValue(e: React.MouseEvent<any>): void;
clear(): void;
reset(): void;
checkValidStartDate(currentDate: moment.Moment): boolean;
checkValidEndDate(currentDate: moment.Moment): boolean;
makeRenderDay: (pickerMode: "start" | "end", startViewDate: Moment, endViewDate: Moment) => (props: any, currentDate: moment.Moment) => JSX.Element;
renderMonth: (props: any, month: number, year: number, date: any) => JSX.Element;
renderQuarter: (props: any, quarter: number, year: number) => JSX.Element;
renderYear: (props: any, year: number) => JSX.Element;
renderCalendar(): JSX.Element;
/**
* 获取宽度类型变量的值
*/
getValidWidthValue(element: HTMLElement, propsName: string): number;
renderMobileCalendar: () => JSX.Element;
render(): JSX.Element;
}
export default DateRangePicker;