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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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: /*#__PURE__*/_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: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.gap)
        });
      } else if (gap > 1) {
        pages.push({
          pageNum: 1,
          label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedNumber, {
            value: 2
          })
        });
      }
    }
    for (let pageNum = windowStart; pageNum <= windowEnd; pageNum += 1) {
      pages.push({
        pageNum,
        label: /*#__PURE__*/_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: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.gap)
        });
      } else if (gap > 1) {
        pages.push({
          pageNum: lastPage - 1,
          label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedNumber, {
            value: lastPage
          })
        });
      }
      pages.push({
        pageNum: lastPage,
        label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedNumber, {
          value: lastPage + 1
        })
      });
    }
    const items = pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
      key: page.pageNum
    }, /*#__PURE__*/_react.default.createElement(MiniButton, {
      "data-pagenum": page.pageNum,
      disabled: page.pageNum === currentPage,
      onClick: this.handlePageButtonClick
    }, page.label)));
    return /*#__PURE__*/_react.default.createElement("ul", null, items);
  }
  render() {
    const {
      currentPage,
      lastPage,
      pageSize,
      pageSizeOptionListName,
      onPageSizeChange
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _Pager.default.common
    }, /*#__PURE__*/_react.default.createElement(_PageSizeChooser.default, {
      embedded: true,
      pageSize: pageSize,
      pageSizeOptionListName: pageSizeOptionListName,
      onPageSizeChange: onPageSizeChange
    }), /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement(MiniButton, {
      disabled: currentPage === 0,
      onClick: this.handlePrevButtonClick
    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.previousLabel)), this.renderPages(), /*#__PURE__*/_react.default.createElement(MiniButton, {
      disabled: currentPage === lastPage,
      onClick: this.handleNextButtonClick
    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.nextLabel))));
  }
}
exports.default = Pager;
Pager.propTypes = propTypes;
Pager.defaultProps = defaultProps;