Add showPagePicker, showPerPagePicker props to Pagination component (https://github.com/woocommerce/woocommerce-admin/pull/3980)
* Add showPagePicker, showPerPagePicker props to Pagination * Add new Pagination props to readme * Add Pagination component story * Move lonely moustache * Add property for enabling/disabling the page arrows label Co-authored-by: Jason Conroy <jason@findingsimple.com>
This commit is contained in:
parent
5264523d87
commit
67b4df2356
|
@ -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.
|
||||
|
|
|
@ -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 (
|
||||
<div className="woocommerce-pagination__page-arrows">
|
||||
<span
|
||||
className="woocommerce-pagination__page-arrows-label"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{ sprintf(
|
||||
__( 'Page %d of %d', 'woocommerce-admin' ),
|
||||
page,
|
||||
this.pageCount
|
||||
) }
|
||||
</span>
|
||||
{ showPageArrowsLabel && (
|
||||
<span
|
||||
className="woocommerce-pagination__page-arrows-label"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{ sprintf(
|
||||
__( 'Page %d of %d', 'woocommerce-admin' ),
|
||||
page,
|
||||
this.pageCount
|
||||
) }
|
||||
</span>
|
||||
) }
|
||||
<div className="woocommerce-pagination__page-arrows-buttons">
|
||||
<IconButton
|
||||
className={ previousLinkClass }
|
||||
|
@ -188,7 +190,7 @@ class Pagination extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { total, perPage, className } = this.props;
|
||||
const { total, perPage, className, showPagePicker, showPerPagePicker } = this.props;
|
||||
this.pageCount = Math.ceil( total / perPage );
|
||||
|
||||
const classes = classNames( 'woocommerce-pagination', className );
|
||||
|
@ -207,8 +209,8 @@ class Pagination extends Component {
|
|||
return (
|
||||
<div className={ classes }>
|
||||
{ this.renderPageArrows() }
|
||||
{ this.renderPagePicker() }
|
||||
{ this.renderPerPagePicker() }
|
||||
{ showPagePicker && this.renderPagePicker() }
|
||||
{ showPerPagePicker && this.renderPerPagePicker() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
|
|
|
@ -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 (
|
||||
<Pagination
|
||||
page={ statePage }
|
||||
perPage={ statePerPage }
|
||||
total={ number( 'Total', 500 ) }
|
||||
showPagePicker={ boolean( 'Page Picker', true ) }
|
||||
showPerPagePicker={ boolean( 'Per Page Picker', true ) }
|
||||
showPageArrowsLabel={ boolean( 'Page Arrows Label', true ) }
|
||||
onPageChange={ ( newPage ) => setPage( newPage ) }
|
||||
onPerPageChange={ ( newPerPage ) => setPerPage( newPerPage ) }
|
||||
/>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue