@krowdy-ui/core
Version:
React components that implement Google's Material Design.
280 lines (241 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.styles = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
var _Box = _interopRequireDefault(require("../Box"));
var _InputBase = _interopRequireDefault(require("../InputBase"));
var _Select = _interopRequireDefault(require("../Select"));
var _MenuItem = _interopRequireDefault(require("../MenuItem"));
var _Input = _interopRequireDefault(require("../Input"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Typography = _interopRequireDefault(require("../Typography"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var styles = function styles(theme) {
return {
boxStyle: {
alignItems: 'center',
display: 'flex',
justifyContent: 'flex-end',
padding: theme.spacing(1)
},
color: {
color: theme.palette.grey[700]
},
icon: {
height: 18,
width: 18
},
input: {
fontSize: 12,
textAlign: 'center'
},
inputSel: {
fontSize: 12,
padding: theme.spacing(0.625, 1),
textAlign: 'center'
},
inputSelect: {
padding: theme.spacing(0.625, 0.8)
},
label: {
marginRight: theme.spacing(1.5)
},
rootLeftIcon: {
marginLeft: theme.spacing(2.5),
marginRight: theme.spacing(1.25),
padding: theme.spacing(0)
},
rootMenuItem: {
color: theme.palette.grey[700],
fontSize: 12
},
rootRightIcon: {
marginLeft: theme.spacing(1.5),
padding: theme.spacing(0)
},
rootTextfield: {
border: " 1px solid ".concat(theme.palette.grey[400]),
borderRadius: 4,
boxSizing: 'border-box',
color: theme.palette.grey[700],
fontSize: 12,
width: 25
},
select: {
'&$selectMenu': {
paddingLeft: theme.spacing(0),
paddingRight: theme.spacing(2)
},
'&:focus': {
borderRadius: 4
},
border: "1px solid ".concat(theme.palette.grey[400]),
borderRadius: 4,
boxSizing: 'border-box',
width: 47
},
selectIcon: {
'& svg': {
height: 18,
width: 18
},
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
selectMenu: {
fontSize: 12,
lineHeight: '14px',
textAlign: 'center'
},
slash: {
padding: theme.spacing(0, 0.75)
}
};
};
exports.styles = styles;
var _ref = /*#__PURE__*/_react["default"].createElement(_InputBase["default"], null);
var TablePagination = function TablePagination(props) {
var _props$totalPages = props.totalPages,
totalPages = _props$totalPages === void 0 ? 0 : _props$totalPages,
_props$totalItems = props.totalItems,
totalItems = _props$totalItems === void 0 ? 0 : _props$totalItems,
classes = props.classes,
_onChangePage = props.onChangePage,
onChangeRowsPerPage = props.onChangeRowsPerPage,
rowsPerPage = props.rowsPerPage,
rowsPerPageOptions = props.rowsPerPageOptions,
labelRowsPerPage = props.labelRowsPerPage,
page = props.page;
var _useState = (0, _react.useState)(rowsPerPage),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
currentPerPage = _useState2[0],
setCurrentPerPage = _useState2[1];
var _useState3 = (0, _react.useState)(page),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
currentPage = _useState4[0],
setCurrentPage = _useState4[1];
(0, _react.useEffect)(function () {
setCurrentPage(page);
}, [page]);
var onChangeSelectState = function onChangeSelectState(ev) {
var page = ev.target.value;
setCurrentPerPage(page);
onChangeRowsPerPage(page);
};
var _handleClickLeft = function _handleClickLeft() {
currentPage > 1 && setCurrentPage(function (prevState) {
var page = parseInt(prevState) - 1;
_onChangePage(page);
return page;
});
};
var _handleClickRight = function _handleClickRight() {
currentPage < totalPages && setCurrentPage(function (prevState) {
var page = parseInt(prevState) + 1;
_onChangePage(page);
return page;
});
};
var _handleChange = function _handleChange(ev) {
var value = ev.target.value;
if (/^[0-9]*$/g.test(value)) setCurrentPage(function (prevState) {
return value > totalPages ? prevState : value;
});
if (ev.keyCode === 13) _onChangePage(parseInt(value));
};
return totalPages ? /*#__PURE__*/_react["default"].createElement(_Box["default"], {
className: classes.boxStyle
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
className: classes.label
}, "Mostrar"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
classes: {
icon: classes.selectIcon,
root: classes.select,
selectMenu: classes.selectMenu
},
input: _ref,
onChange: onChangeSelectState,
value: currentPerPage
}, rowsPerPageOptions.map(function (limit, index) {
return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
classes: {
root: classes.rootMenuItem,
selected: classes.selectedMenuItem
},
key: index,
value: limit
}, limit);
})), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
className: classes.boxStyle
}, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
className: classes.rootLeftIcon,
disabled: parseInt(currentPage) === 1,
onClick: _handleClickLeft,
size: "small"
}, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], {
className: classes.icon
})), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
classes: {
input: (0, _clsx["default"])(classes.input, classes.color),
root: classes.rootTextfield
},
disableUnderline: true,
onChange: _handleChange,
onKeyDown: _handleChange,
value: currentPage
}), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
className: classes.slash
}, "/"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, totalPages > 0 ? totalPages : 1), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
className: classes.rootRightIcon,
disabled: parseInt(currentPage) === parseInt(totalPages),
onClick: _handleClickRight,
size: "small"
}, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], {
className: classes.icon
})))) : /*#__PURE__*/_react["default"].createElement(_TablePagination["default"], {
component: "div",
count: totalItems,
labelRowsPerPage: labelRowsPerPage,
onChangePage: function onChangePage(ev, value) {
return _onChangePage(parseInt(value + 1));
},
onChangeRowsPerPage: function onChangeRowsPerPage(ev) {
return onChangeSelectState(ev);
},
page: parseInt(page - 1),
rowsPerPage: currentPerPage,
rowsPerPageOptions: rowsPerPageOptions
});
};
process.env.NODE_ENV !== "production" ? TablePagination.propTypes = {
SelectProps: _propTypes["default"].object,
backIconButtonProps: _propTypes["default"].object,
classes: _propTypes["default"].object.isRequired,
count: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
labelRowsPerPage: _propTypes["default"].string,
nextIconButtonProps: _propTypes["default"].object,
onChangePage: _propTypes["default"].func,
onChangeRowsPerPage: _propTypes["default"].func,
page: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
rowsPerPage: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
rowsPerPageOptions: _propTypes["default"].array.isRequired,
totalItems: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
totalPages: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
} : void 0;
var _default = (0, _withStyles["default"])(styles, {
name: 'TablePagination'
})(TablePagination);
exports["default"] = _default;