Pass parsed data back to navigation children

WordPress · Jul 30, 2020 · e7c0011 · e7c0011
1 parent f93d0ad
commit e7c0011
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 43 deletions.
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
@@ -1,36 +1,44 @@
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement } from '@wordpress/element';
+const Navigation = ( { activeId, children, items: rawItems, rootTitle } ) => {
+	const mapItemData = ( items ) => {
+		return items.map( ( item ) => {
+			const itemChildren = rawItems.filter(
+				( i ) => i.parent === item.id
+			);
+			return {
+				...item,
+				children: itemChildren,
+				parent: item.parent || 'root',
+			};
+		} );
+	};
+	const items = [
+		{ id: 'root', title: rootTitle },
+		...mapItemData( rawItems ),
+	];
 
-const Navigation = ( { active, children, items } ) => {
-	const activeItem = items.find( ( item ) => item.id === active );
-	const parentItem = items.find( ( item ) => item.id === activeItem.parent );
-	const grandParentItem =
-		parentItem && parentItem.parent
-			? items.find( ( item ) => item.id === parentItem.parent )
-			: null;
-	const backItem = parentItem
-		? items.find( ( item ) => {
-				if ( grandParentItem ) {
-					return item.parent === grandParentItem;
-				}
-				return ! item.parent;
-		  } )
+	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 )
+		: items.filter( ( item ) => item.parent === 'root' );
 
 	return (
 		<div className="components-navigation">
-			{ Children.map( children, ( child ) =>
-				child
-					? cloneElement( child, {
-							active,
-							backItem,
-							items,
-							parentItem,
-					  } )
-					: null
-			) }
+			{ children( {
+				activeId,
+				currentItems,
+				currentLevel,
+				parentItems,
+				parentLevel,
+			} ) }
 		</div>
 	);
 };

diff --git a/packages/components/src/navigation/pane.js b/packages/components/src/navigation/pane.js
@@ -0,0 +1,5 @@
+const NavigationPane = ( { children } ) => {
+	return <div className="components-navigation__pane">{ children }</div>;
+};
+
+export default NavigationPane;
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -8,8 +8,10 @@ import { useState } from '@wordpress/element';
  */
 import Navigation from '../';
 import NavigationBackButton from '../back-button';
+import NavigationPane from '../pane';
 import NavigationMenu from '../menu';
 import NavigationTitle from '../title';
+import NavigationMenuItem from '../menu-item';
 
 export default {
 	title: 'Components/Navigation',
@@ -80,22 +82,75 @@ const data = [
 
 function Example() {
 	const [ active, setActive ] = useState( 'home' );
-	const items = data.map( ( item ) => {
-		item.onClick = () => setActive( item.id );
-		return item;
-	} );
 
 	return (
-		<Navigation active={ active } items={ items }>
-			<NavigationBackButton
-				nullText="Dashboard"
-				rootText="WooCommerce Home"
-				onClick={ ( item ) => ( item ? setActive( item.id ) : null ) }
-			/>
-			<NavigationTitle rootText="WooCommerce Home" />
-			<NavigationMenu />
-			<br />
-			<NavigationMenu id={ 'secondary' } />
+		<Navigation
+			activeId={ active }
+			items={ data }
+			rootTitle="WooCommerce Home"
+		>
+			{ ( { currentItems, currentLevel, parentItems, parentLevel } ) => {
+				return (
+					<NavigationPane>
+						<NavigationBackButton
+							onClick={ () =>
+								parentLevel
+									? setActive( parentItems[ 0 ].id )
+									: ( window.location =
+											'https://wordpress.com' )
+							}
+						>
+							{ ! parentLevel ? 'Dashboard' : parentLevel.title }
+						</NavigationBackButton>
+						<NavigationTitle>
+							{ currentLevel.id === 'root'
+								? 'WooCommerce'
+								: currentLevel.title }
+						</NavigationTitle>
+						<NavigationMenu>
+							{ currentItems
+								.filter( ( item ) => item.menu !== 'secondary' )
+								.map( ( item ) => (
+									<NavigationMenuItem
+										hasChildren={ item.children.length > 0 }
+										isActive={ item.id === active }
+										key={ item.id }
+										onClick={ () =>
+											item.children.length
+												? setActive(
+														item.children[ 0 ].id
+												  )
+												: setActive( item.id )
+										}
+									>
+										{ item.title }
+									</NavigationMenuItem>
+								) ) }
+						</NavigationMenu>
+						<br />
+						<NavigationMenu>
+							{ currentItems
+								.filter( ( item ) => item.menu === 'secondary' )
+								.map( ( item ) => (
+									<NavigationMenuItem
+										hasChildren={ item.children.length > 0 }
+										isActive={ item.id === active }
+										key={ item.id }
+										onClick={ () =>
+											item.children.length
+												? setActive(
+														item.children[ 0 ].id
+												  )
+												: setActive( item.id )
+										}
+									>
+										{ item.title }
+									</NavigationMenuItem>
+								) ) }
+						</NavigationMenu>
+					</NavigationPane>
+				);
+			} }
 		</Navigation>
 	);
 }

diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
@@ -11,7 +11,7 @@
 	margin-bottom: 40px;
 }
 
-.components-navigation__menu-items {
+.components-navigation__menu {
 	display: flex;
 	flex-direction: column;
 }