feat(experimental-pagination): add onchange handler (#9355)

Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Aug 3, 2021 · 06acc24 · 06acc24
1 parent df847d0
commit 06acc24
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7644,6 +7644,9 @@ Map {
       "itemsPerPageText": Object {
         "type": "string",
       },
+      "onChange": Object {
+        "type": "func",
+      },
       "pageRangeText": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/Pagination/experimental/Pagination.js b/packages/react/src/components/Pagination/experimental/Pagination.js
@@ -27,6 +27,7 @@ function Pagination({
   itemsPerPageText,
   itemRangeText,
   itemText,
+  onChange,
   pageRangeText,
   pageSize,
   pageSizes,
@@ -49,6 +50,18 @@ function Pagination({
     setCurrentPage(Number(newPage));
   }
 
+  function incrementPage() {
+    const page = currentPage + 1;
+    setCurrentPage(page);
+    onChange({ page, pageSize: currentPageSize });
+  }
+
+  function decrementPage() {
+    const page = currentPage - 1;
+    setCurrentPage(page);
+    onChange({ page, pageSize: currentPageSize });
+  }
+
   const namespace = `${prefix}--unstable-pagination`;
 
   return (
@@ -137,7 +150,7 @@ function Pagination({
               [`${namespace}__button--no-index`]: backButtonDisabled,
             }
           )}
-          onClick={() => setCurrentPage(currentPage - 1)}
+          onClick={() => decrementPage()}
           disabled={backButtonDisabled}
           hasIconOnly
           renderIcon={CaretLeft16}
@@ -153,7 +166,7 @@ function Pagination({
               [`${namespace}__button--no-index`]: forwardButtonDisabled,
             }
           )}
-          onClick={() => setCurrentPage(currentPage + 1)}
+          onClick={() => incrementPage()}
           disabled={forwardButtonDisabled}
           hasIconOnly
           renderIcon={CaretRight16}
@@ -216,6 +229,11 @@ Pagination.propTypes = {
    */
   itemsPerPageText: PropTypes.string,
 
+  /**
+   * The callback function called when the current page changes.
+   */
+  onChange: PropTypes.func,
+
   /**
    * The function returning a translatable text showing where the current page is,
    * in a manner of the total number of pages.