ant-design-vue/components/date-picker/wrapPicker.js

161 lines
4.0 KiB
JavaScript

import TimePickerPanel from '../vc-time-picker/Panel'
import classNames from 'classnames'
import LocaleReceiver from '../locale-provider/LocaleReceiver'
import { generateShowHourMinuteSecond } from '../time-picker'
import enUS from './locale/en_US'
import { getOptionProps, initDefaultProps } from '../_util/props-util'
function getColumns ({ showHour, showMinute, showSecond, use12Hours }) {
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, props, defaultFormat) {
return {
name: Picker.name,
props: initDefaultProps(props, {
format: defaultFormat || 'YYYY-MM-DD',
transitionName: 'slide-up',
popupStyle: {},
locale: {},
prefixCls: 'ant-calendar',
inputPrefixCls: 'ant-input',
}),
model: {
prop: 'value',
event: 'change',
},
mounted () {
const { autoFocus, disabled } = this
if (autoFocus && !disabled) {
this.$nextTick(() => {
this.focus()
})
}
},
methods: {
handleOpenChange (open) {
this.$emit('openChange', open)
},
handleFocus (e) {
this.$emit('focus', e)
},
handleBlur (e) {
this.$emit('blur', e)
},
focus () {
this.$refs.picker.focus()
},
blur () {
this.$refs.picker.blur()
},
getDefaultLocale () {
const result = {
...enUS,
...this.locale,
}
result.lang = {
...result.lang,
...(this.locale || {}).lang,
}
return result
},
renderPicker (locale, localeCode) {
const props = getOptionProps(this)
const { prefixCls, inputPrefixCls, size, showTime, disabled } = props
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 vcTimePickerProps = {
...generateShowHourMinuteSecond(timeFormat),
format: timeFormat,
use12Hours: (showTime && showTime.use12Hours),
}
const columns = getColumns(vcTimePickerProps)
const timePickerCls = `${prefixCls}-time-picker-column-${columns}`
const timePickerPanelProps = {
props: {
...vcTimePickerProps,
...showTime,
prefixCls: `${prefixCls}-time-picker`,
placeholder: locale.timePickerLocale.placeholder,
transitionName: 'slide-up',
},
class: timePickerCls,
}
const timePicker = showTime ? (
<TimePickerPanel
{...timePickerPanelProps}
/>
) : null
const pickerProps = {
props: {
...props,
pickerClass,
pickerInputClass,
locale,
localeCode,
timePicker,
},
on: {
...this.$listeners,
openChange: this.handleOpenChange,
focus: this.handleFocus,
blur: this.handleBlur,
},
ref: 'picker',
scopedSlots: this.$scopedSlots || {},
}
return (
<Picker
{...pickerProps}
>
<template slot='renderExtraFooter'>
{this.$slots.renderExtraFooter}
</template>
</Picker>
)
},
},
render () {
return (
<LocaleReceiver
componentName='DatePicker'
defaultLocale={this.getDefaultLocale}
scopedSlots={
{ default: this.renderPicker }
}
/>
)
},
}
}