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

275 lines
8.0 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import * as moment from 'moment';
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';
import omit from 'omit.js';
2016-05-23 15:58:10 +08:00
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
2018-03-09 15:04:21 +08:00
import interopDefault from '../_util/interopDefault';
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
2016-03-30 09:50:44 +08:00
export interface PickerProps {
value?: moment.Moment;
open?: boolean;
prefixCls: string;
}
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 {
class CalenderWrapper extends React.Component<any, PickerState> {
2017-04-20 17:11:51 +08:00
static defaultProps = {
allowClear: true,
showToday: true,
};
2018-11-04 14:54:06 +08:00
static getDerivedStateFromProps(nextProps: PickerProps, prevState: PickerState) {
const state: Partial<PickerState> = {};
2018-11-04 14:54:06 +08:00
let open: boolean = prevState.open;
if ('open' in nextProps) {
state.open = nextProps.open;
2018-11-04 14:54:06 +08:00
open = nextProps.open || false;
}
if ('value' in nextProps) {
state.value = nextProps.value;
if (
nextProps.value !== prevState.value ||
2018-11-04 14:54:06 +08:00
(!open && nextProps.value !== prevState.showDate)
) {
state.showDate = nextProps.value;
}
}
return Object.keys(state).length > 0 ? state : null;
}
private input: any;
private prefixCls?: string;
2017-11-21 21:09:24 +08:00
constructor(props: any) {
2017-04-20 17:11:51 +08:00
super(props);
const value = props.value || props.defaultValue;
2018-03-09 15:04:21 +08:00
if (value && !interopDefault(moment).isMoment(value)) {
throw new Error(
'The value/defaultValue of DatePicker or MonthPicker must be ' +
2018-12-07 20:02:01 +08:00
'a moment object after `antd@2.0`, see: https://u.ant.design/date-picker-value',
);
}
2017-04-20 17:11:51 +08:00
this.state = {
value,
showDate: value,
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
2019-01-04 22:34:25 +08:00
componentDidUpdate(_: PickerProps, prevState: PickerState) {
if (!('open' in this.props) && prevState.open && !this.state.open) {
2019-01-04 16:55:07 +08:00
this.focus();
}
}
2017-11-21 21:09:24 +08:00
renderFooter = (...args: any[]) => {
const { renderExtraFooter } = this.props;
const { prefixCls } = this;
return renderExtraFooter ? (
2018-12-07 20:02:01 +08:00
<div className={`${prefixCls}-footer-extra`}>{renderExtraFooter(...args)}</div>
) : null;
2018-12-07 20:02:01 +08:00
};
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);
2018-12-07 20:02:01 +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;
if (!('value' in props)) {
this.setState({
value,
showDate: value,
});
2016-03-30 09:50:44 +08:00
}
props.onChange(value, (value && value.format(props.format)) || '');
2018-12-07 20:02:01 +08:00
};
2016-04-13 17:23:14 +08:00
handleCalendarChange = (value: moment.Moment) => {
this.setState({ showDate: value });
2018-12-07 20:02:01 +08:00
};
handleOpenChange = (open: boolean) => {
const { onOpenChange } = this.props;
if (!('open' in this.props)) {
this.setState({ open });
}
if (onOpenChange) {
onOpenChange(open);
}
};
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
saveInput = (node: any) => {
this.input = node;
2018-12-07 20:02:01 +08:00
};
renderPicker = ({ getPrefixCls }: ConfigConsumerProps) => {
const { value, showDate, open } = this.state;
const props = omit(this.props, ['onChange']);
const { prefixCls: customizePrefixCls, locale, localeCode, suffixIcon } = props;
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
// To support old version react.
// Have to add prefixCls on the instance.
// https://github.com/facebook/react/issues/12397
this.prefixCls = prefixCls;
2016-03-30 09:50:44 +08:00
2018-12-07 20:02:01 +08:00
const placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
2016-03-30 09:50:44 +08:00
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
});
if (value && localeCode) {
value.locale(localeCode);
}
let pickerProps: Object = {};
let calendarProps: any = {};
const pickerStyle: { width?: number } = {};
if (props.showTime) {
calendarProps = {
2016-10-21 12:19:34 +08:00
// fix https://github.com/ant-design/ant-design/issues/1902
onSelect: this.handleChange,
2016-10-21 12:19:34 +08:00
};
pickerStyle.width = 195;
} else {
pickerProps = {
2016-10-21 12:19:34 +08:00
onChange: this.handleChange,
};
}
if ('mode' in props) {
calendarProps.mode = props.mode;
}
2018-12-07 20:02:01 +08:00
warning(
!('onOK' in props),
'DatePicker',
2018-12-07 20:02:01 +08:00
'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!',
);
2016-03-30 09:50:44 +08:00
const calendar = (
<TheCalendar
{...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}
prefixCls={prefixCls}
2016-03-30 09:50:44 +08:00
className={calendarClassName}
onOk={props.onOk}
dateRender={props.dateRender}
2016-10-13 16:13:05 +08:00
format={props.format}
showToday={props.showToday}
monthCellContentRender={props.monthCellContentRender}
renderFooter={this.renderFooter}
onPanelChange={props.onPanelChange}
onChange={this.handleCalendarChange}
value={showDate}
/>
2016-03-30 09:50:44 +08:00
);
2018-12-07 20:02:01 +08:00
const clearIcon =
!props.disabled && props.allowClear && value ? (
<Icon
type="close-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
theme="filled"
/>
) : null;
2018-12-07 20:02:01 +08:00
const inputIcon = (suffixIcon &&
(React.isValidElement<{ className?: string }>(suffixIcon) ? (
React.cloneElement(suffixIcon, {
className: classNames({
[suffixIcon.props.className!]: suffixIcon.props.className,
[`${prefixCls}-picker-icon`]: true,
}),
})
) : (
<span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />;
2018-09-14 22:50:35 +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>
<input
ref={this.saveInput}
disabled={props.disabled}
readOnly
value={(inputValue && inputValue.format(props.format)) || ''}
placeholder={placeholder}
className={props.pickerInputClass}
2018-11-23 15:54:18 +08:00
tabIndex={props.tabIndex}
2019-02-25 11:28:31 +08:00
name={props.name}
{...dataOrAriaProps}
/>
{clearIcon}
2018-09-14 22:50:35 +08:00
{inputIcon}
</div>
);
2016-03-30 09:50:44 +08:00
return (
<span
id={props.id}
className={classNames(props.className, props.pickerClass)}
style={{ ...pickerStyle, ...props.style }}
onFocus={props.onFocus}
onBlur={props.onBlur}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
>
2016-03-30 09:50:44 +08:00
<RcDatePicker
{...props}
{...pickerProps}
2016-03-30 09:50:44 +08:00
calendar={calendar}
value={value}
prefixCls={`${prefixCls}-picker-container`}
2016-03-30 09:50:44 +08:00
style={props.popupStyle}
open={open}
onOpenChange={this.handleOpenChange}
2016-03-30 09:50:44 +08:00
>
{input}
2016-03-30 09:50:44 +08:00
</RcDatePicker>
</span>
);
2018-12-07 20:02:01 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderPicker}</ConfigConsumer>;
}
}
polyfill(CalenderWrapper);
return CalenderWrapper;
2016-03-30 09:50:44 +08:00
}