2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import * as moment from 'moment';
|
2018-07-19 11:26:47 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
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-05-23 15:58:10 +08:00
|
|
|
import Icon from '../icon';
|
2017-02-28 14:44:12 +08:00
|
|
|
import warning from '../_util/warning';
|
2018-03-09 15:04:21 +08:00
|
|
|
import interopDefault from '../_util/interopDefault';
|
2018-06-15 03:08:51 +08:00
|
|
|
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
|
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;
|
2018-11-03 23:12:14 +08:00
|
|
|
open?: boolean;
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls: string;
|
2016-08-24 16:56:29 +08:00
|
|
|
}
|
|
|
|
|
2018-11-03 23:12:14 +08:00
|
|
|
export interface PickerState {
|
|
|
|
open: boolean;
|
|
|
|
value: moment.Moment | null;
|
|
|
|
showDate: moment.Moment | null;
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
export default function createPicker(TheCalendar: React.ComponentClass): any {
|
2018-11-03 23:12:14 +08:00
|
|
|
class CalenderWrapper extends React.Component<any, PickerState> {
|
2017-04-20 17:11:51 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-calendar',
|
|
|
|
allowClear: true,
|
|
|
|
showToday: true,
|
|
|
|
};
|
|
|
|
|
2018-11-04 14:54:06 +08:00
|
|
|
static getDerivedStateFromProps(nextProps: PickerProps, prevState: PickerState) {
|
2018-11-03 23:12:14 +08:00
|
|
|
const state: Partial<PickerState> = {};
|
2018-11-04 14:54:06 +08:00
|
|
|
let open: boolean = prevState.open;
|
|
|
|
|
2018-11-03 23:12:14 +08:00
|
|
|
if ('open' in nextProps) {
|
|
|
|
state.open = nextProps.open;
|
2018-11-04 14:54:06 +08:00
|
|
|
open = nextProps.open || false;
|
2018-11-03 23:12:14 +08:00
|
|
|
}
|
2018-07-19 11:26:47 +08:00
|
|
|
if ('value' in nextProps) {
|
2018-11-03 23:12:14 +08:00
|
|
|
state.value = nextProps.value;
|
|
|
|
if (
|
|
|
|
nextProps.value !== prevState.value ||
|
2018-11-04 14:54:06 +08:00
|
|
|
(!open && nextProps.value !== prevState.showDate)
|
2018-11-03 23:12:14 +08:00
|
|
|
) {
|
|
|
|
state.showDate = nextProps.value;
|
2018-07-25 15:42:48 +08:00
|
|
|
}
|
2018-07-19 11:26:47 +08:00
|
|
|
}
|
2018-11-13 18:03:57 +08:00
|
|
|
return Object.keys(state).length > 0 ? state : null;
|
2018-07-19 11:26:47 +08:00
|
|
|
}
|
|
|
|
|
2017-11-30 09:54:31 +08:00
|
|
|
private input: any;
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
constructor(props: any) {
|
2017-04-20 17:11:51 +08:00
|
|
|
super(props);
|
2016-12-02 15:07:33 +08:00
|
|
|
const value = props.value || props.defaultValue;
|
2018-03-09 15:04:21 +08:00
|
|
|
if (value && !interopDefault(moment).isMoment(value)) {
|
2016-12-02 15:07:33 +08:00
|
|
|
throw new Error(
|
|
|
|
'The value/defaultValue of DatePicker or MonthPicker must be ' +
|
2017-07-19 13:59:53 +08:00
|
|
|
'a moment object after `antd@2.0`, see: https://u.ant.design/date-picker-value',
|
2016-12-02 15:07:33 +08:00
|
|
|
);
|
|
|
|
}
|
2017-04-20 17:11:51 +08:00
|
|
|
this.state = {
|
2016-12-02 15:07:33 +08:00
|
|
|
value,
|
2018-02-01 16:12:42 +08:00
|
|
|
showDate: value,
|
2018-11-03 23:12:14 +08:00
|
|
|
open: false,
|
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-11-21 21:09:24 +08:00
|
|
|
renderFooter = (...args: any[]) => {
|
2017-06-05 17:11:58 +08:00
|
|
|
const { prefixCls, renderExtraFooter } = this.props;
|
|
|
|
return renderExtraFooter ? (
|
|
|
|
<div className={`${prefixCls}-footer-extra`}>
|
|
|
|
{renderExtraFooter(...args)}
|
|
|
|
</div>
|
|
|
|
) : null;
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
clearSelection = (e: React.MouseEvent<HTMLElement>) => {
|
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-11-21 21:09:24 +08:00
|
|
|
handleChange = (value: moment.Moment | null) => {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
2016-12-03 15:50:36 +08:00
|
|
|
if (!('value' in props)) {
|
2018-02-01 16:12:42 +08:00
|
|
|
this.setState({
|
|
|
|
value,
|
|
|
|
showDate: 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)) || '');
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
2016-04-13 17:23:14 +08:00
|
|
|
|
2018-02-01 16:12:42 +08:00
|
|
|
handleCalendarChange = (value: moment.Moment) => {
|
|
|
|
this.setState({ showDate: value });
|
|
|
|
}
|
|
|
|
|
2018-11-03 23:12:14 +08:00
|
|
|
handleOpenChange = (open: boolean) => {
|
|
|
|
const { onOpenChange } = this.props;
|
|
|
|
if (!('open' in this.props)) {
|
|
|
|
this.setState({ open });
|
|
|
|
}
|
|
|
|
|
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(open);
|
|
|
|
}
|
2018-12-06 17:35:23 +08:00
|
|
|
|
|
|
|
if (!open) {
|
|
|
|
this.focus();
|
|
|
|
}
|
2018-11-03 23:12:14 +08:00
|
|
|
};
|
|
|
|
|
2017-11-30 09:54:31 +08:00
|
|
|
focus() {
|
|
|
|
this.input.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
blur() {
|
|
|
|
this.input.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
saveInput = (node: any) => {
|
|
|
|
this.input = node;
|
|
|
|
}
|
|
|
|
|
2016-03-30 09:50:44 +08:00
|
|
|
render() {
|
2018-11-03 23:12:14 +08:00
|
|
|
const { value, showDate, open } = this.state;
|
2016-10-20 22:11:55 +08:00
|
|
|
const props = omit(this.props, ['onChange']);
|
2018-09-16 19:39:43 +08:00
|
|
|
const { prefixCls, locale, localeCode, suffixIcon } = 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
|
|
|
});
|
|
|
|
|
2018-02-01 16:12:42 +08:00
|
|
|
if (value && localeCode) {
|
|
|
|
value.locale(localeCode);
|
|
|
|
}
|
|
|
|
|
2017-08-21 21:15:44 +08:00
|
|
|
let pickerProps: Object = {};
|
|
|
|
let calendarProps: any = {};
|
2018-09-06 19:16:37 +08:00
|
|
|
const pickerStyle: { width?: number } = {};
|
2016-07-15 16:20:23 +08:00
|
|
|
if (props.showTime) {
|
2017-08-21 21:15:44 +08:00
|
|
|
calendarProps = {
|
2016-10-21 12:19:34 +08:00
|
|
|
// fix https://github.com/ant-design/ant-design/issues/1902
|
2017-03-07 18:49:22 +08:00
|
|
|
onSelect: this.handleChange,
|
2016-10-21 12:19:34 +08:00
|
|
|
};
|
2018-09-06 19:16:37 +08:00
|
|
|
pickerStyle.width = 195;
|
2016-07-15 16:20:23 +08:00
|
|
|
} else {
|
2017-08-21 21:15:44 +08:00
|
|
|
pickerProps = {
|
2016-10-21 12:19:34 +08:00
|
|
|
onChange: this.handleChange,
|
|
|
|
};
|
2016-07-15 16:20:23 +08:00
|
|
|
}
|
2017-08-21 21:15:44 +08:00
|
|
|
if ('mode' in props) {
|
|
|
|
calendarProps.mode = props.mode;
|
|
|
|
}
|
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
|
2017-08-21 21:15:44 +08:00
|
|
|
{...calendarProps}
|
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}
|
2018-03-09 15:04:21 +08:00
|
|
|
defaultValue={props.defaultPickerValue || interopDefault(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}
|
2017-09-25 22:10:26 +08:00
|
|
|
dateRender={props.dateRender}
|
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}
|
2017-06-05 17:11:58 +08:00
|
|
|
renderFooter={this.renderFooter}
|
2017-08-21 21:15:44 +08:00
|
|
|
onPanelChange={props.onPanelChange}
|
2018-02-01 16:12:42 +08:00
|
|
|
onChange={this.handleCalendarChange}
|
|
|
|
value={showDate}
|
2016-06-02 21:19:28 +08:00
|
|
|
/>
|
2016-03-30 09:50:44 +08:00
|
|
|
);
|
|
|
|
|
2017-03-23 21:15:49 +08:00
|
|
|
const clearIcon = (!props.disabled && props.allowClear && value) ? (
|
2016-11-23 17:53:10 +08:00
|
|
|
<Icon
|
2018-08-24 18:36:08 +08:00
|
|
|
type="close-circle"
|
2016-09-14 16:18:33 +08:00
|
|
|
className={`${prefixCls}-picker-clear`}
|
2016-06-23 15:38:55 +08:00
|
|
|
onClick={this.clearSelection}
|
2018-09-02 18:46:53 +08:00
|
|
|
theme="filled"
|
2017-03-23 21:15:49 +08:00
|
|
|
/>
|
|
|
|
) : null;
|
2016-11-25 12:03:39 +08:00
|
|
|
|
2018-09-16 19:39:43 +08:00
|
|
|
const inputIcon = suffixIcon && (
|
|
|
|
React.isValidElement<{ className?: string }>(suffixIcon)
|
2018-09-14 22:50:35 +08:00
|
|
|
? React.cloneElement(
|
2018-09-16 19:39:43 +08:00
|
|
|
suffixIcon,
|
2018-09-14 22:50:35 +08:00
|
|
|
{
|
|
|
|
className: classNames({
|
2018-09-16 19:39:43 +08:00
|
|
|
[suffixIcon.props.className!]: suffixIcon.props.className,
|
2018-09-14 22:50:35 +08:00
|
|
|
[`${prefixCls}-picker-icon`]: true,
|
|
|
|
}),
|
|
|
|
},
|
2018-09-16 19:39:43 +08:00
|
|
|
) : <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>) || (
|
2018-09-14 22:50:35 +08:00
|
|
|
<Icon type="calendar" className={`${prefixCls}-picker-icon`} />
|
|
|
|
);
|
|
|
|
|
2018-06-15 03:08:51 +08:00
|
|
|
const dataOrAriaProps = getDataOrAriaProps(props);
|
2017-11-21 21:09:24 +08:00
|
|
|
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (
|
2017-06-27 15:32:18 +08:00
|
|
|
<div>
|
2016-11-25 12:03:39 +08:00
|
|
|
<input
|
2017-11-30 09:54:31 +08:00
|
|
|
ref={this.saveInput}
|
2016-11-25 12:03:39 +08:00
|
|
|
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}
|
2018-11-23 15:54:18 +08:00
|
|
|
tabIndex={props.tabIndex}
|
2018-06-15 03:08:51 +08:00
|
|
|
{...dataOrAriaProps}
|
2016-11-25 12:03:39 +08:00
|
|
|
/>
|
|
|
|
{clearIcon}
|
2018-09-14 22:50:35 +08:00
|
|
|
{inputIcon}
|
2017-06-03 01:37:02 +08:00
|
|
|
</div>
|
2016-11-25 12:03:39 +08:00
|
|
|
);
|
|
|
|
|
2016-03-30 09:50:44 +08:00
|
|
|
return (
|
2017-11-30 09:54:31 +08:00
|
|
|
<span
|
2018-01-24 10:45:46 +08:00
|
|
|
id={props.id}
|
2017-11-30 09:54:31 +08:00
|
|
|
className={classNames(props.className, props.pickerClass)}
|
2018-09-06 19:16:37 +08:00
|
|
|
style={{ ...pickerStyle, ...props.style }}
|
2017-11-30 09:54:31 +08:00
|
|
|
onFocus={props.onFocus}
|
|
|
|
onBlur={props.onBlur}
|
2018-07-28 21:52:12 +08:00
|
|
|
onMouseEnter={props.onMouseEnter}
|
|
|
|
onMouseLeave={props.onMouseLeave}
|
2017-11-30 09:54:31 +08:00
|
|
|
>
|
2016-03-30 09:50:44 +08:00
|
|
|
<RcDatePicker
|
2016-09-27 13:42:30 +08:00
|
|
|
{...props}
|
2017-08-21 21:15:44 +08:00
|
|
|
{...pickerProps}
|
2016-03-30 09:50:44 +08:00
|
|
|
calendar={calendar}
|
2018-02-01 16:12:42 +08:00
|
|
|
value={value}
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls={`${prefixCls}-picker-container`}
|
2016-03-30 09:50:44 +08:00
|
|
|
style={props.popupStyle}
|
2018-11-03 23:12:14 +08:00
|
|
|
open={open}
|
|
|
|
onOpenChange={this.handleOpenChange}
|
2016-03-30 09:50:44 +08:00
|
|
|
>
|
2016-11-25 12:03:39 +08:00
|
|
|
{input}
|
2016-03-30 09:50:44 +08:00
|
|
|
</RcDatePicker>
|
|
|
|
</span>
|
|
|
|
);
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
2018-07-19 11:26:47 +08:00
|
|
|
}
|
|
|
|
polyfill(CalenderWrapper);
|
|
|
|
return CalenderWrapper;
|
2016-03-30 09:50:44 +08:00
|
|
|
}
|