2020-10-13 10:04:02 +00:00
|
|
|
import { defineComponent, inject } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import { Item, itemProps } from '../vc-menu';
|
2020-06-16 14:55:02 +00:00
|
|
|
import { getOptionProps, getSlot } from '../_util/props-util';
|
2020-10-24 14:38:25 +00:00
|
|
|
import Tooltip, { TooltipProps } from '../tooltip';
|
|
|
|
import { SiderContextProps } from '../layout/Sider';
|
2020-10-28 15:03:45 +00:00
|
|
|
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
|
2021-02-07 10:31:35 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
|
2020-10-13 10:04:02 +00:00
|
|
|
export default defineComponent({
|
2019-02-01 09:23:00 +00:00
|
|
|
name: 'MenuItem',
|
2019-01-05 02:54:18 +00:00
|
|
|
inheritAttrs: false,
|
2021-02-07 10:31:35 +00:00
|
|
|
props: {
|
|
|
|
...itemProps,
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
},
|
2020-03-07 11:45:13 +00:00
|
|
|
isMenuItem: true,
|
2020-06-16 14:55:02 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
2020-10-24 14:38:25 +00:00
|
|
|
getInlineCollapsed: inject<() => boolean>('getInlineCollapsed', () => false),
|
|
|
|
layoutSiderContext: inject<SiderContextProps>('layoutSiderContext', {}),
|
2020-10-28 15:03:45 +00:00
|
|
|
injectExtraProps: inject(injectExtraPropsKey, () => ({})),
|
2020-06-16 14:55:02 +00:00
|
|
|
};
|
|
|
|
},
|
2018-01-16 07:41:00 +00:00
|
|
|
methods: {
|
2020-10-24 14:38:25 +00:00
|
|
|
onKeyDown(e: HTMLElement) {
|
|
|
|
(this.$refs.menuItem as any).onKeyDown(e);
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
|
|
|
},
|
2019-02-01 09:23:00 +00:00
|
|
|
render() {
|
2019-01-12 03:33:27 +00:00
|
|
|
const props = getOptionProps(this);
|
2020-10-28 15:03:45 +00:00
|
|
|
const { level, title, rootPrefixCls } = { ...props, ...this.injectExtraProps } as any;
|
2020-06-17 16:19:14 +00:00
|
|
|
const { getInlineCollapsed, $attrs: attrs } = this;
|
2019-01-12 03:33:27 +00:00
|
|
|
const inlineCollapsed = getInlineCollapsed();
|
2020-07-07 05:52:54 +00:00
|
|
|
let tooltipTitle = title;
|
2020-08-02 14:27:22 +00:00
|
|
|
const children = getSlot(this);
|
2020-07-07 05:52:54 +00:00
|
|
|
if (typeof title === 'undefined') {
|
2020-08-02 14:27:22 +00:00
|
|
|
tooltipTitle = level === 1 ? children : '';
|
2020-07-07 05:52:54 +00:00
|
|
|
} else if (title === false) {
|
|
|
|
tooltipTitle = '';
|
|
|
|
}
|
2020-10-24 14:38:25 +00:00
|
|
|
const tooltipProps: TooltipProps = {
|
2020-07-07 05:52:54 +00:00
|
|
|
title: tooltipTitle,
|
2020-03-07 11:45:13 +00:00
|
|
|
};
|
|
|
|
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 02:54:18 +00:00
|
|
|
}
|
|
|
|
|
2018-01-16 07:41:00 +00:00
|
|
|
const itemProps = {
|
2020-06-16 14:55:02 +00:00
|
|
|
...props,
|
|
|
|
title,
|
|
|
|
...attrs,
|
2020-06-20 13:45:08 +00:00
|
|
|
ref: 'menuItem',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2020-10-24 14:38:25 +00:00
|
|
|
const toolTipProps: TooltipProps = {
|
2020-06-16 14:55:02 +00:00
|
|
|
...tooltipProps,
|
|
|
|
placement: 'right',
|
|
|
|
overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
|
2020-06-20 07:14:51 +00:00
|
|
|
};
|
2020-08-02 14:27:22 +00:00
|
|
|
const item = <Item {...itemProps}>{children}</Item>;
|
2020-06-20 13:45:08 +00:00
|
|
|
return <Tooltip {...toolTipProps}>{item}</Tooltip>;
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
2020-10-13 10:04:02 +00:00
|
|
|
});
|