ant-design-vue/components/vc-menu/Menu.jsx

192 lines
5.2 KiB
Vue

import PropTypes from '../_util/vue-types';
import { Provider, create } from '../_util/store';
import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu';
import BaseMixin from '../_util/BaseMixin';
import hasProp, {
getOptionProps,
getComponentFromProp,
filterEmpty,
getListeners,
} from '../_util/props-util';
import commonPropsType from './commonPropsType';
const Menu = {
name: 'Menu',
props: {
...commonPropsType,
selectable: PropTypes.bool.def(true),
},
mixins: [BaseMixin],
data() {
const props = getOptionProps(this);
let selectedKeys = props.defaultSelectedKeys;
let openKeys = props.defaultOpenKeys;
if ('selectedKeys' in props) {
selectedKeys = props.selectedKeys || [];
}
if ('openKeys' in props) {
openKeys = props.openKeys || [];
}
this.store = create({
selectedKeys,
openKeys,
activeKey: {
'0-menu-': getActiveKey({ ...props, children: this.$slots.default || [] }, props.activeKey),
},
});
// this.isRootMenu = true // 声明在props上
return {};
},
mounted() {
this.updateMiniStore();
},
updated() {
this.updateMiniStore();
},
methods: {
onSelect(selectInfo) {
const props = this.$props;
if (props.selectable) {
// root menu
let selectedKeys = this.store.getState().selectedKeys;
const selectedKey = selectInfo.key;
if (props.multiple) {
selectedKeys = selectedKeys.concat([selectedKey]);
} else {
selectedKeys = [selectedKey];
}
if (!hasProp(this, 'selectedKeys')) {
this.store.setState({
selectedKeys,
});
}
this.__emit('select', {
...selectInfo,
selectedKeys,
});
}
},
onClick(e) {
this.__emit('click', e);
},
// onKeyDown needs to be exposed as a instance method
// e.g., in rc-select, we need to navigate menu item while
// current active item is rc-select input box rather than the menu itself
onKeyDown(e, callback) {
this.$refs.innerMenu.getWrappedInstance().onKeyDown(e, callback);
},
onOpenChange(event) {
const openKeys = this.store.getState().openKeys.concat();
let changed = false;
const processSingle = e => {
let oneChanged = false;
if (e.open) {
oneChanged = openKeys.indexOf(e.key) === -1;
if (oneChanged) {
openKeys.push(e.key);
}
} else {
const index = openKeys.indexOf(e.key);
oneChanged = index !== -1;
if (oneChanged) {
openKeys.splice(index, 1);
}
}
changed = changed || oneChanged;
};
if (Array.isArray(event)) {
// batch change call
event.forEach(processSingle);
} else {
processSingle(event);
}
if (changed) {
if (!hasProp(this, 'openKeys')) {
this.store.setState({ openKeys });
}
this.__emit('openChange', openKeys);
}
},
onDeselect(selectInfo) {
const props = this.$props;
if (props.selectable) {
const selectedKeys = this.store.getState().selectedKeys.concat();
const selectedKey = selectInfo.key;
const index = selectedKeys.indexOf(selectedKey);
if (index !== -1) {
selectedKeys.splice(index, 1);
}
if (!hasProp(this, 'selectedKeys')) {
this.store.setState({
selectedKeys,
});
}
this.__emit('deselect', {
...selectInfo,
selectedKeys,
});
}
},
getOpenTransitionName() {
const props = this.$props;
let transitionName = props.openTransitionName;
const animationName = props.openAnimation;
if (!transitionName && typeof animationName === 'string') {
transitionName = `${props.prefixCls}-open-${animationName}`;
}
return transitionName;
},
updateMiniStore() {
const props = getOptionProps(this);
if ('selectedKeys' in props) {
this.store.setState({
selectedKeys: props.selectedKeys || [],
});
}
if ('openKeys' in props) {
this.store.setState({
openKeys: props.openKeys || [],
});
}
},
},
render() {
const props = getOptionProps(this);
const subPopupMenuProps = {
props: {
...props,
itemIcon: getComponentFromProp(this, 'itemIcon', props),
expandIcon: getComponentFromProp(this, 'expandIcon', props),
overflowedIndicator: getComponentFromProp(this, 'overflowedIndicator', props) || (
<span>···</span>
),
openTransitionName: this.getOpenTransitionName(),
parentMenu: this,
children: filterEmpty(this.$slots.default || []),
},
class: `${props.prefixCls}-root`,
on: {
...getListeners(this),
click: this.onClick,
openChange: this.onOpenChange,
deselect: this.onDeselect,
select: this.onSelect,
},
ref: 'innerMenu',
};
return (
<Provider store={this.store}>
<SubPopupMenu {...subPopupMenuProps} />
</Provider>
);
},
};
export default Menu;