Navigation Component: Apply effect on activeItem change (#24958)

* apply effect on activeItem change * Update packages/components/src/navigation/stories/index.js Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
WordPress · Sep 1, 2020 · e652c32 · e652c32
1 parent 5897bfa
commit e652c32
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 32 deletions.
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
@@ -65,7 +65,7 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 		if ( activeItem ) {
 			setActiveLevelId( activeItem.parent );
 		}
-	}, [] );
+	}, [ activeItem ] );
 
 	const NavigationBackButton = ( { children: backButtonChildren } ) => {
 		if ( ! parentLevel ) {

diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -83,37 +83,49 @@ function Example() {
 	const [ active, setActive ] = useState( 'item-1' );
 
 	return (
-		<Navigation activeItemId={ active } data={ data } rootTitle="Home">
-			{ ( { level, parentLevel, NavigationBackButton } ) => {
-				return (
-					<>
-						{ parentLevel && (
-							<NavigationBackButton>
-								<Icon icon={ arrowLeft } />
-								{ parentLevel.title }
-							</NavigationBackButton>
-						) }
-						<h1>{ level.title }</h1>
-						<NavigationMenu>
-							{ level.children.map( ( item ) => {
-								return (
-									<NavigationMenuItem
-										{ ...item }
-										key={ item.id }
-										onClick={
-											! item.href
-												? ( selected ) =>
-														setActive( selected.id )
-												: null
-										}
-									/>
-								);
-							} ) }
-						</NavigationMenu>
-					</>
-				);
-			} }
-		</Navigation>
+		<>
+			{ active !== 'child-2' ? (
+				<Button
+					style={ { position: 'absolute', bottom: 0 } }
+					onClick={ () => setActive( 'child-2' ) }
+				>
+					Non-navigation link to Child 2
+				</Button>
+			) : null }
+			<Navigation activeItemId={ active } data={ data } rootTitle="Home">
+				{ ( { level, parentLevel, NavigationBackButton } ) => {
+					return (
+						<>
+							{ parentLevel && (
+								<NavigationBackButton>
+									<Icon icon={ arrowLeft } />
+									{ parentLevel.title }
+								</NavigationBackButton>
+							) }
+							<h1>{ level.title }</h1>
+							<NavigationMenu>
+								{ level.children.map( ( item ) => {
+									return (
+										<NavigationMenuItem
+											{ ...item }
+											key={ item.id }
+											onClick={
+												! item.href
+													? ( selected ) =>
+															setActive(
+																selected.id
+															)
+													: null
+											}
+										/>
+									);
+								} ) }
+							</NavigationMenu>
+						</>
+					);
+				} }
+			</Navigation>
+		</>
 	);
 }