Navigation Component: Remove setActiveLevel child function arg (#24704)

* remove setActiveLevel from public api * change to NavigationBackButton * return null for backButton if no parentLevel
WordPress · Aug 25, 2020 · 8ef9c18 · 8ef9c18
1 parent aa9d063
commit 8ef9c18
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
@@ -7,6 +7,7 @@ import { useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { Root } from './styles/navigation-styles';
+import Button from '../button';
 
 const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	const [ activeLevel, setActiveLevel ] = useState( 'root' );
@@ -20,6 +21,7 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 				parent: item.parent || 'root',
 				isActive: item.id === activeItemId,
 				hasChildren: itemChildren.length > 0,
+				setActiveLevel,
 			};
 		} );
 	};
@@ -39,13 +41,28 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 		}
 	}, [] );
 
+	const NavigationBackButton = ( { children: backButtonChildren } ) => {
+		if ( ! parentLevel ) {
+			return null;
+		}
+
+		return (
+			<Button
+				isPrimary
+				onClick={ () => setActiveLevel( parentLevel.id ) }
+			>
+				{ backButtonChildren }
+			</Button>
+		);
+	};
+
 	return (
 		<Root className="components-navigation">
 			{ children( {
 				level,
 				levelItems,
 				parentLevel,
-				setActiveLevel,
+				NavigationBackButton,
 			} ) }
 		</Root>
 	);

diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -3,6 +3,7 @@
  */
 import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
+import { Icon, arrowLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -48,6 +49,21 @@ const data = [
 		id: 'child-2',
 		parent: 'item-3',
 	},
+	{
+		title: 'Nested Category',
+		id: 'child-3',
+		parent: 'item-3',
+	},
+	{
+		title: 'Sub Child 1',
+		id: 'sub-child-1',
+		parent: 'child-3',
+	},
+	{
+		title: 'Sub Child 2',
+		id: 'sub-child-2',
+		parent: 'child-3',
+	},
 	{
 		title: 'External link',
 		id: 'item-4',
@@ -68,18 +84,14 @@ function Example() {
 
 	return (
 		<Navigation activeItemId={ active } data={ data } rootTitle="Home">
-			{ ( { level, levelItems, parentLevel, setActiveLevel } ) => {
+			{ ( { level, levelItems, parentLevel, NavigationBackButton } ) => {
 				return (
 					<>
 						{ parentLevel && (
-							<Button
-								isPrimary
-								onClick={ () =>
-									setActiveLevel( parentLevel.id )
-								}
-							>
-								Back
-							</Button>
+							<NavigationBackButton>
+								<Icon icon={ arrowLeft } />
+								{ parentLevel.title }
+							</NavigationBackButton>
 						) }
 						<h1>{ level.title }</h1>
 						<NavigationMenu>
@@ -91,7 +103,6 @@ function Example() {
 										onClick={ ( selected ) =>
 											setActive( selected.id )
 										}
-										setActiveLevel={ setActiveLevel }
 									/>
 								);
 							} ) }