From 717929cb160b75597484d5a0f5e10769878be5dd Mon Sep 17 00:00:00 2001
From: ohhoney1 <1269075501@qq.com>
Date: Tue, 26 Sep 2023 11:12:32 +0800
Subject: [PATCH 1/3] fix: fix popup flicker issue when inline menus have benn
collased
---
docs/examples/inlineCollapsed.tsx | 10 ++++++++--
src/Menu.tsx | 1 +
src/SubMenu/PopupTrigger.tsx | 6 ++++--
src/context/MenuContext.tsx | 1 +
4 files changed, 14 insertions(+), 4 deletions(-)
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..ea338428 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -599,6 +599,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
prefixCls={prefixCls}
rootClassName={rootClassName}
mode={internalMode}
+ inlineCollapsed={internalInlineCollapsed}
openKeys={mergedOpenKeys}
rtl={isRtl}
// Disabled
diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx
index e7ec45af..8a1d6504 100644
--- a/src/SubMenu/PopupTrigger.tsx
+++ b/src/SubMenu/PopupTrigger.tsx
@@ -50,6 +50,8 @@ export default function PopupTrigger({
forceSubMenuRender,
rootClassName,
+ inlineCollapsed,
+
// Motion
motion,
defaultMotions,
@@ -74,12 +76,12 @@ export default function PopupTrigger({
targetMotionRef.current = targetMotion;
}
- const mergedMotion: CSSMotionProps = {
+ const mergedMotion: CSSMotionProps = inlineCollapsed ? {
...targetMotionRef.current,
leavedClassName: `${prefixCls}-hidden`,
removeOnLeave: false,
motionAppear: true,
- };
+ } : undefined;
// Delay to change visible
const visibleRef = React.useRef<number>();
diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx
index c34c4bdf..243efba8 100644
--- a/src/context/MenuContext.tsx
+++ b/src/context/MenuContext.tsx
@@ -18,6 +18,7 @@ export interface MenuContextProps {
// Mode
mode: MenuMode;
+ inlineCollapsed?: boolean;
// Disabled
disabled?: boolean;
From 6de1afefbe6118bd6a90a1e54a8baca85c76d38c Mon Sep 17 00:00:00 2001
From: ohhoney1 <1269075501@qq.com>
Date: Tue, 26 Sep 2023 11:47:31 +0800
Subject: [PATCH 2/3] fix: motion hidden when vertical mode
---
src/Menu.tsx | 1 +
src/SubMenu/PopupTrigger.tsx | 14 ++++++++------
src/context/MenuContext.tsx | 1 +
3 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/Menu.tsx b/src/Menu.tsx
index ea338428..eca785e5 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -598,6 +598,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
<MenuContextProvider
prefixCls={prefixCls}
rootClassName={rootClassName}
+ originMode={mode}
mode={internalMode}
inlineCollapsed={internalInlineCollapsed}
openKeys={mergedOpenKeys}
diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx
index 8a1d6504..e710828c 100644
--- a/src/SubMenu/PopupTrigger.tsx
+++ b/src/SubMenu/PopupTrigger.tsx
@@ -50,6 +50,7 @@ export default function PopupTrigger({
forceSubMenuRender,
rootClassName,
+ originMode,
inlineCollapsed,
// Motion
@@ -76,12 +77,13 @@ export default function PopupTrigger({
targetMotionRef.current = targetMotion;
}
- const mergedMotion: CSSMotionProps = inlineCollapsed ? {
- ...targetMotionRef.current,
- leavedClassName: `${prefixCls}-hidden`,
- removeOnLeave: false,
- motionAppear: true,
- } : undefined;
+ const mergedMotion: CSSMotionProps = originMode !== 'inline' || inlineCollapsed
+ ? {
+ ...targetMotionRef.current,
+ leavedClassName: `${prefixCls}-hidden`,
+ removeOnLeave: false,
+ motionAppear: true,
+ } : undefined;
// Delay to change visible
const visibleRef = React.useRef<number>();
diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx
index 243efba8..312abe48 100644
--- a/src/context/MenuContext.tsx
+++ b/src/context/MenuContext.tsx
@@ -17,6 +17,7 @@ export interface MenuContextProps {
rtl?: boolean;
// Mode
+ originMode: MenuMode;
mode: MenuMode;
inlineCollapsed?: boolean;
From 5d553c13760329ec4132164eaf3b7c41e854e1fe Mon Sep 17 00:00:00 2001
From: ohhoney1 <1269075501@qq.com>
Date: Tue, 26 Sep 2023 17:28:52 +0800
Subject: [PATCH 3/3] fix: add trigger popup visible condition
---
docs/examples/antd.tsx | 3 ++-
src/SubMenu/PopupTrigger.tsx | 8 ++------
src/SubMenu/index.tsx | 6 +++++-
3 files changed, 9 insertions(+), 8 deletions(-)
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/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx
index e710828c..e423801c 100644
--- a/src/SubMenu/PopupTrigger.tsx
+++ b/src/SubMenu/PopupTrigger.tsx
@@ -50,9 +50,6 @@ export default function PopupTrigger({
forceSubMenuRender,
rootClassName,
- originMode,
- inlineCollapsed,
-
// Motion
motion,
defaultMotions,
@@ -77,13 +74,12 @@ export default function PopupTrigger({
targetMotionRef.current = targetMotion;
}
- const mergedMotion: CSSMotionProps = originMode !== 'inline' || inlineCollapsed
- ? {
+ const mergedMotion: CSSMotionProps = {
...targetMotionRef.current,
leavedClassName: `${prefixCls}-hidden`,
removeOnLeave: false,
motionAppear: true,
- } : undefined;
+ };
// Delay to change visible
const visibleRef = React.useRef<number>();
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}