oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
78 lines (77 loc) • 4.76 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const lodash_1 = require("lodash");
const withTable_1 = require("./withTable");
const prop_types_1 = __importDefault(require("prop-types"));
const core_1 = require("@material-ui/core");
const FirstPage_1 = __importDefault(require("@material-ui/icons/FirstPage"));
const KeyboardArrowLeft_1 = __importDefault(require("@material-ui/icons/KeyboardArrowLeft"));
const KeyboardArrowRight_1 = __importDefault(require("@material-ui/icons/KeyboardArrowRight"));
const LastPage_1 = __importDefault(require("@material-ui/icons/LastPage"));
const styles_1 = require("@material-ui/core/styles");
const useStyles1 = styles_1.makeStyles((theme) => styles_1.createStyles({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5),
},
}));
function TablePaginationActions(props) {
const classes = useStyles1();
const theme = styles_1.useTheme();
const { count, page, rowsPerPage, onChangePage } = props;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
};
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (react_1.default.createElement("div", { className: classes.root },
react_1.default.createElement(core_1.IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, theme.direction === 'rtl' ? react_1.default.createElement(LastPage_1.default, null) : react_1.default.createElement(FirstPage_1.default, null)),
react_1.default.createElement(core_1.IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, theme.direction === 'rtl' ? react_1.default.createElement(KeyboardArrowRight_1.default, null) : react_1.default.createElement(KeyboardArrowLeft_1.default, null)),
react_1.default.createElement(core_1.IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, theme.direction === 'rtl' ? react_1.default.createElement(KeyboardArrowLeft_1.default, null) : react_1.default.createElement(KeyboardArrowRight_1.default, null)),
react_1.default.createElement(core_1.IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, theme.direction === 'rtl' ? react_1.default.createElement(FirstPage_1.default, null) : react_1.default.createElement(LastPage_1.default, null))));
}
const Footer = (props) => {
const { className, rowsPerPageOptions = [5, 10, 25], rowsPerPageAllText = 'All', colSpan, count, rowsPerPage, page, onChangePage, onChangeRowsPerPage, labelRowsPerPage = 'Rows per page:', } = props;
const [selectedPerPage, setSelectedPerPage] = react_1.useState(rowsPerPageOptions[0] || 5);
const handleChangeRowsPerPage = (e) => {
setSelectedPerPage(parseInt(e.target.value, 10));
onChangeRowsPerPage && onChangeRowsPerPage(parseInt(e.target.value, 10));
};
const handleChangePage = (event, newPage) => {
onChangePage(newPage);
};
return (react_1.default.createElement("div", { className: `custom-table-footer ${className}` },
react_1.default.createElement(core_1.TablePagination, { rowsPerPageOptions: [
...rowsPerPageOptions,
{
label: rowsPerPageAllText,
value: -1,
},
], colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, component: "div", SelectProps: {
value: selectedPerPage,
}, onChangePage: handleChangePage, onChangeRowsPerPage: handleChangeRowsPerPage, labelRowsPerPage: labelRowsPerPage, ActionsComponent: TablePaginationActions })));
};
Footer.propTypes = {
children: prop_types_1.default.any,
className: prop_types_1.default.string,
};
const MemoComponent = react_1.default.memo(Footer, (p, n) => lodash_1.isEqual(p, n));
exports.default = withTable_1.withTable(MemoComponent);