fix: show the SubMenu in right place when the Menu is horizontal mode (#526)

* fix: show the submenu in right place when horizontal mode

* test: update the snap of Menu

Author: wewoor

src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
 >
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="File"
   >
@@ -76,6 +77,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Edit"
   >
@@ -137,6 +139,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Selection"
   >
@@ -198,6 +201,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="View"
   >
@@ -257,6 +261,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
       </li>
       <li
         className="mo-menu__item"
+        data-mode="vertical"
         data-submenu={true}
         id="Appearance"
       >
@@ -364,6 +369,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Run"
   >
@@ -409,6 +415,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Help"
   >

src/components/menu/menu.tsx

@@ -1,20 +1,21 @@
 import React, { useEffect, useCallback, useRef } from 'react';
 import { classNames } from 'mo/common/className';
-import { MenuItem } from './menuItem';
-import { isHorizontal, ISubMenuProps, MenuMode, SubMenu } from './subMenu';
 import { debounce } from 'lodash';
+import { mergeFunctions } from 'mo/common/utils';
+import { cloneReactChildren } from 'mo/react';
+import { em2Px } from 'mo/common/css';
+import { getRelativePosition, triggerEvent } from 'mo/common/dom';
+
 import {
     activeClassName,
     defaultMenuClassName,
     defaultSubMenuClassName,
     horizontalMenuClassName,
     verticalMenuClassName,
 } from './base';
-import { mergeFunctions } from 'mo/common/utils';
-import { cloneReactChildren } from 'mo/react';
-import { em2Px } from 'mo/common/css';
-import { getRelativePosition, triggerEvent } from 'mo/common/dom';
 import { Divider } from './divider';
+import { MenuItem } from './menuItem';
+import { isHorizontal, ISubMenuProps, MenuMode, SubMenu } from './subMenu';
 
 export type IMenuProps = ISubMenuProps;
 
@@ -64,13 +65,14 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         onClick,
         trigger = 'hover',
         title,
-        ...custom
+        ...restProps
     } = props;
     const menuRef = useRef<HTMLUListElement>(null);
     const isMouseInMenu = useRef(false);
     let content = cloneReactChildren(children, { onClick });
     // Only when the trigger is hover need to set the delay
     const delay = trigger === 'hover' ? 200 : 0;
+
     const modeClassName =
         mode === MenuMode.Horizontal
             ? horizontalMenuClassName
@@ -81,12 +83,13 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         const renderMenusByData = (menus: IMenuProps[]) => {
             return menus.map((item: IMenuProps) => {
                 if (item.type === 'divider') return <Divider />;
+
                 const handleClick = mergeFunctions(onClick, item.onClick);
                 if (item.data && item.data.length > 0) {
                     return (
                         <SubMenu
                             key={item.id}
-                            mode={mode}
+                            mode={item.mode || mode}
                             {...item}
                             onClick={handleClick}
                         >
@@ -140,7 +143,12 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
             }
             visibleMenuItem(liDom);
             const subMenu = liDom?.querySelector('ul') || undefined;
-            setPositionForSubMenu(liDom, subMenu, isHorizontal(mode));
+            const subMenuMode = liDom?.dataset.mode || mode;
+            setPositionForSubMenu(
+                liDom,
+                subMenu,
+                isHorizontal(subMenuMode as MenuMode)
+            );
         }
     }, delay);
 
@@ -199,7 +207,7 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
             // prevent JSX render in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
             {...getEventListener()}
-            {...custom}
+            {...restProps}
         >
             {content}
         </ul>

src/components/menu/menuItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { classNames } from 'mo/common/className';
-import { Icon } from '../icon';
+import type { HTMLElementProps, UniqueId } from 'mo/common/types';
+
 import {
     checkClassName,
     disabledClassName,
@@ -9,7 +10,7 @@ import {
     labelClassName,
     menuContentClassName,
 } from './base';
-import type { HTMLElementProps, UniqueId } from 'mo/common/types';
+import { Icon } from '../icon';
 
 export interface IMenuItemProps extends HTMLElementProps {
     id: UniqueId;
@@ -52,7 +53,8 @@ export function MenuItem(
         name,
         title,
         id,
-        ...custom
+        sortIndex,
+        ...restProps
     } = props;
 
     const events = {
@@ -69,10 +71,11 @@ export function MenuItem(
                 disabled ? disabledClassName : null
             )}
             id={id?.toString()}
+            data-sort={sortIndex}
             // prevent render JSX title in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
             {...events}
-            {...custom}
+            {...restProps}
         >
             <div className={menuContentClassName}>
                 <Icon type={icon} className={checkClassName} />

src/components/menu/subMenu.tsx

@@ -50,7 +50,8 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
         children,
         onClick,
         title,
-        ...custom
+        sortIndex,
+        ...restProps
     } = props;
     const cNames = classNames(defaultSubMenuClassName, className);
     const isAlignHorizontal = isHorizontal(mode);
@@ -63,7 +64,7 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
                 style={{ opacity: '0', pointerEvents: 'none' }}
                 data={data}
                 onClick={onClick}
-                {...custom}
+                {...restProps}
             />
         ) : (
             <Menu
@@ -82,9 +83,11 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
                 disabled ? disabledClassName : null
             )}
             data-submenu
+            data-mode={mode}
+            data-sort={sortIndex}
             // prevent render JSX title in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
-            {...custom}
+            {...restProps}
         >
             <div className={menuContentClassName}>
                 {typeof icon === 'string' ? (