ant-design/components/date-picker/createPicker.tsx

163 lines
4.6 KiB
TypeScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
2017-04-20 17:11:51 +08:00
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';
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';
import { getLocaleCode } from '../_util/getLocale';
import warning from '../_util/warning';
2016-03-30 09:50:44 +08:00
export interface PickerProps {
value?: moment.Moment;
prefixCls: string;
}
2017-04-21 11:39:01 +08:00
export default function createPicker(TheCalendar): any {
2017-04-20 17:11:51 +08:00
return class CalenderWrapper extends React.Component<any, any> {
static contextTypes = {
antLocale: PropTypes.object,
2017-04-20 17:11:51 +08:00
};
2016-04-13 17:23:14 +08:00
2017-04-20 17:11:51 +08:00
static defaultProps = {
prefixCls: 'ant-calendar',
allowClear: true,
showToday: true,
};
constructor(props) {
super(props);
const value = props.value || props.defaultValue;
if (value && !moment.isMoment(value)) {
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',
);
}
2017-04-20 17:11:51 +08:00
this.state = {
value,
2016-03-30 09:50:44 +08:00
};
2017-04-20 17:11:51 +08:00
}
2016-04-13 17:23:14 +08:00
componentWillReceiveProps(nextProps: PickerProps) {
if ('value' in nextProps) {
2016-03-30 09:50:44 +08:00
this.setState({
value: nextProps.value,
2016-03-30 09:50:44 +08:00
});
}
2017-04-20 17:11:51 +08:00
}
2016-04-13 17:23:14 +08:00
2017-04-20 17:11:51 +08:00
clearSelection = (e) => {
2016-05-23 15:58:10 +08:00
e.preventDefault();
e.stopPropagation();
this.handleChange(null);
2017-04-20 17:11:51 +08:00
}
2016-06-23 23:11:14 +08:00
2017-04-20 17:11:51 +08:00
handleChange = (value) => {
2016-03-30 10:52:15 +08:00
const props = this.props;
if (!('value' in props)) {
2016-06-24 14:43:46 +08:00
this.setState({ value });
2016-03-30 09:50:44 +08:00
}
props.onChange(value, (value && value.format(props.format)) || '');
2017-04-20 17:11:51 +08:00
}
2016-04-13 17:23:14 +08:00
2016-03-30 09:50:44 +08:00
render() {
const { value } = this.state;
const props = omit(this.props, ['onChange']);
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({
[`${prefixCls}-time`]: props.showTime,
[`${prefixCls}-month`]: MonthCalendar === TheCalendar,
2016-03-30 09:50:44 +08:00
});
2016-10-21 12:19:34 +08:00
let pickerChangeHandler: Object = {};
let calendarHandler: Object = {};
if (props.showTime) {
2016-10-21 12:19:34 +08:00
calendarHandler = {
// fix https://github.com/ant-design/ant-design/issues/1902
onSelect: this.handleChange,
2016-10-21 12:19:34 +08:00
};
} else {
2016-10-21 12:19:34 +08:00
pickerChangeHandler = {
onChange: this.handleChange,
};
}
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
{...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}
defaultValue={props.defaultPickerValue || moment()}
2016-03-30 09:50:44 +08:00
dateInputPlaceholder={placeholder}
prefixCls={prefixCls}
2016-03-30 09:50:44 +08:00
className={calendarClassName}
onOk={props.onOk}
2016-10-13 16:13:05 +08:00
format={props.format}
showToday={props.showToday}
monthCellContentRender={props.monthCellContentRender}
/>
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) {
pickerStyle.width = (props.style && props.style.width) || 154;
2016-12-11 13:59:06 +08:00
}
const clearIcon = (!props.disabled && props.allowClear && value) ? (
<Icon
type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
) : null;
const input = ({ value: inputValue }) => (
<span>
<input
disabled={props.disabled}
readOnly
value={(inputValue && inputValue.format(props.format)) || ''}
placeholder={placeholder}
className={props.pickerInputClass}
/>
{clearIcon}
<span className={`${prefixCls}-picker-icon`} />
</span>
);
const pickerValue = 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
{...props}
{...pickerChangeHandler}
2016-03-30 09:50:44 +08:00
calendar={calendar}
value={pickerValue}
prefixCls={`${prefixCls}-picker-container`}
2016-03-30 09:50:44 +08:00
style={props.popupStyle}
>
{input}
2016-03-30 09:50:44 +08:00
</RcDatePicker>
</span>
);
2017-04-20 17:11:51 +08:00
}
};
2016-03-30 09:50:44 +08:00
}