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

201 lines
5.5 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import TimePickerPanel from 'rc-time-picker/lib/Panel';
2016-03-30 10:52:15 +08:00
import classNames from 'classnames';
import enUS from './locale/en_US';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { generateShowHourMinuteSecond } from '../time-picker';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2016-07-25 11:28:19 +08:00
type PickerType = 'date' | 'week' | 'month';
interface PickerMap {
[name: string]: string;
}
const DEFAULT_FORMAT: PickerMap = {
date: 'YYYY-MM-DD',
2019-01-28 14:07:26 +08:00
dateTime: 'YYYY-MM-DD HH:mm:ss',
week: 'gggg-wo',
month: 'YYYY-MM',
};
const LOCALE_FORMAT_MAPPING: PickerMap = {
date: 'dateFormat',
dateTime: 'dateTimeFormat',
week: 'weekFormat',
month: 'monthFormat',
};
2017-11-21 21:09:24 +08:00
function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
let column = 0;
if (showHour) {
column += 1;
}
if (showMinute) {
column += 1;
}
if (showSecond) {
column += 1;
}
if (use12Hours) {
column += 1;
}
return column;
}
export default function wrapPicker(Picker: React.ComponentClass<any>, pickerType: PickerType): any {
2017-04-20 17:11:51 +08:00
return class PickerWrapper extends React.Component<any, any> {
static defaultProps = {
transitionName: 'slide-up',
popupStyle: {},
2018-12-07 20:02:01 +08:00
onChange() {},
onOk() {},
onOpenChange() {},
2017-04-20 17:11:51 +08:00
locale: {},
};
2016-03-30 10:52:15 +08:00
private picker: any;
componentDidMount() {
const { autoFocus, disabled } = this.props;
if (autoFocus && !disabled) {
this.focus();
}
}
2017-11-21 21:09:24 +08:00
handleOpenChange = (open: boolean) => {
2017-11-30 09:53:32 +08:00
const { onOpenChange } = this.props;
onOpenChange(open);
2018-12-07 20:02:01 +08:00
};
2016-03-30 10:52:15 +08:00
2018-12-07 20:02:01 +08:00
handleFocus: React.FocusEventHandler<HTMLInputElement> = e => {
const { onFocus } = this.props;
if (onFocus) {
onFocus(e);
}
2018-12-07 20:02:01 +08:00
};
2018-12-07 20:02:01 +08:00
handleBlur: React.FocusEventHandler<HTMLInputElement> = e => {
const { onBlur } = this.props;
if (onBlur) {
onBlur(e);
}
2018-12-07 20:02:01 +08:00
};
2018-12-07 20:02:01 +08:00
handleMouseEnter: React.MouseEventHandler<HTMLInputElement> = e => {
const { onMouseEnter } = this.props;
if (onMouseEnter) {
onMouseEnter(e);
}
2018-12-07 20:02:01 +08:00
};
2018-12-07 20:02:01 +08:00
handleMouseLeave: React.MouseEventHandler<HTMLInputElement> = e => {
const { onMouseLeave } = this.props;
if (onMouseLeave) {
onMouseLeave(e);
}
2018-12-07 20:02:01 +08:00
};
focus() {
this.picker.focus();
}
blur() {
this.picker.blur();
}
savePicker = (node: any) => {
this.picker = node;
2018-12-07 20:02:01 +08:00
};
getDefaultLocale = () => {
const result = {
...enUS,
...this.props.locale,
};
result.lang = {
...result.lang,
...(this.props.locale || {}).lang,
};
return result;
2018-12-07 20:02:01 +08:00
};
2017-10-24 14:08:39 +08:00
2017-11-21 21:09:24 +08:00
renderPicker = (locale: any, localeCode: string) => {
const { format, showTime } = this.props;
const mergedPickerType = showTime ? `${pickerType}Time` : pickerType;
const mergedFormat =
format ||
locale[LOCALE_FORMAT_MAPPING[mergedPickerType]] ||
DEFAULT_FORMAT[mergedPickerType];
2016-03-30 10:52:15 +08:00
return (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const {
2018-12-07 20:02:01 +08:00
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
size,
disabled,
} = this.props;
const prefixCls = getPrefixCls('calendar', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const pickerClass = classNames(`${prefixCls}-picker`, {
[`${prefixCls}-picker-${size}`]: !!size,
});
const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, {
[`${inputPrefixCls}-lg`]: size === 'large',
[`${inputPrefixCls}-sm`]: size === 'small',
[`${inputPrefixCls}-disabled`]: disabled,
});
const timeFormat = (showTime && showTime.format) || 'HH:mm:ss';
const rcTimePickerProps = {
...generateShowHourMinuteSecond(timeFormat),
format: timeFormat,
2018-12-07 20:02:01 +08:00
use12Hours: showTime && showTime.use12Hours,
};
const columns = getColumns(rcTimePickerProps);
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
const timePicker = showTime ? (
<TimePickerPanel
{...rcTimePickerProps}
{...showTime}
prefixCls={`${prefixCls}-time-picker`}
className={timePickerCls}
placeholder={locale.timePickerLocale.placeholder}
transitionName="slide-up"
/>
) : null;
return (
<Picker
{...this.props}
format={mergedFormat}
ref={this.savePicker}
pickerClass={pickerClass}
pickerInputClass={pickerInputClass}
locale={locale}
localeCode={localeCode}
timePicker={timePicker}
onOpenChange={this.handleOpenChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
);
}}
</ConfigConsumer>
2016-03-30 10:52:15 +08:00
);
2018-12-07 20:02:01 +08:00
};
render() {
return (
2018-12-07 20:02:01 +08:00
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
{this.renderPicker}
</LocaleReceiver>
);
}
2017-04-20 17:11:51 +08:00
};
2016-03-30 10:52:15 +08:00
}