2019-01-12 11:33:27 +08:00
|
|
|
import { Item, itemProps } from '../vc-menu';
|
2020-01-19 16:58:38 +08:00
|
|
|
import { getOptionProps, getListeners } from '../_util/props-util';
|
2019-01-12 11:33:27 +08:00
|
|
|
import Tooltip from '../tooltip';
|
|
|
|
function noop() {}
|
2018-01-16 15:41:00 +08:00
|
|
|
export default {
|
2019-02-01 17:23:00 +08:00
|
|
|
name: 'MenuItem',
|
2019-01-05 10:54:18 +08:00
|
|
|
inheritAttrs: false,
|
2018-01-16 15:41:00 +08:00
|
|
|
props: itemProps,
|
|
|
|
inject: {
|
2018-01-18 10:43:39 +08:00
|
|
|
getInlineCollapsed: { default: () => noop },
|
2020-03-07 19:45:13 +08:00
|
|
|
layoutSiderContext: { default: () => ({}) },
|
2018-01-16 15:41:00 +08:00
|
|
|
},
|
2020-03-07 19:45:13 +08:00
|
|
|
isMenuItem: true,
|
2018-01-16 15:41:00 +08:00
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
onKeyDown(e) {
|
|
|
|
this.$refs.menuItem.onKeyDown(e);
|
2018-01-16 15:41:00 +08:00
|
|
|
},
|
|
|
|
},
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
const props = getOptionProps(this);
|
|
|
|
const { level, title, rootPrefixCls } = props;
|
2020-01-19 16:58:38 +08:00
|
|
|
const { getInlineCollapsed, $slots, $attrs: attrs } = this;
|
2019-01-12 11:33:27 +08:00
|
|
|
const inlineCollapsed = getInlineCollapsed();
|
2020-03-07 19:45:13 +08:00
|
|
|
const tooltipProps = {
|
|
|
|
title: title || (level === 1 ? $slots.default : ''),
|
|
|
|
};
|
|
|
|
const siderCollapsed = this.layoutSiderContext.sCollapsed;
|
|
|
|
if (!siderCollapsed && !inlineCollapsed) {
|
|
|
|
tooltipProps.title = null;
|
|
|
|
// Reset `visible` to fix control mode tooltip display not correct
|
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/16742
|
|
|
|
tooltipProps.visible = false;
|
2019-01-05 10:54:18 +08:00
|
|
|
}
|
|
|
|
|
2018-01-16 15:41:00 +08:00
|
|
|
const itemProps = {
|
2019-01-05 10:54:18 +08:00
|
|
|
props: {
|
|
|
|
...props,
|
2020-03-07 19:45:13 +08:00
|
|
|
title,
|
2019-01-05 10:54:18 +08:00
|
|
|
},
|
2018-01-16 15:41:00 +08:00
|
|
|
attrs,
|
2020-01-19 16:58:38 +08:00
|
|
|
on: getListeners(this),
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-01-17 19:15:18 +08:00
|
|
|
const toolTipProps = {
|
|
|
|
props: {
|
2020-03-07 19:45:13 +08:00
|
|
|
...tooltipProps,
|
2018-01-17 19:15:18 +08:00
|
|
|
placement: 'right',
|
2019-01-05 10:54:18 +08:00
|
|
|
overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
|
2018-01-17 19:15:18 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-02-03 19:48:03 +08:00
|
|
|
return (
|
2018-09-05 21:28:54 +08:00
|
|
|
<Tooltip {...toolTipProps}>
|
2019-01-12 11:33:27 +08:00
|
|
|
<Item {...itemProps} ref="menuItem">
|
2018-02-03 19:48:03 +08:00
|
|
|
{$slots.default}
|
|
|
|
</Item>
|
2018-09-05 21:28:54 +08:00
|
|
|
</Tooltip>
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-01-16 15:41:00 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|