NuclearDispersionSystem/ant-design-vue-jeecg/node_modules/ant-design-vue/es/vc-menu/MenuItem.js
2023-09-14 14:47:11 +08:00

213 lines
6.6 KiB
Java

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import KeyCode from '../_util/KeyCode';
import BaseMixin from '../_util/BaseMixin';
import scrollIntoView from 'dom-scroll-into-view';
import { connect } from '../_util/store';
import { noop, menuAllProps } from './util';
import { getComponentFromProp, getListeners } from '../_util/props-util';
var props = {
attribute: PropTypes.object,
rootPrefixCls: PropTypes.string,
eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
active: PropTypes.bool,
selectedKeys: PropTypes.array,
disabled: PropTypes.bool,
title: PropTypes.any,
index: PropTypes.number,
inlineIndent: PropTypes.number.def(24),
level: PropTypes.number.def(1),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
parentMenu: PropTypes.object,
multiple: PropTypes.bool,
value: PropTypes.any,
isSelected: PropTypes.bool,
manualRef: PropTypes.func.def(noop),
role: PropTypes.any,
subMenuKey: PropTypes.string,
itemIcon: PropTypes.any
// clearSubMenuTimers: PropTypes.func.def(noop),
};
var MenuItem = {
name: 'MenuItem',
props: props,
mixins: [BaseMixin],
isMenuItem: true,
created: function created() {
this.prevActive = this.active;
// invoke customized ref to expose component to mixin
this.callRef();
},
updated: function updated() {
var _this = this;
this.$nextTick(function () {
var _$props = _this.$props,
active = _$props.active,
parentMenu = _$props.parentMenu,
eventKey = _$props.eventKey;
if (!_this.prevActive && active && (!parentMenu || !parentMenu['scrolled-' + eventKey])) {
scrollIntoView(_this.$el, _this.parentMenu.$el, {
onlyScrollIfNeeded: true
});
parentMenu['scrolled-' + eventKey] = true;
} else if (parentMenu && parentMenu['scrolled-' + eventKey]) {
delete parentMenu['scrolled-' + eventKey];
}
_this.prevActive = active;
});
this.callRef();
},
beforeDestroy: function beforeDestroy() {
var props = this.$props;
this.__emit('destroy', props.eventKey);
},
methods: {
onKeyDown: function onKeyDown(e) {
var keyCode = e.keyCode;
if (keyCode === KeyCode.ENTER) {
this.onClick(e);
return true;
}
},
onMouseLeave: function onMouseLeave(e) {
var eventKey = this.$props.eventKey;
this.__emit('itemHover', {
key: eventKey,
hover: false
});
this.__emit('mouseleave', {
key: eventKey,
domEvent: e
});
},
onMouseEnter: function onMouseEnter(e) {
var eventKey = this.eventKey;
this.__emit('itemHover', {
key: eventKey,
hover: true
});
this.__emit('mouseenter', {
key: eventKey,
domEvent: e
});
},
onClick: function onClick(e) {
var _$props2 = this.$props,
eventKey = _$props2.eventKey,
multiple = _$props2.multiple,
isSelected = _$props2.isSelected;
var info = {
key: eventKey,
keyPath: [eventKey],
item: this,
domEvent: e
};
this.__emit('click', info);
if (multiple) {
if (isSelected) {
this.__emit('deselect', info);
} else {
this.__emit('select', info);
}
} else if (!isSelected) {
this.__emit('select', info);
}
},
getPrefixCls: function getPrefixCls() {
return this.$props.rootPrefixCls + '-item';
},
getActiveClassName: function getActiveClassName() {
return this.getPrefixCls() + '-active';
},
getSelectedClassName: function getSelectedClassName() {
return this.getPrefixCls() + '-selected';
},
getDisabledClassName: function getDisabledClassName() {
return this.getPrefixCls() + '-disabled';
},
callRef: function callRef() {
if (this.manualRef) {
this.manualRef(this);
}
}
},
render: function render() {
var _className;
var h = arguments[0];
var props = _extends({}, this.$props);
var className = (_className = {}, _defineProperty(_className, this.getPrefixCls(), true), _defineProperty(_className, this.getActiveClassName(), !props.disabled && props.active), _defineProperty(_className, this.getSelectedClassName(), props.isSelected), _defineProperty(_className, this.getDisabledClassName(), props.disabled), _className);
var attrs = _extends({}, props.attribute, {
title: props.title,
role: props.role || 'menuitem',
'aria-disabled': props.disabled
});
if (props.role === 'option') {
// overwrite to option
attrs = _extends({}, attrs, {
role: 'option',
'aria-selected': props.isSelected
});
} else if (props.role === null || props.role === 'none') {
// sometimes we want to specify role inside <li/> element
// <li><a role='menuitem'>Link</a></li> would be a good example
// in this case the role on <li/> should be "none" to
// remove the implied listitem role.
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
attrs.role = 'none';
}
// In case that onClick/onMouseLeave/onMouseEnter is passed down from owner
var mouseEvent = {
click: props.disabled ? noop : this.onClick,
mouseleave: props.disabled ? noop : this.onMouseLeave,
mouseenter: props.disabled ? noop : this.onMouseEnter
};
var style = {};
if (props.mode === 'inline') {
style.paddingLeft = props.inlineIndent * props.level + 'px';
}
var listeners = _extends({}, getListeners(this));
menuAllProps.props.forEach(function (key) {
return delete props[key];
});
menuAllProps.on.forEach(function (key) {
return delete listeners[key];
});
var liProps = {
attrs: _extends({}, props, attrs),
on: _extends({}, listeners, mouseEvent)
};
return h(
'li',
_mergeJSXProps([liProps, { style: style, 'class': className }]),
[this.$slots['default'], getComponentFromProp(this, 'itemIcon', props)]
);
}
};
var connected = connect(function (_ref, _ref2) {
var activeKey = _ref.activeKey,
selectedKeys = _ref.selectedKeys;
var eventKey = _ref2.eventKey,
subMenuKey = _ref2.subMenuKey;
return {
active: activeKey[subMenuKey] === eventKey,
isSelected: selectedKeys.indexOf(eventKey) !== -1
};
})(MenuItem);
export default connected;
export { props as menuItemProps };