From 073485106fc262f83b116e08ab0a5041e80640f0 Mon Sep 17 00:00:00 2001 From: xiaowei Date: Tue, 30 Nov 2021 10:40:18 +0800 Subject: [PATCH 1/2] fix: show the submenu in right place when horizontal mode --- src/components/menu/menu.tsx | 28 ++++++++++++++++++---------- src/components/menu/menuItem.tsx | 11 +++++++---- src/components/menu/subMenu.tsx | 9 ++++++--- 3 files changed, 31 insertions(+), 17 deletions(-) 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} /> ) : ( ) { disabled ? disabledClassName : null )} data-submenu + data-mode={mode} + data-sort={sortIndex} // prevent render JSX title in HTMLElement {...(typeof title === 'string' ? { title } : {})} - {...custom} + {...restProps} >
{typeof icon === 'string' ? ( From 4d4f4c1176e443e471cfe20983613b4629be893f Mon Sep 17 00:00:00 2001 From: xiaowei Date: Tue, 30 Nov 2021 10:42:29 +0800 Subject: [PATCH 2/2] test: update the snap of Menu --- .../menu/__tests__/__snapshots__/menu.test.tsx.snap | 7 +++++++ 1 file changed, 7 insertions(+) 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`] = `