@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
62 lines (61 loc) • 5.64 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React from 'react';
import Alert from 'react-bootstrap/Alert';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Table from 'react-bootstrap/Table';
import ControlledContext, { useControlledContext } from './ControlledContext';
import DefaultColumnHeaderCell from './DefaultColumnHeaderCell';
import DefaultColumnHeaderRow from './DefaultColumnHeaderRow';
import { DefaultFooter, DefaultHeader } from './DefaultHeaderFooter';
import defaultItemFieldCellHyperlink from './defaultItemFieldCellHyperlink';
import DefaultItemFieldCellLinkWrapper from './DefaultItemFieldCellLinkWrapper';
import DefaultItemFieldCellRenderer from './DefaultItemFieldCellRenderer';
import DefaultNoContentRow from './DefaultNoContentRow';
import DefaultRowsRenderer from './DefaultRowsRenderer';
import PageIndexSelector from './PageIndexSelector';
import PageSizeSelector from './PageSizeSelector';
import useStateOfVisibleFields from './visibleFields/useStateOfVisibleFields';
import useVisibleFields from './visibleFields/useVisibleFields';
import VisibleFieldsButton from './visibleFields/VisibleFieldsButton';
export var DEFAULT_FOOTER_HEADER_ELEMENTS = [[[VisibleFieldsButton, PageIndexSelector], [PageSizeSelector]]];
export default function ControlledBase(_a) {
var _b = _a.columnHeaderCell, columnHeaderCell = _b === void 0 ? DefaultColumnHeaderCell : _b, _c = _a.columnHeaderRow, columnHeaderRow = _c === void 0 ? DefaultColumnHeaderRow : _c, _d = _a.disableVisibleFieldsChange, disableVisibleFieldsChange = _d === void 0 ? false : _d, _e = _a.footerElements, footerElements = _e === void 0 ? DEFAULT_FOOTER_HEADER_ELEMENTS : _e, _f = _a.footerRenderer, footerRenderer = _f === void 0 ? DefaultFooter : _f, _g = _a.hasError, hasError = _g === void 0 ? false : _g, _h = _a.headerElements, headerElements = _h === void 0 ? DEFAULT_FOOTER_HEADER_ELEMENTS : _h, _j = _a.headerRenderer, headerRenderer = _j === void 0 ? DefaultHeader : _j, idPrefix = _a.idPrefix, _k = _a.itemFieldCellHyperlink, itemFieldCellHyperlink = _k === void 0 ? defaultItemFieldCellHyperlink : _k, _l = _a.itemFieldCellLinkWrapper, itemFieldCellLinkWrapper = _l === void 0 ? DefaultItemFieldCellLinkWrapper : _l, _m = _a.itemFieldCellRenderer, itemFieldCellRenderer = _m === void 0 ? DefaultItemFieldCellRenderer : _m, itemModel = _a.itemModel, _o = _a.loading, loading = _o === void 0 ? false : _o, _p = _a.noContentRow, noContentRow = _p === void 0 ? DefaultNoContentRow : _p, page = _a.page, _q = _a.rowsRenderer, rowsRenderer = _q === void 0 ? DefaultRowsRenderer : _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 = __rest(_a, ["columnHeaderCell", "columnHeaderRow", "disableVisibleFieldsChange", "footerElements", "footerRenderer", "hasError", "headerElements", "headerRenderer", "idPrefix", "itemFieldCellHyperlink", "itemFieldCellLinkWrapper", "itemFieldCellRenderer", "itemModel", "loading", "noContentRow", "page", "rowsRenderer", "size", "tableProps"]);
var _s = __read(useStateOfVisibleFields(disableVisibleFieldsChange, idPrefix, itemModel), 2), visibleFields = _s[0], onVisibleFieldsChange = _s[1];
// memoize?
var actualTableProps = __assign({ size: size }, tableProps);
var contextValue = __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.createElement(ControlledContext.Provider, { value: contextValue },
React.createElement(headerRenderer),
React.createElement(Table, __assign({}, actualTableProps),
React.createElement(TableHead, null),
React.createElement("tbody", null,
!loading && !hasError && page.content.length == 0 && React.createElement(noContentRow),
React.createElement(rowsRenderer))),
React.createElement(footerRenderer));
}
var TableHead = function () {
var _a = useControlledContext(), columnHeaderRow = _a.columnHeaderRow, error = _a.error, hasError = _a.hasError, loading = _a.loading;
var visibleFields = useVisibleFields();
return React.createElement("thead", null,
React.createElement(columnHeaderRow),
loading && React.createElement("tr", null,
React.createElement("td", { colSpan: visibleFields.length },
React.createElement(ProgressBar, { animated: true, max: 100, min: 0, now: 100 }))),
hasError && React.createElement("tr", null,
React.createElement("td", { colSpan: visibleFields.length },
React.createElement(Alert, { style: { margin: 0 }, variant: "danger" },
'Error occured while loading',
!!error && ": " + (error.message || JSON.stringify(error))))));
};