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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import debounce from 'lodash/debounce';
import isObject from 'lodash/isObject';
import defaultTo from 'lodash/defaultTo';
import isNil from 'lodash/isNil';
import KeyCode from '../../../es/_util/KeyCode';
import { getConfig } from '../../../es/configure';
import isString from 'lodash/isString';
import DataSetComponent from '../data-set/DataSetComponent';
import ObserverSelect from '../select/Select';
import ObserverNumberField from '../number-field/NumberField';
import Button from '../button';
import autobind from '../_util/autobind';
import { $l } from '../locale-context';
import Pager from './Pager';
import Icon from '../icon';
import { SizeChangerPosition } from './enum';

function defaultItemRender(page, type) {
  switch (type) {
    case 'first':
      return React.createElement(Icon, {
        type: "first_page"
      });

    case 'last':
      return React.createElement(Icon, {
        type: "last_page"
      });

    case 'prev':
      return React.createElement(Icon, {
        type: "navigate_before"
      });

    case 'next':
      return React.createElement(Icon, {
        type: "navigate_next"
      });

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

    default:
      return page;
  }
}

var Pagination =
/*#__PURE__*/
function (_DataSetComponent) {
  _inherits(Pagination, _DataSetComponent);

  var _super = _createSuper(Pagination);

  function Pagination() {
    var _this;

    _classCallCheck(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 = debounce(function (value) {
      if (!isNil(value)) {
        _this.handlePagerClick(value);
      }
    }, 200);
    return _this;
  }

  _createClass(Pagination, [{
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      var globalPagination = getConfig('pagination');
      return _objectSpread({}, _get(_getPrototypeOf(Pagination.prototype), "getObservableProps", this).call(this, props, context), {
        page: defaultTo('page' in props ? props.page : globalPagination && globalPagination.page, 1),
        pageSize: defaultTo('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: defaultTo('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.ENTER || e.type === 'click') {
        this.jumpPage(this.goInputText);
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return omit(_get(_getPrototypeOf(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 = ObserverSelect.Option;
      return this.observableProps.pageSizeOptions.map(function (option) {
        return React.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 = isString(type) ? "".concat(prefixCls, "-pager-").concat(type) : "";
      return React.createElement(Pager, {
        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.createElement(ObserverSelect, {
          searchable: false,
          key: "size-select",
          className: classNames("".concat(prefixCls, "-size-changer"), _defineProperty({}, "".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.createElement("span", {
          className: "".concat(prefixCls, "-perpage"),
          key: "size-info"
        }, $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.createElement("span", {
          key: "total",
          className: "".concat(prefixCls, "-page-info")
        }, showTotal(total, [pageSize * (page - 1) + 1, Math.min(pageSize * page, total)]));
      }

      return React.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 (isObject(showQuickJumper) && 'goButton' in showQuickJumper) {
        var goButton = showQuickJumper.goButton;
        gotoButton = typeof goButton === 'boolean' ? React.createElement(Button, {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo,
          disabled: disabled
        }, $l('Pagination', 'jump_to_confirm')) : React.createElement("span", {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo
        }, goButton);
      }

      return React.createElement("div", {
        className: "".concat(prefixCls, "-quick-jumper")
      }, $l('Pagination', 'jump_to'), React.createElement(ObserverNumberField, {
        value: this.pageInput,
        disabled: disabled,
        min: 1,
        onChange: this.handleJumpChange,
        onInput: this.handleJump
      }), $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.createElement("nav", _extends({}, this.getMergedProps()), this.getPager(page - 1, 'prev', false, page === 1), React.createElement("li", {
          className: "".concat(prefixCls, "-simple-pager")
        }, React.createElement(ObserverNumberField, {
          value: page,
          min: 1,
          onChange: this.handleJumpChange,
          onInput: this.handleJump
        }), React.createElement("span", null, "\uFF0F"), totalPage), this.getPager(page + 1, 'next', false, page === totalPage));
      }

      return React.createElement("nav", _extends({}, this.getMergedProps()), children, sizeChangerPosition === 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 === 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;
}(DataSetComponent);

Pagination.displayName = 'Pagination';
Pagination.propTypes = _objectSpread({
  total: PropTypes.number,
  page: PropTypes.number,
  pageSize: PropTypes.number,
  onChange: PropTypes.func,
  itemRender: PropTypes.func,
  sizeChangerPosition: PropTypes.oneOf([SizeChangerPosition.left, SizeChangerPosition.right]),
  sizeChangerOptionRenderer: PropTypes.func,
  showSizeChanger: PropTypes.bool,
  showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  showSizeChangerLabel: PropTypes.bool,
  showTotal: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  showPager: PropTypes.bool,
  simple: PropTypes.bool
}, DataSetComponent.propTypes);
Pagination.defaultProps = {
  suffixCls: 'pagination',
  sizeChangerPosition: SizeChangerPosition.left,
  sizeChangerOptionRenderer: function sizeChangerOptionRenderer(_ref) {
    var text = _ref.text;
    return text;
  },
  hideOnSinglePage: false,
  showSizeChanger: true,
  showQuickJumper: false,
  showSizeChangerLabel: true,
  showTotal: true,
  simple: false
};

__decorate([observable], Pagination.prototype, "pageInput", void 0);

__decorate([computed], Pagination.prototype, "pageSize", null);

__decorate([computed], Pagination.prototype, "page", null);

__decorate([computed], Pagination.prototype, "total", null);

__decorate([computed], Pagination.prototype, "totalPage", null);

__decorate([autobind], Pagination.prototype, "handlePageSizeBeforeChange", null);

__decorate([autobind], Pagination.prototype, "handlePageSizeChange", null);

__decorate([action], Pagination.prototype, "handleChange", null);

__decorate([autobind, action], Pagination.prototype, "handleJump", null);

__decorate([autobind], Pagination.prototype, "handleJumpChange", null);

__decorate([autobind], Pagination.prototype, "handleJumpGo", null);

__decorate([action], Pagination.prototype, "getOptions", null);

Pagination = __decorate([observer], Pagination);
export default Pagination;
//# sourceMappingURL=Pagination.js.map