reset showDate when picker is closed

fix #12929
This commit is contained in:
zombiej 2018-11-03 23:12:14 +08:00
parent 53136e42b9
commit 81a7d11ba3

View File

@ -12,11 +12,18 @@ import getDataOrAriaProps from '../_util/getDataOrAriaProps';
export interface PickerProps { export interface PickerProps {
value?: moment.Moment; value?: moment.Moment;
open?: boolean;
prefixCls: string; prefixCls: string;
} }
export interface PickerState {
open: boolean;
value: moment.Moment | null;
showDate: moment.Moment | null;
}
export default function createPicker(TheCalendar: React.ComponentClass): any { export default function createPicker(TheCalendar: React.ComponentClass): any {
class CalenderWrapper extends React.Component<any, any> { class CalenderWrapper extends React.Component<any, PickerState> {
static defaultProps = { static defaultProps = {
prefixCls: 'ant-calendar', prefixCls: 'ant-calendar',
allowClear: true, allowClear: true,
@ -24,16 +31,18 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
}; };
static getDerivedStateFromProps(nextProps: PickerProps, prevState: any) { static getDerivedStateFromProps(nextProps: PickerProps, prevState: any) {
let state = null; const state: Partial<PickerState> = {};
if ('open' in nextProps) {
state.open = nextProps.open;
}
if ('value' in nextProps) { if ('value' in nextProps) {
state = { state.value = nextProps.value;
value: nextProps.value,
}; if (
if (nextProps.value !== prevState.value) { nextProps.value !== prevState.value ||
state = { (!nextProps.open && nextProps.value !== prevState.showDate)
...state, ) {
showDate: nextProps.value, state.showDate = nextProps.value;
};
} }
} }
return state; return state;
@ -53,6 +62,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
this.state = { this.state = {
value, value,
showDate: value, showDate: value,
open: false,
}; };
} }
@ -87,6 +97,17 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
this.setState({ showDate: value }); this.setState({ showDate: value });
} }
handleOpenChange = (open: boolean) => {
const { onOpenChange } = this.props;
if (!('open' in this.props)) {
this.setState({ open });
}
if (onOpenChange) {
onOpenChange(open);
}
};
focus() { focus() {
this.input.focus(); this.input.focus();
} }
@ -100,7 +121,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
} }
render() { render() {
const { value, showDate } = this.state; const { value, showDate, open } = this.state;
const props = omit(this.props, ['onChange']); const props = omit(this.props, ['onChange']);
const { prefixCls, locale, localeCode, suffixIcon } = props; const { prefixCls, locale, localeCode, suffixIcon } = props;
@ -217,6 +238,8 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
value={value} value={value}
prefixCls={`${prefixCls}-picker-container`} prefixCls={`${prefixCls}-picker-container`}
style={props.popupStyle} style={props.popupStyle}
open={open}
onOpenChange={this.handleOpenChange}
> >
{input} {input}
</RcDatePicker> </RcDatePicker>