2019-01-12 11:33:27 +08:00
|
|
|
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';
|
2020-01-19 16:58:38 +08:00
|
|
|
import { getSlotOptions, getComponentFromProp, getListeners } from '../_util/props-util';
|
2018-02-06 19:00:34 +08:00
|
|
|
|
|
|
|
export default {
|
2018-02-06 21:27:23 +08:00
|
|
|
name: 'DropdownMenu',
|
|
|
|
mixins: [BaseMixin],
|
2018-02-06 19:00:34 +08:00
|
|
|
props: {
|
2019-01-04 23:00:09 +08:00
|
|
|
ariaId: PropTypes.string,
|
2018-02-06 19:00:34 +08:00
|
|
|
defaultActiveFirstOption: PropTypes.bool,
|
|
|
|
value: PropTypes.any,
|
|
|
|
dropdownMenuStyle: PropTypes.object,
|
|
|
|
multiple: PropTypes.bool,
|
2018-02-06 21:27:23 +08:00
|
|
|
// onPopupFocus: PropTypes.func,
|
|
|
|
// onPopupScroll: PropTypes.func,
|
|
|
|
// onMenuDeSelect: PropTypes.func,
|
|
|
|
// onMenuSelect: PropTypes.func,
|
2018-02-06 19:00:34 +08:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
menuItems: PropTypes.any,
|
|
|
|
inputValue: PropTypes.string,
|
|
|
|
visible: PropTypes.bool,
|
2018-09-05 21:28:54 +08:00
|
|
|
backfillValue: PropTypes.any,
|
2018-11-09 14:23:19 +08:00
|
|
|
firstActiveValue: PropTypes.string,
|
|
|
|
menuItemSelectedIcon: PropTypes.any,
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
2019-02-01 17:23:00 +08:00
|
|
|
watch: {
|
|
|
|
visible(val) {
|
|
|
|
if (!val) {
|
|
|
|
this.lastVisible = val;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2018-02-06 19:00:34 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
created() {
|
|
|
|
this.rafInstance = { cancel: () => null };
|
|
|
|
this.lastInputValue = this.$props.inputValue;
|
|
|
|
this.lastVisible = false;
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
mounted() {
|
2018-02-06 19:00:34 +08:00
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.scrollActiveItemToView();
|
|
|
|
});
|
|
|
|
this.lastVisible = this.$props.visible;
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
updated() {
|
|
|
|
const props = this.$props;
|
2018-02-07 23:03:47 +08:00
|
|
|
if (!this.prevVisible && props.visible) {
|
2018-02-06 19:00:34 +08:00
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.scrollActiveItemToView();
|
|
|
|
});
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
this.lastVisible = props.visible;
|
|
|
|
this.lastInputValue = props.inputValue;
|
|
|
|
this.prevVisible = this.visible;
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
beforeDestroy() {
|
2018-11-09 14:23:19 +08:00
|
|
|
if (this.rafInstance && this.rafInstance.cancel) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.rafInstance.cancel();
|
2018-11-09 14:23:19 +08:00
|
|
|
}
|
|
|
|
},
|
2018-02-06 19:00:34 +08:00
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
scrollActiveItemToView() {
|
|
|
|
// scroll into view
|
|
|
|
const itemComponent = this.firstActiveItem && this.firstActiveItem.$el;
|
|
|
|
const props = this.$props;
|
|
|
|
const { value, visible, firstActiveValue } = props;
|
2018-11-09 14:23:19 +08:00
|
|
|
if (!itemComponent || !visible) {
|
2019-01-12 11:33:27 +08:00
|
|
|
return;
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2018-11-09 14:23:19 +08:00
|
|
|
const scrollIntoViewOpts = {
|
|
|
|
onlyScrollIfNeeded: true,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
if ((!value || value.length === 0) && firstActiveValue) {
|
|
|
|
scrollIntoViewOpts.alignWithTop = true;
|
2018-11-09 14:23:19 +08:00
|
|
|
}
|
|
|
|
// 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(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
scrollIntoView(itemComponent, this.$refs.menuRef.$el, scrollIntoViewOpts);
|
|
|
|
});
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
renderMenu() {
|
|
|
|
const props = this.$props;
|
2018-02-06 19:00:34 +08:00
|
|
|
const {
|
|
|
|
menuItems,
|
|
|
|
defaultActiveFirstOption,
|
|
|
|
value,
|
|
|
|
prefixCls,
|
|
|
|
multiple,
|
|
|
|
inputValue,
|
|
|
|
firstActiveValue,
|
2018-02-06 21:27:23 +08:00
|
|
|
dropdownMenuStyle,
|
2018-09-05 21:28:54 +08:00
|
|
|
backfillValue,
|
2019-01-04 23:00:09 +08:00
|
|
|
visible,
|
2019-01-12 11:33:27 +08:00
|
|
|
} = props;
|
|
|
|
const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon');
|
2020-01-19 16:58:38 +08:00
|
|
|
const { menuDeselect, menuSelect, popupScroll } = getListeners(this);
|
2018-02-06 19:00:34 +08:00
|
|
|
if (menuItems && menuItems.length) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const selectedKeys = getSelectKeys(menuItems, value);
|
2018-02-06 21:27:23 +08:00
|
|
|
const menuProps = {
|
|
|
|
props: {
|
|
|
|
multiple,
|
2018-11-09 14:23:19 +08:00
|
|
|
itemIcon: multiple ? menuItemSelectedIcon : null,
|
2018-02-06 21:27:23 +08:00
|
|
|
selectedKeys,
|
|
|
|
prefixCls: `${prefixCls}-menu`,
|
|
|
|
},
|
|
|
|
on: {},
|
|
|
|
style: dropdownMenuStyle,
|
|
|
|
ref: 'menuRef',
|
2018-09-05 21:28:54 +08:00
|
|
|
attrs: {
|
|
|
|
role: 'listbox',
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-27 21:58:55 +08:00
|
|
|
if (popupScroll) {
|
2019-01-12 11:33:27 +08:00
|
|
|
menuProps.on.scroll = popupScroll;
|
2018-02-27 21:58:55 +08:00
|
|
|
}
|
2018-02-06 19:00:34 +08:00
|
|
|
if (multiple) {
|
2019-01-12 11:33:27 +08:00
|
|
|
menuProps.on.deselect = menuDeselect;
|
|
|
|
menuProps.on.select = menuSelect;
|
2018-02-06 19:00:34 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
menuProps.on.click = menuSelect;
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
const activeKeyProps = {};
|
2018-02-06 19:00:34 +08:00
|
|
|
|
2019-03-04 15:45:21 +08:00
|
|
|
let defaultActiveFirst = defaultActiveFirstOption;
|
2019-01-12 11:33:27 +08:00
|
|
|
let clonedMenuItems = menuItems;
|
2018-02-06 19:00:34 +08:00
|
|
|
if (selectedKeys.length || firstActiveValue) {
|
|
|
|
if (props.visible && !this.lastVisible) {
|
2019-07-16 22:34:25 +08:00
|
|
|
activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
|
2019-01-04 23:00:09 +08:00
|
|
|
} else if (!visible) {
|
2019-03-04 15:45:21 +08:00
|
|
|
// Do not trigger auto active since we already have selectedKeys
|
|
|
|
if (selectedKeys[0]) {
|
|
|
|
defaultActiveFirst = false;
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
activeKeyProps.activeKey = undefined;
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
let foundFirst = false;
|
2018-02-06 19:00:34 +08:00
|
|
|
// set firstActiveItem via cloning menus
|
|
|
|
// for scroll into view
|
|
|
|
const clone = item => {
|
|
|
|
if (
|
|
|
|
(!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
|
2019-01-04 23:00:09 +08:00
|
|
|
(!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
|
2018-02-06 19:00:34 +08:00
|
|
|
) {
|
2019-01-12 11:33:27 +08:00
|
|
|
foundFirst = true;
|
2018-02-06 19:00:34 +08:00
|
|
|
return cloneElement(item, {
|
2019-01-12 11:33:27 +08:00
|
|
|
directives: [
|
|
|
|
{
|
|
|
|
name: 'ant-ref',
|
|
|
|
value: ref => {
|
|
|
|
this.firstActiveItem = ref;
|
|
|
|
},
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
],
|
|
|
|
});
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return item;
|
|
|
|
};
|
2018-02-06 19:00:34 +08:00
|
|
|
|
|
|
|
clonedMenuItems = menuItems.map(item => {
|
2018-02-09 18:42:19 +08:00
|
|
|
if (getSlotOptions(item).isMenuItemGroup) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const children = item.componentOptions.children.map(clone);
|
|
|
|
return cloneElement(item, { children });
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return clone(item);
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
} 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
|
2019-01-12 11:33:27 +08:00
|
|
|
this.firstActiveItem = null;
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// clear activeKey when inputValue change
|
2019-01-12 11:33:27 +08:00
|
|
|
const lastValue = value && value[value.length - 1];
|
2018-09-05 21:28:54 +08:00
|
|
|
if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
|
2019-01-12 11:33:27 +08:00
|
|
|
activeKeyProps.activeKey = '';
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-03-04 15:45:21 +08:00
|
|
|
menuProps.props = { ...activeKeyProps, ...menuProps.props, defaultActiveFirst };
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Menu {...menuProps}>{clonedMenuItems}</Menu>;
|
2018-02-06 19:00:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return null;
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
const renderMenu = this.renderMenu();
|
2020-01-19 16:58:38 +08:00
|
|
|
const { popupFocus, popupScroll } = getListeners(this);
|
2018-02-06 19:00:34 +08:00
|
|
|
return renderMenu ? (
|
|
|
|
<div
|
2018-11-09 14:23:19 +08:00
|
|
|
style={{
|
|
|
|
overflow: 'auto',
|
|
|
|
transform: 'translateZ(0)',
|
|
|
|
}}
|
2019-01-04 23:00:09 +08:00
|
|
|
id={this.$props.ariaId}
|
2019-01-12 11:33:27 +08:00
|
|
|
tabIndex="-1"
|
2018-02-07 18:56:58 +08:00
|
|
|
onFocus={popupFocus}
|
2018-02-06 21:27:23 +08:00
|
|
|
onMousedown={preventDefaultEvent}
|
2018-02-26 22:19:48 +08:00
|
|
|
onScroll={popupScroll}
|
2019-01-12 11:33:27 +08:00
|
|
|
ref="menuContainer"
|
2018-02-06 19:00:34 +08:00
|
|
|
>
|
|
|
|
{renderMenu}
|
|
|
|
</div>
|
2019-01-12 11:33:27 +08:00
|
|
|
) : null;
|
2018-02-06 19:00:34 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|