2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2016-09-09 13:55:21 +08:00
|
|
|
import TimePickerPanel from 'rc-time-picker/lib/Panel';
|
2016-03-30 10:52:15 +08:00
|
|
|
import classNames from 'classnames';
|
2017-10-20 14:54:38 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2017-06-29 11:22:12 +08:00
|
|
|
import { generateShowHourMinuteSecond } from '../time-picker';
|
2018-01-13 19:11:53 +08:00
|
|
|
import enUS from './locale/en_US';
|
2016-07-25 11:28:19 +08:00
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
|
2016-11-11 18:23:11 +08:00
|
|
|
let column = 0;
|
|
|
|
if (showHour) {
|
|
|
|
column += 1;
|
|
|
|
}
|
|
|
|
if (showMinute) {
|
|
|
|
column += 1;
|
|
|
|
}
|
|
|
|
if (showSecond) {
|
|
|
|
column += 1;
|
|
|
|
}
|
2017-05-02 16:24:29 +08:00
|
|
|
if (use12Hours) {
|
|
|
|
column += 1;
|
|
|
|
}
|
2016-11-11 18:23:11 +08:00
|
|
|
return column;
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
export default function wrapPicker(Picker: React.ComponentClass<any>, defaultFormat?: string): any {
|
2017-04-20 17:11:51 +08:00
|
|
|
return class PickerWrapper extends React.Component<any, any> {
|
|
|
|
static defaultProps = {
|
|
|
|
format: defaultFormat || 'YYYY-MM-DD',
|
|
|
|
transitionName: 'slide-up',
|
|
|
|
popupStyle: {},
|
|
|
|
onChange() {
|
|
|
|
},
|
|
|
|
onOk() {
|
|
|
|
},
|
|
|
|
onOpenChange() {
|
|
|
|
},
|
|
|
|
locale: {},
|
|
|
|
prefixCls: 'ant-calendar',
|
|
|
|
inputPrefixCls: 'ant-input',
|
|
|
|
};
|
2016-03-30 10:52:15 +08:00
|
|
|
|
2017-11-30 09:54:31 +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;
|
2016-09-27 13:42:30 +08:00
|
|
|
onOpenChange(open);
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
2016-03-30 10:52:15 +08:00
|
|
|
|
2018-10-30 10:52:27 +08:00
|
|
|
handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
|
2017-11-30 09:54:31 +08:00
|
|
|
const { onFocus } = this.props;
|
|
|
|
if (onFocus) {
|
|
|
|
onFocus(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-30 10:52:27 +08:00
|
|
|
handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
|
2017-11-30 09:54:31 +08:00
|
|
|
const { onBlur } = this.props;
|
|
|
|
if (onBlur) {
|
|
|
|
onBlur(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-30 10:52:27 +08:00
|
|
|
handleMouseEnter: React.MouseEventHandler<HTMLInputElement> = (e) => {
|
2018-07-28 21:52:12 +08:00
|
|
|
const { onMouseEnter } = this.props;
|
|
|
|
if (onMouseEnter) {
|
|
|
|
onMouseEnter(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-30 10:52:27 +08:00
|
|
|
handleMouseLeave: React.MouseEventHandler<HTMLInputElement> = (e) => {
|
2018-07-28 21:52:12 +08:00
|
|
|
const { onMouseLeave } = this.props;
|
|
|
|
if (onMouseLeave) {
|
|
|
|
onMouseLeave(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-30 09:54:31 +08:00
|
|
|
focus() {
|
|
|
|
this.picker.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
blur() {
|
|
|
|
this.picker.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
savePicker = (node: any) => {
|
|
|
|
this.picker = node;
|
|
|
|
}
|
|
|
|
|
2017-12-17 17:11:54 +08:00
|
|
|
getDefaultLocale = () => {
|
|
|
|
const result = {
|
2018-01-13 19:11:53 +08:00
|
|
|
...enUS,
|
2017-12-17 17:11:54 +08:00
|
|
|
...this.props.locale,
|
|
|
|
};
|
|
|
|
result.lang = {
|
|
|
|
...result.lang,
|
|
|
|
...(this.props.locale || {}).lang,
|
|
|
|
};
|
|
|
|
return result;
|
2017-10-24 14:08:39 +08:00
|
|
|
}
|
|
|
|
|
2017-11-21 21:09:24 +08:00
|
|
|
renderPicker = (locale: any, localeCode: string) => {
|
2016-03-30 10:52:15 +08:00
|
|
|
const props = this.props;
|
2016-09-14 16:18:33 +08:00
|
|
|
const { prefixCls, inputPrefixCls } = props;
|
2017-09-27 22:32:49 +08:00
|
|
|
const pickerClass = classNames(`${prefixCls}-picker`, {
|
|
|
|
[`${prefixCls}-picker-${props.size}`]: !!props.size,
|
2016-03-30 10:52:15 +08:00
|
|
|
});
|
2017-07-12 14:23:47 +08:00
|
|
|
const pickerInputClass = classNames(`${prefixCls}-picker-input`, inputPrefixCls, {
|
2016-09-14 16:18:33 +08:00
|
|
|
[`${inputPrefixCls}-lg`]: props.size === 'large',
|
|
|
|
[`${inputPrefixCls}-sm`]: props.size === 'small',
|
2017-07-12 14:23:47 +08:00
|
|
|
[`${inputPrefixCls}-disabled`]: props.disabled,
|
2016-03-30 10:52:15 +08:00
|
|
|
});
|
|
|
|
|
2016-09-27 13:42:30 +08:00
|
|
|
const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss';
|
2016-04-14 15:42:03 +08:00
|
|
|
const rcTimePickerProps = {
|
2017-06-29 11:22:12 +08:00
|
|
|
...generateShowHourMinuteSecond(timeFormat),
|
2016-09-27 13:42:30 +08:00
|
|
|
format: timeFormat,
|
2017-05-02 16:24:29 +08:00
|
|
|
use12Hours: (props.showTime && props.showTime.use12Hours),
|
2016-04-14 15:42:03 +08:00
|
|
|
};
|
2016-11-11 18:23:11 +08:00
|
|
|
const columns = getColumns(rcTimePickerProps);
|
2017-05-02 16:24:29 +08:00
|
|
|
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
|
2016-03-30 10:52:15 +08:00
|
|
|
const timePicker = props.showTime ? (
|
2016-07-18 16:44:30 +08:00
|
|
|
<TimePickerPanel
|
2016-04-14 16:48:34 +08:00
|
|
|
{...rcTimePickerProps}
|
2016-04-15 14:47:39 +08:00
|
|
|
{...props.showTime}
|
2016-09-14 16:18:33 +08:00
|
|
|
prefixCls={`${prefixCls}-time-picker`}
|
2016-09-27 13:42:30 +08:00
|
|
|
className={timePickerCls}
|
2016-04-07 17:55:06 +08:00
|
|
|
placeholder={locale.timePickerLocale.placeholder}
|
2016-04-14 12:32:25 +08:00
|
|
|
transitionName="slide-up"
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-03-30 10:52:15 +08:00
|
|
|
) : null;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Picker
|
2016-06-15 17:46:25 +08:00
|
|
|
{...props}
|
2017-11-30 09:54:31 +08:00
|
|
|
ref={this.savePicker}
|
2016-03-30 10:52:15 +08:00
|
|
|
pickerClass={pickerClass}
|
|
|
|
pickerInputClass={pickerInputClass}
|
|
|
|
locale={locale}
|
2017-10-20 14:54:38 +08:00
|
|
|
localeCode={localeCode}
|
2016-03-30 10:52:15 +08:00
|
|
|
timePicker={timePicker}
|
2016-09-27 13:42:30 +08:00
|
|
|
onOpenChange={this.handleOpenChange}
|
2017-11-30 09:54:31 +08:00
|
|
|
onFocus={this.handleFocus}
|
|
|
|
onBlur={this.handleBlur}
|
2018-07-28 21:52:12 +08:00
|
|
|
onMouseEnter={this.handleMouseEnter}
|
|
|
|
onMouseLeave={this.handleMouseLeave}
|
2016-03-30 10:52:15 +08:00
|
|
|
/>
|
|
|
|
);
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
2017-10-20 14:54:38 +08:00
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<LocaleReceiver
|
|
|
|
componentName="DatePicker"
|
2017-10-24 14:08:39 +08:00
|
|
|
defaultLocale={this.getDefaultLocale}
|
2017-10-20 14:54:38 +08:00
|
|
|
>
|
|
|
|
{this.renderPicker}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
|
|
|
}
|
2017-04-20 17:11:51 +08:00
|
|
|
};
|
2016-03-30 10:52:15 +08:00
|
|
|
}
|