diff --git a/packages/strapi-plugin-content-manager/public/app/components/Pagination/index.js b/packages/strapi-plugin-content-manager/public/app/components/Pagination/index.js index 0ac45e4129..ceb18b171d 100644 --- a/packages/strapi-plugin-content-manager/public/app/components/Pagination/index.js +++ b/packages/strapi-plugin-content-manager/public/app/components/Pagination/index.js @@ -11,11 +11,10 @@ import styles from './styles.scss'; class Pagination extends React.Component { // eslint-disable-line react/prefer-stateless-function constructor(props) { super(props); - this.state = { - progress: -1, - }; this.onGoPreviousPageClicked = this.onGoPreviousPageClicked.bind(this); this.onGoNextPageClicked = this.onGoNextPageClicked.bind(this); + this.onGoFirstPageClicked = this.onGoFirstPageClicked.bind(this); + this.onGoLastPageClicked = this.onGoLastPageClicked.bind(this); } /** @@ -28,16 +27,23 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s } /** - * Check if the + * Check if the previous links dots + * should be displayed or not * * @returns {boolean} */ needPreviousLinksDots() { - return this.props.currentPage >= 3; + return this.props.currentPage > 3; } + /** + * Check if the after links dots + * should be displayed or not + * + * @returns {boolean} + */ needAfterLinksDots() { - return this.props.currentPage < this.lastPage() - 1; + return this.props.currentPage < this.getLastPageNumber() - 1; } /** @@ -45,7 +51,7 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s * * @returns {number} */ - lastPage() { + getLastPageNumber() { return Math.ceil(this.props.count / this.props.limit); } @@ -55,13 +61,13 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s * @returns {boolean} */ isLastPage() { - return this.props.currentPage === this.lastPage(); + return this.props.currentPage === this.getLastPageNumber(); } /** - * Triggered on previous page click. + * Triggered on previous page click * - * Prevent link default behavior and go to previous page. + * Prevent link default behavior and go to previous page * * @param e {Object} Click event */ @@ -74,9 +80,9 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s } /** - * Triggered on next page click. + * Triggered on next page click * - * Prevent link default behavior and go to next page. + * Prevent link default behavior and go to next page * * @param e {Object} Click event */ @@ -88,12 +94,48 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s } } + /** + * Triggered on dots click + * + * Simply prevent link default behavior + * + * @param e {Object} Click event + */ + onDotsClicked(e) { + e.preventDefault(); + } + + /** + * Triggered on first page click + * + * Prevent link default behavior and go to first page + * + * @param e {Object} Click event + */ + onGoFirstPageClicked(e) { + e.preventDefault(); + + this.props.changePage(1); + } + + /** + * Triggered on last page click + * + * Prevent link default behavior and go to last page + * + * @param e {Object} Click event + */ + onGoLastPageClicked(e) { + e.preventDefault(); + + this.props.changePage(this.getLastPageNumber()); + } + render() { // Init variables let beforeLinksDots; let afterLinksDots; const linksOptions = []; - const dotsElem = (
  • ...
  • ); // Add active page link linksOptions.push({ @@ -122,19 +164,37 @@ class Pagination extends React.Component { // eslint-disable-line react/prefer-s }); } - // Add previous link dots + // Add previous link dots and first page link if (this.needPreviousLinksDots()) { - beforeLinksDots = dotsElem; + linksOptions.unshift({ + value: '...', + isActive: false, + onClick: this.onDotsClicked, + }); + linksOptions.unshift({ + value: 1, + isActive: false, + onClick: this.onGoFirstPageClicked, + }); } - // Add next link dots + // Add next link dots and last page link if (this.needAfterLinksDots()) { - afterLinksDots = dotsElem; + linksOptions.push({ + value: '...', + isActive: false, + onClick: this.onDotsClicked, + }); + linksOptions.push({ + value: this.getLastPageNumber(), + isActive: false, + onClick: this.onGoLastPageClicked, + }); } // Generate links - const links = linksOptions.map((linksOption) => ( -
  • + const links = linksOptions.map((linksOption, i) => ( +
  • {linksOption.value}