@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
66 lines (65 loc) • 6.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_FOOTER_HEADER_ELEMENTS = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var Alert_1 = tslib_1.__importDefault(require("react-bootstrap/Alert"));
var ProgressBar_1 = tslib_1.__importDefault(require("react-bootstrap/ProgressBar"));
var Table_1 = tslib_1.__importDefault(require("react-bootstrap/Table"));
var ControlledContext_1 = tslib_1.__importStar(require("./ControlledContext"));
var DefaultColumnHeaderCell_1 = tslib_1.__importDefault(require("./DefaultColumnHeaderCell"));
var DefaultColumnHeaderRow_1 = tslib_1.__importDefault(require("./DefaultColumnHeaderRow"));
var DefaultHeaderFooter_1 = require("./DefaultHeaderFooter");
var defaultItemFieldCellHyperlink_1 = tslib_1.__importDefault(require("./defaultItemFieldCellHyperlink"));
var DefaultItemFieldCellLinkWrapper_1 = tslib_1.__importDefault(require("./DefaultItemFieldCellLinkWrapper"));
var DefaultItemFieldCellRenderer_1 = tslib_1.__importDefault(require("./DefaultItemFieldCellRenderer"));
var DefaultNoContentRow_1 = tslib_1.__importDefault(require("./DefaultNoContentRow"));
var DefaultRowsRenderer_1 = tslib_1.__importDefault(require("./DefaultRowsRenderer"));
var PageIndexSelector_1 = tslib_1.__importDefault(require("./PageIndexSelector"));
var PageSizeSelector_1 = tslib_1.__importDefault(require("./PageSizeSelector"));
var useStateOfVisibleFields_1 = tslib_1.__importDefault(require("./visibleFields/useStateOfVisibleFields"));
var useVisibleFields_1 = tslib_1.__importDefault(require("./visibleFields/useVisibleFields"));
var VisibleFieldsButton_1 = tslib_1.__importDefault(require("./visibleFields/VisibleFieldsButton"));
exports.DEFAULT_FOOTER_HEADER_ELEMENTS = [[[VisibleFieldsButton_1.default, PageIndexSelector_1.default], [PageSizeSelector_1.default]]];
function ControlledBase(_a) {
var _b = _a.columnHeaderCell, columnHeaderCell = _b === void 0 ? DefaultColumnHeaderCell_1.default : _b, _c = _a.columnHeaderRow, columnHeaderRow = _c === void 0 ? DefaultColumnHeaderRow_1.default : _c, _d = _a.disableVisibleFieldsChange, disableVisibleFieldsChange = _d === void 0 ? false : _d, _e = _a.footerElements, footerElements = _e === void 0 ? exports.DEFAULT_FOOTER_HEADER_ELEMENTS : _e, _f = _a.footerRenderer, footerRenderer = _f === void 0 ? DefaultHeaderFooter_1.DefaultFooter : _f, _g = _a.hasError, hasError = _g === void 0 ? false : _g, _h = _a.headerElements, headerElements = _h === void 0 ? exports.DEFAULT_FOOTER_HEADER_ELEMENTS : _h, _j = _a.headerRenderer, headerRenderer = _j === void 0 ? DefaultHeaderFooter_1.DefaultHeader : _j, idPrefix = _a.idPrefix, _k = _a.itemFieldCellHyperlink, itemFieldCellHyperlink = _k === void 0 ? defaultItemFieldCellHyperlink_1.default : _k, _l = _a.itemFieldCellLinkWrapper, itemFieldCellLinkWrapper = _l === void 0 ? DefaultItemFieldCellLinkWrapper_1.default : _l, _m = _a.itemFieldCellRenderer, itemFieldCellRenderer = _m === void 0 ? DefaultItemFieldCellRenderer_1.default : _m, itemModel = _a.itemModel, _o = _a.loading, loading = _o === void 0 ? false : _o, _p = _a.noContentRow, noContentRow = _p === void 0 ? DefaultNoContentRow_1.default : _p, page = _a.page, _q = _a.rowsRenderer, rowsRenderer = _q === void 0 ? DefaultRowsRenderer_1.default : _q, size = _a.size, _r = _a.tableProps, tableProps = _r === void 0 ? {
bordered: true,
hover: true,
striped: true,
style: {
height: 'fit-content',
width: 'auto !important',
}
} : _r, etcProps = tslib_1.__rest(_a, ["columnHeaderCell", "columnHeaderRow", "disableVisibleFieldsChange", "footerElements", "footerRenderer", "hasError", "headerElements", "headerRenderer", "idPrefix", "itemFieldCellHyperlink", "itemFieldCellLinkWrapper", "itemFieldCellRenderer", "itemModel", "loading", "noContentRow", "page", "rowsRenderer", "size", "tableProps"]);
var _s = tslib_1.__read(useStateOfVisibleFields_1.default(disableVisibleFieldsChange, idPrefix, itemModel), 2), visibleFields = _s[0], onVisibleFieldsChange = _s[1];
// memoize?
var actualTableProps = tslib_1.__assign({ size: size }, tableProps);
var contextValue = tslib_1.__assign({
// used here props
columnHeaderCell: columnHeaderCell, columnHeaderRow: columnHeaderRow, disableVisibleFieldsChange: disableVisibleFieldsChange, footerElements: footerElements, footerRenderer: footerRenderer, hasError: hasError, headerElements: headerElements, headerRenderer: headerRenderer, idPrefix: idPrefix, itemFieldCellHyperlink: itemFieldCellHyperlink, itemFieldCellLinkWrapper: itemFieldCellLinkWrapper, itemFieldCellRenderer: itemFieldCellRenderer, itemModel: itemModel, loading: loading, noContentRow: noContentRow, page: page, rowsRenderer: rowsRenderer, size: size,
// additional context fields
visibleFields: visibleFields, onVisibleFieldsChange: onVisibleFieldsChange }, etcProps);
return react_1.default.createElement(ControlledContext_1.default.Provider, { value: contextValue },
react_1.default.createElement(headerRenderer),
react_1.default.createElement(Table_1.default, tslib_1.__assign({}, actualTableProps),
react_1.default.createElement(TableHead, null),
react_1.default.createElement("tbody", null,
!loading && !hasError && page.content.length == 0 && react_1.default.createElement(noContentRow),
react_1.default.createElement(rowsRenderer))),
react_1.default.createElement(footerRenderer));
}
exports.default = ControlledBase;
var TableHead = function () {
var _a = ControlledContext_1.useControlledContext(), columnHeaderRow = _a.columnHeaderRow, error = _a.error, hasError = _a.hasError, loading = _a.loading;
var visibleFields = useVisibleFields_1.default();
return react_1.default.createElement("thead", null,
react_1.default.createElement(columnHeaderRow),
loading && react_1.default.createElement("tr", null,
react_1.default.createElement("td", { colSpan: visibleFields.length },
react_1.default.createElement(ProgressBar_1.default, { animated: true, max: 100, min: 0, now: 100 }))),
hasError && react_1.default.createElement("tr", null,
react_1.default.createElement("td", { colSpan: visibleFields.length },
react_1.default.createElement(Alert_1.default, { style: { margin: 0 }, variant: "danger" },
'Error occured while loading',
!!error && ": " + (error.message || JSON.stringify(error))))));
};