react-page-fy
Version:
238 lines (214 loc) • 9.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _utilsFy = require('utils-fy');
var _style = require('./style');
var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultTheme = {
default: "#00bcd4", //亮色1///1489e6
first: "#5ed0df", //亮色2
second: "#ededed", //灰色1
third: "#747474" //灰色2
};
var PageComponent = function (_Component) {
_inherits(PageComponent, _Component);
function PageComponent(props) {
_classCallCheck(this, PageComponent);
var _this2 = _possibleConstructorReturn(this, (PageComponent.__proto__ || Object.getPrototypeOf(PageComponent)).call(this, props));
_this2.pageClick = function (pageNum, type) {
if (pageNum != _this2.state.current) {
_this2.setState({
current: pageNum,
flag: type == 1 ? 1 : 0
});
}
var _this = _this2;
setTimeout(function () {
_this.props.handlePage(pageNum);
}, 100);
};
_this2.goPrevClick = function () {
var cur = _this2.state.current;
if (cur > 1) {
_this2.pageClick(cur - 1);
}
};
_this2.goNext = function () {
var cur = _this2.state.current;
if (cur < _this2.state.totalPage) {
_this2.pageClick(cur + 1);
}
};
_this2.setGoValue = function (e) {
_this2.setState({ goValue: e.target.value });
};
_this2.goSwitchChange = function () {
var value = _this2.state.goValue;
if (!/^[1-9]\d*$/.test(value)) {
//alert('页码只能输入大于1的正整数');
console.log('页码只能输入大于1的正整数');
} else if (parseInt(value) > parseInt(_this2.state.totalPage)) {
//alert('没有这么多页');
console.log('没有这么多页');
} else {
_this2.pageClick(value, 1);
}
};
_this2.state = {
flag: 0,
current: 1, //当前页码
pageSize: 10, //每页显示的条数5条
goValue: '', //点击跳转的值
totalNum: 0, //总记录数
totalPage: 0, //总页数
styles: _style2.default.page(defaultTheme),
oldPageNumber: ""
};
return _this2;
}
_createClass(PageComponent, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.setState({
styles: _style2.default.page(this.props.themeObj || defaultTheme)
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var pagesize = this.props.pageSize || 10;
this.setState({
pageSize: pagesize, // 总页数
totalNum: this.props.totalNum, // 总记录数
current: this.props.pageNumber, // 当前页码
totalPage: Math.ceil(this.props.totalNum / pagesize) // 总页数
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.state.oldPageNumber != nextProps.pageNumber) {
this.setState({
current: nextProps.pageNumber // 当前页码
});
}
this.setState({
//goValue: nextProps.pageNumber == 1 ? nextProps.pageNumber : this.state.flag == 1 ? this.state.goValue : nextProps.pageNumber,
goValue: "",
totalNum: nextProps.totalNum, // 总记录数
totalPage: Math.ceil(nextProps.totalNum / this.state.pageSize), // 总页数
oldPageNumber: nextProps.pageNumber
});
}
}, {
key: 'render',
value: function render() {
var styles = this.state.styles;
//当前页码
var cur = this.state.current;
//显示分页按钮
var pageNum = [];
var begin = void 0;
var len = void 0;
if (this.state.totalPage > 5) {
len = 5;
if (cur >= this.state.totalPage - 2) {
begin = this.state.totalPage - 4;
} else if (cur <= 3) {
begin = 1;
} else {
begin = cur - 2;
}
} else {
len = this.state.totalPage;
begin = 1;
}
//根据返回的总记录数计算当前页显示的数据
for (var i = 0; i < len; i++) {
var _cur = this.state.current;
var showI = begin + i;
if (_cur == showI) {
pageNum.push({ num: showI, cur: true });
} else {
pageNum.push({ num: showI, cur: false });
}
}
var _this = this;
return _react2.default.createElement(
'div',
{ style: styles.pageBox },
_react2.default.createElement(
'div',
{ style: styles.pageNumBox },
_react2.default.createElement(
'a',
{ style: this.state.current == 1 ? _utilsFy.Obj.merge(eval("(" + JSON.stringify(styles.pagebtnBox) + ")"), styles.btnDisabled) : styles.pagebtnBox,
onClick: this.goPrevClick },
"<"
),
_react2.default.createElement(
'span',
{ style: styles.pageNumBox },
pageNum.map(function (curPageNum, i) {
return _react2.default.createElement(
'a',
{ style: curPageNum.cur ? _utilsFy.Obj.merge(eval("(" + JSON.stringify(styles.numBox) + ")"), styles.numCurrent) : styles.numBox,
onClick: _this.pageClick.bind(this, curPageNum.num),
key: i },
curPageNum.num
);
})
),
_react2.default.createElement(
'a',
{ style: this.state.current == this.state.totalPage ? _utilsFy.Obj.merge(eval("(" + JSON.stringify(styles.pagebtnBox) + ")"), styles.btnDisabled) : styles.pagebtnBox,
onClick: this.goNext },
">"
)
),
_react2.default.createElement(
'div',
{ style: { display: "flex" } },
'\u603B\u5171',
_react2.default.createElement(
'span',
null,
this.state.totalNum
),
'\u6761\uFF0C \u6BCF\u9875',
_react2.default.createElement(
'span',
null,
this.state.pageSize
),
'\u6761\uFF0C \u5171',
_react2.default.createElement(
'span',
null,
this.state.totalPage
),
'\u9875\uFF0C \u5230\u7B2C',
_react2.default.createElement('input', { type: 'text', style: styles.jumpInput, value: this.state.goValue,
onChange: this.setGoValue }),
_react2.default.createElement(
'span',
{ style: styles.goVFn, onClick: this.goSwitchChange },
'\u8DF3\u8F6C'
),
'\u9875'
)
);
}
}]);
return PageComponent;
}(_react.Component);
exports.default = PageComponent;
//# sourceMappingURL=page.js.map