ant-design-vue/components/menu/MenuItem.tsx

62 lines
2.0 KiB
Vue

import { defineComponent, inject } from 'vue';
import { Item, itemProps } from '../vc-menu';
import { getOptionProps, getSlot } from '../_util/props-util';
import Tooltip, { TooltipProps } from '../tooltip';
import { SiderContextProps } from '../layout/Sider';
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
export default defineComponent({
name: 'MenuItem',
inheritAttrs: false,
props: itemProps,
isMenuItem: true,
setup() {
return {
getInlineCollapsed: inject<() => boolean>('getInlineCollapsed', () => false),
layoutSiderContext: inject<SiderContextProps>('layoutSiderContext', {}),
injectExtraProps: inject(injectExtraPropsKey, () => ({})),
};
},
methods: {
onKeyDown(e: HTMLElement) {
(this.$refs.menuItem as any).onKeyDown(e);
},
},
render() {
const props = getOptionProps(this);
const { level, title, rootPrefixCls } = { ...props, ...this.injectExtraProps } as any;
const { getInlineCollapsed, $attrs: attrs } = this;
const inlineCollapsed = getInlineCollapsed();
let tooltipTitle = title;
const children = getSlot(this);
if (typeof title === 'undefined') {
tooltipTitle = level === 1 ? children : '';
} else if (title === false) {
tooltipTitle = '';
}
const tooltipProps: TooltipProps = {
title: tooltipTitle,
};
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;
}
const itemProps = {
...props,
title,
...attrs,
ref: 'menuItem',
};
const toolTipProps: TooltipProps = {
...tooltipProps,
placement: 'right',
overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
};
const item = <Item {...itemProps}>{children}</Item>;
return <Tooltip {...toolTipProps}>{item}</Tooltip>;
},
});