diff --git a/src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap b/src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap
index f75063df8..e79d39a13 100644
--- a/src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap
+++ b/src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
>
@@ -76,6 +77,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
@@ -137,6 +139,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
@@ -198,6 +201,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
@@ -257,6 +261,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
@@ -364,6 +369,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
@@ -409,6 +415,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 2d794834d..89b793c7f 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,8 +1,11 @@
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,
@@ -10,11 +13,9 @@ import {
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) {
onClick,
trigger = 'hover',
title,
- ...custom
+ ...restProps
} = props;
const menuRef = useRef(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) {
const renderMenusByData = (menus: IMenuProps[]) => {
return menus.map((item: IMenuProps) => {
if (item.type === 'divider') return ;
+
const handleClick = mergeFunctions(onClick, item.onClick);
if (item.data && item.data.length > 0) {
return (
@@ -140,7 +143,12 @@ export function Menu(props: React.PropsWithChildren) {
}
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) {
// prevent JSX render in HTMLElement
{...(typeof title === 'string' ? { title } : {})}
{...getEventListener()}
- {...custom}
+ {...restProps}
>
{content}
diff --git a/src/components/menu/menuItem.tsx b/src/components/menu/menuItem.tsx
index 32c7079f6..9f78e42d0 100644
--- a/src/components/menu/menuItem.tsx
+++ b/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}
>
diff --git a/src/components/menu/subMenu.tsx b/src/components/menu/subMenu.tsx
index 36552c9eb..c51ac597b 100644
--- a/src/components/menu/subMenu.tsx
+++ b/src/components/menu/subMenu.tsx
@@ -50,7 +50,8 @@ export function SubMenu(props: React.PropsWithChildren
) {
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) {
style={{ opacity: '0', pointerEvents: 'none' }}
data={data}
onClick={onClick}
- {...custom}
+ {...restProps}
/>
) : (