ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
150 lines (149 loc) • 7.57 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React from 'react';
import ReactDOM from 'react-dom';
import Selector from '../selector/dropdown-menu';
import { UkeComponent } from '../utils/uke-component';
import { getScreenHeight } from '../utils/screen';
import { getScrollTop } from '../utils/scroll';
import { getElementTop } from '../utils/get-elem-offset';
var Seperator = function () { return React.createElement("span", { className: "ms5" }, ".."); };
var Pagination = /** @class */ (function (_super) {
__extends(Pagination, _super);
function Pagination() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.dropdownPosition = 'bottom';
_this.getSelectorOptions = function () {
var pageListData = [10, 20, 30, 40, 50, 100];
var pageListMap = {};
pageListData.forEach(function (item) {
pageListMap[item] = item + " " + _this.$T_UKE('条/页');
});
return pageListMap;
};
return _this;
}
Pagination.prototype.componentDidMount = function () {
this.node = ReactDOM.findDOMNode(this);
};
Pagination.prototype.componentDidUpdate = function () {
if (!this.node)
return;
var offsetTop = getElementTop(this.node);
if (getScreenHeight() < offsetTop + getScrollTop() + 200) {
this.dropdownPosition = 'top';
}
};
Pagination.prototype.paginInfoTranslate = function (nextPaginInfo) {
var _a;
var _b = this.props, pagingInfo = _b.pagingInfo, infoMapper = _b.infoMapper;
var pIdx = infoMapper.pIdx, pSize = infoMapper.pSize, total = infoMapper.total, active = infoMapper.active;
return nextPaginInfo ? (_a = {},
_a[pIdx] = +nextPaginInfo.pIdx,
_a[pSize] = +nextPaginInfo.pSize,
_a[total] = +nextPaginInfo.total,
_a[active] = !!nextPaginInfo.active,
_a) : {
pIdx: +pagingInfo[pIdx],
pSize: +pagingInfo[pSize],
total: +pagingInfo[total],
active: !!pagingInfo[active],
};
};
Pagination.prototype.changePagin = function (nextIdx, nextSize) {
var pagingInfo = this.paginInfoTranslate();
var onPagin = this.props.onPagin;
var pIdx = pagingInfo.pIdx, _a = pagingInfo.pSize, pSize = _a === void 0 ? 0 : _a, _b = pagingInfo.total, total = _b === void 0 ? 0 : _b;
if (nextIdx === pIdx && pSize === nextSize)
return;
if ((nextIdx < 0 || (nextIdx * pSize) > total - 1 || pIdx === nextIdx) && !nextSize)
return;
var nextPagin = Object.assign({}, pagingInfo, {
pIdx: nextSize ? 0 : +(nextIdx),
pSize: +(nextSize) || pSize
});
onPagin(this.paginInfoTranslate(nextPagin));
};
Pagination.prototype.render = function () {
var _this = this;
var _a = this.props, isNeedHelper = _a.isNeedHelper, displayTotal = _a.displayTotal, lastBtnCount = _a.lastBtnCount, prevBtnCount = _a.prevBtnCount;
var pagingInfo = this.paginInfoTranslate();
var _b = pagingInfo.pIdx, pIdx = _b === void 0 ? 0 : _b, _c = pagingInfo.pSize, pSize = _c === void 0 ? 0 : _c, _d = pagingInfo.total, total = _d === void 0 ? 0 : _d, _e = pagingInfo.active, active = _e === void 0 ? true : _e;
if (!active) {
return (React.createElement("span", { className: "nopaging" }));
}
var $T_UKE = this.$T_UKE;
var paginBtnCount = Math.ceil(total / pSize);
var isFirstActive = pIdx === 0;
var isLastActive = pIdx === paginBtnCount - 1;
var hasMorePagin = paginBtnCount > 1;
if (total === -1 || total === 0)
return React.createElement("span", null);
var jumpInputDOM = (React.createElement("div", { className: "jump-input" },
React.createElement("span", null, $T_UKE('跳至')),
React.createElement("input", { type: "text", disabled: !hasMorePagin, className: "form-control input-sm ms10 input", onBlur: function (e) { return _this.changePagin(+e.target.value - 1); } }),
React.createElement("span", null, $T_UKE('页'))));
var pageCountInputDOM = (React.createElement("div", { className: "mr10 page-size-input" },
React.createElement(Selector, { value: pSize, isNum: true, needAction: false, position: this.dropdownPosition, onChange: function (nextVal) { return _this.changePagin(+pIdx, nextVal); }, values: this.getSelectorOptions() })));
var btnGroup = (React.createElement("div", { className: "pagin-btn-group" }, (function () {
var allBtnLen = prevBtnCount + lastBtnCount;
var result = [];
var _loop_1 = function (i) {
var currIdx = pIdx - prevBtnCount + i + 1;
var isActive = currIdx === (pIdx + 1);
if (currIdx > 1 && currIdx < paginBtnCount) {
result.push(React.createElement("span", { key: currIdx, className: "item" + (isActive ? ' active' : ''), onClick: function (e) { return _this.changePagin(currIdx - 1); } }, currIdx));
}
};
for (var i = 0; i <= allBtnLen; i++) {
_loop_1(i);
}
return result;
})()));
var firstCon = hasMorePagin && (React.createElement("span", { className: "item-group first" },
React.createElement("span", { onClick: function (e) { return _this.changePagin(0); }, className: "item" + (isFirstActive ? ' active' : '') }, "1"),
pIdx - prevBtnCount > 1 && React.createElement(Seperator, null)));
var lastCon = (React.createElement("span", { className: "item-group last" },
paginBtnCount - pIdx - 2 > lastBtnCount && React.createElement(Seperator, null),
React.createElement("span", { onClick: function (e) { return _this.changePagin(paginBtnCount - 1); }, className: "item" + (isLastActive ? ' active' : '') }, paginBtnCount)));
return (React.createElement("div", { className: "pagin-con has-pagin" },
React.createElement("div", { className: "layout btns-wrap" },
firstCon,
btnGroup,
lastCon),
displayTotal && React.createElement("span", null,
" ",
total,
" ",
$T_UKE('项')),
isNeedHelper && (React.createElement(React.Fragment, null,
React.createElement("span", { className: "flex" }),
pageCountInputDOM,
jumpInputDOM))));
};
Pagination.defaultProps = {
infoMapper: {
pIdx: 'pIdx',
pSize: 'pSize',
total: 'total',
active: 'active',
},
isNeedHelper: true,
displayTotal: true,
prevBtnCount: 2,
lastBtnCount: 2,
};
return Pagination;
}(UkeComponent));
export default Pagination;