chowa
Version:
UI component library based on React
257 lines (256 loc) • 11.7 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
const select_1 = require("../select");
const input_1 = require("../input");
const i18n_1 = require("../i18n");
class Pagination extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selfPageNumber: props.current,
selfPageSize: props.pageSize,
pageTotal: Math.ceil(props.total / props.pageSize),
jumpPageNumber: props.simple ? props.current : 0
};
[
'goPrePage',
'goNextPage',
'goPrePageByBtnSize',
'goNextPageByBtnSize',
'pageChange',
'onKeyDownHandler',
'onBlurHandler',
'onChangeHandler',
'pageSizeChangeHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.pageSize !== this.props.pageSize && this.props.pageSize !== this.state.selfPageSize) {
this.setState({
selfPageSize: this.props.pageSize,
pageTotal: Math.ceil(this.props.total / this.props.pageSize)
});
}
if (preProps.total !== this.props.total) {
this.setState({
pageTotal: Math.ceil(this.props.total / this.state.selfPageSize)
});
}
if (preProps.current !== this.props.current && this.props.current !== this.state.selfPageSize) {
this.setState({
selfPageNumber: this.props.current > this.state.pageTotal
? this.state.pageTotal
: this.props.current
});
}
}
pageSizeChangeHandler(pageSize) {
const { total, onPageSizeChange } = this.props;
const pageTotal = Math.ceil(total / pageSize);
this.setState({
pageTotal,
selfPageSize: pageSize,
selfPageNumber: this.state.selfPageNumber > pageTotal
? pageTotal
: this.state.selfPageNumber
}, () => {
if (onPageSizeChange) {
onPageSizeChange(pageSize);
}
});
}
goPrePage() {
const { selfPageNumber } = this.state;
if (selfPageNumber === 1) {
return;
}
this.pageChange(selfPageNumber - 1);
}
goNextPage() {
const { selfPageNumber, pageTotal } = this.state;
if (selfPageNumber === pageTotal) {
return;
}
this.pageChange(selfPageNumber + 1);
}
goPrePageByBtnSize() {
const { pageBtnAmount } = this.props;
const { selfPageNumber } = this.state;
const current = selfPageNumber - pageBtnAmount;
this.pageChange(current < 1 ? 1 : current);
}
goNextPageByBtnSize() {
const { pageBtnAmount } = this.props;
const { pageTotal, selfPageNumber } = this.state;
const current = selfPageNumber + pageBtnAmount;
this.pageChange(current > pageTotal ? pageTotal : current);
}
onChangeHandler(e) {
if (!/^\d+$/.test(e.target.value) && e.target.value !== '') {
return;
}
this.setState({
jumpPageNumber: Number(e.target.value)
});
}
onKeyDownHandler(e) {
if (e.keyCode === 13) {
this.onBlurHandler();
}
}
onBlurHandler() {
const { simple } = this.props;
const { jumpPageNumber, pageTotal, selfPageNumber } = this.state;
if (jumpPageNumber <= pageTotal && jumpPageNumber > 0) {
this.pageChange(jumpPageNumber);
}
else {
this.setState({
jumpPageNumber: simple ? selfPageNumber : 0
});
}
}
pageChange(current) {
const { onChange, simple } = this.props;
this.setState({
selfPageNumber: current,
jumpPageNumber: simple ? current : 0
});
if (onChange) {
onChange(current);
}
}
render() {
const { className, style, withQuickJumper, justify, compact, bordered, pageBtnAmount, preBtnText, nextBtnText, hideOnSinglePage, pageSizeOptions, pageSizeUnit, simple } = this.props;
const { selfPageNumber, selfPageSize, pageTotal, jumpPageNumber } = this.state;
if (hideOnSinglePage && pageTotal === 1) {
return null;
}
const componentClass = classnames_1.default({
[utils_1.preClass('pagination')]: true,
[utils_1.preClass('pagination-bordered')]: bordered && !simple,
[utils_1.preClass('pagination-compact')]: compact,
[utils_1.preClass(`pagination-${justify}`)]: true,
[className]: utils_1.isExist(className)
});
const forwardBtnClass = classnames_1.default({
[utils_1.preClass('pagination-btn')]: true,
[utils_1.preClass('pagination-forward-btn')]: true
});
const preBtnClass = classnames_1.default({
[utils_1.preClass('pagination-btn')]: true,
[utils_1.preClass('pagination-disabled')]: selfPageNumber === 1
});
const nextBtnClass = classnames_1.default({
[utils_1.preClass('pagination-btn')]: true,
[utils_1.preClass('pagination-disabled')]: selfPageNumber === pageTotal
});
const pageNodes = [];
if (!simple) {
const halfpageBtnAmount = Math.floor(pageBtnAmount / 2);
let startLoop = selfPageNumber <= halfpageBtnAmount ? 1 : selfPageNumber - halfpageBtnAmount;
let endLoop = startLoop + pageBtnAmount - 1;
if (endLoop > pageTotal) {
endLoop = pageTotal;
startLoop = pageTotal > pageBtnAmount ? pageTotal - pageBtnAmount : 1;
}
if (startLoop > 1) {
pageNodes.push(React.createElement("li", { key: 'pagination-btn-start', className: utils_1.preClass('pagination-btn'), onClick: this.pageChange.bind(this, 1) },
React.createElement("span", null, "1")));
}
if (startLoop > 2) {
pageNodes.push(React.createElement("li", { key: 'pre-btn-size', className: forwardBtnClass, onClick: this.goPrePageByBtnSize },
React.createElement(icon_1.default, { type: 'omit' }),
React.createElement(icon_1.default, { type: 'arrow-left-double' })));
}
for (let i = startLoop; i <= endLoop; i++) {
const btnClass = classnames_1.default({
[utils_1.preClass('pagination-btn')]: true,
[utils_1.preClass('pagination-selected')]: selfPageNumber === i
});
pageNodes.push(React.createElement("li", { key: i, className: btnClass, onClick: selfPageNumber === i ? null : this.pageChange.bind(this, i) },
React.createElement("span", null, i)));
}
if (endLoop !== pageTotal) {
pageNodes.push(React.createElement("li", { key: 'next-btn-size', className: forwardBtnClass, onClick: this.goNextPageByBtnSize },
React.createElement(icon_1.default, { type: 'omit' }),
React.createElement(icon_1.default, { type: 'arrow-right-double' })));
pageNodes.push(React.createElement("li", { key: 'pagination-btn-end', className: utils_1.preClass('pagination-btn'), onClick: this.pageChange.bind(this, pageTotal) },
React.createElement("span", null, pageTotal)));
}
}
return (React.createElement("section", { className: componentClass, style: style },
React.createElement("ul", { className: utils_1.preClass('pagination-wrapper') },
pageTotal > 1 &&
React.createElement("li", { onClick: this.goPrePage, className: preBtnClass },
!preBtnText && React.createElement(icon_1.default, { type: 'arrow-left' }),
preBtnText && React.createElement("span", null, preBtnText)),
!simple && pageNodes,
simple &&
React.createElement("li", { className: utils_1.preClass('pagination-simple-jumper') },
React.createElement(input_1.default, { className: utils_1.preClass('pagination-input'), type: 'text', value: jumpPageNumber, onKeyDown: this.onKeyDownHandler, onBlur: this.onBlurHandler, onChange: this.onChangeHandler, placeholder: '' }),
React.createElement("span", { className: utils_1.preClass('pagination-simple-separator') }, "/"),
React.createElement("span", null, pageTotal)),
pageTotal > 1 &&
React.createElement("li", { onClick: this.goNextPage, className: nextBtnClass },
nextBtnText && React.createElement("span", null, nextBtnText),
!nextBtnText && React.createElement(icon_1.default, { type: 'arrow-right' }))),
withQuickJumper && pageTotal > 1 && !simple &&
React.createElement("div", { className: utils_1.preClass('pagination-quick-jumper') },
React.createElement("span", { className: utils_1.preClass('pagination-text') }, "\u8DF3\u81F3"),
React.createElement(input_1.default, { className: utils_1.preClass('pagination-input'), type: 'text', value: jumpPageNumber === 0 ? '' : jumpPageNumber, onKeyDown: this.onKeyDownHandler, onBlur: this.onBlurHandler, onChange: this.onChangeHandler, placeholder: '' }),
React.createElement("span", { className: utils_1.preClass('pagination-text') }, "\u9875")),
utils_1.isExist(pageSizeOptions) &&
React.createElement("div", { className: utils_1.preClass('pagination-page-size') },
React.createElement(select_1.default, { value: selfPageSize, onChange: this.pageSizeChangeHandler }, pageSizeOptions.map((num, key) => (React.createElement(select_1.default.Option, { value: num, key: key },
num,
React.createElement(i18n_1.I18nReceiver, { module: 'Pagination' }, (i18n) => pageSizeUnit || i18n.pageSizeUnit))))))));
}
}
Pagination.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
pageSize: PropTypes.number,
total: PropTypes.number.isRequired,
withQuickJumper: PropTypes.bool,
onChange: PropTypes.func,
current: PropTypes.number,
hideOnSinglePage: PropTypes.bool,
preBtnText: PropTypes.string,
nextBtnText: PropTypes.string,
justify: PropTypes.oneOf(['start', 'end', 'center']),
compact: PropTypes.bool,
bordered: PropTypes.bool,
pageBtnAmount: PropTypes.number,
pageSizeOptions: PropTypes.array,
pageSizeUnit: PropTypes.string,
onPageSizeChange: PropTypes.func,
simple: PropTypes.bool
};
Pagination.defaultProps = {
pageSize: 10,
withQuickJumper: false,
current: 1,
hideOnSinglePage: false,
justify: 'end',
compact: false,
bordered: true,
pageBtnAmount: 5,
simple: false
};
exports.default = Pagination;