/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Label from '@woocommerce/base-components/label';
/**
* Internal dependencies
*/
import { getIndexes } from './utils.js';
import './style.scss';
const Pagination = ( {
currentPage,
displayFirstAndLastPages,
displayNextAndPreviousArrows,
pagesToDisplay,
onPageChange,
totalPages,
} ) => {
let { minIndex, maxIndex } = getIndexes(
pagesToDisplay,
currentPage,
totalPages
);
const showFirstPage = displayFirstAndLastPages && Boolean( minIndex !== 1 );
const showLastPage =
displayFirstAndLastPages && Boolean( maxIndex !== totalPages );
const showFirstPageEllipsis =
displayFirstAndLastPages && Boolean( minIndex > 3 );
const showLastPageEllipsis =
displayFirstAndLastPages && Boolean( maxIndex < totalPages - 2 );
// Handle the cases where there would be an ellipsis replacing one single page
if ( showFirstPage && minIndex === 3 ) {
minIndex = minIndex - 1;
}
if ( showLastPage && maxIndex === totalPages - 2 ) {
maxIndex = maxIndex + 1;
}
const pages = [];
if ( minIndex && maxIndex ) {
for ( let i = minIndex; i <= maxIndex; i++ ) {
pages.push( i );
}
}
return (
);
};
Pagination.propTypes = {
/**
* Number of the page currently being displayed.
*/
currentPage: PropTypes.number.isRequired,
/**
* Total number of pages.
*/
totalPages: PropTypes.number.isRequired,
/**
* Displays first and last pages if they are not in the current range of pages displayed.
*/
displayFirstAndLastPages: PropTypes.bool,
/**
* Displays arrows to navigate to the previous and next pages.
*/
displayNextAndPreviousArrows: PropTypes.bool,
/**
* Callback function called when the user triggers a page change.
*/
onPageChange: PropTypes.func,
/**
* Number of pages to display at the same time, including the active page
* and the pages displayed before and after it. It doesn't include the first
* and last pages.
*/
pagesToDisplay: PropTypes.number,
};
Pagination.defaultProps = {
displayFirstAndLastPages: true,
displayNextAndPreviousArrows: true,
pagesToDisplay: 3,
};
export default Pagination;