From 31a6d638fc93ccb6b2aa9baa41e09ed0df990c9d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 Jun 2023 08:26:16 -0400 Subject: [PATCH 1/3] fix(Nav): updated drilldown navigation heights --- .../components/Nav/examples/NavDrilldown.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx index 8ccda91c785..9dc95ae9608 100644 --- a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx +++ b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx @@ -49,7 +49,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => { const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); const [drilldownPath, setDrilldownPath] = React.useState([]); const [menuHeights, setMenuHeights] = React.useState({}); - const [activeMenu, setActiveMenu] = React.useState('rootMenu'); + const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu'); const onDrillIn = ( _event: React.KeyboardEvent | React.MouseEvent, @@ -57,20 +57,23 @@ export const NavigationDrilldown: React.FunctionComponent = () => { toItemId: string, itemId: string ) => { - setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]); - setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]); + setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]); + setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]); setActiveMenu(toItemId); }; const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => { - setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1)); - setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1)); + setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1)); + setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1)); setActiveMenu(toItemId); }; const onGetMenuHeight = (menuId: string, height: number) => { - if (!menuHeights[menuId] && menuId !== 'rootMenu') { - setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height })); + if ( + (menuHeights[menuId] !== height && menuId !== 'nav-drilldown-rootMenu') || + (!menuHeights[menuId] && menuId === 'nav-drilldown-rootMenu') + ) { + setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height })); } }; @@ -86,7 +89,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => { onDrillOut={onDrillOut} onGetMenuHeight={onGetMenuHeight} > - + Item 1 From 18f26ce1e07c8442a3d4fb1ebdca5552dccde890 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 Jun 2023 09:08:10 -0400 Subject: [PATCH 2/3] Bump reactcore version --- packages/react-integration/demo-app-ts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 0803747d73c..2c39c7a34ff 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-prerelease.2", + "@patternfly/react-core": "^5.0.0-prerelease.3", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", From 748253b881d288a1a8bc555dca1d6332d8da6248 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 Jun 2023 10:06:22 -0400 Subject: [PATCH 3/3] Updated drilldown demo --- packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx index 3731e50129b..edd52c58bb5 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx @@ -89,7 +89,7 @@ export const NavDrilldown: React.FunctionComponent = () => { }; const onGetMenuHeight = (menuId: string, height: number) => { - if (!menuHeights[menuId] && menuId !== 'rootMenu') { + if ((menuHeights[menuId] !== height && menuId !== 'rootMenu') || (!menuHeights[menuId] && menuId === 'rootMenu')) { setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height })); } };