import raf from 'raf' import PropTypes from '../_util/vue-types' import Menu from '../vc-menu' import scrollIntoView from 'dom-scroll-into-view' import { getSelectKeys, preventDefaultEvent } from './util' import { cloneElement } from '../_util/vnode' import BaseMixin from '../_util/BaseMixin' import { getSlotOptions, getComponentFromProp } from '../_util/props-util' export default { name: 'DropdownMenu', mixins: [BaseMixin], props: { defaultActiveFirstOption: PropTypes.bool, value: PropTypes.any, dropdownMenuStyle: PropTypes.object, multiple: PropTypes.bool, // onPopupFocus: PropTypes.func, // onPopupScroll: PropTypes.func, // onMenuDeSelect: PropTypes.func, // onMenuSelect: PropTypes.func, prefixCls: PropTypes.string, menuItems: PropTypes.any, inputValue: PropTypes.string, visible: PropTypes.bool, backfillValue: PropTypes.any, firstActiveValue: PropTypes.string, menuItemSelectedIcon: PropTypes.any, }, beforeMount () { this.lastInputValue = this.$props.inputValue }, mounted () { this.$nextTick(() => { this.scrollActiveItemToView() }) this.lastVisible = this.$props.visible }, watch: { visible (val) { if (!val) { this.lastVisible = val } }, }, updated () { const props = this.$props if (!this.prevVisible && props.visible) { this.$nextTick(() => { this.scrollActiveItemToView() }) } this.lastVisible = props.visible this.lastInputValue = props.inputValue this.prevVisible = this.visible }, beforeDestroy () { if (this.rafInstance && this.rafInstance.cancel) { this.rafInstance.cancel() } }, methods: { scrollActiveItemToView () { // scroll into view const itemComponent = this.firstActiveItem && this.firstActiveItem.$el const props = this.$props const { value, visible, firstActiveValue } = props if (!itemComponent || !visible) { return } const scrollIntoViewOpts = { onlyScrollIfNeeded: true, } if ( (!value || value.length === 0) && firstActiveValue ) { scrollIntoViewOpts.alignWithTop = true } // Delay to scroll since current frame item position is not ready when pre view is by filter // https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462 this.rafInstance = raf(() => { scrollIntoView( itemComponent, this.$refs.menuRef.$el, scrollIntoViewOpts ) }) }, renderMenu () { const props = this.$props const { menuItems, defaultActiveFirstOption, value, prefixCls, multiple, inputValue, firstActiveValue, dropdownMenuStyle, backfillValue, } = props const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon') const { menuDeselect, menuSelect, popupScroll } = this.$listeners if (menuItems && menuItems.length) { const selectedKeys = getSelectKeys(menuItems, value) const menuProps = { props: { multiple, defaultActiveFirst: defaultActiveFirstOption, itemIcon: multiple ? menuItemSelectedIcon : null, selectedKeys, prefixCls: `${prefixCls}-menu`, }, on: {}, style: dropdownMenuStyle, ref: 'menuRef', attrs: { role: 'listbox', }, } if (popupScroll) { menuProps.on.scroll = popupScroll } if (multiple) { menuProps.on.deselect = menuDeselect menuProps.on.select = menuSelect } else { menuProps.on.click = menuSelect } const activeKeyProps = {} let clonedMenuItems = menuItems if (selectedKeys.length || firstActiveValue) { if (props.visible && !this.lastVisible) { activeKeyProps.activeKey = selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue } let foundFirst = false // set firstActiveItem via cloning menus // for scroll into view const clone = item => { if ( (!foundFirst && selectedKeys.indexOf(item.key) !== -1) || (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1) ) { foundFirst = true return cloneElement(item, { directives: [{ name: 'ref', value: ref => { this.firstActiveItem = ref }, }], }) } return item } clonedMenuItems = menuItems.map(item => { if (getSlotOptions(item).isMenuItemGroup) { const children = item.componentOptions.children.map(clone) return cloneElement(item, { children }) } return clone(item) }) } else { // Clear firstActiveItem when dropdown menu items was empty // Avoid `Unable to find node on an unmounted component` // https://github.com/ant-design/ant-design/issues/10774 this.firstActiveItem = null } // clear activeKey when inputValue change const lastValue = value && value[value.length - 1] if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) { activeKeyProps.activeKey = '' } menuProps.props = { ...activeKeyProps, ...menuProps.props } return (
) } return null }, }, render () { const renderMenu = this.renderMenu() const { popupFocus, popupScroll } = this.$listeners return renderMenu ? (