feat(pagination): display arrows

ovh · Feb 26, 2024 · c4408b2 · c4408b2
1 parent 0250635
commit c4408b2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 69 deletions.
diff --git a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.e2e.ts
@@ -230,14 +230,6 @@ describe('e2e:osds-pagination', () => {
   describe('render with totalItems set', () => {
     let perPageSelectElement: E2EElement;
 
-    it('should not show the select if the totalItems < 10', async() => {
-      await setup({ attributes: { defaultCurrentPage: 1, totalItems: 5 } });
-
-      perPageSelectElement = await page.find('osds-pagination >>> osds-select');
-
-      expect(perPageSelectElement).toBe(null);
-    });
-
     it('should show all the default step', async() => {
       await setup({ attributes: { defaultCurrentPage: 1, totalItems: 500 } });
 
@@ -368,12 +360,5 @@ describe('e2e:osds-pagination', () => {
       await page.waitForChanges();
       expect(current).toBe(1);
     });
-
-    it('should hide arrows navigation if total items is lower than item per page', async() => {
-      await setup({ attributes: { current: 1, defaultItemsPerPage: 25 , totalItems: 20 } });
-
-      pageItemElements = await page.findAll('osds-pagination >>> ul > li:not([class="arrows"])');
-      expect(pageItemElements.length).toBe(0);
-    });
   });
 });
diff --git a/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx b/packages/components/src/pagination/src/components/osds-pagination/osds-pagination.tsx
@@ -71,7 +71,7 @@ export class OsdsPagination implements OdsPaginationAttribute, OdsPaginationEven
     const { value } = event.detail;
 
     if (value) {
-      this.itemPerPage = typeof value === 'number' ? value : parseInt(value, 10);
+      this.itemPerPage = typeof value === 'number' ? value : parseInt(value.toString(), 10);
     }
   }
 
@@ -256,23 +256,18 @@ export class OsdsPagination implements OdsPaginationAttribute, OdsPaginationEven
         {
           !!this.totalItems
           && <>
-            {
-              this.totalItems >= ODS_PAGINATION_PER_PAGE_MIN
-              && <>
-                <osds-select disabled={this.disabled}
-                  value={this.itemPerPage}>
-                  {
-                    ODS_PAGINATION_PER_PAGE_OPTIONS.map((option) => (
-                      <osds-select-option key={option}
-                        value={option}>
-                        {option}
-                      </osds-select-option>
-                    ))
-                  }
-                </osds-select>
-                &nbsp;
-              </>
-            }
+            <osds-select disabled={this.disabled}
+              value={this.itemPerPage}>
+              {
+                ODS_PAGINATION_PER_PAGE_OPTIONS.map((option) => (
+                  <osds-select-option key={option}
+                    value={option}>
+                    {option}
+                  </osds-select-option>
+                ))
+              }
+            </osds-select>
+            &nbsp;
             <osds-text color={ODS_THEME_COLOR_INTENT.primary}
               size={ODS_TEXT_SIZE._500}>
               <slot name="before-total-items"></slot>
@@ -283,44 +278,42 @@ export class OsdsPagination implements OdsPaginationAttribute, OdsPaginationEven
         }
 
         {
-          ( !this.totalItems || this.totalItems > this.itemPerPage) && (
-            <ul>
-              {this.renderArrows('left')}
+          <ul>
+            { this.renderArrows('left') }
 
-              {
-                this.pageList
-                  .filter((page) => page.active)
-                  .map((page) => {
-                    const pageId = this.pageList.indexOf(page) + 1;
-
-                    return (
-                      <>
-                        {this.pageList.length > 6 && this.pageList.length - this.current > 3 && pageId === this.pageList.length && this.renderEllipsis()}
-
-                        <li>
-                          <osds-button
-                            key={pageId}
-                            class={`${this.current === pageId ? 'selected-page' : ''}`}
-                            variant={this.current === pageId ? ODS_BUTTON_VARIANT.flat : ODS_BUTTON_VARIANT.ghost}
-                            disabled={this.disabled}
-                            inline
-                            color={ODS_THEME_COLOR_INTENT.primary}
-                            size={ODS_BUTTON_SIZE.sm}
-                            onKeyDown={(event: KeyboardEvent): void => this.handlePageKeyDown(event, Number(pageId))}
-                            onClick={(): void => this.handlePageClick(Number(pageId))}>
-                            {pageId}
-                          </osds-button>
-                        </li>
-
-                        {this.pageList.length > 6 && this.current > 4 && pageId === 1 && this.renderEllipsis()}
-                      </>
-                    );
-                  })
-              }
+            {
+              this.pageList
+                .filter((page) => page.active)
+                .map((page) => {
+                  const pageId = this.pageList.indexOf(page) + 1;
+
+                  return (
+                    <>
+                      {this.pageList.length > 6 && this.pageList.length - this.current > 3 && pageId === this.pageList.length && this.renderEllipsis()}
+
+                      <li>
+                        <osds-button
+                          key={pageId}
+                          class={`${this.current === pageId ? 'selected-page' : ''}`}
+                          variant={this.current === pageId ? ODS_BUTTON_VARIANT.flat : ODS_BUTTON_VARIANT.ghost}
+                          disabled={this.disabled}
+                          inline
+                          color={ODS_THEME_COLOR_INTENT.primary}
+                          size={ODS_BUTTON_SIZE.sm}
+                          onKeyDown={(event: KeyboardEvent): void => this.handlePageKeyDown(event, Number(pageId))}
+                          onClick={(): void => this.handlePageClick(Number(pageId))}>
+                          {pageId}
+                        </osds-button>
+                      </li>
+
+                      {this.pageList.length > 6 && this.current > 4 && pageId === 1 && this.renderEllipsis()}
+                    </>
+                  );
+                })
+            }
 
-              {this.renderArrows('right')}
-            </ul>
-          )
+            { this.renderArrows('right') }
+          </ul>
         }
       </Host>
     );