diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/README.md b/plugins/woocommerce-admin/packages/components/src/pagination/README.md index ec9a30d8507..e50d0a11f30 100644 --- a/plugins/woocommerce-admin/packages/components/src/pagination/README.md +++ b/plugins/woocommerce-admin/packages/components/src/pagination/README.md @@ -26,3 +26,6 @@ Name | Type | Default | Description `onPerPageChange` | Function | `noop` | A function to execute when the per page option is changed `total` | Number | `null` | (required) The total number of results `className` | String | `null` | Additional classNames +`showPagePicker` | Boolean | `true` | Whether the page picker should be shown. +`showPerPagePicker` | Boolean | `true` | Whether the per page picker should shown. +`showPageArrowsLabel` | Boolean | `true` | Whether the page arrows label should be shown. diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/index.js b/plugins/woocommerce-admin/packages/components/src/pagination/index.js index 61ffb10c8a7..d1e47c98c5d 100644 --- a/plugins/woocommerce-admin/packages/components/src/pagination/index.js +++ b/plugins/woocommerce-admin/packages/components/src/pagination/index.js @@ -84,7 +84,7 @@ class Pagination extends Component { } renderPageArrows() { - const { page } = this.props; + const { page, showPageArrowsLabel } = this.props; if ( this.pageCount <= 1 ) { return null; @@ -100,17 +100,19 @@ class Pagination extends Component { return (
- - { sprintf( - __( 'Page %d of %d', 'woocommerce-admin' ), - page, - this.pageCount - ) } - + { showPageArrowsLabel && ( + + { sprintf( + __( 'Page %d of %d', 'woocommerce-admin' ), + page, + this.pageCount + ) } + + ) }
{ this.renderPageArrows() } - { this.renderPagePicker() } - { this.renderPerPagePicker() } + { showPagePicker && this.renderPagePicker() } + { showPerPagePicker && this.renderPerPagePicker() }
); } @@ -239,11 +241,26 @@ Pagination.propTypes = { * Additional classNames. */ className: PropTypes.string, + /** + * Whether the page picker should be rendered. + */ + showPagePicker: PropTypes.bool, + /** + * Whether the perPage picker should be rendered. + */ + showPerPagePicker: PropTypes.bool, + /** + * Whether the page arrows label should be rendered. + */ + showPageArrowsLabel: PropTypes.bool, }; Pagination.defaultProps = { onPageChange: noop, onPerPageChange: noop, + showPagePicker: true, + showPerPagePicker: true, + showPageArrowsLabel: true, }; export default Pagination; diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js b/plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js new file mode 100644 index 00000000000..b1a0321adf3 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/pagination/stories/index.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { number, boolean } from '@storybook/addon-knobs'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import Pagination from '../'; + +export default { + title: 'WooCommerce Admin/components/Pagination', + component: Pagination, +}; + +export const Default = () => { + + const [ statePage, setPage ] = useState( 2 ); + const [ statePerPage, setPerPage ] = useState( 50 ); + + return ( + setPage( newPage ) } + onPerPageChange={ ( newPerPage ) => setPerPage( newPerPage ) } + /> + ); +};