diff --git a/docs/examples/antd.tsx b/docs/examples/antd.tsx index f5bd0bba..0985ac21 100644 --- a/docs/examples/antd.tsx +++ b/docs/examples/antd.tsx @@ -2,7 +2,8 @@ import React from 'react'; import type { CSSMotionProps } from 'rc-motion'; -import Menu, { SubMenu, Item as MenuItem, Divider, MenuProps } from '../../src'; +import Menu, { SubMenu, Item as MenuItem, Divider } from '../../src'; +import type { MenuProps } from '../../src'; import '../../assets/index.less'; function handleClick(info) { diff --git a/docs/examples/inlineCollapsed.tsx b/docs/examples/inlineCollapsed.tsx index 8a893d26..d1216cd3 100644 --- a/docs/examples/inlineCollapsed.tsx +++ b/docs/examples/inlineCollapsed.tsx @@ -1,11 +1,12 @@ import React, { useState } from 'react'; import Menu, { SubMenu, Item } from 'rc-menu'; import './inlineCollapsed.less'; +import { inlineMotion } from './antd' const App = () => { const [collapsed, setCollapsed] = useState(false); return ( - <> + <div style={{ height: 600 }}> <label> <input type="checkbox" value={collapsed} onChange={e => setCollapsed(e.target.checked)} /> inlineCollapsed: {collapsed.toString()} @@ -15,14 +16,19 @@ const App = () => { inlineCollapsed={collapsed} style={{ width: 600 }} className={collapsed ? 'collapsed' : ''} + motion={inlineMotion} > <Item key="1">item 1</Item> <SubMenu key="2" title={`inlineCollapsed: ${collapsed.toString()}`}> <Item key="3">item 2</Item> <Item key="4">item 3</Item> + <SubMenu key="5" title={`inlineCollapsed: ${collapsed.toString()}`} style={{ minWidth: 220 }}> + <Item key="6">item 4</Item> + <Item key="7">item 5</Item> + </SubMenu> </SubMenu> </Menu> - </> + </div> ); } diff --git a/src/Menu.tsx b/src/Menu.tsx index ef9db196..eca785e5 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -598,7 +598,9 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => { <MenuContextProvider prefixCls={prefixCls} rootClassName={rootClassName} + originMode={mode} mode={internalMode} + inlineCollapsed={internalInlineCollapsed} openKeys={mergedOpenKeys} rtl={isRtl} // Disabled diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index e7ec45af..e423801c 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -75,10 +75,10 @@ export default function PopupTrigger({ } const mergedMotion: CSSMotionProps = { - ...targetMotionRef.current, - leavedClassName: `${prefixCls}-hidden`, - removeOnLeave: false, - motionAppear: true, + ...targetMotionRef.current, + leavedClassName: `${prefixCls}-hidden`, + removeOnLeave: false, + motionAppear: true, }; // Delay to change visible diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx index 06183bd2..b57315fa 100644 --- a/src/SubMenu/index.tsx +++ b/src/SubMenu/index.tsx @@ -80,6 +80,8 @@ const InternalSubMenu = (props: SubMenuProps) => { const { prefixCls, mode, + originMode, + inlineCollapsed, openKeys, // Disabled @@ -272,6 +274,8 @@ const InternalSubMenu = (props: SubMenuProps) => { if (!overflowDisabled) { const triggerMode = triggerModeRef.current; + const canTriggerPopupVisible = originMode !== 'inline' || inlineCollapsed; + const visible = !internalPopupClose && open && mode !== 'inline' && canTriggerPopupVisible; // Still wrap with Trigger here since we need avoid react re-mount dom node // Which makes motion failed @@ -279,7 +283,7 @@ const InternalSubMenu = (props: SubMenuProps) => { <PopupTrigger mode={triggerMode} prefixCls={subMenuPrefixCls} - visible={!internalPopupClose && open && mode !== 'inline'} + visible={visible} popupClassName={popupClassName} popupOffset={popupOffset} popupStyle={popupStyle} diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx index c34c4bdf..312abe48 100644 --- a/src/context/MenuContext.tsx +++ b/src/context/MenuContext.tsx @@ -17,7 +17,9 @@ export interface MenuContextProps { rtl?: boolean; // Mode + originMode: MenuMode; mode: MenuMode; + inlineCollapsed?: boolean; // Disabled disabled?: boolean;