diff options
| author | Bertrand Yuan <189593334+bertyuan@users.noreply.github.com> | 2026-03-26 00:19:31 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-03-26 00:19:31 +0800 |
| commit | f247a8c4a863ec430f4a705b5c493d652c8429bd (patch) | |
| tree | 71d0985970984c105582f6e3c370b254f38e9bbe /src/hooks | |
| parent | f7a02fe0e112cf108fc5f22872f1efc077e99fe8 (diff) | |
| parent | cd3c4bc89c169616b38bdb7443bb4eb7571b020c (diff) | |
Merge pull request #12 from bertyuan/fix-vitestv1.1
Fix vitest
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[] { |
