diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx index a386e1d167..c6c135c441 100644 --- a/src/components/Pagination/Pagination.stories.tsx +++ b/src/components/Pagination/Pagination.stories.tsx @@ -18,7 +18,7 @@ const Template: ComponentStory = (args) => { const [current, setCurrentPage] = useState(args.currentPage) useEffect(() => { - if (args.currentPage >= args.totalPages) { + if (args.totalPages && args.currentPage >= args.totalPages) { return } setCurrentPage(args.currentPage) @@ -43,7 +43,7 @@ const Template: ComponentStory = (args) => { return ( ( ) +export const Unbounded = (): React.ReactElement => ( + +) + export const ThreePagesFirst = (): React.ReactElement => ( ) diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx index 72cdde11ff..f4b96f6b14 100644 --- a/src/components/Pagination/Pagination.test.tsx +++ b/src/components/Pagination/Pagination.test.tsx @@ -235,6 +235,20 @@ describe('Pagination component', () => { expect(screen.getAllByText('…')).toHaveLength(1) }) + it('doesn\'t render last page when unbounded', () => { + const randomPage = Math.random()*1000 + render( + + ) + expect(screen.getByLabelText(`Page ${randomPage+1}`)).toHaveAttribute( + 'href', + `${testPathname}?page=${randomPage+1}` + ) + }) + it('can click onClickNext, onClickPrevious and onClickPagenumber', () => { const mockOnClickNext = jest.fn() const mockOnClickPrevious = jest.fn() diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 78637283a0..dc544d8c34 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -6,7 +6,7 @@ import { Button } from '../Button/Button' type PaginationProps = { pathname: string // pathname of results page - totalPages: number // total items divided by items per page + totalPages?: number // total items divided by items per page currentPage: number // current page number (starting at 1) maxSlots?: number // number of pagination "slots" onClickNext?: () => void @@ -87,17 +87,16 @@ export const Pagination = ({ const navClasses = classnames('usa-pagination', className) const isOnFirstPage = currentPage === 1 - const isOnLastPage = currentPage === totalPages + const isOnLastPage = totalPages ? currentPage === totalPages : false - const showOverflow = totalPages > maxSlots // If more pages than slots, use overflow indicator(s) + const showOverflow = totalPages ? totalPages > maxSlots : true // If more pages than slots, use overflow indicator(s) const middleSlot = Math.round(maxSlots / 2) // 4 if maxSlots is 7 + const isBeforeMiddleSlot = !!(totalPages && totalPages - currentPage >= middleSlot) const showPrevOverflow = showOverflow && currentPage > middleSlot - const showNextOverflow = - showOverflow && totalPages - currentPage >= middleSlot - + const showNextOverflow = isBeforeMiddleSlot || !totalPages // Assemble array of page numbers to be shown - const currentPageRange: Array = showOverflow + const currentPageRange: Array = showOverflow || !totalPages ? [currentPage] : Array.from({ length: totalPages }).map((_, i) => i + 1) @@ -119,7 +118,7 @@ export const Pagination = ({ } else if (showPrevOverflow) { // We are in the end of the set, there will be overflow (...) at the beginning // Ex: [1] [...] [20] [21] [22] [23] [24] - currentPageAfterSize = totalPages - currentPage - 1 // current & last + currentPageAfterSize = (totalPages || 0) - currentPage - 1 // current & last currentPageAfterSize = currentPageAfterSize < 0 ? 0 : currentPageAfterSize currentPageBeforeSize = pageRangeSize - currentPageAfterSize } else if (showNextOverflow) { @@ -152,7 +151,7 @@ export const Pagination = ({ if (showPrevOverflow) currentPageRange.unshift('overflow') if (currentPage !== 1) currentPageRange.unshift(1) if (showNextOverflow) currentPageRange.push('overflow') - if (currentPage !== totalPages) currentPageRange.push(totalPages) + if (totalPages && currentPage !== totalPages) currentPageRange.push(totalPages) } const prevPage = !isOnFirstPage && currentPage - 1