import React, { Component, PropTypes } from "react"; import { Link } from "react-router"; import CSSModules from "react-css-modules"; import { defineMessages, injectIntl, intlShape, FormattedMessage, FormattedHTMLMessage } from "react-intl"; import { messagesMap } from "../../utils"; import commonMessages from "../../locales/messagesDescriptors/common"; import messages from "../../locales/messagesDescriptors/elements/Pagination"; import css from "../../styles/elements/Pagination.scss"; const paginationMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages))); class PaginationCSSIntl extends Component { computePaginationBounds(currentPage, nPages, maxNumberPagesShown=5) { // Taken from http://stackoverflow.com/a/8608998/2626416 var lowerLimit = currentPage; var upperLimit = currentPage; for (var b = 1; b < maxNumberPagesShown && b < nPages;) { if (lowerLimit > 1 ) { lowerLimit--; b++; } if (b < maxNumberPagesShown && upperLimit < nPages) { upperLimit++; b++; } } return { lowerLimit: lowerLimit, upperLimit: upperLimit + 1 // +1 to ease iteration in for with < }; } goToPage(ev) { ev.preventDefault(); const pageNumber = parseInt(this.refs.pageInput.value); $(this.refs.paginationModal).modal("hide"); if (pageNumber) { this.props.goToPage(pageNumber); } } dotsOnClick() { $(this.refs.paginationModal).modal(); } dotsOnKeyDown(ev) { ev.preventDefault; const code = ev.keyCode || ev.which; if (code == 13 || code == 32) { // Enter or Space key this.dotsOnClick(); // Fire same event as onClick } } cancelModalBox() { $(this.refs.paginationModal).modal("hide"); } render () { const { formatMessage } = this.props.intl; const { lowerLimit, upperLimit } = this.computePaginationBounds(this.props.currentPage, this.props.nPages); var pagesButton = []; var key = 0; // key increment to ensure correct ordering if (lowerLimit > 1) { // Push first page pagesButton.push(
  • ); key++; if (lowerLimit > 2) { // Eventually push "…" pagesButton.push(
  • ); key++; } } var i = 0; for (i = lowerLimit; i < upperLimit; i++) { var className = "page-item"; var currentSpan = null; if (this.props.currentPage == i) { className += " active"; currentSpan = (); } const title = formatMessage(paginationMessages["app.pagination.goToPageWithoutMarkup"], { pageNumber: i }); pagesButton.push(
  • {currentSpan}
  • ); key++; } if (i < this.props.nPages) { if (i < this.props.nPages - 1) { // Eventually push "…" pagesButton.push(
  • ); key++; } const title = formatMessage(paginationMessages["app.pagination.goToPageWithoutMarkup"], { pageNumber: this.props.nPages }); // Push last page pagesButton.push(
  • ); } if (pagesButton.length > 1) { return (

    ); } return null; } } PaginationCSSIntl.propTypes = { currentPage: PropTypes.number.isRequired, goToPage: PropTypes.func.isRequired, buildLinkToPage: PropTypes.func.isRequired, nPages: PropTypes.number.isRequired, intl: intlShape.isRequired, }; export default injectIntl(CSSModules(PaginationCSSIntl, css));