ant-design-vue/components/vc-calendar/src/calendar/CalendarFooter.jsx

88 lines
2.2 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-03-19 02:25:42 +00:00
import PropTypes from '../../../_util/vue-types'
import BaseMixin from '../../../_util/BaseMixin'
import { getOptionProps } from '../../../_util/props-util'
2018-03-12 14:13:59 +00:00
import TodayButton from './TodayButton'
import OkButton from './OkButton'
import TimePickerButton from './TimePickerButton'
2018-03-10 14:10:13 +00:00
const CalendarFooter = {
mixins: [BaseMixin],
props: {
prefixCls: PropTypes.string,
showDateInput: PropTypes.bool,
disabledTime: PropTypes.any,
timePicker: PropTypes.any,
selectedValue: PropTypes.any,
showOk: PropTypes.bool,
// onSelect: PropTypes.func,
value: PropTypes.object,
renderFooter: PropTypes.func,
defaultValue: PropTypes.object,
2018-03-11 13:28:13 +00:00
locale: PropTypes.object,
2018-03-12 14:13:59 +00:00
showToday: PropTypes.bool,
2018-03-11 13:28:13 +00:00
disabledDate: PropTypes.func,
showTimePicker: PropTypes.bool,
okDisabled: PropTypes.bool,
2018-03-10 14:10:13 +00:00
},
methods: {
onSelect (value) {
this.__emit('select', value)
},
getRootDOMNode () {
return this.$el
},
},
render () {
const props = getOptionProps(this)
const { $listeners } = this
const { value, prefixCls, showOk, timePicker, renderFooter, showToday } = props
let footerEl = null
const extraFooter = renderFooter()
if (showToday || timePicker || extraFooter) {
const btnProps = {
props: {
...props,
value: value,
},
on: $listeners,
}
2018-03-11 13:28:13 +00:00
let nowEl = null
2018-03-10 14:10:13 +00:00
if (showToday) {
nowEl = <TodayButton {...btnProps} />
}
delete btnProps.props.value
2018-03-11 13:28:13 +00:00
let okBtn = null
2018-03-10 14:10:13 +00:00
if (showOk === true || showOk !== false && !!timePicker) {
okBtn = <OkButton {...btnProps} />
}
2018-03-11 13:28:13 +00:00
let timePickerBtn = null
2018-03-10 14:10:13 +00:00
if (timePicker) {
timePickerBtn = <TimePickerButton {...btnProps} />
}
let footerBtn
if (nowEl || timePickerBtn || okBtn) {
footerBtn = (<span class={`${prefixCls}-footer-btn`}>
2018-03-11 13:28:13 +00:00
{nowEl}{timePickerBtn}{okBtn}
2018-03-10 14:10:13 +00:00
</span>)
}
const cls = {
[`${prefixCls}-footer`]: true,
2018-03-12 14:13:59 +00:00
[`${prefixCls}-footer-show-ok`]: !!okBtn,
2018-03-10 14:10:13 +00:00
}
footerEl = (
<div class={cls}>
{extraFooter}
{footerBtn}
</div>)
}
return footerEl
},
}
export default CalendarFooter
2018-03-19 02:16:27 +00:00