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

169 lines
4.3 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 LocaleReceiver from '../locale-provider/LocaleReceiver';
import { generateShowHourMinuteSecond } from '../time-picker';
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) {
let column = 0;
if (showHour) {
column += 1;
}
if (showMinute) {
column += 1;
}
if (showSecond) {
column += 1;
}
if (use12Hours) {
column += 1;
}
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
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);
2017-04-20 17:11:51 +08:00
}
2016-03-30 10:52:15 +08:00
handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
const { onFocus } = this.props;
if (onFocus) {
onFocus(e);
}
}
handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
const { onBlur } = this.props;
if (onBlur) {
onBlur(e);
}
}
handleMouseEnter: React.MouseEventHandler<HTMLInputElement> = (e) => {
const { onMouseEnter } = this.props;
if (onMouseEnter) {
onMouseEnter(e);
}
}
handleMouseLeave: React.MouseEventHandler<HTMLInputElement> = (e) => {
const { onMouseLeave } = this.props;
if (onMouseLeave) {
onMouseLeave(e);
}
}
focus() {
this.picker.focus();
}
blur() {
this.picker.blur();
}
savePicker = (node: any) => {
this.picker = node;
}
getDefaultLocale = () => {
const result = {
...enUS,
...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;
const { prefixCls, inputPrefixCls } = props;
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, {
[`${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
});
const timeFormat = (props.showTime && props.showTime.format) || 'HH:mm:ss';
const rcTimePickerProps = {
...generateShowHourMinuteSecond(timeFormat),
format: timeFormat,
use12Hours: (props.showTime && props.showTime.use12Hours),
};
const columns = getColumns(rcTimePickerProps);
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`;
2016-03-30 10:52:15 +08:00
const timePicker = props.showTime ? (
<TimePickerPanel
2016-04-14 16:48:34 +08:00
{...rcTimePickerProps}
{...props.showTime}
prefixCls={`${prefixCls}-time-picker`}
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-03-30 10:52:15 +08:00
) : null;
return (
<Picker
{...props}
ref={this.savePicker}
2016-03-30 10:52:15 +08:00
pickerClass={pickerClass}
pickerInputClass={pickerInputClass}
locale={locale}
localeCode={localeCode}
2016-03-30 10:52:15 +08:00
timePicker={timePicker}
onOpenChange={this.handleOpenChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
2016-03-30 10:52:15 +08:00
/>
);
2017-04-20 17:11:51 +08:00
}
render() {
return (
<LocaleReceiver
componentName="DatePicker"
2017-10-24 14:08:39 +08:00
defaultLocale={this.getDefaultLocale}
>
{this.renderPicker}
</LocaleReceiver>
);
}
2017-04-20 17:11:51 +08:00
};
2016-03-30 10:52:15 +08:00
}