Navigator: Add replace option to goTo() and goToParent()

WordPress · Jul 13, 2023 · 1e5d49e · 1e5d49e
1 parent 181b49c
commit 1e5d49e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `TextControl`: Add `id` prop to allow for custom IDs in `TextControl`s ([#52028](https://github.com/WordPress/gutenberg/pull/52028)).
+-   `Navigator`: Add `replace` option to `navigator.goTo()` and `navigator.goToParent()` ([#52456](https://github.com/WordPress/gutenberg/pull/52456)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -148,6 +148,7 @@ function UnconnectedNavigatorProvider(
 				focusTargetSelector,
 				isBack = false,
 				skipFocus = false,
+				replace = false,
 				...restOptions
 			} = options;
 
@@ -172,34 +173,38 @@ function UnconnectedNavigatorProvider(
 					skipFocus,
 				};
 
-				if ( prevLocationHistory.length < 1 ) {
-					return [ newLocation ];
+				if ( prevLocationHistory.length === 0 ) {
+					return replace ? [] : [ newLocation ];
 				}
 
-				return [
-					...prevLocationHistory.slice(
-						prevLocationHistory.length > MAX_HISTORY_LENGTH - 1
-							? 1
-							: 0,
-						-1
-					),
-					// Assign `focusTargetSelector` to the previous location in history
-					// (the one we just navigated from).
-					{
-						...prevLocationHistory[
-							prevLocationHistory.length - 1
-						],
-						focusTargetSelector,
-					},
-					newLocation,
-				];
+				const newLocationHistory = prevLocationHistory.slice(
+					prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0,
+					-1
+				);
+
+				if ( ! replace ) {
+					newLocationHistory.push(
+						// Assign `focusTargetSelector` to the previous location in history
+						// (the one we just navigated from).
+						{
+							...prevLocationHistory[
+								prevLocationHistory.length - 1
+							],
+							focusTargetSelector,
+						}
+					);
+				}
+
+				newLocationHistory.push( newLocation );
+
+				return newLocationHistory;
 			} );
 		},
 		[ goBack ]
 	);
 
-	const goToParent: NavigatorContextType[ 'goToParent' ] =
-		useCallback( () => {
+	const goToParent: NavigatorContextType[ 'goToParent' ] = useCallback(
+		( options = {} ) => {
 			const currentPath =
 				currentLocationHistory.current[
 					currentLocationHistory.current.length - 1
@@ -214,8 +219,10 @@ function UnconnectedNavigatorProvider(
 			if ( parentPath === undefined ) {
 				return;
 			}
-			goTo( parentPath, { isBack: true } );
-		}, [ goTo ] );
+			goTo( parentPath, { ...options, isBack: true } );
+		},
+		[ goTo ]
+	);
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {

diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
@@ -14,8 +14,11 @@ export type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
 	skipFocus?: boolean;
+	replace?: boolean;
 };
 
+export type NavigateToParentOptions = Omit< NavigateOptions, 'isBack' >;
+
 export type NavigatorLocation = NavigateOptions & {
 	isInitial?: boolean;
 	path?: string;
@@ -28,7 +31,7 @@ export type Navigator = {
 	params: MatchParams;
 	goTo: ( path: string, options?: NavigateOptions ) => void;
 	goBack: () => void;
-	goToParent: () => void;
+	goToParent: ( options?: NavigateToParentOptions ) => void;
 };
 
 export type NavigatorContext = Navigator & {