fix(canary-react): set IcPaginationBar to the first page when the ite…

…ms per page changes Add a setToFirstPageOnPaginationChange prop that will make the IcPaginationBar go to the first page when the items per page changes fix #2639
mi6 · Jan 9, 2025 · 41db085 · 41db085
1 parent 475875a
commit 41db085
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 21 deletions.
diff --git a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
@@ -393,6 +393,97 @@ describe("IcPaginationBar end-to-end tests", () => {
       .should(HAVE_LENGTH, 1);
   });
 
+  it("should reset to the first page when the setToFirstPageOnPaginationChange prop is set and the items per page is changed", () => {
+    mount(
+      <PaginationBarItemsPerPage
+        rangeLabelType="data"
+        setToFirstPageOnPaginationChange
+      />
+    );
+
+    cy.checkHydrated(PAGINATION_BAR);
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("#next-page-button")
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "11 - 20 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 2");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select").click();
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select")
+      .shadow()
+      .find("li[role='option']")
+      .eq(1)
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "1 - 20 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 1");
+  });
+
+  it("should remain on the current page when the setToFirstPageOnPaginationChange prop is unset and the items per page is changed", () => {
+    mount(<PaginationBarItemsPerPage rangeLabelType="data" />);
+
+    cy.checkHydrated(PAGINATION_BAR);
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("#next-page-button")
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "11 - 20 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 2");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select").click();
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select")
+      .shadow()
+      .find("li[role='option']")
+      .eq(1)
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "21 - 40 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 2");
+  });
+
   it('should render the number of items instead of the page number when rangeLabelType is "data"', () => {
     mount(<PaginationBarItemsPerPage rangeLabelType="data" />);
 

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -1877,23 +1877,6 @@ const DataTable = () => {
 export default DataTable;
 ```
 
-export const defaultPaginationBarArgs = {
-  itemsPerPageOptions: [
-    { label: "5", value: "5" },
-    { label: "10", value: "10" },
-    { label: "15", value: "15" },
-  ],
-  rangeLabelType: "page",
-  type: "simple",
-  showItemsPerPageControl: true,
-  showGoToPageControl: true,
-  alignment: "right",
-  appearance: "default",
-  itemLabel: "Item",
-  pageLabel: "Page",
-  hideRangeLabel: false
-};
-
 ### Slotted pagination bar
 
 There may be scenarios when using `IcDataTable` when pagination and data fetching is done using a backend API.
@@ -2220,11 +2203,12 @@ export const defaultArgs = {
   paginationItemLabel: "Item",
   paginationItemsPerPageOptions: [
     { label: "5", value: "5" },
-     { label: "10", value: "10" },
-     { label: "15", value: "15" },
+    { label: "10", value: "10" },
+    { label: "15", value: "15" },
   ],
   paginationPageLabel: "Page",
   paginationRangeLabelType: "page",
+  paginationSetToFirstPageOnPaginationChange: false,
   paginationShowGoToPageControl: true,
   paginationShowItemsPerPageControl: true,
   paginationType: "simple",
@@ -2345,6 +2329,7 @@ export const defaultArgs = {
           itemsPerPageOptions: args.paginationItemsPerPageOptions,
           pageLabel: args.paginationPageLabel,
           rangeLabelType: args.paginationRangeLabelType,
+          setToFirstPageOnPaginationChange: args.paginationSetToFirstPageOnPaginationChange,
           showGoToPageControl: args.paginationShowGoToPageControl,
           showItemsPerPageControl: args.paginationShowItemsPerPageControl,
           type: args.paginationType

diff --git a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -482,6 +482,43 @@ const PaginationBar = () => (
 export default PaginationBar;
 ```
 
+### Set to first page when items per page changes
+
+If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.
+
+<Canvas withSource="none">
+  <Story name="Set to first page when items per page changes">
+    <div style={{
+      height: '150px'
+    }}>
+        <IcPaginationBar
+          totalItems="100"
+          showItemsPerPageControl
+          showGoToPageControl
+          setToFirstPageOnPaginationChange
+        />
+    </div>
+  </Story>
+</Canvas>
+
+#### Set to first page when items per page changes code example
+
+```jsx
+import * as React from "react";
+import { IcPaginationBar } from '@ukic/canary-react';
+
+const PaginationBar = () => (
+    <IcPaginationBar
+      totalItems="100"
+      showItemsPerPageControl
+      showGoToPageControl
+      setToFirstPageOnPaginationChange
+    />
+);
+
+export default PaginationBar;
+```
+
 ### Playground
 
 Go to the <IcLink href="/?path=/story/react-components-pagination-bar--playground">separate page for the playground example</IcLink> to view the prop controls.
@@ -500,8 +537,9 @@ export const defaultArgs = {
   ],
   pageLabel: "Page",
   rangeLabelType: "page",
-  showItemsPerPageControl: false,
-  showGoToPageControl: false,
+  setToFirstPageOnPaginationChange: false,
+  showItemsPerPageControl: true,
+  showGoToPageControl: true,
   totalItems: 100,
   type: "simple" 
 };
@@ -546,6 +584,7 @@ export const defaultArgs = {
           itemsPerPageOptions={args.itemsPerPageOptions}
           pageLabel={args.pageLabel}
           rangeLabelType={args.rangeLabelType}
+          setToFirstPageOnPaginationChange={args.setToFirstPageOnPaginationChange}
           showItemsPerPageControl={args.showItemsPerPageControl}
           showGoToPageControl={args.showGoToPageControl}
           totalItems={args.totalItems}