oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
100 lines (99 loc) • 6.03 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 context_1 = __importDefault(require("./context"));
const styled_1 = __importDefault(require("./styled"));
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 Table = (props) => {
const { children, className, footerClassName, rowsPerPageOptions = [5, 10, 25], rowsPerPageAllText = 'All', colSpan, count = 0, rowsPerPage = 0, page = 0, pagination, onChangePage, onChangeRowsPerPage, labelRowsPerPage = 'Rows per page:', } = props;
const [state, setState] = react_1.useState();
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 && onChangePage(newPage);
};
const set = (data) => {
setState(data);
};
return (react_1.default.createElement(context_1.default.Provider, { value: {
tableSetState: (data) => set(data),
tableState: state,
} },
react_1.default.createElement(styled_1.default, { className: className },
react_1.default.createElement("div", { className: "custom-table-root" }, children)),
pagination ? (react_1.default.createElement("div", { className: `custom-table-footer ${footerClassName}` },
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, labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} / ${count}` }))) : null));
};
Table.propTypes = {
className: prop_types_1.default.string,
footerClassName: prop_types_1.default.string,
rowsPerPageAllText: prop_types_1.default.string,
labelRowsPerPage: prop_types_1.default.string,
count: prop_types_1.default.number,
children: prop_types_1.default.node.isRequired,
colSpan: prop_types_1.default.bool,
pagination: prop_types_1.default.bool,
rowsPerPage: prop_types_1.default.number,
rowsPerPageOptions: prop_types_1.default.arrayOf(prop_types_1.default.number),
page: prop_types_1.default.number,
onChangePage: prop_types_1.default.func,
onChangeRowsPerPage: prop_types_1.default.func,
};
exports.TableTmp = Table;
exports.default = react_1.default.memo(Table, (p, n) => lodash_1.isEqual(p, n));