feat(pagination): improve new pagination method and remove useless code

ovh · Jul 29, 2024 · 58ce14b · 58ce14b
1 parent c560404
commit 58ce14b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 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
@@ -62,7 +62,7 @@ export class OdsPagination {
 
   @Watch('current')
   async onCurrentChange(current: number, oldCurrent?: number): Promise<void> {
-    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 (
       <Host
@@ -335,7 +270,6 @@ export class OdsPagination {
                 color={ODS_BUTTON_COLOR.primary}
                 size={ODS_BUTTON_SIZE.md}
                 onClick={(): void => this.handlePageClick(1)}
-                onKeyUp={(event: KeyboardEvent): void => this.handlePageKeyUp(event, 1)}
               >
               </ods-button>
             </li>
@@ -351,15 +285,14 @@ 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}
                   label={`${pageId}`}
                   color={ODS_BUTTON_COLOR.primary}
                   size={ODS_BUTTON_SIZE.md}
                   onClick={(): void => this.handlePageClick(pageId)}
-                  onKeyUp={(event: KeyboardEvent): void => this.handlePageKeyUp(event, pageId)}
                 >
                 </ods-button>
               </li>
@@ -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)}
               >
               </ods-button>
             </li>

diff --git 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
@@ -50,7 +50,7 @@ <h3>is-disabled</h3>
     <p class="description"></p>
   </div>
 
-  <h3>With background with over 9000 pages</h3>
+  <!-- <h3>With background with over 9000 pages</h3>
   <div class="row">
     <ods-pagination default-current-page=1 total-pages=9001 ></ods-pagination>
     <p class="description">It's over 9000</p>
@@ -77,7 +77,7 @@ <h3>Total items between 10 and 300</h3>
       <span slot="after-total-items">&nbsp;results</span>
     </ods-pagination>
     <p class="description">Select will have custom options</p>
-  </div>
+  </div> -->
 
   <h3>Total items above 300</h3>
   <div class="row">

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
@@ -1,6 +1,5 @@
 interface OdsPaginationPageContent {
   active: boolean;
-  isVisible: boolean;
 }
 
 type OdsPaginationPageList = Array<OdsPaginationPageContent>;