From 58ce14bc0cd041893b5917494c31d49696fd7fce Mon Sep 17 00:00:00 2001 From: Leo Largillet Date: Tue, 16 Jul 2024 17:00:53 +0200 Subject: [PATCH] feat(pagination): improve new pagination method and remove useless code --- .../ods-pagination/ods-pagination.tsx | 74 +------------------ .../src/controller/ods-pagination.ts | 2 +- .../src/components/pagination/src/index.html | 4 +- .../src/interfaces/pagination-page-list.ts | 1 - 4 files changed, 6 insertions(+), 75 deletions(-) diff --git a/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx b/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx index 9620dd4e77..9ac4421037 100644 --- a/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx +++ b/packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.tsx @@ -62,7 +62,7 @@ export class OdsPagination { @Watch('current') async onCurrentChange(current: number, oldCurrent?: number): Promise { - this.updatePageVisibility(); + this.updatePageList(); this.emitChange(current, oldCurrent); } @@ -72,7 +72,6 @@ export class OdsPagination { this.actualTotalPages = this.totalPages; } this.updatePageList(); - this.updatePageVisibility(); } @Watch('itemPerPage') @@ -117,48 +116,15 @@ export class OdsPagination { this.current = getActualPage(this.defaultCurrentPage, this.actualTotalPages, this.current); this.updatePageList(); - this.updatePageVisibility(); this.isFirstLoad = false; } private updatePageList(): void { this.pageList = createPageList(this.actualTotalPages, this.current).map((page) => ({ ...page, - isVisible: false, })); } - private updatePageVisibility(): void { - const maxVisibleItems = 7; - - this.pageList.forEach((page, index) => { - const pageId = index + 1; - - if (pageId === 1 || pageId === this.actualTotalPages) { - page.isVisible = true; - } else if (this.actualTotalPages <= maxVisibleItems) { - page.isVisible = true; - } else if (this.current <= this.ellipsisThreshold) { - page.isVisible = pageId <= maxVisibleItems - 2; - } else if (this.current >= this.actualTotalPages - this.ellipsisThreshold) { - page.isVisible = pageId >= this.actualTotalPages - (maxVisibleItems - 3); - } else { - page.isVisible = pageId >= this.current - 1 && pageId <= this.current + 1; - } - }); - - const visiblePages = this.pageList.filter((page) => page.isVisible); - if (visiblePages.length > maxVisibleItems) { - if (this.current > this.ellipsisThreshold && this.current < this.actualTotalPages - this.ellipsisThreshold) { - visiblePages[1].isVisible = false; - } else if (this.current <= this.ellipsisThreshold) { - visiblePages[visiblePages.length - 2].isVisible = false; - } else { - visiblePages[1].isVisible = false; - } - } - } - private emitChange(current: number, oldCurrent?: number): void { this.odsPaginationChanged.emit({ current: current, @@ -172,7 +138,6 @@ export class OdsPagination { if (this.current === 1) { this.updatePageList(); - this.updatePageVisibility(); } else { await this.setCurrentPage(1); } @@ -190,29 +155,6 @@ export class OdsPagination { this.setCurrentPage(page); } - private handlePreviousKeyUp(event: KeyboardEvent, page: number): void { - if (this.current > 1) { - this.onKeyUp(event, page - 1); - } - } - - private handleNextKeyUp(event: KeyboardEvent, page: number): void { - if (this.current < this.pageList.length) { - this.onKeyUp(event, page + 1); - } - } - - private handlePageKeyUp(event: KeyboardEvent, page: number): void { - this.onKeyUp(event, page); - } - - private onKeyUp(event: KeyboardEvent, page: number): void { - if (event.key === ' ' || event.key === 'Enter') { - event.preventDefault(); - this.setCurrentPage(page); - } - } - private renderArrow(direction: 'left' | 'right'): typeof Fragment { const isLeft = direction === 'left'; const tooltipLabel = isLeft ? this.labelTooltipPrevious : this.labelTooltipNext; @@ -239,13 +181,6 @@ export class OdsPagination { this.handleNextClick(Number(this.current)); } }} - onKeyUp={(event: KeyboardEvent) => { - if (isLeft) { - this.handlePreviousKeyUp(event, Number(this.current)); - } else { - this.handleNextKeyUp(event, Number(this.current)); - } - }} variant={ODS_BUTTON_VARIANT.ghost} size={ODS_BUTTON_SIZE.md} > @@ -283,7 +218,7 @@ export class OdsPagination { } const renderEllipsisLeft = this.current > this.ellipsisThreshold && this.actualTotalPages > this.maxVisibleItems; - const renderEllipsisRight = this.current < this.actualTotalPages - this.ellipsisThreshold && this.actualTotalPages > this.maxVisibleItems; + const renderEllipsisRight = this.current < this.actualTotalPages - this.ellipsisThreshold + 1 && this.actualTotalPages > this.maxVisibleItems; return ( this.handlePageClick(1)} - onKeyUp={(event: KeyboardEvent): void => this.handlePageKeyUp(event, 1)} > @@ -351,7 +285,7 @@ export class OdsPagination { class={{ 'ods-pagination__list__page__button': true, 'ods-pagination__list__page__button--selected': this.current === pageId, - 'ods-pagination__list__page__button--visible': page.isVisible, + 'ods-pagination__list__page__button--visible': page.active, }} variant={this.current === pageId ? ODS_BUTTON_VARIANT.default : ODS_BUTTON_VARIANT.ghost} isDisabled={this.isDisabled} @@ -359,7 +293,6 @@ export class OdsPagination { color={ODS_BUTTON_COLOR.primary} size={ODS_BUTTON_SIZE.md} onClick={(): void => this.handlePageClick(pageId)} - onKeyUp={(event: KeyboardEvent): void => this.handlePageKeyUp(event, pageId)} > @@ -382,7 +315,6 @@ export class OdsPagination { color={ODS_BUTTON_COLOR.primary} size={ODS_BUTTON_SIZE.md} onClick={(): void => this.handlePageClick(this.actualTotalPages)} - onKeyUp={(event: KeyboardEvent): void => this.handlePageKeyUp(event, this.actualTotalPages)} > diff --git a/packages/ods/src/components/pagination/src/controller/ods-pagination.ts b/packages/ods/src/components/pagination/src/controller/ods-pagination.ts index 67572cfcce..9ff6e724ee 100644 --- a/packages/ods/src/components/pagination/src/controller/ods-pagination.ts +++ b/packages/ods/src/components/pagination/src/controller/ods-pagination.ts @@ -13,7 +13,7 @@ function createPageList(totalPages: number, pageSelected: number): OdsPagination // Create initial pageList with 'active' property set to false for each page. for (let i = 1; i <= totalPages; i++) { - pageList.push({ active: false, isVisible: false }); + pageList.push({ active: false }); } let startIndex = Math.max(pageSelected - 2, 1); diff --git a/packages/ods/src/components/pagination/src/index.html b/packages/ods/src/components/pagination/src/index.html index e2d0fcc08d..749c8ce577 100644 --- a/packages/ods/src/components/pagination/src/index.html +++ b/packages/ods/src/components/pagination/src/index.html @@ -50,7 +50,7 @@

is-disabled

-

With background with over 9000 pages

+

Total items above 300

diff --git a/packages/ods/src/components/pagination/src/interfaces/pagination-page-list.ts b/packages/ods/src/components/pagination/src/interfaces/pagination-page-list.ts index 48d9b46569..57523e8328 100644 --- a/packages/ods/src/components/pagination/src/interfaces/pagination-page-list.ts +++ b/packages/ods/src/components/pagination/src/interfaces/pagination-page-list.ts @@ -1,6 +1,5 @@ interface OdsPaginationPageContent { active: boolean; - isVisible: boolean; } type OdsPaginationPageList = Array;