polestar-ui-kit/lib/Pagination/Pagination.js

## Install

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

require("core-js/modules/es.array.map");

require("core-js/modules/es.date.to-string");

require("core-js/modules/es.number.constructor");

require("core-js/modules/es.object.get-prototype-of");

require("core-js/modules/es.object.keys");

require("core-js/modules/es.object.set-prototype-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.reflect.construct");

require("core-js/modules/es.regexp.to-string");

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

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

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

var _polestarIcons = _interopRequireDefault(require("polestar-icons"));

var _Button = _interopRequireDefault(require("../Button"));

var _calculate = _interopRequireDefault(require("./helpers/calculate"));

var _PageInfo = _interopRequireDefault(require("./constants/PageInfo"));

var _i18n = require("../i18n");

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var Pagination = function (_React$Component) {
  _inherits(Pagination, _React$Component);

  var _super = _createSuper(Pagination);

  function Pagination(props) {
    var _this;

    _classCallCheck(this, Pagination);

    _this = _super.call(this, props);

    _this.getCurrentState = function () {
      return {
        currentPage: _this.state.currentPage,
        totalCount: _this.state.totalCount,
        pageSize: _this.state.pageSize,
        pageGroupSize: _this.state.pageGroupSize,
        pageCount: _this.state.pageCount,
        pageGroupCount: _this.state.pageGroupCount,
        beginRow: _this.state.beginRow,
        endRow: _this.state.endRow,
        beginPage: _this.state.beginPage,
        endPage: _this.state.endPage,
        isFirstPage: _this.state.isFirstPage,
        isLastPage: _this.state.isLastPage,
        isFirstPageGroup: _this.isFirstPageGroup(),
        isLastPageGroup: _this.isLastPageGroup(),
        isEmpty: _this.state.isEmpty
      };
    };

    _this.isFirstPageGroup = function () {
      if (_this.props.edgePageGroupSize) {
        return _this.state.currentPage < _this.props.edgePageGroupSize;
      }

      return _this.state.currentPage <= _this.state.pageGroupSize;
    };

    _this.isLastPageGroup = function () {
      if (_this.props.edgePageGroupSize) {
        return _this.state.currentPage > _this.state.pageCount - _this.props.edgePageGroupSize + 1;
      }

      return _this.state.currentPage > _this.state.pageCount - _this.state.pageGroupSize;
    };

    _this.handleClick = function (e) {
      var returnObject = {
        totalCount: _this.state.totalCount,
        pageSize: _this.state.pageSize,
        beginRow: _this.state.beginRow,
        endRow: _this.state.endRow
      };

      var findTargetButton = function findTargetButton(el) {
        var elTagName = el.tagName.toUpperCase();

        if (elTagName === 'BUTTON') {
          return el;
        }

        return findTargetButton(el.parentNode);
      };

      var button = findTargetButton(e.target);

      switch (button.value) {
        case 'prev':
          {
            var prevPage = _this.state.currentPage > 1 ? _this.state.currentPage - 1 : 1;
            returnObject.page = Number(prevPage);

            _this.props.onClick(returnObject);

            break;
          }

        case 'next':
          {
            var nextPage = _this.state.currentPage < _this.state.pageCount ? _this.state.currentPage + 1 : _this.state.pageCount;
            returnObject.page = Number(nextPage);

            _this.props.onClick(returnObject);

            break;
          }

        case 'pageSizeSelector':
          {
            var pageSize = button.getAttribute('data-value');

            _this.setState((0, _calculate["default"])(_this.props.currentPage, _this.props.totalCount, pageSize === _PageInfo["default"].ALL ? pageSize : Number(pageSize), _this.props.pageGroupSize));

            break;
          }

        default:
          if (_this.state.currentPage !== Number(button.value)) {
            returnObject.page = Number(button.value);

            _this.props.onClick(returnObject);
          }

      }
    };

    _this.previousButton = function () {
      return !_this.isFirstPageGroup() ? _react["default"].createElement(_Button["default"], {
        key: "previousButton",
        onClick: _this.handleClick,
        value: "prev",
        className: "ps-pagination-prev-btn"
      }, _react["default"].createElement(_polestarIcons["default"], {
        name: "chevron-circle-left"
      })) : null;
    };

    _this.nextButton = function () {
      return !_this.isLastPageGroup() ? _react["default"].createElement(_Button["default"], {
        key: "nextButton",
        onClick: _this.handleClick,
        value: "next",
        className: "ps-pagination-next-btn"
      }, _react["default"].createElement(_polestarIcons["default"], {
        name: "chevron-circle-right"
      })) : null;
    };

    _this.frontMarginPageGroup = function () {
      return !_this.isFirstPageGroup() ? [_react["default"].createElement(_Button["default"], {
        key: "1",
        value: "1",
        onClick: _this.handleClick,
        className: "ps-pagination-front-margin-btn"
      }, "1"), '...'] : null;
    };

    _this.rearMarginPageGroup = function () {
      return !_this.isLastPageGroup() ? ['...', _react["default"].createElement(_Button["default"], {
        key: _this.state.pageCount,
        value: _this.state.pageCount,
        onClick: _this.handleClick,
        className: "ps-pagination-rear-margin-btn"
      }, _this.state.pageCount)] : null;
    };

    _this.pageGroup = function () {
      var start;
      var end;
      var _this$state = _this.state,
          currentPage = _this$state.currentPage,
          pageGroupSize = _this$state.pageGroupSize,
          pageCount = _this$state.pageCount;

      if (_this.isFirstPageGroup()) {
        start = 1;
        end = _this.props.edgePageGroupSize ? _this.props.edgePageGroupSize : pageGroupSize + 1;
        end = end > _this.state.pageCount ? _this.state.pageCount : end;
      } else if (_this.isLastPageGroup()) {
        start = _this.props.edgePageGroupSize ? pageCount - _this.props.edgePageGroupSize + 1 : pageCount - pageGroupSize;
        end = pageCount;
      } else {
        var pad = Math.floor(pageGroupSize / 2);
        start = currentPage - pad;
        end = currentPage + pad;
        if (start < 2) start = 2;
        if (end >= _this.state.pageCount) end = _this.state.pageCount - 1;
      }

      var pageNumberArray = [];

      for (var i = start; i <= end; i += 1) {
        pageNumberArray.push(i);
      }

      return pageNumberArray.length > 1 ? pageNumberArray.map(function (pageNumber) {
        return _this.renderPage(pageNumber);
      }) : null;
    };

    _this.renderPage = function (pageNumber) {
      return _react["default"].createElement(_Button["default"], {
        type: pageNumber === _this.state.currentPage ? 'primary' : 'default',
        style: {
          cursor: pageNumber === _this.state.currentPage ? 'default' : ''
        },
        key: pageNumber,
        value: pageNumber,
        onClick: _this.handleClick,
        className: "ps-pagination-btn"
      }, pageNumber);
    };

    _this.renderPageCountInfo = function () {
      var displayTotalCountOnly = _this.props.displayTotalCountOnly;
      var _this$state2 = _this.state,
          totalCount = _this$state2.totalCount,
          beginRow = _this$state2.beginRow,
          endRow = _this$state2.endRow;
      return _react["default"].createElement("div", {
        className: "ps-pagination-page-count-info"
      }, displayTotalCountOnly === false ? (0, _i18n.translate)('uikit:kit.grid.page_count_info', {
        count: totalCount,
        start: beginRow,
        end: endRow
      }) : (0, _i18n.translate)('uikit:kit.grid.total_count', {
        count: totalCount
      }));
    };

    _this.renderPageSizeSelectorItem = function (pageSize) {
      return _react["default"].createElement(_Button["default"], {
        className: "ps-pagination-pageSize-selector-btn",
        type: pageSize === _this.state.pageSize ? 'primary' : 'default',
        value: "pageSizeSelector",
        "data-value": pageSize,
        key: "pageSizeSelector_".concat(pageSize),
        onClick: _this.handleClick
      }, pageSize === _PageInfo["default"].ALL ? (0, _i18n.translate)('uikit:kit.grid.page_all') : pageSize);
    };

    _this.renderPageSizeSelector = function () {
      var _this$props = _this.props,
          totalCount = _this$props.totalCount,
          pageSize = _this$props.pageSize,
          pageSizes = _this$props.pageSizes,
          showPageSizeAll = _this$props.showPageSizeAll;
      var options = [];

      if (totalCount >= pageSize) {
        options.push(_this.renderPageSizeSelectorItem(pageSizes[0]));
        options.push(_this.renderPageSizeSelectorItem(pageSizes[1]));

        if (totalCount >= pageSizes[1]) {
          options.push(_this.renderPageSizeSelectorItem(pageSizes[2]));

          if (showPageSizeAll === true) {
            options.push(_this.renderPageSizeSelectorItem(_PageInfo["default"].ALL));
          }
        }
      }

      var renderFlag = options.length > 0;
      return _react["default"].createElement("div", {
        className: "ps-pagination-pageSize-selector-wrap"
      }, _react["default"].createElement("div", {
        className: "ps-pagination-pageSize-selector"
      }, renderFlag ? (0, _i18n.translate)('uikit:kit.grid.row_per_page') : null, renderFlag ? options.map(function (option) {
        return option;
      }) : null));
    };

    _this.state = (0, _calculate["default"])(_this.props.currentPage, _this.props.totalCount, _this.props.pageSize, _this.props.pageGroupSize);
    return _this;
  }

  _createClass(Pagination, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var diff = {
        currentPage: this.props.currentPage !== nextProps.currentPage,
        totalCount: this.props.totalCount !== nextProps.totalCount,
        pageSize: this.props.pageSize !== nextProps.pageSize,
        pageGroupSize: this.props.pageGroupSize !== nextProps.pageGroupSize
      };
      var isChanged = false;
      var keys = Object.keys(diff);
      var length = keys.length;

      for (var i = 0; i < length; i += 1) {
        if (diff[keys[i]]) {
          isChanged = true;
          break;
        }
      }

      if (isChanged) {
        this.setState((0, _calculate["default"])(diff.currentPage ? nextProps.currentPage : this.state.currentPage, diff.totalCount ? nextProps.totalCount : this.state.totalCount, diff.pageSize ? nextProps.pageSize : this.state.pageSize, diff.pageGroupSize ? nextProps.pageGroupSize : this.state.pageGroupSize));
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (prevState.currentPage !== this.state.currentPage || prevState.totalCount !== this.state.totalCount || prevState.pageSize !== this.state.pageSize || prevState.pageGroupSize !== this.state.pageGroupSize || prevState.edgePageGroupSize !== this.state.edgePageGroupSize) {
        this.props.onChange(this.getCurrentState());
      }

      if (prevState.pageSize !== this.state.pageSize) {
        this.props.onPageSizeChange(this.getCurrentState());
      }
    }
  }, {
    key: "render",
    value: function render() {
      var containerStyle = {
        justifyContent: this.props.center ? 'center' : 'flex-start'
      };
      return _react["default"].createElement("div", {
        className: "ps-pagination",
        style: containerStyle
      }, this.previousButton(), this.frontMarginPageGroup(), this.pageGroup(), this.rearMarginPageGroup(), this.nextButton(), this.props.showPageInfo ? this.renderPageCountInfo() : null, this.props.showPageSizeSelector ? this.renderPageSizeSelector() : null);
    }
  }]);

  return Pagination;
}(_react["default"].Component);

Pagination.propTypes = {
  totalCount: _propTypes["default"].number.isRequired,
  currentPage: _propTypes["default"].number.isRequired,
  pageSize: _propTypes["default"].number,
  pageSizes: _propTypes["default"].array,
  pageGroupSize: _propTypes["default"].number,
  edgePageGroupSize: _propTypes["default"].number,
  showPageInfo: _propTypes["default"].bool,
  showPageSizeSelector: _propTypes["default"].bool,
  showPageSizeAll: _propTypes["default"].bool,
  displayTotalCountOnly: _propTypes["default"].bool,
  center: _propTypes["default"].bool,
  onClick: _propTypes["default"].func,
  onPageSizeChange: _propTypes["default"].func,
  onChange: _propTypes["default"].func
};
Pagination.defaultProps = {
  pageSize: 25,
  pageSizes: [25, 50, 100],
  pageGroupSize: 9,
  showPageInfo: true,
  showPageSizeSelector: true,
  showPageSizeAll: false,
  displayTotalCountOnly: false,
  center: false,
  onClick: function onClick() {},
  onPageSizeChange: function onPageSizeChange() {},
  onChange: function onChange() {}
};
var _default = Pagination;
exports["default"] = _default;