diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx index 09ac845f2..84ee6e242 100644 --- a/components/menu/src/SubMenu.tsx +++ b/components/menu/src/SubMenu.tsx @@ -1,5 +1,5 @@ import PropTypes from '../../_util/vue-types'; -import { computed, defineComponent } from 'vue'; +import { computed, defineComponent, getCurrentInstance, ref } from 'vue'; import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath'; import { useInjectMenu, useProvideFirstLevel } from './hooks/useMenuContext'; import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util'; @@ -20,18 +20,35 @@ export default defineComponent({ setup(props, { slots, attrs }) { useProvideKeyPath(); useProvideFirstLevel(false); + const instance = getCurrentInstance(); + const key = instance.vnode.key; const keyPath = useInjectKeyPath(); const { prefixCls, activeKeys, - disabled, + disabled: contextDisabled, changeActiveKeys, rtl, mode, inlineCollapsed, antdMenuTheme, + openKeys, + overflowDisabled, } = useInjectMenu(); + const subMenuPrefixCls = computed(() => `${prefixCls}-submenu`); + const mergedDisabled = computed(() => contextDisabled.value || props.disabled); + const elementRef = ref(); + const popupRef = ref(); + + // // ================================ Icon ================================ + // const mergedItemIcon = itemIcon || contextItemIcon; + // const mergedExpandIcon = expandIcon || contextExpandIcon; + + // ================================ Open ================================ + const originOpen = computed(() => openKeys.value.includes(key)); + const open = computed(() => !overflowDisabled.value && originOpen.value); + const popupClassName = computed(() => classNames(prefixCls, `${prefixCls.value}-${antdMenuTheme.value}`, props.popupClassName), ); diff --git a/components/vc-overflow/Item.tsx b/components/vc-overflow/Item.tsx new file mode 100644 index 000000000..e8045ccb8 --- /dev/null +++ b/components/vc-overflow/Item.tsx @@ -0,0 +1,105 @@ +import { + computed, + CSSProperties, + defineComponent, + HTMLAttributes, + onUnmounted, + PropType, + ref, +} from 'vue'; +import ResizeObserver from '../vc-resize-observer'; +import classNames from '../_util/classNames'; +import { Key, VueNode } from '../_util/type'; +import PropTypes from '../_util/vue-types'; + +export default defineComponent({ + name: 'InternalItem', + props: { + prefixCls: String, + item: PropTypes.any, + renderItem: Function as PropType<(item: any) => VueNode>, + responsive: Boolean, + itemKey: [String, Number], + registerSize: Function as PropType<(key: Key, width: number | null) => void>, + display: Boolean, + order: Number, + component: PropTypes.any, + invalidate: Boolean, + }, + setup(props, { slots, expose }) { + const mergedHidden = computed(() => props.responsive && !props.display); + const itemNodeRef = ref(); + + expose({ itemNodeRef }); + + // ================================ Effect ================================ + function internalRegisterSize(width: number | null) { + props.registerSize(props.itemKey!, width); + } + + onUnmounted(() => { + internalRegisterSize(null); + }); + + return () => { + const { + prefixCls, + invalidate, + item, + renderItem, + responsive, + registerSize, + itemKey, + display, + order, + component: Component = 'div', + ...restProps + } = props; + const children = slots.default?.(); + // ================================ Render ================================ + const childNode = renderItem && item !== undefined ? renderItem(item) : children; + + let overflowStyle: CSSProperties | undefined; + if (!invalidate) { + overflowStyle = { + opacity: mergedHidden.value ? 0 : 1, + height: mergedHidden.value ? 0 : undefined, + overflowY: mergedHidden.value ? 'hidden' : undefined, + order: responsive ? order : undefined, + pointerEvents: mergedHidden.value ? 'none' : undefined, + }; + } + + const overflowProps: HTMLAttributes = {}; + if (mergedHidden.value) { + overflowProps['aria-hidden'] = true; + } + + let itemNode = ( + + {childNode} + + ); + + if (responsive) { + itemNode = ( + { + internalRegisterSize(offsetWidth); + }} + > + {itemNode} + + ); + } + + return itemNode; + }; + }, +}); diff --git a/components/vc-overflow/index.ts b/components/vc-overflow/index.ts new file mode 100644 index 000000000..0d3724978 --- /dev/null +++ b/components/vc-overflow/index.ts @@ -0,0 +1,5 @@ +// import Overflow, { OverflowProps } from './Overflow'; + +// export { OverflowProps }; + +// export default Overflow; diff --git a/v2-doc b/v2-doc index d19705328..a7013ae87 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2 +Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557