2016-09-09 13:55:21 +08:00
|
|
|
import React from 'react';
|
2017-04-20 17:11:51 +08:00
|
|
|
import PropTypes from 'prop-types';
|
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-06-29 11:22:12 +08:00
|
|
|
import { generateShowHourMinuteSecond } from '../time-picker';
|
2016-11-01 11:10:11 +08:00
|
|
|
import warning from '../_util/warning';
|
2017-01-09 16:25:58 +08:00
|
|
|
import { getComponentLocale } from '../_util/getLocale';
|
2016-10-01 00:17:31 +08:00
|
|
|
declare const require: Function;
|
2016-07-25 11:28:19 +08:00
|
|
|
|
2017-05-02 16:24:29 +08:00
|
|
|
function getColumns({ showHour, showMinute, showSecond, use12Hours }) {
|
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-04-20 17:11:51 +08:00
|
|
|
export default function wrapPicker(Picker, defaultFormat?: string): any {
|
|
|
|
return class PickerWrapper extends React.Component<any, any> {
|
|
|
|
static contextTypes = {
|
2016-12-02 15:07:33 +08:00
|
|
|
antLocale: PropTypes.object,
|
2017-04-20 17:11:51 +08:00
|
|
|
};
|
2016-12-02 15:07:33 +08:00
|
|
|
|
2017-04-20 17:11:51 +08:00
|
|
|
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-04-20 17:11:51 +08:00
|
|
|
handleOpenChange = (open) => {
|
2016-09-27 13:42:30 +08:00
|
|
|
const { onOpenChange, toggleOpen } = this.props;
|
|
|
|
onOpenChange(open);
|
|
|
|
|
|
|
|
if (toggleOpen) {
|
|
|
|
warning(
|
|
|
|
false,
|
|
|
|
'`toggleOpen` is deprecated and will be removed in the future, ' +
|
2017-03-23 21:15:49 +08:00
|
|
|
'please use `onOpenChange` instead, see: http://u.ant.design/date-picker-on-open-change',
|
2016-09-27 13:42:30 +08:00
|
|
|
);
|
2017-03-23 21:15:49 +08:00
|
|
|
toggleOpen({ open });
|
2016-09-27 13:42:30 +08:00
|
|
|
}
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
2016-03-30 10:52:15 +08:00
|
|
|
|
|
|
|
render() {
|
|
|
|
const props = this.props;
|
2016-09-14 16:18:33 +08:00
|
|
|
const { prefixCls, inputPrefixCls } = props;
|
2016-03-30 10:52:15 +08:00
|
|
|
const pickerClass = classNames({
|
2016-09-14 16:18:33 +08:00
|
|
|
[`${prefixCls}-picker`]: true,
|
2016-03-30 10:52:15 +08:00
|
|
|
});
|
|
|
|
const pickerInputClass = classNames({
|
2016-12-05 00:27:03 +08:00
|
|
|
[`${prefixCls}-picker-input`]: true,
|
2016-09-14 16:18:33 +08:00
|
|
|
[inputPrefixCls]: true,
|
|
|
|
[`${inputPrefixCls}-lg`]: props.size === 'large',
|
|
|
|
[`${inputPrefixCls}-sm`]: props.size === 'small',
|
2016-03-30 10:52:15 +08:00
|
|
|
});
|
|
|
|
|
2017-01-09 16:25:58 +08:00
|
|
|
const locale = getComponentLocale(
|
2016-10-20 14:48:13 +08:00
|
|
|
props, this.context, 'DatePicker',
|
2017-03-23 21:15:49 +08:00
|
|
|
() => require('./locale/zh_CN'),
|
2016-10-01 00:17:31 +08:00
|
|
|
);
|
2016-04-14 12:32:25 +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}
|
2016-03-30 10:52:15 +08:00
|
|
|
pickerClass={pickerClass}
|
|
|
|
pickerInputClass={pickerInputClass}
|
|
|
|
locale={locale}
|
|
|
|
timePicker={timePicker}
|
2016-09-27 13:42:30 +08:00
|
|
|
onOpenChange={this.handleOpenChange}
|
2016-03-30 10:52:15 +08:00
|
|
|
/>
|
|
|
|
);
|
2017-04-20 17:11:51 +08:00
|
|
|
}
|
|
|
|
};
|
2016-03-30 10:52:15 +08:00
|
|
|
}
|