Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor DatePicker types

Browse Source
pull/9027/head
Wei Zhu 7 years ago
parent 7b90be6326
commit 0bb531aca6
3 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File

17
components/date-picker/RangePicker.tsx
Unescape Escape View File

@ -7,8 +7,7 @@ import classNames from 'classnames';
import Icon from '../icon';
import warning from '../_util/warning';
import callMoment from '../_util/callMoment';
export type RangePickerValue = moment.Moment[];
import { RangePickerValue } from './interface';
export interface RangePickerState {
value?: RangePickerValue;
@ -17,21 +16,21 @@ export interface RangePickerState {
hoverValue?: RangePickerValue;
}
function getShowDateFromValue(value: moment.Moment[]): moment.Moment[] | undefined {
function getShowDateFromValue(value: RangePickerValue) {
const [start, end] = value;
// value could be an empty array, then we should not reset showDate
if (!start && !end) {
return;
}
const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
return [start, newEnd];
return [start, newEnd] as RangePickerValue;
}
function formatValue(value: moment.Moment | undefined, format: string): string {
return (value && value.format(format)) || '';
}
function pickerValueAdapter(value?: moment.Moment | moment.Moment[]): moment.Moment[] | undefined {
function pickerValueAdapter(value?: moment.Moment | RangePickerValue): RangePickerValue | undefined {
if (!value) {
return;
}
@ -103,7 +102,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
clearHoverValue = () => this.setState({ hoverValue: [] });
handleChange = (value: moment.Moment[]) => {
handleChange = (value: RangePickerValue) => {
const props = this.props;
if (!('value' in props)) {
this.setState(({ showDate }) => ({
@ -132,7 +131,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
handleHoverChange = (hoverValue: any) => this.setState({ hoverValue });
setValue(value: moment.Moment[], hidePanel?: boolean) {
setValue(value: RangePickerValue, hidePanel?: boolean) {
this.handleChange(value);
if ((hidePanel || !this.props.showTime) && !('open' in this.props)) {
this.setState({ open: false });
@ -194,10 +193,10 @@ export default class RangePicker extends React.Component<any, RangePickerState>
} = props;
if (value && localeCode) {
if (value[0]) {
value[0].locale(localeCode);
value[0]!.locale(localeCode);
}
if (value[1]) {
value[1].locale(localeCode);
value[1]!.locale(localeCode);
}
}

80
components/date-picker/index.tsx
Unescape Escape View File

@ -1,98 +1,20 @@
import * as React from 'react';
import * as moment from 'moment';
import RcCalendar from 'rc-calendar';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import createPicker from './createPicker';
import wrapPicker from './wrapPicker';
import RangePicker from './RangePicker';
import WeekPicker from './WeekPicker';
import { TimePickerProps } from '../time-picker';
import { DatePickerProps, DatePickerDecorator } from './interface';
export interface PickerProps {
prefixCls?: string;
inputPrefixCls?: string;
format?: string;
disabled?: boolean;
allowClear?: boolean;
className?: string;
style?: React.CSSProperties;
popupStyle?: React.CSSProperties;
locale?: any;
size?: 'large' | 'small' | 'default';
getCalendarContainer?: (triggerNode: Element) => HTMLElement;
open?: boolean;
onOpenChange?: (status: boolean) => void;
disabledDate?: (current: moment.Moment) => boolean;
renderExtraFooter?: () => React.ReactNode;
dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
}
export interface SinglePickerProps {
value?: moment.Moment;
defaultValue?: moment.Moment;
defaultPickerValue?: moment.Moment;
onChange?: (date: moment.Moment, dateString: string) => void;
}
export interface DatePickerProps extends PickerProps, SinglePickerProps {
className?: string;
showTime?: TimePickerProps | boolean;
showToday?: boolean;
open?: boolean;
disabledTime?: (current: moment.Moment) => {
disabledHours?: () => number[],
disabledMinutes?: () => number[],
disabledSeconds?: () => number[],
};
onOpenChange?: (status: boolean) => void;
onOk?: (selectedTime: moment.Moment) => void;
placeholder?: string;
}
const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponentClass<DatePickerProps>;
export interface MonthPickerProps extends PickerProps, SinglePickerProps {
className?: string;
placeholder?: string;
}
const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM');
export interface RangePickerProps extends PickerProps {
className?: string;
value?: [moment.Moment, moment.Moment];
defaultValue?: [moment.Moment, moment.Moment];
defaultPickerValue?: [moment.Moment, moment.Moment];
onChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void;
onCalendarChange?: (dates: [moment.Moment, moment.Moment], dateStrings: [string, string]) => void;
onOk?: (selectedTime: moment.Moment) => void;
showTime?: TimePickerProps | boolean;
ranges?: {
[range: string]: moment.Moment[],
};
placeholder?: [string, string];
mode?: string | string[];
disabledTime?: (current: moment.Moment, type: string) => {
disabledHours?: () => number[],
disabledMinutes?: () => number[],
disabledSeconds?: () => number[],
};
onPanelChange?: (value?: moment.Moment[], mode?: string | string[]) => void;
}
export interface WeexPickerProps extends PickerProps, SinglePickerProps {
className?: string;
placeholder?: string;
}
Object.assign(DatePicker, {
RangePicker: wrapPicker(RangePicker),
MonthPicker,
WeekPicker: wrapPicker(WeekPicker, 'YYYY-Wo'),
});
export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
RangePicker: React.ClassicComponentClass<RangePickerProps>;
MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
}
export default DatePicker as DatePickerDecorator;

89
components/date-picker/interface.tsx
Unescape Escape View File

@ -0,0 +1,89 @@
import * as React from 'react';
import * as moment from 'moment';
import { TimePickerProps } from '../time-picker';
export interface PickerProps {
prefixCls?: string;
inputPrefixCls?: string;
format?: string;
disabled?: boolean;
allowClear?: boolean;
className?: string;
style?: React.CSSProperties;
popupStyle?: React.CSSProperties;
locale?: any;
size?: 'large' | 'small' | 'default';
getCalendarContainer?: (triggerNode: Element) => HTMLElement;
open?: boolean;
onOpenChange?: (status: boolean) => void;
disabledDate?: (current: moment.Moment) => boolean;
renderExtraFooter?: () => React.ReactNode;
dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
}
export interface SinglePickerProps {
value?: moment.Moment;
defaultValue?: moment.Moment;
defaultPickerValue?: moment.Moment;
onChange?: (date: moment.Moment, dateString: string) => void;
}
export interface DatePickerProps extends PickerProps, SinglePickerProps {
className?: string;
showTime?: TimePickerProps | boolean;
showToday?: boolean;
open?: boolean;
disabledTime?: (current: moment.Moment) => {
disabledHours?: () => number[],
disabledMinutes?: () => number[],
disabledSeconds?: () => number[],
};
onOpenChange?: (status: boolean) => void;
onOk?: (selectedTime: moment.Moment) => void;
placeholder?: string;
}
export interface MonthPickerProps extends PickerProps, SinglePickerProps {
className?: string;
placeholder?: string;
}
export type RangePickerValue =
undefined[] |
[moment.Moment] |
[undefined, moment.Moment] |
[moment.Moment, moment.Moment];
export type RangePickerRange = RangePickerValue | (() => RangePickerValue);
export interface RangePickerProps extends PickerProps {
className?: string;
value?: RangePickerValue;
defaultValue?: RangePickerValue;
defaultPickerValue?: RangePickerValue;
onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
onOk?: (selectedTime: moment.Moment) => void;
showTime?: TimePickerProps | boolean;
ranges?: {
[range: string]: RangePickerRange,
};
placeholder?: [string, string];
mode?: string | string[];
disabledTime?: (current: moment.Moment, type: string) => {
disabledHours?: () => number[],
disabledMinutes?: () => number[],
disabledSeconds?: () => number[],
};
onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
}
export interface WeexPickerProps extends PickerProps, SinglePickerProps {
className?: string;
placeholder?: string;
}
export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
RangePicker: React.ClassicComponentClass<RangePickerProps>;
MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
}
Write Preview
Loading…
Cancel
Save