From 7e3f95537243279af794ba340c7efea306763ebe Mon Sep 17 00:00:00 2001 From: Eduard Predescu Date: Sat, 22 Jun 2024 10:34:19 +0300 Subject: [PATCH 1/2] fix(Pagination): add conditions for 2 siblings edge case --- packages/radix-vue/src/Pagination/utils.ts | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/radix-vue/src/Pagination/utils.ts b/packages/radix-vue/src/Pagination/utils.ts index 57c5f08f7..05977a43c 100644 --- a/packages/radix-vue/src/Pagination/utils.ts +++ b/packages/radix-vue/src/Pagination/utils.ts @@ -24,9 +24,6 @@ export function getRange(currentPage: number, pageCount: number, siblingCount: n const leftSiblingIndex = Math.max(currentPage - siblingCount, firstPageIndex) const rightSiblingIndex = Math.min(currentPage + siblingCount, lastPageIndex) - const showLeftEllipsis = leftSiblingIndex > firstPageIndex + 2 - const showRightEllipsis = rightSiblingIndex < lastPageIndex - 2 - if (showEdges) { /** * `2 * siblingCount + 5` explanation: @@ -41,18 +38,37 @@ export function getRange(currentPage: number, pageCount: number, siblingCount: n const itemCount = totalPageNumbers - 2 // 2 stands for one ellipsis and either first or last page + const showLeftEllipsis + // default condition + = leftSiblingIndex > firstPageIndex + 2 + // if the current page is towards the end of the list + && lastPageIndex - itemCount - firstPageIndex + 1 > 2 + // if the current page is towards the middle of the list + && leftSiblingIndex - firstPageIndex > 2 + + const showRightEllipsis + // default condition + = rightSiblingIndex < lastPageIndex - 2 + // if the current page is towards the start of the list + && lastPageIndex - itemCount > 2 + // if the current page is towards the middle of the list + && rightSiblingIndex - firstPageIndex > 2 + if (!showLeftEllipsis && showRightEllipsis) { const leftRange = range(1, itemCount) + return [...leftRange, ELLIPSIS, lastPageIndex] } if (showLeftEllipsis && !showRightEllipsis) { const rightRange = range(lastPageIndex - itemCount + 1, lastPageIndex) + return [firstPageIndex, ELLIPSIS, ...rightRange] } if (showLeftEllipsis && showRightEllipsis) { const middleRange = range(leftSiblingIndex, rightSiblingIndex) + return [firstPageIndex, ELLIPSIS, ...middleRange, ELLIPSIS, lastPageIndex] } From 0da2fb79974b6978c0e95e775718a105a866730f Mon Sep 17 00:00:00 2001 From: Eduard Predescu Date: Sat, 22 Jun 2024 18:18:23 +0300 Subject: [PATCH 2/2] fix(Pagination): fix right ellipsis condition and add Math.abs --- packages/radix-vue/src/Pagination/utils.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/radix-vue/src/Pagination/utils.ts b/packages/radix-vue/src/Pagination/utils.ts index 05977a43c..380fe2be2 100644 --- a/packages/radix-vue/src/Pagination/utils.ts +++ b/packages/radix-vue/src/Pagination/utils.ts @@ -42,17 +42,17 @@ export function getRange(currentPage: number, pageCount: number, siblingCount: n // default condition = leftSiblingIndex > firstPageIndex + 2 // if the current page is towards the end of the list - && lastPageIndex - itemCount - firstPageIndex + 1 > 2 + && Math.abs(lastPageIndex - itemCount - firstPageIndex + 1) > 2 // if the current page is towards the middle of the list - && leftSiblingIndex - firstPageIndex > 2 + && Math.abs(leftSiblingIndex - firstPageIndex) > 2 const showRightEllipsis // default condition = rightSiblingIndex < lastPageIndex - 2 // if the current page is towards the start of the list - && lastPageIndex - itemCount > 2 + && Math.abs(lastPageIndex - itemCount) > 2 // if the current page is towards the middle of the list - && rightSiblingIndex - firstPageIndex > 2 + && Math.abs(lastPageIndex - rightSiblingIndex) > 2 if (!showLeftEllipsis && showRightEllipsis) { const leftRange = range(1, itemCount)