ant-design-vue/components/dropdown/dropdown.jsx
2018-04-08 21:17:20 +08:00

81 lines
2.2 KiB
JavaScript

import RcDropdown from './src/index'
import DropdownButton from './dropdown-button'
// import warning from '../_util/warning'
import PropTypes from '../_util/vue-types'
import { cloneElement } from '../_util/vnode'
import { getOptionProps, getPropsData } from '../_util/props-util'
import getDropdownProps from './getDropdownProps'
const DropdownProps = getDropdownProps()
const Dropdown = {
name: 'ADropdown',
props: {
...DropdownProps,
prefixCls: PropTypes.string.def('ant-dropdown'),
mouseEnterDelay: PropTypes.number.def(0.15),
mouseLeaveDelay: PropTypes.number.def(0.1),
placement: DropdownProps.placement.def('bottomLeft'),
},
model: {
prop: 'visible',
event: 'visibleChange',
},
methods: {
getTransitionName () {
const { placement = '', transitionName } = this.$props
if (transitionName !== undefined) {
return transitionName
}
if (placement.indexOf('top') >= 0) {
return 'slide-down'
}
return 'slide-up'
},
},
render () {
const { $slots, prefixCls, trigger, disabled, $listeners } = this
const dropdownTrigger = cloneElement($slots.default, {
class: `${prefixCls}-trigger`,
disabled,
})
const overlay = this.overlay || $slots.overlay && $slots.overlay[0]
// menu cannot be selectable in dropdown defaultly, but multiple type can be selectable
const overlayProps = overlay && getPropsData(overlay)
let selectable = false
if (overlayProps) {
selectable = !!overlayProps.selectable || overlayProps.multiple
}
const fixedModeOverlay = overlay && cloneElement(overlay, {
props: {
mode: 'vertical',
selectable,
isRootMenu: false,
},
})
const dropdownProps = {
props: {
...getOptionProps(this),
transitionName: this.getTransitionName(),
trigger: disabled ? [] : trigger,
},
on: $listeners,
}
return (
<RcDropdown
{...dropdownProps}
>
{dropdownTrigger}
<template slot='overlay'>
{fixedModeOverlay}
</template>
</RcDropdown>
)
},
}
Dropdown.Button = DropdownButton
export default Dropdown
export { DropdownProps }