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 (
- <>
+
);
}
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((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();
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((props, ref) => {
();
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();
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) => {