Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

useSelectedLayoutSegment -> useSelectedLayoutSegments, add useSelectedLayoutSegment with previous behavior #41693

Merged
merged 1 commit into from
Oct 24, 2022
Merged

useSelectedLayoutSegment -> useSelectedLayoutSegments, add useSelectedLayoutSegment with previous behavior #41693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 17 additions & 2 deletions packages/next/client/components/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,11 +140,26 @@ function getSelectedLayoutSegmentPath(

// TODO-APP: Expand description when the docs are written for it.
/**
* Get the canonical segment path from this level to the leaf node.
* Get the canonical segment path from the current level to the leaf node.
*/
export function useSelectedLayoutSegment(
export function useSelectedLayoutSegments(
parallelRouteKey: string = 'children'
): string[] {
const { tree } = useContext(LayoutRouterContext)
return getSelectedLayoutSegmentPath(tree, parallelRouteKey)
}

// TODO-APP: Expand description when the docs are written for it.
/**
* Get the segment below the current level
*/
export function useSelectedLayoutSegment(
parallelRouteKey: string = 'children'
): string {
const selectedLayoutSegments = useSelectedLayoutSegments(parallelRouteKey)
if (selectedLayoutSegments.length === 0) {
throw new Error('No selected layout segment below the current level')
}

return selectedLayoutSegments[0]
}
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app-edge/app/app-edge/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

// TODO-APP: support typing for useSelectedLayoutSegment
// @ts-ignore
import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function Layout({ children }: { children: React.ReactNode }) {
// useSelectedLayoutSegment should not be thrown
useSelectedLayoutSegment()
useSelectedLayoutSegments()
return children
}
4 changes: 2 additions & 2 deletions ...pp/hooks/use-selected-layout-segment/first/[dynamic]/(group)/second/[...catchall]/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client'

import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function Page() {
const selectedLayoutSegment = useSelectedLayoutSegment()
const selectedLayoutSegment = useSelectedLayoutSegments()

return (
<p id="page-layout-segments">{JSON.stringify(selectedLayoutSegment)}</p>
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/first/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client'

import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function Layout({ children }) {
const selectedLayoutSegment = useSelectedLayoutSegment()
const selectedLayoutSegment = useSelectedLayoutSegments()

return (
<>
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client'

import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function Layout({ children }) {
const selectedLayoutSegment = useSelectedLayoutSegment()
const selectedLayoutSegment = useSelectedLayoutSegments()

return (
<>
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app/app/nested-navigation/CategoryNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use client'

import { TabNavItem } from './TabNavItem'
import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

const CategoryNav = ({ categories }) => {
const selectedLayoutSegment = useSelectedLayoutSegment()
const selectedLayoutSegment = useSelectedLayoutSegments()

return (
<div style={{ display: 'flex' }}>
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use client'

import { TabNavItem } from '../TabNavItem'
import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

const SubCategoryNav = ({ category }) => {
const selectedLayoutSegment = useSelectedLayoutSegment()
const selectedLayoutSegment = useSelectedLayoutSegments()

return (
<div style={{ display: 'flex' }}>
Expand Down