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

118 lines
3.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 warning from '../_util/warning';
declare const require: Function;
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
2017-11-21 21:09:24 +08:00
handleOpenChange = (open: boolean) => {
const { onOpenChange, toggleOpen } = this.props;
onOpenChange(open);
if (toggleOpen) {
warning(
false,
'`toggleOpen` is deprecated and will be removed in the future, ' +
'please use `onOpenChange` instead, see: https://u.ant.design/date-picker-on-open-change',
);
toggleOpen({ open });
}
2017-04-20 17:11:51 +08:00
}
2016-03-30 10:52:15 +08:00
2017-10-24 14:08:39 +08:00
getDefaultLocale() {
const locale = require('./locale/en_US');
return locale.default || locale;
}
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}
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}
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
}