GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor DatePicker types

pull/9046/head
Wei Zhu 7 years ago
parent
7b90be6326
commit
0bb531aca6
3 changed files with 98 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      components/date-picker/RangePicker.tsx
  2. 80
      components/date-picker/index.tsx
  3. 89
      components/date-picker/interface.tsx

17
components/date-picker/RangePicker.tsx
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
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
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