fastlion-amis
Version:
一种MIS页面生成工具
212 lines (211 loc) • 9.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaginationRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var icons_1 = require("../components/icons");
var Pagination = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Pagination, _super);
function Pagination() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
pageNum: String(_this.props.activePage) || ''
};
_this.handlePageChange = function (e) {
var lastPage = _this.props.lastPage;
var value = e.currentTarget.value;
if (/^\d+$/.test(value) && parseInt(value, 10) > lastPage) {
value = String(lastPage);
}
_this.setState({ pageNum: value });
};
return _this;
}
Pagination.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
if (prevProps.activePage !== props.activePage) {
this.setState({
pageNum: String(props.activePage) || ''
});
}
};
Pagination.prototype.renderSimple = function () {
var _a = this.props, activePage = _a.activePage, hasNext = _a.hasNext, onPageChange = _a.onPageChange, cx = _a.classnames;
return (react_1.default.createElement("ul", { className: cx('Pagination', 'Pagination--sm') },
react_1.default.createElement("li", { className: cx({
'is-disabled': activePage < 2
}), onClick: activePage < 2
? function (e) { return e.preventDefault(); }
: function () { return onPageChange(activePage - 1); } },
react_1.default.createElement("a", null,
react_1.default.createElement(icons_1.Icon, { icon: "left-arrow", className: "icon" }))),
react_1.default.createElement("li", { className: cx({
'is-disabled': !hasNext
}), onClick: !hasNext
? function (e) { return e.preventDefault(); }
: function () { return onPageChange(activePage + 1); } },
react_1.default.createElement("a", null,
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow", className: "icon" })))));
};
Pagination.prototype.renderNormal = function () {
var _a = this.props, activePage = _a.activePage, lastPage = _a.lastPage, maxButtons = _a.maxButtons, onPageChange = _a.onPageChange, cx = _a.classnames, showPageInput = _a.showPageInput, className = _a.className, __ = _a.translate;
var pageNum = this.state.pageNum;
var pageButtons = [];
var startPage;
var endPage;
if (activePage < (maxButtons - 1) / 2 + 2) {
maxButtons = activePage + (maxButtons - 1) / 2;
}
if (lastPage - activePage < (maxButtons - 1) / 2 + 2) {
maxButtons = lastPage - activePage + (maxButtons - 1) / 2 + 1;
}
if (maxButtons && maxButtons < lastPage) {
startPage = Math.max(Math.min(activePage - Math.floor(maxButtons / 2), lastPage - maxButtons + 1), 1);
endPage = startPage + maxButtons - 1;
}
else {
startPage = 1;
endPage = lastPage;
}
// 小型弹窗里面不展示具体页数字
// if (!this.props.inSmallDialog)
// for (let page = startPage; page <= endPage; ++page) {
// pageButtons.push(
// <li
// onClick={() => onPageChange(page)}
// key={page}
// className={cx({
// 'is-active': page === activePage
// })}
// >
// <a role="button">{page}</a>
// </li>
// );
// }
// if (startPage > 1) {
// // 小型弹窗里面不展示具体页数字
// if (!this.props.inSmallDialog)
// if (startPage > 2) {
// pageButtons.unshift(
// <li onClick={() => onPageChange(startPage - 1)} key="prev-ellipsis">
// <a role="button">...</a>
// </li>
// );
// }
// // 小型弹窗里面不展示具体页数字
// if (!this.props.inSmallDialog)
// pageButtons.unshift(
// <li
// onClick={() => onPageChange(1)}
// key={1}
// className={cx({
// 'is-active': 1 === activePage
// })}
// >
// <a role="button">{1}</a>
// </li>
// );
// }
// if (endPage < lastPage) {
// // 小型弹窗里面不展示具体页数字
// if (!this.props.inSmallDialog)
// if (lastPage - endPage > 1) {
// pageButtons.push(
// <li
// className={cx('Pagination-ellipsis')}
// onClick={() => onPageChange(endPage + 1)}
// key="next-ellipsis"
// >
// <a role="button">
// <span>...</span>
// </a>
// </li>
// );
// }
// // 小型弹窗里面不展示具体页数字
// if (!this.props.inSmallDialog)
// pageButtons.push(
// <li
// onClick={() => onPageChange(lastPage)}
// key={lastPage}
// className={cx({
// 'is-active': lastPage === activePage
// })}
// >
// <a role="button">{lastPage}</a>
// </li>
// );
// }
// Jay
// const commonStyle: any = { display: 'inline-block', width: 30, height: 30, margin: '0 8px', background: '#f4f4f5', border: '1px solid #d9d9d9' }
var commonStyle;
if (window.screen.width > 1680) {
commonStyle = { display: 'inline-block', maxHeight: 30 };
}
else if (window.screen.width <= 1680 && window.screen.width > 1440) {
commonStyle = { display: 'inline-block', maxHeight: 25, lineHeight: '23px', };
}
else if (window.screen.width <= 1440 && window.screen.width >= 1280) {
commonStyle = { display: 'inline-block', height: 20, lineHeight: '18px', };
}
// window.addEventListener('resize', this.initFn)
pageButtons.unshift(react_1.default.createElement("div", { className: cx('Pagination-prev', {
'is-disabled': activePage === 1
}), onClick: activePage === 1
? function (e) { return e.preventDefault(); }
: function () { return onPageChange(activePage - 1); }, key: "prev" },
react_1.default.createElement("span", { style: commonStyle },
react_1.default.createElement(icons_1.Icon, { icon: "left-arrow", className: "icon" }))));
pageButtons.push(react_1.default.createElement("div", null,
react_1.default.createElement("span", null,
react_1.default.createElement("input", { type: "text", className: 'pagination-page-switch', onChange: this.handlePageChange, onFocus: function (e) { return e.currentTarget.select(); }, onKeyUp: function (e) {
return e.keyCode == 13 &&
onPageChange(parseInt(e.currentTarget.value, 10));
}, value: pageNum }),
react_1.default.createElement("span", null,
" / ",
lastPage))));
pageButtons.push(react_1.default.createElement("div", { className: cx('Pagination-next', {
'is-disabled': activePage === lastPage
}), onClick: activePage === lastPage
? function (e) { return e.preventDefault(); }
: function () { return onPageChange(activePage + 1); }, key: "next" },
react_1.default.createElement("span", { style: commonStyle },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow", className: "icon" }))));
return (react_1.default.createElement("div", { className: cx('Pagination-wrap', className) },
react_1.default.createElement("div", { className: cx('Pagination', 'Pagination--sm') }, pageButtons)));
};
Pagination.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.initFn);
};
Pagination.prototype.render = function () {
var builderMode = this.props.builderMode;
return builderMode === 'simple' ? this.renderSimple() : this.renderNormal();
};
Pagination.defaultProps = {
activePage: 1,
lastPage: 1,
maxButtons: 5,
mode: 'normal',
hasNext: false,
showPageInput: false
};
return Pagination;
}(react_1.default.Component));
exports.default = Pagination;
var PaginationRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PaginationRenderer, _super);
function PaginationRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PaginationRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
test: /(^|\/)(?:pagination|pager)$/,
name: 'pagination'
})
], PaginationRenderer);
return PaginationRenderer;
}(Pagination));
exports.PaginationRenderer = PaginationRenderer;
//# sourceMappingURL=./renderers/Pagination.js.map