diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index 244bc1320d7d..5e5d4f63946e 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/packages/react/src/components/Pagination/Pagination-story.js @@ -23,6 +23,10 @@ const props = () => ({ page: number('The current page (page)', 1), totalItems: number('Total number of items (totalItems)', 103), pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false), + pageSizeInputDisabled: boolean( + 'Disable page size input (pageInputDisabled)', + false + ), pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false), backwardText: text( 'The description for the backward icon (backwardText)', diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index c1e06a9ecfdc..c7b00234d332 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/packages/react/src/components/Pagination/Pagination.js @@ -127,6 +127,11 @@ export default class Pagination extends Component { * `true` if the select box to change the page should be disabled. */ pageInputDisabled: PropTypes.bool, + + /** + * `true` if the select box to change the page size should be disabled. + */ + pageSizeInputDisabled: PropTypes.bool, }; static defaultProps = { @@ -141,6 +146,7 @@ export default class Pagination extends Component { pagesUnknown: false, isLastPage: false, pageInputDisabled: false, + pageSizeInputDisabled: false, itemText: (min, max) => `${min}–${max} items`, pageText: page => `page ${page}`, }; @@ -188,7 +194,10 @@ export default class Pagination extends Component { Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1) ) { this.setState({ page }); - this.props.onChange({ page, pageSize: this.state.pageSize }); + this.props.onChange({ + page, + pageSize: this.state.pageSize, + }); } }; @@ -233,6 +242,7 @@ export default class Pagination extends Component { pagesUnknown, isLastPage, pageInputDisabled, + pageSizeInputDisabled, totalItems, onChange, // eslint-disable-line no-unused-vars page: pageNumber, // eslint-disable-line no-unused-vars @@ -278,6 +288,7 @@ export default class Pagination extends Component { noLabel inline onChange={this.handleSizeChange} + disabled={pageSizeInputDisabled} value={statePageSize}> {pageSizes.map(size => (