diff --git a/packages/pagination/src/elements/Pagination.example.md b/packages/pagination/src/elements/Pagination.example.md index 96b3f36e256..557eda7f352 100644 --- a/packages/pagination/src/elements/Pagination.example.md +++ b/packages/pagination/src/elements/Pagination.example.md @@ -5,7 +5,11 @@ initialState = { currentPage: 1 }; -; + setState({ currentPage })} +/>; ``` ### Custom Page Padding diff --git a/packages/pagination/src/elements/Pagination.js b/packages/pagination/src/elements/Pagination.js index 4b8137bb7a5..d200545f50d 100644 --- a/packages/pagination/src/elements/Pagination.js +++ b/packages/pagination/src/elements/Pagination.js @@ -32,6 +32,10 @@ export default class Pagination extends ControlledComponent { * The currently selected page */ currentPage: PropTypes.number.isRequired, + /** + * The currently focused key + */ + focusedKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * The total number of pages available */ @@ -43,9 +47,14 @@ export default class Pagination extends ControlledComponent { pagePadding: PropTypes.number, /** * @param {Object} newState + * @param {Any} newState.focusedKey - The newly focused page key * @param {Any} newState.currentPage - The newly selected page */ onStateChange: PropTypes.func, + /** + * @param {Any} currentPage - The newly selected page + */ + onChange: PropTypes.func, /** * The root ID to use for descendants. A unique ID is created if none is provided. **/ @@ -212,7 +221,7 @@ export default class Pagination extends ControlledComponent { * we must mutate the data to compute currentPage */ onPaginationStateChange = newProps => { - const { totalPages } = this.props; + const { totalPages, onChange } = this.props; const { currentPage } = this.getControlledState(); if (newProps.selectedKey === PREVIOUS_KEY && currentPage > 1) { @@ -233,6 +242,10 @@ export default class Pagination extends ControlledComponent { newProps.currentPage = newProps.selectedKey; } + if (newProps.currentPage !== undefined) { + onChange && onChange(newProps.currentPage); + } + this.setControlledState(newProps); }; diff --git a/packages/pagination/src/elements/Pagination.spec.js b/packages/pagination/src/elements/Pagination.spec.js index 1ca40214efd..bb19be52252 100644 --- a/packages/pagination/src/elements/Pagination.spec.js +++ b/packages/pagination/src/elements/Pagination.spec.js @@ -17,18 +17,21 @@ import Page from '../views/Page'; describe('Pagination', () => { let onStateChange; + let onChange; const BasicExample = ({ currentPage = 1, totalPages = 5, ...other } = {}) => ( ); beforeEach(() => { onStateChange = jest.fn(); + onChange = jest.fn(); }); describe('transformPageProps', () => { @@ -146,7 +149,7 @@ describe('Pagination', () => { }); describe('Pages', () => { - it('updates currentPage when selected', () => { + it('updates onStateChange with currentPage when selected', () => { const wrapper = mountWithTheme(); wrapper @@ -156,6 +159,16 @@ describe('Pagination', () => { expect(onStateChange).toHaveBeenCalledWith({ currentPage: 2 }); }); + it('updates onChange with currentPage when selected', () => { + const wrapper = mountWithTheme(); + + wrapper + .find(Page) + .at(2) + .simulate('click'); + expect(onChange).toHaveBeenCalledWith(2); + }); + it('hides front gap when currentPage is within padding range', () => { const wrapper = mountWithTheme(); const children = wrapper