react-datable/dist/Pagination/index.js

react-datable is a lightweight, fast and extendable datagrid built for React

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from "react";
import PropTypes from "prop-types";
import paginator from "./Paginator";
import Page from "./Page";
import cx from "classnames";
import "./pagination.css";
export default class Pagination extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "renderPostionStyle", position => {
      let style = {};

      switch (true) {
        case position.includes("left"):
          style = {
            justifyContent: "flex-start"
          };
          break;

        case position.includes("right"):
          style = {
            justifyContent: "flex-end"
          };
          break;

        default:
          break;
      }

      return style;
    });
  }

  isFirstPageVisible(has_previous_page) {
    const {
      hideDisabled,
      hideNavigation,
      hideFirstLastPages
    } = this.props;
    if (hideFirstLastPages || hideDisabled && !has_previous_page) return false;
    return true;
  }

  isPrevPageVisible(has_previous_page) {
    const {
      hideDisabled,
      hideNavigation
    } = this.props;
    if (hideNavigation || hideDisabled && !has_previous_page) return false;
    return true;
  }

  isNextPageVisible(has_next_page) {
    const {
      hideDisabled,
      hideNavigation
    } = this.props;
    if (hideNavigation || hideDisabled && !has_next_page) return false;
    return true;
  }

  isLastPageVisible(has_next_page) {
    const {
      hideDisabled,
      hideNavigation,
      hideFirstLastPages
    } = this.props;
    if (hideFirstLastPages || hideDisabled && !has_next_page) return false;
    return true;
  }

  buildPages() {
    const pages = [];
    const {
      itemsCountPerPage,
      pageRangeDisplayed,
      activePage,
      prevPageText,
      nextPageText,
      firstPageText,
      lastPageText,
      totalItemsCount,
      onChange,
      activeClass,
      itemClass,
      itemClassFirst,
      itemClassPrev,
      itemClassNext,
      itemClassLast,
      activeLinkClass,
      disabledClass,
      hideDisabled,
      hideNavigation,
      linkClass,
      linkClassFirst,
      linkClassPrev,
      linkClassNext,
      linkClassLast,
      hideFirstLastPages,
      getPageUrl
    } = this.props;
    const paginationInfo = new paginator(itemsCountPerPage, pageRangeDisplayed).build(totalItemsCount, activePage);

    for (let i = paginationInfo.first_page; i <= paginationInfo.last_page; i++) {
      pages.push( /*#__PURE__*/React.createElement(Page, {
        isActive: i === activePage,
        key: i,
        href: getPageUrl(i),
        pageNumber: i,
        pageText: i + "",
        onClick: onChange,
        itemClass: itemClass,
        linkClass: linkClass,
        activeClass: activeClass,
        activeLinkClass: activeLinkClass,
        ariaLabel: `Go to page number ${i}`
      }));
    }

    this.isPrevPageVisible(paginationInfo.has_previous_page) && pages.unshift( /*#__PURE__*/React.createElement(Page, {
      key: "prev" + paginationInfo.previous_page,
      href: getPageUrl(paginationInfo.previous_page),
      pageNumber: paginationInfo.previous_page,
      onClick: onChange,
      pageText: prevPageText,
      isDisabled: !paginationInfo.has_previous_page,
      itemClass: cx(itemClass, itemClassPrev),
      linkClass: cx(linkClass, linkClassPrev),
      disabledClass: disabledClass,
      ariaLabel: "Go to previous page"
    }));
    this.isFirstPageVisible(paginationInfo.has_previous_page) && pages.unshift( /*#__PURE__*/React.createElement(Page, {
      key: "first",
      href: getPageUrl(1),
      pageNumber: 1,
      onClick: onChange,
      pageText: firstPageText,
      isDisabled: !paginationInfo.has_previous_page,
      itemClass: cx(itemClass, itemClassFirst),
      linkClass: cx(linkClass, linkClassFirst),
      disabledClass: disabledClass,
      ariaLabel: "Go to first page"
    }));
    this.isNextPageVisible(paginationInfo.has_next_page) && pages.push( /*#__PURE__*/React.createElement(Page, {
      key: "next" + paginationInfo.next_page,
      href: getPageUrl(paginationInfo.next_page),
      pageNumber: paginationInfo.next_page,
      onClick: onChange,
      pageText: nextPageText,
      isDisabled: !paginationInfo.has_next_page,
      itemClass: cx(itemClass, itemClassNext),
      linkClass: cx(linkClass, linkClassNext),
      disabledClass: disabledClass,
      ariaLabel: "Go to next page"
    }));
    this.isLastPageVisible(paginationInfo.has_next_page) && pages.push( /*#__PURE__*/React.createElement(Page, {
      key: "last",
      href: getPageUrl(paginationInfo.total_pages),
      pageNumber: paginationInfo.total_pages,
      onClick: onChange,
      pageText: lastPageText,
      isDisabled: paginationInfo.current_page === paginationInfo.total_pages,
      itemClass: cx(itemClass, itemClassLast),
      linkClass: cx(linkClass, linkClassLast),
      disabledClass: disabledClass,
      ariaLabel: "Go to last page"
    }));
    return pages;
  }

  render() {
    const pages = this.buildPages();
    const {
      position
    } = this.props;
    const positionStyle = this.renderPostionStyle(position);
    return /*#__PURE__*/React.createElement("ul", {
      style: { ...positionStyle
      },
      className: this.props.innerClass
    }, pages);
  }

}

_defineProperty(Pagination, "propTypes", {
  totalItemsCount: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
  activePage: PropTypes.number,
  position: PropTypes.string,
  itemsCountPerPage: PropTypes.number,
  pageRangeDisplayed: PropTypes.number,
  prevPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  lastPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  firstPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  disabledClass: PropTypes.string,
  hideDisabled: PropTypes.bool,
  hideNavigation: PropTypes.bool,
  innerClass: PropTypes.string,
  itemClass: PropTypes.string,
  itemClassFirst: PropTypes.string,
  itemClassPrev: PropTypes.string,
  itemClassNext: PropTypes.string,
  itemClassLast: PropTypes.string,
  linkClass: PropTypes.string,
  activeClass: PropTypes.string,
  activeLinkClass: PropTypes.string,
  linkClassFirst: PropTypes.string,
  linkClassPrev: PropTypes.string,
  linkClassNext: PropTypes.string,
  linkClassLast: PropTypes.string,
  hideFirstLastPages: PropTypes.bool,
  getPageUrl: PropTypes.func
});

_defineProperty(Pagination, "defaultProps", {
  itemsCountPerPage: 10,
  pageRangeDisplayed: 5,
  activePage: 1,
  prevPageText: "⟨",
  firstPageText: "«",
  nextPageText: "⟩",
  lastPageText: "»",
  innerClass: "pagination",
  position: "top left",
  itemClass: undefined,
  linkClass: undefined,
  activeLinkClass: undefined,
  hideFirstLastPages: false,
  getPageUrl: i => "#"
});