import * as React from 'react'; import TimePickerPanel from 'rc-time-picker/lib/Panel'; 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'; type PickerType = 'date' | 'week' | 'month'; interface PickerMap { [name: string]: string; } const DEFAULT_FORMAT: PickerMap = { date: 'YYYY-MM-DD', 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', }; 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, pickerType: PickerType): any { return class PickerWrapper extends React.Component { static defaultProps = { transitionName: 'slide-up', popupStyle: {}, onChange() {}, onOk() {}, onOpenChange() {}, locale: {}, }; private picker: any; componentDidMount() { const { autoFocus, disabled } = this.props; if (autoFocus && !disabled) { this.focus(); } } handleOpenChange = (open: boolean) => { const { onOpenChange } = this.props; onOpenChange(open); }; handleFocus: React.FocusEventHandler = e => { const { onFocus } = this.props; if (onFocus) { onFocus(e); } }; handleBlur: React.FocusEventHandler = e => { const { onBlur } = this.props; if (onBlur) { onBlur(e); } }; handleMouseEnter: React.MouseEventHandler = e => { const { onMouseEnter } = this.props; if (onMouseEnter) { onMouseEnter(e); } }; handleMouseLeave: React.MouseEventHandler = 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; }; 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]; return ( {({ getPrefixCls }: ConfigConsumerProps) => { const { 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, use12Hours: showTime && showTime.use12Hours, }; const columns = getColumns(rcTimePickerProps); const timePickerCls = `${prefixCls}-time-picker-column-${columns}`; const timePicker = showTime ? ( ) : null; return ( ); }} ); }; render() { return ( {this.renderPicker} ); } }; }