@6thquake/react-material
Version:
React components that implement Google's Material Design.
484 lines (423 loc) • 14.4 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));
var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
var _Input = _interopRequireDefault(require("../Input"));
var _MenuItem = _interopRequireDefault(require("../MenuItem"));
var _Typography = _interopRequireDefault(require("../Typography"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _SelectStandalone = _interopRequireDefault(require("../Select/SelectStandalone"));
var _LocaleProvider = require("../LocaleProvider");
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
root: {
fontSize: theme.typography.pxToRem(12),
'&:last-child': {
padding: 0
}
},
toolbar: {
height: 56,
minHeight: 56,
paddingRight: 2,
position: 'relative',
display: 'flex',
alignItems: 'center'
},
spacer: {
flex: '1 1 100%'
},
menuItem: {},
caption: {
flexShrink: 0
},
firstpage: {
cursor: 'pointer',
marginLeft: 10
},
lastpage: {
cursor: 'pointer',
marginRight: 10
},
input: {
fontSize: 'inherit',
flexShrink: 0
},
pageinput: {
fontSize: 12,
width: 50,
height: 28,
cursor: 'text',
color: '#666',
padding: '0 7px',
border: 'solid 1px #d9d9d9',
borderRadius: 6,
margin: '0 8px',
'&:focus': {
borderColor: 'blue',
transition: 'all 0.3s'
},
'&:hove': {
transition: 'all 0.3s',
borderColor: 'blue'
}
},
selectRoot: {
marginRight: theme.spacing(4),
marginLeft: theme.spacing(1),
color: theme.palette.text.secondary
},
select: {
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(2)
},
jump: {
lineHeight: '28px'
},
selectIcon: {
top: 1
},
actions: {
flexShrink: 0,
color: theme.palette.text.secondary,
marginLeft: theme.spacing(2.5)
},
textbutton: {
fontSize: '0.75rem',
fontWeight: 400
}
};
};
var Pagination =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(Pagination, _Component);
function Pagination(props) {
var _this;
(0, _classCallCheck2.default)(this, Pagination);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Pagination).call(this, props));
_this.state = {
minwidth: true,
value: 1
};
return _this;
}
(0, _createClass2.default)(Pagination, [{
key: "componentDidMount",
value: function componentDidMount() {
// 分页的宽度小于200px时，只显示前后页按钮
if (this.div.clientWidth < 250) {
this.setState({
minwidth: false
});
}
this.props.onChangePage(this.props.page);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this$props = this.props,
count = _this$props.count,
onChangePage = _this$props.onChangePage,
page = _this$props.page,
rowsPerPage = _this$props.rowsPerPage;
var newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
if (page > newLastPage) {
onChangePage(newLastPage);
}
}
}, {
key: "createPage",
value: function createPage() {
var _this2 = this;
var _this$props2 = this.props,
classes = _this$props2.classes,
page = _this$props2.page,
rowsPerPage = _this$props2.rowsPerPage,
count = _this$props2.count,
backIconButtonProps = _this$props2.backIconButtonProps,
nextIconButtonProps = _this$props2.nextIconButtonProps,
labelDisplayedRows = _this$props2.labelDisplayedRows,
labelRowsPerPage = _this$props2.labelRowsPerPage,
onChangeRowsPerPage = _this$props2.onChangeRowsPerPage,
rowsPerPageOptions = _this$props2.rowsPerPageOptions,
SelectProps = _this$props2.SelectProps,
showSizeChanger = _this$props2.showSizeChanger,
showQuickJumper = _this$props2.showQuickJumper,
showTwoEnds = _this$props2.showTwoEnds,
homePage = _this$props2.homePage,
lastPage = _this$props2.lastPage,
prePage = _this$props2.prePage,
nextPage = _this$props2.nextPage,
jumpTo = _this$props2.jumpTo,
pageName = _this$props2.pageName,
noIcon = _this$props2.noIcon;
var _this$state = this.state,
minwidth = _this$state.minwidth,
value = _this$state.value;
var totalPage = Math.ceil(count / rowsPerPage);
return _react.default.createElement("div", {
className: classes.root,
ref: function ref(div) {
return _this2.div = div;
}
}, _react.default.createElement("div", {
className: classes.toolbar
}, _react.default.createElement("div", {
className: classes.spacer
}), rowsPerPageOptions.length > 1 && showSizeChanger && _react.default.createElement(_Typography.default, {
variant: "caption",
className: classes.caption
}, labelRowsPerPage), rowsPerPageOptions.length > 1 && showSizeChanger && _react.default.createElement(_SelectStandalone.default, (0, _extends2.default)({
classes: {
root: classes.selectRoot,
select: classes.select,
icon: classes.selectIcon
},
input: _react.default.createElement(_Input.default, {
className: classes.input,
disableUnderline: true
}),
value: rowsPerPage,
onChange: onChangeRowsPerPage
}, SelectProps), rowsPerPageOptions.map(function (rowsPerPageOption) {
return _react.default.createElement(_MenuItem.default, {
className: classes.menuItem,
key: rowsPerPageOption,
value: rowsPerPageOption
}, rowsPerPageOption);
})), _react.default.createElement(_Typography.default, {
variant: "caption",
className: classes.caption
}, minwidth ? labelDisplayedRows({
from: count === 0 ? 0 : page * rowsPerPage + 1,
to: Math.min(count, (page + 1) * rowsPerPage),
count: count,
page: page
}) : null), showTwoEnds ? _react.default.createElement(_IconButton.default, {
onClick: this.goEnd.bind(this, 'first'),
disabled: page === 0,
"aria-label": "Last Page"
}, noIcon ? _react.default.createElement("span", {
className: classes.textbutton
}, homePage) : _react.default.createElement(_FirstPage.default, null)) : null, _react.default.createElement(_IconButton.default, (0, _extends2.default)({
onClick: this.prePageHandeler.bind(this),
disabled: page === 0
}, backIconButtonProps), noIcon ? _react.default.createElement("span", {
className: classes.textbutton
}, prePage) : _react.default.createElement(_KeyboardArrowLeft.default, null)), _react.default.createElement(_IconButton.default, (0, _extends2.default)({
onClick: this.nextPageHandeler.bind(this),
disabled: page >= totalPage - 1
}, nextIconButtonProps), noIcon ? _react.default.createElement("span", {
className: classes.textbutton
}, nextPage) : _react.default.createElement(_KeyboardArrowRight.default, null)), showTwoEnds ? _react.default.createElement(_IconButton.default, {
onClick: this.goEnd.bind(this, 'last'),
disabled: page >= totalPage - 1,
"aria-label": "Last Page"
}, noIcon ? _react.default.createElement("span", {
className: classes.textbutton
}, lastPage) : _react.default.createElement(_LastPage.default, null)) : null, showQuickJumper ? _react.default.createElement(_Typography.default, {
variant: "caption",
className: "".concat(classes.caption, " ").concat(classes.jump)
}, jumpTo, _react.default.createElement(_Input.default, {
className: classes.pageinput,
disableUnderline: true,
type: "number",
value: value,
onChange: this.jumpTo.bind(this)
}), pageName) : null));
}
}, {
key: "pageClick",
value: function pageClick(page) {
var getCurrentPage = this.props.onChangePage; // 将当前页码返回父组件
getCurrentPage(page);
}
}, {
key: "prePageHandeler",
value: function prePageHandeler() {
var page = this.props.page;
if (--page === -1) {
return false;
}
this.pageClick(page);
}
}, {
key: "nextPageHandeler",
value: function nextPageHandeler() {
var _this$props3 = this.props,
page = _this$props3.page,
count = _this$props3.count,
rowsPerPage = _this$props3.rowsPerPage;
var totalPage = Math.ceil(count / rowsPerPage);
if (++page > totalPage) {
return false;
}
this.pageClick(page);
}
}, {
key: "goEnd",
value: function goEnd(param) {
var _this$props4 = this.props,
rowsPerPage = _this$props4.rowsPerPage,
count = _this$props4.count,
onChangePage = _this$props4.onChangePage;
var totalPage = Math.ceil(count / rowsPerPage);
var getCurrentPage = onChangePage;
if (param === 'first') {
getCurrentPage(0);
}
if (param === 'last') {
getCurrentPage(totalPage - 1);
}
}
}, {
key: "jumpTo",
value: function jumpTo(e) {
var _this3 = this;
var _this$props5 = this.props,
rowsPerPage = _this$props5.rowsPerPage,
count = _this$props5.count,
onChangePage = _this$props5.onChangePage;
var totalPage = Math.ceil(count / rowsPerPage);
this.setState({
value: e.target.value
}, function () {
var value = _this3.state.value;
if (value < 1) {
onChangePage(0);
_this3.setState({
value: 1
});
}
if (value > 0 && value <= totalPage) {
onChangePage(value - 1);
}
if (value > totalPage) {
onChangePage(totalPage - 1);
_this3.setState({
value: totalPage
});
}
});
}
}, {
key: "render",
value: function render() {
return this.createPage();
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps !== prevState.preProps) {
return {
value: nextProps.page + 1,
preProps: nextProps
};
}
return null;
}
}]);
return Pagination;
}(_react.Component);
Pagination.propTypes = {
/**
* Properties applied to the back arrow `IconButton` component.
*/
backIconButtonProps: _propTypes.default.object,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* This is total count of pagination
*/
count: _propTypes.default.number,
/**
* Useful to customize the rows per page label. Invoked with a { from, to, count, page } object.
*/
labelDisplayedRows: _propTypes.default.func,
/**
* Customize the displayed rows label.
*/
labelRowsPerPage: _propTypes.default.node,
/**
* Properties applied to the next arrow `IconButton` element.
*/
nextIconButtonProps: _propTypes.default.object,
/**
* Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.
*/
noIcon: _propTypes.default.bool,
/**
* This is call current page back to parent component
*/
onChangePage: _propTypes.default.func.isRequired,
/**
* Callback fired when the number of rows per page is changed.
*/
onChangeRowsPerPage: _propTypes.default.func,
/**
* The zero-based index of the current page.
*/
page: _propTypes.default.number,
/**
* This is page size of pagination
*/
rowsPerPage: _propTypes.default.number,
/**
* Use text alternative icon for next page、pre page、last page and first page
*/
rowsPerPageOptions: _propTypes.default.array,
/**
* show quick jumper ,jump to xx page.
*/
showQuickJumper: _propTypes.default.bool,
/**
* show jump to first and last page button.
*/
showSizeChanger: _propTypes.default.bool,
/**
* Whether to show buttons(first and last page) or not?
*/
showTwoEnds: _propTypes.default.bool
};
Pagination.defaultProps = {
page: 0,
rowsPerPage: 5,
count: 0,
labelRowsPerPage: 'Rows per page:',
rowsPerPageOptions: [5, 10, 25],
labelDisplayedRows: function labelDisplayedRows(_ref) {
var from = _ref.from,
to = _ref.to,
count = _ref.count;
return "".concat(from, "-").concat(to, " of ").concat(count);
}
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMPagination'
})((0, _LocaleProvider.withLocale)({
name: 'Pagination'
})(Pagination));
exports.default = _default;