choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
623 lines (536 loc) • 21.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import { action, computed, observable, runInAction } 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 noop from 'lodash/noop';
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 () {
var _handleChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(page, pageSize) {
var _this = this;
var _this$props, dataSet, onChange, _this$props$beforeCha, beforeChange;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this$props = this.props, dataSet = _this$props.dataSet, onChange = _this$props.onChange, _this$props$beforeCha = _this$props.beforeChange, beforeChange = _this$props$beforeCha === void 0 ? noop : _this$props$beforeCha;
_context.t0 = this.pageSize !== pageSize;
if (!_context.t0) {
_context.next = 7;
break;
}
_context.next = 5;
return beforeChange(page, pageSize);
case 5:
_context.t1 = _context.sent;
_context.t0 = _context.t1 !== false;
case 7:
if (!_context.t0) {
_context.next = 11;
break;
}
runInAction(function () {
_this.observableProps.pageSize = pageSize;
_this.observableProps.page = 1;
if (dataSet) {
dataSet.pageSize = pageSize;
dataSet.currentPage = 1;
dataSet.query(1, undefined, true);
}
});
_context.next = 12;
break;
case 11:
runInAction(function () {
_this.observableProps.page = page;
});
case 12:
if (onChange) {
onChange(page, pageSize);
}
case 13:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handleChange(_x, _x2) {
return _handleChange.apply(this, arguments);
}
return handleChange;
}()
}, {
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 () {
var _jumpPage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(page) {
var _this$props2, dataSet, _this$props2$beforeCh, beforeChange;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_this$props2 = this.props, dataSet = _this$props2.dataSet, _this$props2$beforeCh = _this$props2.beforeChange, beforeChange = _this$props2$beforeCh === void 0 ? noop : _this$props2$beforeCh;
_context2.next = 3;
return beforeChange(page, this.pageSize);
case 3:
_context2.t0 = _context2.sent;
if (!(_context2.t0 !== false)) {
_context2.next = 7;
break;
}
if (dataSet) {
dataSet.page(page);
}
this.handleChange(page, this.pageSize);
case 7:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function jumpPage(_x3) {
return _jumpPage.apply(this, arguments);
}
return jumpPage;
}()
}, {
key: "handleJumpChange",
value: function handleJumpChange(value) {
var page = this.page,
totalPage = this.totalPage,
_this$props3 = this.props,
showQuickJumper = _this$props3.showQuickJumper,
simple = _this$props3.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$props4 = this.props,
_this$props4$itemRend = _this$props4.itemRender,
itemRender = _this$props4$itemRend === void 0 ? defaultItemRender : _this$props4$itemRend,
_this$props4$disabled = _this$props4.disabled,
disabled = _this$props4$disabled === void 0 ? false : _this$props4$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$props5 = this.props,
showSizeChangerLabel = _this$props5.showSizeChangerLabel,
showSizeChanger = _this$props5.showSizeChanger,
sizeChangerOptionRenderer = _this$props5.sizeChangerOptionRenderer,
disabled = _this$props5.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,
dataSet = this.dataSet;
var from = pageSize * (page - 1) + 1;
var to = Math.min(pageSize * page, total);
var counting = dataSet && dataSet.counting;
if (typeof showTotal === 'function') {
return /*#__PURE__*/React.createElement("span", {
key: "total",
className: "".concat(prefixCls, "-page-info")
}, showTotal(total, [from, to], counting !== undefined));
}
return /*#__PURE__*/React.createElement("span", {
key: "total",
className: "".concat(prefixCls, "-page-info")
}, from, " - ", to, " / ", counting ? '...' : total);
}
/**
* 渲染快速跳至
*/
}, {
key: "renderQuickGo",
value: function renderQuickGo() {
var prefixCls = this.prefixCls,
page = this.page;
var _this$props6 = this.props,
disabled = _this$props6.disabled,
showQuickJumper = _this$props6.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$props7 = this.props,
hideOnSinglePage = _this$props7.hideOnSinglePage,
simple = _this$props7.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$props8 = this.props,
children = _this$props8.children,
sizeChangerPosition = _this$props8.sizeChangerPosition,
showTotal = _this$props8.showTotal,
showPager = _this$props8.showPager,
showQuickJumper = _this$props8.showQuickJumper,
quickJumperPosition = _this$props8.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([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