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 _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import isObject from 'lodash/isObject';
import defaultTo from 'lodash/defaultTo';
import isString from 'lodash/isString';
import KeyCode from '../../../es/_util/KeyCode';
import { Size } from '../../../es/_util/enum';
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 { QuickJumperPosition, SizeChangerPosition } from './enum';
import { ValueChangeAction } from '../text-field/enum';
import QuickJumper from './QuickJumper';

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

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

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

    case 'next':
      return /*#__PURE__*/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() {
    _classCallCheck(this, Pagination);

    return _super.apply(this, arguments);
  }

  _createClass(Pagination, [{
    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;
    }
  }, {
    key: "next",
    get: function get() {
      var _this$total = this.total,
          total = _this$total === void 0 ? 0 : _this$total,
          pageSize = this.pageSize,
          page = this.page;
      return page < Math.floor((total - 1) / pageSize) + 1;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      var globalPagination = this.getContextConfig('pagination');
      var pageSizeOptions = props.pageSizeOptions || globalPagination && globalPagination.pageSizeOptions || ['10', '20', '50', '100'];
      var maxPageSize = Math.max.apply(Math, [defaultTo('maxPageSize' in props ? props.maxPageSize : globalPagination && globalPagination.maxPageSize, 100)].concat(_toConsumableArray(pageSizeOptions)));
      return _objectSpread(_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: pageSizeOptions,
        pageSizeEditable: 'pageSizeEditable' in props ? props.pageSizeEditable : globalPagination && globalPagination.pageSizeEditable,
        maxPageSize: maxPageSize
      });
    }
  }, {
    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(1, undefined, true);
        }
      } else {
        this.observableProps.page = page;
      }

      if (onChange) {
        onChange(page, pageSize);
      }
    }
  }, {
    key: "handlePagerClick",
    value: function handlePagerClick(page) {
      this.jumpPage(page);
    }
  }, {
    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;
    }
  }, {
    key: "jumpPage",
    value: function jumpPage(page) {
      var dataSet = this.props.dataSet;

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

      this.handleChange(page, this.pageSize);
    }
  }, {
    key: "handleJumpChange",
    value: function handleJumpChange(value) {
      var page = this.page,
          totalPage = this.totalPage,
          _this$props2 = this.props,
          showQuickJumper = _this$props2.showQuickJumper,
          simple = _this$props2.simple;
      value = Number(value);

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

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

      if (simple) {
        this.jumpPage(value);
      } else if (showQuickJumper) {
        if (isObject(showQuickJumper) && showQuickJumper.goButton) {
          this.pageInput = value;
        } else {
          this.jumpPage(value);
        }
      }
    }
  }, {
    key: "handleJumpGo",
    value: function handleJumpGo(e) {
      if (e.keyCode === KeyCode.ENTER || e.type === 'click') {
        var pageInput = this.pageInput;

        if (pageInput) {
          this.jumpPage(pageInput);
          this.pageInput = '';
        }
      }
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(Pagination.prototype), "getOmitPropsKeys", this).call(this).concat(['total', 'page', 'pageSize', 'maxPageSize', 'pageSizeEditable', 'onChange', 'pageSizeOptions', 'itemRender', 'showSizeChanger', 'showQuickJumper', 'showSizeChangerLabel', 'showTotal', 'showPager', 'sizeChangerPosition', 'sizeChangerOptionRenderer', 'hideOnSinglePage', 'simple', 'quickJumperPosition']);
    }
  }, {
    key: "getOptions",
    value: function getOptions() {
      var Option = ObserverSelect.Option;
      return this.observableProps.pageSizeOptions.map(function (option) {
        return /*#__PURE__*/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$props3 = this.props,
          _this$props3$itemRend = _this$props3.itemRender,
          itemRender = _this$props3$itemRend === void 0 ? defaultItemRender : _this$props3$itemRend,
          _this$props3$disabled = _this$props3.disabled,
          disabled = _this$props3$disabled === void 0 ? false : _this$props3$disabled;
      var disabledValue = disabledSender || disabled;
      var classNamePager = isString(type) ? "".concat(prefixCls, "-pager-").concat(type) : "";
      return /*#__PURE__*/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$props4 = this.props,
          showSizeChangerLabel = _this$props4.showSizeChangerLabel,
          showSizeChanger = _this$props4.showSizeChanger,
          sizeChangerOptionRenderer = _this$props4.sizeChangerOptionRenderer,
          disabled = _this$props4.disabled;

      if (showSizeChanger) {
        var pageSizeEditable = this.observableProps.pageSizeEditable;
        var prefixCls = this.prefixCls;
        var select = /*#__PURE__*/React.createElement(ObserverSelect, {
          isFlat: true,
          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",
          size: Size.small
        }, this.getOptions());
        return showSizeChangerLabel ? [/*#__PURE__*/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;
      var from = pageSize * (page - 1) + 1;
      var to = Math.min(pageSize * page, total);

      if (typeof showTotal === 'function') {
        return /*#__PURE__*/React.createElement("span", {
          key: "total",
          className: "".concat(prefixCls, "-page-info")
        }, showTotal(total, [from, to]));
      }

      return /*#__PURE__*/React.createElement("span", {
        key: "total",
        className: "".concat(prefixCls, "-page-info")
      }, from, " - ", to, " / ", total);
    }
    /**
     * 渲染快速跳至
     */

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

      if (isObject(showQuickJumper) && showQuickJumper.goButton) {
        var goButton = showQuickJumper.goButton;
        gotoButton = typeof goButton === 'boolean' ? /*#__PURE__*/React.createElement(Button, {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo,
          disabled: disabled,
          size: Size.small
        }, $l('Pagination', 'jump_to_confirm')) : /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-go-button"),
          onClick: this.handleJumpGo,
          onKeyUp: this.handleJumpGo
        }, goButton);
      }

      return /*#__PURE__*/React.createElement(QuickJumper, {
        prefixCls: prefixCls,
        value: this.pageInput || page,
        onChange: this.handleJumpChange,
        disabled: disabled,
        gotoButton: gotoButton
      });
    }
  }, {
    key: "render",
    value: function render() {
      var total = this.total,
          pageSize = this.pageSize,
          page = this.page,
          _this$props6 = this.props,
          hideOnSinglePage = _this$props6.hideOnSinglePage,
          simple = _this$props6.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$props7 = this.props,
          children = _this$props7.children,
          sizeChangerPosition = _this$props7.sizeChangerPosition,
          showTotal = _this$props7.showTotal,
          showPager = _this$props7.showPager,
          showQuickJumper = _this$props7.showQuickJumper,
          quickJumperPosition = _this$props7.quickJumperPosition;
      var sizeChanger = this.renderSizeChange(pageSize);

      if (simple) {
        return /*#__PURE__*/React.createElement("nav", _extends({}, this.getMergedProps()), this.getPager(page - 1, 'prev', false, page === 1), /*#__PURE__*/React.createElement("li", {
          className: "".concat(prefixCls, "-simple-pager")
        }, /*#__PURE__*/React.createElement(ObserverNumberField, {
          value: page,
          min: 1,
          onChange: this.handleJumpChange,
          valueChangeAction: ValueChangeAction.input,
          wait: 200
        }), /*#__PURE__*/React.createElement("span", null, "\uFF0F"), totalPage), this.getPager(page + 1, 'next', false, !this.next));
      }

      return /*#__PURE__*/React.createElement("nav", _extends({}, this.getMergedProps()), children, sizeChangerPosition === SizeChangerPosition.left && sizeChanger, showQuickJumper && quickJumperPosition === QuickJumperPosition.left && this.renderQuickGo(), 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, !this.next), this.getPager(totalPage, 'last', false, !this.next), sizeChangerPosition === SizeChangerPosition.right && sizeChanger, showQuickJumper && quickJumperPosition === QuickJumperPosition.right && this.renderQuickGo());
    }
  }]);

  return Pagination;
}(DataSetComponent);

Pagination.displayName = 'Pagination';
Pagination.defaultProps = {
  suffixCls: 'pagination',
  sizeChangerPosition: SizeChangerPosition.left,
  quickJumperPosition: QuickJumperPosition.right,
  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([computed], Pagination.prototype, "next", null);

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

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

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

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

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

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

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

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