cspace-ui/lib/components/search/Pager.js

CollectionSpace user interface for browsers

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactIntl = require("react-intl");

var _cspaceInput = require("cspace-input");

var _PageSizeChooser = _interopRequireDefault(require("./PageSizeChooser"));

var _Pager = _interopRequireDefault(require("../../../styles/cspace-ui/Pager.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

const {
  MiniButton
} = _cspaceInput.baseComponents;
const messages = (0, _reactIntl.defineMessages)({
  previousLabel: {
    "id": "pager.previous",
    "defaultMessage": "<"
  },
  nextLabel: {
    "id": "pager.next",
    "defaultMessage": ">"
  },
  gap: {
    "id": "pager.gap",
    "defaultMessage": "..."
  }
});
const propTypes = {
  currentPage: _propTypes.default.number.isRequired,
  lastPage: _propTypes.default.number.isRequired,
  pageSize: _propTypes.default.number.isRequired,
  pageSizeOptionListName: _propTypes.default.string,
  windowSize: _propTypes.default.number,
  onPageChange: _propTypes.default.func,
  onPageSizeChange: _propTypes.default.func
};
const defaultProps = {
  windowSize: 5
};

class Pager extends _react.Component {
  constructor() {
    super();
    this.handleNextButtonClick = this.handleNextButtonClick.bind(this);
    this.handlePageButtonClick = this.handlePageButtonClick.bind(this);
    this.handlePrevButtonClick = this.handlePrevButtonClick.bind(this);
  }

  handleNextButtonClick() {
    const {
      currentPage,
      onPageChange
    } = this.props;

    if (onPageChange) {
      onPageChange(currentPage + 1);
    }
  }

  handlePageButtonClick(event) {
    const {
      onPageChange
    } = this.props;

    if (onPageChange) {
      const {
        pagenum: pageNum
      } = event.currentTarget.dataset;
      onPageChange(parseInt(pageNum, 10));
    }
  }

  handlePrevButtonClick() {
    const {
      currentPage,
      onPageChange
    } = this.props;

    if (onPageChange) {
      onPageChange(currentPage - 1);
    }
  }

  renderPages() {
    const {
      currentPage,
      lastPage,
      windowSize
    } = this.props;
    const pageCount = lastPage + 1;
    let windowStart = 0;
    let windowEnd = lastPage;

    if (windowSize < pageCount) {
      let beforeWindowSize = Math.floor((windowSize - 1) / 2);
      let afterWindowSize = windowSize - 1 - beforeWindowSize;

      if (beforeWindowSize > currentPage) {
        const offset = beforeWindowSize - currentPage;
        beforeWindowSize -= offset;
        afterWindowSize += offset;
      } else if (currentPage + afterWindowSize > lastPage) {
        const offset = currentPage + afterWindowSize - lastPage;
        beforeWindowSize += offset;
        afterWindowSize -= offset;
      }

      windowStart = currentPage - beforeWindowSize;
      windowEnd = currentPage + afterWindowSize;
    }

    const pages = [];

    if (windowStart > 0) {
      pages.push({
        pageNum: 0,
        label: _react.default.createElement(_reactIntl.FormattedNumber, {
          value: 1
        })
      });
      const gap = windowStart;

      if (gap > 2) {
        const gapMiddle = windowStart - Math.floor(windowStart / 2);
        pages.push({
          pageNum: gapMiddle,
          label: _react.default.createElement(_reactIntl.FormattedMessage, messages.gap)
        });
      } else if (gap > 1) {
        pages.push({
          pageNum: 1,
          label: _react.default.createElement(_reactIntl.FormattedNumber, {
            value: 2
          })
        });
      }
    }

    for (let pageNum = windowStart; pageNum <= windowEnd; pageNum += 1) {
      pages.push({
        pageNum,
        label: _react.default.createElement(_reactIntl.FormattedNumber, {
          value: pageNum + 1
        })
      });
    }

    if (windowEnd < lastPage) {
      const gap = lastPage - windowEnd;

      if (gap > 2) {
        const gapMiddle = windowEnd + Math.ceil((lastPage - windowEnd) / 2);
        pages.push({
          pageNum: gapMiddle,
          label: _react.default.createElement(_reactIntl.FormattedMessage, messages.gap)
        });
      } else if (gap > 1) {
        pages.push({
          pageNum: lastPage - 1,
          label: _react.default.createElement(_reactIntl.FormattedNumber, {
            value: lastPage
          })
        });
      }

      pages.push({
        pageNum: lastPage,
        label: _react.default.createElement(_reactIntl.FormattedNumber, {
          value: lastPage + 1
        })
      });
    }

    const items = pages.map(page => _react.default.createElement("li", {
      key: page.pageNum
    }, _react.default.createElement(MiniButton, {
      "data-pagenum": page.pageNum,
      disabled: page.pageNum === currentPage,
      onClick: this.handlePageButtonClick
    }, page.label)));
    return _react.default.createElement("ul", null, items);
  }

  render() {
    const {
      currentPage,
      lastPage,
      pageSize,
      pageSizeOptionListName,
      onPageSizeChange
    } = this.props;
    return _react.default.createElement("div", {
      className: _Pager.default.common
    }, _react.default.createElement(_PageSizeChooser.default, {
      embedded: true,
      pageSize: pageSize,
      pageSizeOptionListName: pageSizeOptionListName,
      onPageSizeChange: onPageSizeChange
    }), _react.default.createElement("nav", null, _react.default.createElement(MiniButton, {
      disabled: currentPage === 0,
      onClick: this.handlePrevButtonClick
    }, _react.default.createElement(_reactIntl.FormattedMessage, messages.previousLabel)), this.renderPages(), _react.default.createElement(MiniButton, {
      disabled: currentPage === lastPage,
      onClick: this.handleNextButtonClick
    }, _react.default.createElement(_reactIntl.FormattedMessage, messages.nextLabel))));
  }

}

exports.default = Pager;
Pager.propTypes = propTypes;
Pager.defaultProps = defaultProps;