Allow menu level navigation without changing active item

WordPress · Aug 10, 2020 · aca45b5 · aca45b5
1 parent 7b68ca6
commit aca45b5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
@@ -1,4 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
 const Navigation = ( { activeId, children, items: rawItems, rootTitle } ) => {
+	const [ activeLevel, setActiveLevel ] = useState( 'root' );
+
 	const mapItemData = ( items ) => {
 		return items.map( ( item ) => {
 			const itemChildren = rawItems.filter(
@@ -19,29 +26,27 @@ const Navigation = ( { activeId, children, items: rawItems, rootTitle } ) => {
 	];
 
 	const activeItem = items.find( ( item ) => item.id === activeId );
-	const currentLevel = activeItem
-		? items.find( ( item ) => item.id === activeItem.parent )
-		: { id: 'root', title: rootTitle };
-	const parentLevel = currentLevel
-		? items.find( ( item ) => item.id === currentLevel.parent )
-		: null;
-	const currentItems = currentLevel
-		? items.filter( ( item ) => item.parent === currentLevel.id )
-		: items.filter( ( item ) => item.parent === 'root' );
-	const parentItems = parentLevel
-		? items.filter( ( item ) => item.parent === parentLevel.id )
-		: [];
-	const backItem = parentItems.length ? parentItems[ 0 ] : null;
+	const level = items.find( ( item ) => item.id === activeLevel );
+	const levelItems = items.filter( ( item ) => item.parent === level.id );
+	const parentLevel =
+		level.id === 'root'
+			? null
+			: items.find( ( item ) => item.id === level.parent );
+
+	useEffect( () => {
+		if ( activeItem ) {
+			setActiveLevel( activeItem.parent );
+		}
+	}, [] );
 
 	return (
 		<div className="components-navigation">
 			{ children( {
 				activeId,
-				backItem,
-				currentItems,
-				currentLevel,
-				parentItems,
+				level,
+				levelItems,
 				parentLevel,
+				setActiveLevel,
 			} ) }
 		</div>
 	);

diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
@@ -15,13 +15,25 @@ import Button from '../button';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
-	const { children, hasChildren, isActive, onClick, title } = props;
+	const {
+		children,
+		hasChildren,
+		id,
+		isActive,
+		onClick,
+		setActiveLevel,
+		title,
+	} = props;
 	const classes = classnames( 'components-navigation__menu-item', {
 		'is-active': isActive,
 	} );
 
 	const handleClick = () => {
-		onClick( children.length ? children[ 0 ] : props );
+		if ( children.length ) {
+			setActiveLevel( id );
+			return;
+		}
+		onClick( props );
 	};
 
 	return (

diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -46,27 +46,30 @@ function Example() {
 
 	return (
 		<Navigation activeId={ active } items={ data } rootTitle="Home">
-			{ ( { currentItems, currentLevel, backItem } ) => {
+			{ ( { level, levelItems, parentLevel, setActiveLevel } ) => {
 				return (
 					<>
-						{ backItem && (
+						{ parentLevel && (
 							<Button
 								isPrimary
-								onClick={ () => setActive( backItem.id ) }
+								onClick={ () =>
+									setActiveLevel( parentLevel.id )
+								}
 							>
 								Back
 							</Button>
 						) }
-						<h1>{ currentLevel.title }</h1>
+						<h1>{ level.title }</h1>
 						<NavigationMenu>
-							{ currentItems.map( ( item ) => {
+							{ levelItems.map( ( item ) => {
 								return (
 									<NavigationMenuItem
 										{ ...item }
 										key={ item.id }
 										onClick={ ( selected ) =>
 											setActive( selected.id )
 										}
+										setActiveLevel={ setActiveLevel }
 									/>
 								);
 							} ) }