refactor: menu

Author: tangjinzhou

components/menu/src/Menu.tsx

@@ -41,6 +41,8 @@ import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInte
 import collapseMotion from '../../_util/collapseMotion';
 import type { ItemType } from './hooks/useItems';
 import useItems from './hooks/useItems';
+import useStyle from '../style';
+import { useInjectOverride } from './OverrideContext';
 
 export const menuProps = () => ({
   id: String,
@@ -95,7 +97,17 @@ export default defineComponent({
   props: menuProps(),
   slots: ['expandIcon', 'overflowedIndicator'],
   setup(props, { slots, emit, attrs }) {
-    const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);
+    const { direction, getPrefixCls } = useConfigInject('menu', props);
+    const override = useInjectOverride();
+    const prefixCls = computed(() => {
+      return getPrefixCls('menu', props.prefixCls || override?.prefixCls?.value);
+    });
+    const [wrapSSR, hashId] = useStyle(
+      prefixCls,
+      computed(() => {
+        return !override;
+      }),
+    );
     const store = shallowRef<Map<string, StoreMenuInfo>>(new Map());
     const siderCollapsed = inject(SiderCollapsedKey, ref(undefined));
     const inlineCollapsed = computed(() => {
@@ -265,6 +277,9 @@ export default defineComponent({
         mergedMode.value = props.mode;
         mergedInlineCollapsed.value = false;
       }
+      if (override?.mode?.value) {
+        mergedMode.value = override.mode.value;
+      }
     });
 
     const isInlineMode = computed(() => mergedMode.value === 'inline');
@@ -346,6 +361,7 @@ export default defineComponent({
     const onInternalClick = (info: MenuInfo) => {
       emit('click', info);
       triggerSelection(info);
+      override?.onClick?.();
     };
 
     const onInternalOpenChange = (key: Key, open: boolean) => {
@@ -406,7 +422,7 @@ export default defineComponent({
       triggerSubMenuAction: computed(() => props.triggerSubMenuAction),
       getPopupContainer: computed(() => props.getPopupContainer),
       inlineCollapsed: mergedInlineCollapsed,
-      antdMenuTheme: computed(() => props.theme),
+      theme: computed(() => props.theme),
       siderCollapsed,
       defaultMotions: computed(() => (isMounted.value ? defaultMotions.value : null)),
       motion: computed(() => (isMounted.value ? props.motion : null)),
@@ -419,7 +435,7 @@ export default defineComponent({
       isRootMenu: ref(true),
       expandIcon,
       forceSubMenuRender: computed(() => props.forceSubMenuRender),
-      rootClassName: computed(() => ''),
+      rootClassName: hashId,
     });
     return () => {
       const childList = itemsNodes.value || flattenChildren(slots.default?.());
@@ -442,14 +458,14 @@ export default defineComponent({
             ));
       const overflowedIndicator = slots.overflowedIndicator?.() || <EllipsisOutlined />;
 
-      return (
+      return wrapSSR(
         <Overflow
           {...attrs}
           onMousedown={props.onMousedown}
           prefixCls={`${prefixCls.value}-overflow`}
           component="ul"
           itemComponent={MenuItem}
-          class={[className.value, attrs.class]}
+          class={[className.value, attrs.class, hashId.value]}
           role="menu"
           id={props.id}
           data={wrappedChildList}
@@ -499,7 +515,7 @@ export default defineComponent({
               <PathContext>{wrappedChildList}</PathContext>
             </div>
           </Teleport>
-        </Overflow>
+        </Overflow>,
       );
     };
   },

components/menu/src/OverrideContext.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import { provide, computed, inject } from 'vue';
+import type { MenuProps } from './menu';
+
+// Used for Dropdown only
+export interface OverrideContextProps {
+  prefixCls?: ComputedRef<string>;
+  mode?: ComputedRef<MenuProps['mode']>;
+  selectable?: ComputedRef<boolean>;
+  validator?: (menuProps: Pick<MenuProps, 'mode'>) => void;
+  onClick?: () => void;
+}
+export const OverrideContextKey: InjectionKey<OverrideContextProps> = Symbol('OverrideContextKey');
+export const useInjectOverride = () => {
+  return inject(OverrideContextKey, undefined);
+};
+
+export const useProvideOverride = (props: OverrideContextProps) => {
+  const { prefixCls, mode, selectable, validator, onClick } = useInjectOverride() || {};
+  provide(OverrideContextKey, {
+    prefixCls: computed(() => (props.prefixCls?.value ?? prefixCls?.value) as string),
+    mode: computed(() => props.mode?.value ?? mode?.value),
+    selectable: computed(() => (props.selectable?.value ?? selectable?.value) as boolean),
+    validator: props.validator ?? validator,
+    onClick: props.onClick ?? onClick,
+  });
+};

components/menu/src/SubMenu.tsx

@@ -93,14 +93,14 @@ export default defineComponent({
       changeActiveKeys,
       mode,
       inlineCollapsed,
-      antdMenuTheme,
       openKeys,
       overflowDisabled,
       onOpenChange,
       registerMenuInfo,
       unRegisterMenuInfo,
       selectedSubMenuKeys,
       expandIcon: menuExpandIcon,
+      theme,
     } = useInjectMenu();
 
     const hasKey = vnodeKey !== undefined && vnodeKey !== null;
@@ -196,7 +196,7 @@ export default defineComponent({
     const popupClassName = computed(() =>
       classNames(
         prefixCls.value,
-        `${prefixCls.value}-${props.theme || antdMenuTheme.value}`,
+        `${prefixCls.value}-${props.theme || theme.value}`,
         props.popupClassName,
       ),
     );
@@ -279,13 +279,14 @@ export default defineComponent({
       const subMenuPrefixClsValue = subMenuPrefixCls.value;
       let titleNode = () => null;
       if (!overflowDisabled.value && mode.value !== 'inline') {
+        const popupOffset = mode.value === 'horizontal' ? [0, 8] : [10, 0];
         titleNode = () => (
           <PopupTrigger
             mode={triggerModeRef.value}
             prefixCls={subMenuPrefixClsValue}
             visible={!props.internalPopupClose && open.value}
             popupClassName={popupClassName.value}
-            popupOffset={props.popupOffset}
+            popupOffset={props.popupOffset || popupOffset}
             disabled={mergedDisabled.value}
             onVisibleChange={onPopupVisibleChange}
             v-slots={{

components/menu/src/hooks/useItems.tsx

@@ -13,24 +13,24 @@ import { ref, shallowRef, watch } from 'vue';
 import type { MenuProps } from '../Menu';
 import type { StoreMenuInfo } from './useMenuContext';
 
-interface MenuItemType extends VcMenuItemType {
+export interface MenuItemType extends VcMenuItemType {
   danger?: boolean;
   icon?: any;
   title?: string;
 }
 
-interface SubMenuType extends Omit<VcSubMenuType, 'children'> {
+export interface SubMenuType extends Omit<VcSubMenuType, 'children'> {
   icon?: any;
   theme?: 'dark' | 'light';
   children: ItemType[];
 }
 
-interface MenuItemGroupType extends Omit<VcMenuItemGroupType, 'children'> {
+export interface MenuItemGroupType extends Omit<VcMenuItemGroupType, 'children'> {
   children?: MenuItemType[];
   key?: Key;
 }
 
-interface MenuDividerType extends VcMenuDividerType {
+export interface MenuDividerType extends VcMenuDividerType {
   dashed?: boolean;
   key?: Key;
 }

components/menu/src/hooks/useMenuContext.ts

@@ -31,7 +31,7 @@ export interface MenuContextProps {
   rtl?: ComputedRef<boolean>;
 
   inlineCollapsed: Ref<boolean>;
-  antdMenuTheme?: ComputedRef<MenuTheme>;
+  theme?: ComputedRef<MenuTheme>;
 
   siderCollapsed?: ComputedRef<boolean>;