feat(pagination): add navigation methods (#9154)

**Related Issue:** #6344 ## Summary Adds a method to navigate to the first, last, and an arbitrary page.
Esri · Apr 24, 2024 · 5ca6a5f · 5ca6a5f
1 parent 6d269b3
commit 5ca6a5f
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -279,4 +279,58 @@ describe("calcite-pagination", () => {
       }
     });
   });
+
+  describe("navigation methods", () => {
+    let page: E2EPage;
+    beforeEach(async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        `<calcite-pagination start-item="1" total-items="124" page-size="20"></calcite-pagination>`,
+      );
+    });
+
+    it("navigates to last page", async () => {
+      const element = await page.find("calcite-pagination");
+      await element.callMethod("goTo", "end");
+      await page.waitForChanges();
+      const item = await element.getProperty("startItem");
+      expect(item).toEqual(121);
+    });
+
+    it("navigates to first page", async () => {
+      const element = await page.find("calcite-pagination");
+      await element.callMethod("goTo", "end");
+      await page.waitForChanges();
+      let item = await element.getProperty("startItem");
+      expect(item).toEqual(121);
+      await element.callMethod("goTo", "start");
+      await page.waitForChanges();
+      item = await element.getProperty("startItem");
+      expect(item).toEqual(1);
+    });
+
+    it("navigates middle page", async () => {
+      const element = await page.find("calcite-pagination");
+      await element.callMethod("goTo", 3);
+      await page.waitForChanges();
+      const item = await element.getProperty("startItem");
+      expect(item).toEqual(41);
+    });
+
+    it("navigates beyond last page", async () => {
+      const element = await page.find("calcite-pagination");
+      await element.callMethod("goTo", 20);
+      await page.waitForChanges();
+      const item = await element.getProperty("startItem");
+      expect(item).toEqual(121);
+    });
+
+    it("navigates before first page", async () => {
+      const element = await page.find("calcite-pagination");
+      await element.callMethod("goTo", -1);
+      await page.waitForChanges();
+      const item = await element.getProperty("startItem");
+      expect(item).toEqual(1);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -242,6 +242,32 @@ export class Pagination
     this.startItem = Math.max(1, this.startItem - this.pageSize);
   }
 
+  /**
+   * Set a specified page as active.
+   *
+   * @param page
+   */
+  @Method()
+  async goTo(page: number | "start" | "end"): Promise<void> {
+    switch (page) {
+      case "start":
+        this.startItem = 1;
+        break;
+      case "end":
+        this.startItem = this.lastStartItem;
+        break;
+      default: {
+        if (page >= Math.ceil(this.totalPages)) {
+          this.startItem = this.lastStartItem;
+        } else if (page <= 0) {
+          this.startItem = 1;
+        } else {
+          this.startItem = (page - 1) * this.pageSize + 1;
+        }
+      }
+    }
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods