@krowdy-ui/views
Version:
React components that implement Google's Material Design.
241 lines (214 loc) • 8.29 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 _styles = require("@krowdy-ui/styles");
var _icons = require("@material-ui/icons");
var _core = require("@krowdy-ui/core");
var _clsx = _interopRequireDefault(require("clsx"));
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'
},
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(_core.InputBase, null);
var Pagination = function Pagination(props) {
var classes = props.classes,
_props$onChangeSelect = props.onChangeSelect,
onChangeSelect = _props$onChangeSelect === void 0 ? function () {} : _props$onChangeSelect,
_props$valueSelect = props.valueSelect,
valueSelect = _props$valueSelect === void 0 ? 10 : _props$valueSelect,
_props$onChangePage = props.onChangePage,
onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,
_props$page = props.page,
page = _props$page === void 0 ? 1 : _props$page,
_props$limits = props.limits,
limits = _props$limits === void 0 ? [10, 50, 100] : _props$limits,
_props$totalPages = props.totalPages,
totalPages = _props$totalPages === void 0 ? 1 : _props$totalPages;
var _useState = (0, _react.useState)(valueSelect),
_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);
onChangeSelect(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 /*#__PURE__*/_react["default"].createElement(_core.Box, {
className: classes.boxStyle
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.label
}, "Mostrar"), /*#__PURE__*/_react["default"].createElement(_core.Select, {
classes: {
icon: classes.selectIcon,
root: classes.select,
selectMenu: classes.selectMenu
},
input: _ref,
onChange: onChangeSelectState,
value: currentPerPage
}, limits.map(function (limit, index) {
return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: {
root: classes.rootMenuItem,
selected: classes.selectedMenuItem
},
key: index,
value: limit
}, limit);
})), /*#__PURE__*/_react["default"].createElement(_core.Box, {
className: classes.boxStyle
}, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
className: classes.rootLeftIcon,
disabled: parseInt(currentPage) === 1,
onClick: _handleClickLeft,
size: "small"
}, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, {
className: classes.icon
})), /*#__PURE__*/_react["default"].createElement(_core.Input, {
classes: {
input: (0, _clsx["default"])(classes.input, classes.color),
root: classes.rootTextfield
},
disableUnderline: true,
onChange: _handleChange,
onKeyDown: _handleChange,
value: currentPage
}), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
className: classes.slash
}, "/"), /*#__PURE__*/_react["default"].createElement(_core.Typography, null, totalPages > 0 ? totalPages : 1), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
className: classes.rootRightIcon,
disabled: parseInt(currentPage) === parseInt(totalPages),
onClick: _handleClickRight,
size: "small"
}, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, {
className: classes.icon
}))));
};
process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
limits: _propTypes["default"].array,
onChangePage: _propTypes["default"].func,
onChangeSelect: _propTypes["default"].func,
page: _propTypes["default"].number,
totalPages: _propTypes["default"].number,
valueSelect: _propTypes["default"].number
} : void 0;
Pagination.muiName = 'Pagination';
var _default = (0, _styles.withStyles)(styles, {
name: 'KrowdyPagination'
})(Pagination);
exports["default"] = _default;