ant-design-vue/components/vc-select/DropdownMenu.jsx

213 lines
6.5 KiB
Vue
Raw Normal View History

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,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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,
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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',
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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;
},
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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);
});
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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];
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
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
};