diff options
Diffstat (limited to 'src/hooks')
| -rw-r--r-- | src/hooks/use-pagination.test.ts | 53 | ||||
| -rw-r--r-- | src/hooks/use-pagination.tsx | 5 |
2 files changed, 57 insertions, 1 deletions
diff --git a/src/hooks/use-pagination.test.ts b/src/hooks/use-pagination.test.ts new file mode 100644 index 0000000..ba70f5e --- /dev/null +++ b/src/hooks/use-pagination.test.ts @@ -0,0 +1,53 @@ +import { describe, expect, test } from 'vitest'; +import { usePagination } from './use-pagination'; + +describe('usePagination', () => { + test('returns all pages when total pages are less than display limit', () => { + const result = usePagination({ + currentPage: 2, + totalPages: 4, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([1, 2, 3, 4]); + expect(result.showLeftEllipsis).toBe(false); + expect(result.showRightEllipsis).toBe(false); + }); + + test('shows only right ellipsis near the start of the range', () => { + const result = usePagination({ + currentPage: 1, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([1, 2, 3, 4]); + expect(result.showLeftEllipsis).toBe(false); + expect(result.showRightEllipsis).toBe(true); + }); + + test('shows both ellipses around middle pages', () => { + const result = usePagination({ + currentPage: 5, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([4, 5, 6]); + expect(result.showLeftEllipsis).toBe(true); + expect(result.showRightEllipsis).toBe(true); + }); + + test('shows only left ellipsis near the end of the range', () => { + const result = usePagination({ + currentPage: 10, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([7, 8, 9, 10]); + expect(result.showLeftEllipsis).toBe(true); + expect(result.showRightEllipsis).toBe(false); + }); +}); + diff --git a/src/hooks/use-pagination.tsx b/src/hooks/use-pagination.tsx index d009cd4..40ed979 100644 --- a/src/hooks/use-pagination.tsx +++ b/src/hooks/use-pagination.tsx @@ -15,8 +15,11 @@ export function usePagination({ totalPages, paginationItemsToDisplay, }: UsePaginationProps): UsePaginationReturn { - const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2; + const shouldTruncate = totalPages > paginationItemsToDisplay; + const showLeftEllipsis = + shouldTruncate && currentPage - 1 > paginationItemsToDisplay / 2; const showRightEllipsis = + shouldTruncate && totalPages - currentPage + 1 > paginationItemsToDisplay / 2; function calculatePaginationRange(): number[] { |
