2016-09-09 13:55:21 +08:00
|
|
|
import React from 'react';
|
|
|
|
import moment from 'moment';
|
2016-03-30 09:50:44 +08:00
|
|
|
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
|
|
|
|
import RcDatePicker from 'rc-calendar/lib/Picker';
|
|
|
|
import classNames from 'classnames';
|
2016-10-20 22:11:55 +08:00
|
|
|
import omit from 'omit.js';
|
2016-12-11 13:59:06 +08:00
|
|
|
import assign from 'object-assign';
|
2016-05-23 15:58:10 +08:00
|
|
|
import Icon from '../icon';
|
2017-01-09 16:25:58 +08:00
|
|
|
import { getLocaleCode } from '../_util/getLocale';
|
2017-02-28 14:44:12 +08:00
|
|
|
import warning from '../_util/warning';
|
2016-03-30 09:50:44 +08:00
|
|
|
|
2016-08-24 16:56:29 +08:00
|
|
|
export interface PickerProps {
|
2016-09-09 13:55:21 +08:00
|
|
|
value?: moment.Moment;
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: string;
|
2016-08-24 16:56:29 +08:00
|
|
|
}
|
|
|
|
|
2016-03-30 10:52:15 +08:00
|
|
|
export default function createPicker(TheCalendar) {
|
2016-06-22 13:18:43 +08:00
|
|
|
// use class typescript error
|
2016-10-28 10:10:02 +08:00
|
|
|
const CalenderWrapper = React.createClass<any, any>({
|
2017-01-09 16:25:58 +08:00
|
|
|
contextTypes: {
|
|
|
|
antLocale: React.PropTypes.object,
|
|
|
|
},
|
2016-09-14 16:18:33 +08:00
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
|
|
|
prefixCls: 'ant-calendar',
|
2016-10-28 10:10:02 +08:00
|
|
|
allowClear: true,
|
2016-11-14 11:57:12 +08:00
|
|
|
showToday: true,
|
2016-09-14 16:18:33 +08:00
|
|
|
};
|
|
|
|
},
|
2016-04-13 17:23:14 +08:00
|
|
|
|
2016-06-22 13:18:43 +08:00
|
|
|
getInitialState() {
|
2016-09-09 13:55:21 +08:00
|
|
|
const props = this.props;
|
2016-12-02 15:07:33 +08:00
|
|
|
const value = props.value || props.defaultValue;
|
2016-12-03 14:48:44 +08:00
|
|
|
if (value && !moment.isMoment(value)) {
|
2016-12-02 15:07:33 +08:00
|
|
|
throw new Error(
|
|
|
|
'The value/defaultValue of DatePicker or MonthPicker must be ' +
|
|
|
|
'a moment object after `antd@2.0`, see: http://u.ant.design/date-picker-value'
|
|
|
|
);
|
|
|
|
}
|
2016-06-22 13:18:43 +08:00
|
|
|
return {
|
2016-12-02 15:07:33 +08:00
|
|
|
value,
|
2016-10-21 12:19:34 +08:00
|
|
|
tempValue: undefined,
|
2016-03-30 09:50:44 +08:00
|
|
|
};
|
2016-06-22 13:18:43 +08:00
|
|
|
},
|
2016-04-13 17:23:14 +08:00
|
|
|
|
2016-08-24 16:56:29 +08:00
|
|
|
componentWillReceiveProps(nextProps: PickerProps) {
|
2016-12-03 15:50:36 +08:00
|
|
|
if ('value' in nextProps) {
|
2016-03-30 09:50:44 +08:00
|
|
|
this.setState({
|
2016-09-09 13:55:21 +08:00
|
|
|
value: nextProps.value,
|
2016-11-02 12:03:13 +08:00
|
|
|
tempValue: nextProps.value,
|
2016-03-30 09:50:44 +08:00
|
|
|
});
|
|
|
|
}
|
2016-06-22 13:18:43 +08:00
|
|
|
},
|
2016-04-13 17:23:14 +08:00
|
|
|
|
2016-06-24 14:43:46 +08:00
|
|
|
clearSelection(e) {
|
2016-05-23 15:58:10 +08:00
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
this.handleChange(null);
|
2016-06-23 23:11:14 +08:00
|
|
|
},
|
|
|
|
|
2016-06-24 14:43:46 +08:00
|
|
|
handleChange(value) {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
2016-12-03 15:50:36 +08:00
|
|
|
if (!('value' in props)) {
|
2016-06-24 14:43:46 +08:00
|
|
|
this.setState({ value });
|
2016-03-30 09:50:44 +08:00
|
|
|
}
|
2016-09-09 13:55:21 +08:00
|
|
|
props.onChange(value, (value && value.format(props.format)) || '');
|
2016-06-22 13:18:43 +08:00
|
|
|
},
|
2016-04-13 17:23:14 +08:00
|
|
|
|
2016-10-21 12:19:34 +08:00
|
|
|
handleTempChange(tempValue) {
|
2016-11-02 12:03:13 +08:00
|
|
|
this.setState({ tempValue });
|
2016-10-21 12:19:34 +08:00
|
|
|
},
|
|
|
|
|
2016-11-07 15:41:03 +08:00
|
|
|
// Clear temp value and trigger onChange when hide DatePicker[showTime] panel
|
2016-10-21 12:19:34 +08:00
|
|
|
handleOpenChange(open) {
|
2016-11-14 19:38:24 +08:00
|
|
|
const { showTime, onOpenChange, onChange, format } = this.props;
|
2016-10-21 12:19:34 +08:00
|
|
|
if (!open) {
|
2016-11-07 15:41:03 +08:00
|
|
|
// tricky code to avoid triggering onChange multiple times
|
|
|
|
// when click `Now` button
|
|
|
|
let tempValue;
|
|
|
|
this.setState(prevState => {
|
|
|
|
tempValue = prevState.tempValue;
|
2016-11-14 19:38:24 +08:00
|
|
|
const nextState = { tempValue: undefined } as any;
|
2016-11-07 15:41:03 +08:00
|
|
|
if (showTime && tempValue) {
|
2016-11-14 19:38:24 +08:00
|
|
|
nextState.value = tempValue;
|
|
|
|
onChange(tempValue, (tempValue && tempValue.format(format)) || '');
|
2016-11-07 15:41:03 +08:00
|
|
|
}
|
2016-11-14 19:38:24 +08:00
|
|
|
return nextState;
|
2016-10-21 12:19:34 +08:00
|
|
|
});
|
|
|
|
}
|
2016-11-02 15:02:21 +08:00
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(open);
|
2016-10-21 12:19:34 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-30 09:50:44 +08:00
|
|
|
render() {
|
2017-01-09 16:25:58 +08:00
|
|
|
const { value, tempValue } = this.state;
|
2016-10-20 22:11:55 +08:00
|
|
|
const props = omit(this.props, ['onChange']);
|
2017-01-09 16:25:58 +08:00
|
|
|
const { prefixCls, locale } = props;
|
2016-03-30 09:50:44 +08:00
|
|
|
|
|
|
|
const placeholder = ('placeholder' in props)
|
|
|
|
? props.placeholder : locale.lang.placeholder;
|
|
|
|
|
|
|
|
const disabledTime = props.showTime ? props.disabledTime : null;
|
|
|
|
|
|
|
|
const calendarClassName = classNames({
|
2016-09-14 16:18:33 +08:00
|
|
|
[`${prefixCls}-time`]: props.showTime,
|
|
|
|
[`${prefixCls}-month`]: MonthCalendar === TheCalendar,
|
2016-03-30 09:50:44 +08:00
|
|
|
});
|
|
|
|
|
2016-07-15 16:20:23 +08:00
|
|
|
// 需要选择时间时,点击 ok 时才触发 onChange
|
2016-10-21 12:19:34 +08:00
|
|
|
let pickerChangeHandler: Object = {};
|
|
|
|
let calendarHandler: Object = {};
|
2016-07-15 16:20:23 +08:00
|
|
|
if (props.showTime) {
|
2016-10-21 12:19:34 +08:00
|
|
|
calendarHandler = {
|
|
|
|
// fix https://github.com/ant-design/ant-design/issues/1902
|
2017-01-09 16:25:58 +08:00
|
|
|
onSelect: (selectedValue) => {
|
|
|
|
this.handleTempChange(selectedValue);
|
2016-10-21 12:19:34 +08:00
|
|
|
},
|
|
|
|
};
|
2016-07-15 16:20:23 +08:00
|
|
|
} else {
|
2016-10-21 12:19:34 +08:00
|
|
|
pickerChangeHandler = {
|
|
|
|
onChange: this.handleChange,
|
|
|
|
};
|
2016-07-15 16:20:23 +08:00
|
|
|
}
|
|
|
|
|
2017-02-28 14:44:12 +08:00
|
|
|
warning(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');
|
2016-03-30 09:50:44 +08:00
|
|
|
const calendar = (
|
|
|
|
<TheCalendar
|
2016-11-14 11:57:12 +08:00
|
|
|
{...calendarHandler}
|
2016-03-30 09:50:44 +08:00
|
|
|
disabledDate={props.disabledDate}
|
|
|
|
disabledTime={disabledTime}
|
|
|
|
locale={locale.lang}
|
2016-03-30 10:52:15 +08:00
|
|
|
timePicker={props.timePicker}
|
2016-09-09 13:55:21 +08:00
|
|
|
defaultValue={props.defaultPickerValue || moment()}
|
2016-03-30 09:50:44 +08:00
|
|
|
dateInputPlaceholder={placeholder}
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls={prefixCls}
|
2016-03-30 09:50:44 +08:00
|
|
|
className={calendarClassName}
|
2016-07-15 16:20:23 +08:00
|
|
|
onOk={props.onOk}
|
2016-10-13 16:13:05 +08:00
|
|
|
format={props.format}
|
2016-11-14 11:57:12 +08:00
|
|
|
showToday={props.showToday}
|
2016-12-30 15:03:29 +08:00
|
|
|
monthCellContentRender={props.monthCellContentRender}
|
2016-06-02 21:19:28 +08:00
|
|
|
/>
|
2016-03-30 09:50:44 +08:00
|
|
|
);
|
|
|
|
|
2016-12-11 13:59:06 +08:00
|
|
|
// default width for showTime
|
|
|
|
const pickerStyle = {} as any;
|
|
|
|
if (props.showTime) {
|
2017-02-20 11:20:06 +08:00
|
|
|
pickerStyle.width = (props.style && props.style.width) || 154;
|
2016-12-11 13:59:06 +08:00
|
|
|
}
|
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
const clearIcon = (!props.disabled && props.allowClear && value) ?
|
2016-11-23 17:53:10 +08:00
|
|
|
<Icon
|
|
|
|
type="cross-circle"
|
2016-09-14 16:18:33 +08:00
|
|
|
className={`${prefixCls}-picker-clear`}
|
2016-06-23 15:38:55 +08:00
|
|
|
onClick={this.clearSelection}
|
|
|
|
/> : null;
|
2016-11-25 12:03:39 +08:00
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
const input = ({ value: inputValue }) => (
|
2016-11-25 12:03:39 +08:00
|
|
|
<span>
|
|
|
|
<input
|
|
|
|
disabled={props.disabled}
|
|
|
|
readOnly
|
2017-01-09 16:25:58 +08:00
|
|
|
value={(inputValue && inputValue.format(props.format)) || ''}
|
2016-11-25 12:03:39 +08:00
|
|
|
placeholder={placeholder}
|
|
|
|
className={props.pickerInputClass}
|
|
|
|
/>
|
|
|
|
{clearIcon}
|
|
|
|
<span className={`${prefixCls}-picker-icon`} />
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
const pickerValue = tempValue || value;
|
|
|
|
const localeCode = getLocaleCode(this.context);
|
|
|
|
if (pickerValue && localeCode) {
|
|
|
|
pickerValue.locale(localeCode);
|
|
|
|
}
|
2016-03-30 09:50:44 +08:00
|
|
|
return (
|
2016-12-11 13:59:06 +08:00
|
|
|
<span className={props.pickerClass} style={assign({}, props.style, pickerStyle)}>
|
2016-03-30 09:50:44 +08:00
|
|
|
<RcDatePicker
|
2016-09-27 13:42:30 +08:00
|
|
|
{...props}
|
2016-09-09 13:55:21 +08:00
|
|
|
{...pickerChangeHandler}
|
2016-10-21 12:19:34 +08:00
|
|
|
onOpenChange={this.handleOpenChange}
|
2016-03-30 09:50:44 +08:00
|
|
|
calendar={calendar}
|
2017-01-09 16:25:58 +08:00
|
|
|
value={pickerValue}
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls={`${prefixCls}-picker-container`}
|
2016-03-30 09:50:44 +08:00
|
|
|
style={props.popupStyle}
|
|
|
|
>
|
2016-11-25 12:03:39 +08:00
|
|
|
{input}
|
2016-03-30 09:50:44 +08:00
|
|
|
</RcDatePicker>
|
|
|
|
</span>
|
|
|
|
);
|
2016-06-22 13:18:43 +08:00
|
|
|
},
|
|
|
|
});
|
2016-06-23 23:11:14 +08:00
|
|
|
|
2016-06-22 13:18:43 +08:00
|
|
|
return CalenderWrapper;
|
2016-03-30 09:50:44 +08:00
|
|
|
}
|