Skip to content

Commit 06acc24

Browse files
tay1orjonesjnm2377
andauthored
feat(experimental-pagination): add onchange handler (#9355)
Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
1 parent df847d0 commit 06acc24

File tree

2 files changed

+23
-2
lines changed

2 files changed

+23
-2
lines changed

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7644,6 +7644,9 @@ Map {
76447644
"itemsPerPageText": Object {
76457645
"type": "string",
76467646
},
7647+
"onChange": Object {
7648+
"type": "func",
7649+
},
76477650
"pageRangeText": Object {
76487651
"type": "func",
76497652
},

packages/react/src/components/Pagination/experimental/Pagination.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ function Pagination({
2727
itemsPerPageText,
2828
itemRangeText,
2929
itemText,
30+
onChange,
3031
pageRangeText,
3132
pageSize,
3233
pageSizes,
@@ -49,6 +50,18 @@ function Pagination({
4950
setCurrentPage(Number(newPage));
5051
}
5152

53+
function incrementPage() {
54+
const page = currentPage + 1;
55+
setCurrentPage(page);
56+
onChange({ page, pageSize: currentPageSize });
57+
}
58+
59+
function decrementPage() {
60+
const page = currentPage - 1;
61+
setCurrentPage(page);
62+
onChange({ page, pageSize: currentPageSize });
63+
}
64+
5265
const namespace = `${prefix}--unstable-pagination`;
5366

5467
return (
@@ -137,7 +150,7 @@ function Pagination({
137150
[`${namespace}__button--no-index`]: backButtonDisabled,
138151
}
139152
)}
140-
onClick={() => setCurrentPage(currentPage - 1)}
153+
onClick={() => decrementPage()}
141154
disabled={backButtonDisabled}
142155
hasIconOnly
143156
renderIcon={CaretLeft16}
@@ -153,7 +166,7 @@ function Pagination({
153166
[`${namespace}__button--no-index`]: forwardButtonDisabled,
154167
}
155168
)}
156-
onClick={() => setCurrentPage(currentPage + 1)}
169+
onClick={() => incrementPage()}
157170
disabled={forwardButtonDisabled}
158171
hasIconOnly
159172
renderIcon={CaretRight16}
@@ -216,6 +229,11 @@ Pagination.propTypes = {
216229
*/
217230
itemsPerPageText: PropTypes.string,
218231

232+
/**
233+
* The callback function called when the current page changes.
234+
*/
235+
onChange: PropTypes.func,
236+
219237
/**
220238
* The function returning a translatable text showing where the current page is,
221239
* in a manner of the total number of pages.

0 commit comments

Comments
 (0)