choerodon-ui/pro/lib/pagination/Pagination.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

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

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

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _configure = require("../../../lib/configure");

var _isString = _interopRequireDefault(require("lodash/isString"));

var _DataSetComponent2 = _interopRequireDefault(require("../data-set/DataSetComponent"));

var _Select = _interopRequireDefault(require("../select/Select"));

var _NumberField = _interopRequireDefault(require("../number-field/NumberField"));

var _button = _interopRequireDefault(require("../button"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _localeContext = require("../locale-context");

var _Pager = _interopRequireDefault(require("./Pager"));

var _icon = _interopRequireDefault(require("../icon"));

var _enum = require("./enum");

function _createSuper(Derived) {
  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;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function defaultItemRender(page, type) {
  switch (type) {
    case 'first':
      return _react["default"].createElement(_icon["default"], {
        type: "first_page"
      });

    case 'last':
      return _react["default"].createElement(_icon["default"], {
        type: "last_page"
      });

    case 'prev':
      return _react["default"].createElement(_icon["default"], {
        type: "navigate_before"
      });

    case 'next':
      return _react["default"].createElement(_icon["default"], {
        type: "navigate_next"
      });

    case 'jump-prev':
    case 'jump-next':
      return '•••';

    default:
      return page;
  }
}

var Pagination =
/*#__PURE__*/
function (_DataSetComponent) {
  (0, _inherits2["default"])(Pagination, _DataSetComponent);

  var _super = _createSuper(Pagination);

  function Pagination() {
    var _this;

    (0, _classCallCheck2["default"])(this, Pagination);
    _this = _super.apply(this, arguments);

    _this.handlePagerClick = function (page) {
      var dataSet = _this.props.dataSet;

      if (dataSet) {
        dataSet.page(page);
      }

      _this.handleChange(page, _this.pageSize);
    };

    _this.jumpPage = (0, _debounce["default"])(function (value) {
      if (!(0, _isNil["default"])(value)) {
        _this.handlePagerClick(value);
      }
    }, 200);
    return _this;
  }

  (0, _createClass2["default"])(Pagination, [{
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      var globalPagination = (0, _configure.getConfig)('pagination');
      return (0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Pagination.prototype), "getObservableProps", this).call(this, props, context), {
        page: (0, _defaultTo["default"])('page' in props ? props.page : globalPagination && globalPagination.page, 1),
        pageSize: (0, _defaultTo["default"])('pageSize' in props ? props.pageSize : globalPagination && globalPagination.pageSize, 10),
        total: props.total,
        pageSizeOptions: props.pageSizeOptions || globalPagination && globalPagination.pageSizeOptions || ['10', '20', '50', '100'],
        pageSizeEditable: 'pageSizeEditable' in props ? props.pageSizeEditable : globalPagination && globalPagination.pageSizeEditable,
        maxPageSize: (0, _defaultTo["default"])('maxPageSize' in props ? props.maxPageSize : globalPagination && globalPagination.maxPageSize, 100)
      });
    }
  }, {
    key: "handlePageSizeBeforeChange",
    value: function handlePageSizeBeforeChange(value) {
      if (value < 1 || value > this.observableProps.maxPageSize) {
        return false;
      }

      var dataSet = this.props.dataSet;

      if (dataSet) {
        return dataSet.modifiedCheck();
      }

      return true;
    }
  }, {
    key: "handlePageSizeChange",
    value: function handlePageSizeChange(value) {
      this.handleChange(this.page, Number(value));
    }
  }, {
    key: "handleChange",
    value: function handleChange(page, pageSize) {
      var _this$props = this.props,
          dataSet = _this$props.dataSet,
          onChange = _this$props.onChange;

      if (this.pageSize !== pageSize) {
        this.observableProps.pageSize = pageSize;
        this.observableProps.page = 1;

        if (dataSet) {
          dataSet.pageSize = pageSize;
          dataSet.currentPage = 1;
          dataSet.query();
        }
      } else {
        this.observableProps.page = page;
      }

      if (onChange) {
        onChange(page, pageSize);
      }
    }
  }, {
    key: "getValidValue",
    value: function getValidValue(value) {
      var page = this.page,
          totalPage = this.totalPage;
      value = Number(value);

      if (isNaN(value)) {
        value = page;
      }

      if (value > totalPage) {
        value = totalPage;
      }

      return value;
    }
    /**
     * 快速跳至 input 事件
     * @param e
     */

  }, {
    key: "handleJump",
    value: function handleJump(e) {
      var value = e.target.value;
      var page = this.page,
          totalPage = this.totalPage,
          showQuickJumper = this.props.showQuickJumper;
      value = Number(value);

      if (isNaN(value)) {
        value = page;
      }

      if (value > totalPage) {
        value = totalPage;
      }

      this.goInputText = value;

      if (showQuickJumper) {
        return;
      }

      this.jumpPage(value);
    }
  }, {
    key: "handleJumpChange",
    value: function handleJumpChange(value) {
      var page = this.page,
          totalPage = this.totalPage,
          showQuickJumper = this.props.showQuickJumper;
      value = Number(value);

      if (isNaN(value)) {
        value = page;
      }

      if (value > totalPage) {
        value = totalPage;
      }

      if (showQuickJumper && value !== '') {
        this.jumpPage(value);
        this.pageInput = '';
      }
    }
  }, {
    key: "handleJumpGo",
    value: function handleJumpGo(e) {
      if (e.keyCode === _KeyCode["default"].ENTER || e.type === 'click') {
        this.jumpPage(this.goInputText);
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(Pagination.prototype), "getOtherProps", this).call(this), ['total', 'page', 'pageSize', 'maxPageSize', 'pageSizeEditable', 'onChange', 'pageSizeOptions', 'itemRender', 'showSizeChanger', 'showQuickJumper', 'showSizeChangerLabel', 'showTotal', 'showPager', 'sizeChangerPosition', 'sizeChangerOptionRenderer', 'hideOnSinglePage', 'simple']);
    }
  }, {
    key: "getOptions",
    value: function getOptions() {
      var Option = _Select["default"].Option;
      return this.observableProps.pageSizeOptions.map(function (option) {
        return _react["default"].createElement(Option, {
          key: option,
          value: option
        }, option);
      });
    }
  }, {
    key: "getPager",
    value: function getPager(page, type) {
      var active = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var disabledSender = arguments.length > 3 ? arguments[3] : undefined;
      var prefixCls = this.prefixCls,
          _this$props2 = this.props,
          _this$props2$itemRend = _this$props2.itemRender,
          itemRender = _this$props2$itemRend === void 0 ? defaultItemRender : _this$props2$itemRend,
          _this$props2$disabled = _this$props2.disabled,
          disabled = _this$props2$disabled === void 0 ? false : _this$props2$disabled;
      var disabledValue = disabledSender || disabled;
      var classNamePager = (0, _isString["default"])(type) ? "".concat(prefixCls, "-pager-").concat(type) : "";
      return _react["default"].createElement(_Pager["default"], {
        key: type === 'page' ? page : type,
        page: page,
        active: active,
        type: type,
        onClick: this.handlePagerClick,
        renderer: itemRender,
        disabled: disabledValue,
        className: "".concat(prefixCls, "-pager ").concat(classNamePager)
      });
    }
  }, {
    key: "renderPagers",
    value: function renderPagers(page) {
      var totalPage = this.totalPage;
      var bufferSize = 1;
      var pagerList = [];

      if (totalPage <= 3 + bufferSize * 2) {
        for (var i = 1; i <= totalPage; i += 1) {
          pagerList.push(this.getPager(i, 'page', page === i));
        }
      } else {
        var left = Math.max(1, page - bufferSize);
        var right = Math.min(totalPage, page + bufferSize);

        if (page - 1 <= bufferSize) {
          right = 1 + bufferSize * 2;
        }

        if (totalPage - page <= bufferSize) {
          left = totalPage - bufferSize * 2;
        }

        for (var _i = left; _i <= right; _i++) {
          pagerList.push(this.getPager(_i, 'page', page === _i));
        }

        if (page - 1 >= bufferSize * 2 && page !== 1 + 2) {
          pagerList.unshift(this.getPager(Math.max(page - 5, 1), 'jump-prev'));
        }

        if (totalPage - page >= bufferSize * 2 && page !== totalPage - 2) {
          pagerList.push(this.getPager(Math.min(page + 5, totalPage), 'jump-next'));
        }

        if (left !== 1) {
          pagerList.unshift(this.getPager(1, 'page', page === 1));
        }

        if (totalPage > 1 && right !== totalPage) {
          pagerList.push(this.getPager(totalPage, 'page', page === totalPage));
        }
      }

      return pagerList;
    }
  }, {
    key: "renderSizeChange",
    value: function renderSizeChange(pageSize) {
      var _this$props3 = this.props,
          showSizeChangerLabel = _this$props3.showSizeChangerLabel,
          showSizeChanger = _this$props3.showSizeChanger,
          sizeChangerOptionRenderer = _this$props3.sizeChangerOptionRenderer,
          disabled = _this$props3.disabled;

      if (showSizeChanger) {
        var pageSizeEditable = this.observableProps.pageSizeEditable;
        var prefixCls = this.prefixCls;

        var select = _react["default"].createElement(_Select["default"], {
          searchable: false,
          key: "size-select",
          className: (0, _classnames["default"])("".concat(prefixCls, "-size-changer"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-size-editable"), pageSizeEditable)),
          disabled: disabled,
          onBeforeChange: this.handlePageSizeBeforeChange,
          onChange: this.handlePageSizeChange,
          value: String(pageSize),
          clearButton: false,
          renderer: sizeChangerOptionRenderer,
          optionRenderer: sizeChangerOptionRenderer,
          combo: pageSizeEditable,
          restrict: "0-9"
        }, this.getOptions());

        return showSizeChangerLabel ? [_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-perpage"),
          key: "size-info"
        }, (0, _localeContext.$l)('Pagination', 'records_per_page')), select] : select;
      }
    }
  }, {
    key: "renderTotal",
    value: function renderTotal(pageSize, page, total) {
      var prefixCls = this.prefixCls,
          showTotal = this.props.showTotal;

      if (typeof showTotal === 'function') {
        return _react["default"].createElement("span", {
          key: "total",
          className: "".concat(prefixCls, "-page-info")
        }, showTotal(total, [pageSize * (page - 1) + 1, Math.min(pageSize * page, total)]));
      }

      return _react["default"].createElement("span", {
        key: "total",
        className: "".concat(prefixCls, "-page-info")
      }, pageSize * (page - 1) + 1, " - ", Math.min(pageSize * page, total), " / ", total);
    }
    /**
     * 渲染快速跳至
     */

  }, {
    key: "renderQuickGo",
    value: function renderQuickGo() {
      var prefixCls = this.prefixCls;
      var _this$props4 = this.props,
          disabled = _this$props4.disabled,
          showQuickJumper = _this$props4.showQuickJumper;
      var gotoButton = null;

      if ((0, _isObject["default"])(showQuickJumper) && 'goButton' in showQuickJumper) {
        var goButton = showQuickJumper.goButton;
        gotoButton = typeof goButton === 'boolean' ? _react["default"].createElement(_button["default"], {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo,
          disabled: disabled
        }, (0, _localeContext.$l)('Pagination', 'jump_to_confirm')) : _react["default"].createElement("span", {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo
        }, goButton);
      }

      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-quick-jumper")
      }, (0, _localeContext.$l)('Pagination', 'jump_to'), _react["default"].createElement(_NumberField["default"], {
        value: this.pageInput,
        disabled: disabled,
        min: 1,
        onChange: this.handleJumpChange,
        onInput: this.handleJump
      }), (0, _localeContext.$l)('Pagination', 'page'), gotoButton);
    }
  }, {
    key: "render",
    value: function render() {
      var total = this.total,
          pageSize = this.pageSize,
          page = this.page,
          _this$props5 = this.props,
          hideOnSinglePage = _this$props5.hideOnSinglePage,
          simple = _this$props5.simple,
          prefixCls = this.prefixCls;

      if (total === undefined || pageSize === undefined || page === undefined) {
        return null;
      }

      if (hideOnSinglePage === true && total <= pageSize) {
        return null;
      }

      var totalPage = this.totalPage,
          _this$props6 = this.props,
          children = _this$props6.children,
          sizeChangerPosition = _this$props6.sizeChangerPosition,
          showTotal = _this$props6.showTotal,
          showPager = _this$props6.showPager,
          showQuickJumper = _this$props6.showQuickJumper;
      var sizeChanger = this.renderSizeChange(pageSize);

      if (simple) {
        return _react["default"].createElement("nav", (0, _extends2["default"])({}, this.getMergedProps()), this.getPager(page - 1, 'prev', false, page === 1), _react["default"].createElement("li", {
          className: "".concat(prefixCls, "-simple-pager")
        }, _react["default"].createElement(_NumberField["default"], {
          value: page,
          min: 1,
          onChange: this.handleJumpChange,
          onInput: this.handleJump
        }), _react["default"].createElement("span", null, "\uFF0F"), totalPage), this.getPager(page + 1, 'next', false, page === totalPage));
      }

      return _react["default"].createElement("nav", (0, _extends2["default"])({}, this.getMergedProps()), children, sizeChangerPosition === _enum.SizeChangerPosition.left && sizeChanger, showTotal && this.renderTotal(pageSize, page, total), this.getPager(1, 'first', false, page === 1), this.getPager(page - 1, 'prev', false, page === 1), showPager && this.renderPagers(page), this.getPager(page + 1, 'next', false, page === totalPage), this.getPager(totalPage, 'last', false, page === totalPage), sizeChangerPosition === _enum.SizeChangerPosition.right && sizeChanger, showQuickJumper && this.renderQuickGo());
    }
  }, {
    key: "pageSize",
    get: function get() {
      var _this$observableProps = this.observableProps,
          dataSet = _this$observableProps.dataSet,
          pageSize = _this$observableProps.pageSize;

      if (dataSet) {
        return dataSet.pageSize;
      }

      return pageSize;
    }
  }, {
    key: "page",
    get: function get() {
      var _this$observableProps2 = this.observableProps,
          dataSet = _this$observableProps2.dataSet,
          page = _this$observableProps2.page;

      if (dataSet) {
        return dataSet.currentPage;
      }

      return page;
    }
  }, {
    key: "total",
    get: function get() {
      var _this$observableProps3 = this.observableProps,
          dataSet = _this$observableProps3.dataSet,
          total = _this$observableProps3.total;

      if (dataSet) {
        return dataSet.totalCount;
      }

      return total;
    }
  }, {
    key: "totalPage",
    get: function get() {
      var dataSet = this.observableProps.dataSet;
      var total = this.total,
          pageSize = this.pageSize;

      if (dataSet) {
        return dataSet.totalPage;
      }

      if (total !== undefined && pageSize !== undefined) {
        return Math.ceil(total / pageSize);
      }

      return 1;
    }
  }]);
  return Pagination;
}(_DataSetComponent2["default"]);

Pagination.displayName = 'Pagination';
Pagination.propTypes = (0, _objectSpread2["default"])({
  total: _propTypes["default"].number,
  page: _propTypes["default"].number,
  pageSize: _propTypes["default"].number,
  onChange: _propTypes["default"].func,
  itemRender: _propTypes["default"].func,
  sizeChangerPosition: _propTypes["default"].oneOf([_enum.SizeChangerPosition.left, _enum.SizeChangerPosition.right]),
  sizeChangerOptionRenderer: _propTypes["default"].func,
  showSizeChanger: _propTypes["default"].bool,
  showQuickJumper: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
  showSizeChangerLabel: _propTypes["default"].bool,
  showTotal: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].func]),
  showPager: _propTypes["default"].bool,
  simple: _propTypes["default"].bool
}, _DataSetComponent2["default"].propTypes);
Pagination.defaultProps = {
  suffixCls: 'pagination',
  sizeChangerPosition: _enum.SizeChangerPosition.left,
  sizeChangerOptionRenderer: function sizeChangerOptionRenderer(_ref) {
    var text = _ref.text;
    return text;
  },
  hideOnSinglePage: false,
  showSizeChanger: true,
  showQuickJumper: false,
  showSizeChangerLabel: true,
  showTotal: true,
  simple: false
};
(0, _tslib.__decorate)([_mobx.observable], Pagination.prototype, "pageInput", void 0);
(0, _tslib.__decorate)([_mobx.computed], Pagination.prototype, "pageSize", null);
(0, _tslib.__decorate)([_mobx.computed], Pagination.prototype, "page", null);
(0, _tslib.__decorate)([_mobx.computed], Pagination.prototype, "total", null);
(0, _tslib.__decorate)([_mobx.computed], Pagination.prototype, "totalPage", null);
(0, _tslib.__decorate)([_autobind["default"]], Pagination.prototype, "handlePageSizeBeforeChange", null);
(0, _tslib.__decorate)([_autobind["default"]], Pagination.prototype, "handlePageSizeChange", null);
(0, _tslib.__decorate)([_mobx.action], Pagination.prototype, "handleChange", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], Pagination.prototype, "handleJump", null);
(0, _tslib.__decorate)([_autobind["default"]], Pagination.prototype, "handleJumpChange", null);
(0, _tslib.__decorate)([_autobind["default"]], Pagination.prototype, "handleJumpGo", null);
(0, _tslib.__decorate)([_mobx.action], Pagination.prototype, "getOptions", null);
Pagination = (0, _tslib.__decorate)([_mobxReact.observer], Pagination);
var _default = Pagination;
exports["default"] = _default;
//# sourceMappingURL=Pagination.js.map