summaryrefslogtreecommitdiff
path: root/src/hooks
diff options
context:
space:
mode:
authorBertrand Yuan <189593334+bertyuan@users.noreply.github.com>2026-03-26 00:19:31 +0800
committerGitHub <noreply@github.com>2026-03-26 00:19:31 +0800
commitf247a8c4a863ec430f4a705b5c493d652c8429bd (patch)
tree71d0985970984c105582f6e3c370b254f38e9bbe /src/hooks
parentf7a02fe0e112cf108fc5f22872f1efc077e99fe8 (diff)
parentcd3c4bc89c169616b38bdb7443bb4eb7571b020c (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.ts53
-rw-r--r--src/hooks/use-pagination.tsx5
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[] {