ant-design-vue/components/dropdown/dropdown.jsx

81 lines
2.2 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-01-31 02:30:09 +00:00
import RcDropdown from './src/index'
2018-01-29 10:57:20 +00:00
import DropdownButton from './dropdown-button'
// import warning from '../_util/warning'
import PropTypes from '../_util/vue-types'
2018-02-24 10:12:24 +00:00
import { cloneElement } from '../_util/vnode'
import { getOptionProps, getPropsData } from '../_util/props-util'
2018-01-29 10:57:20 +00:00
import getDropdownProps from './getDropdownProps'
const DropdownProps = getDropdownProps()
const Dropdown = {
2018-04-08 13:17:20 +00:00
name: 'ADropdown',
2018-01-29 10:57:20 +00:00
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,
})
2018-03-26 11:05:40 +00:00
const overlay = this.overlay || $slots.overlay && $slots.overlay[0]
// menu cannot be selectable in dropdown defaultly, but multiple type can be selectable
2018-01-29 10:57:20 +00:00
const overlayProps = overlay && getPropsData(overlay)
2018-03-26 11:05:40 +00:00
let selectable = false
if (overlayProps) {
selectable = !!overlayProps.selectable || overlayProps.multiple
}
const fixedModeOverlay = overlay && cloneElement(overlay, {
2018-01-29 10:57:20 +00:00
props: {
mode: 'vertical',
selectable,
2018-01-30 09:13:44 +00:00
isRootMenu: false,
2018-01-29 10:57:20 +00:00
},
})
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
2018-01-31 02:30:09 +00:00
export { DropdownProps }
2018-01-29 10:57:20 +00:00