@popmenu/table 0.19.5 → 0.20.0

package/build/index.js

@@ -852,9 +852,15 @@ var TableBody = function (props) {
     return React__default['default'].createElement("tbody", __assign$1({}, restProps), children);
 };
 
+var tableConstants = {
+    tableTypography: 'body1',
+    cellPaddingFactor: 2,
+    headerBorder: 2,
+};
+
 var useTableCellStyles = core.makeStyles(function (theme) { return ({
     root: function () { return ({
-        padding: theme.spacing(2),
+        padding: theme.spacing(tableConstants.cellPaddingFactor),
     }); },
 }); });
 
@@ -876,7 +882,7 @@ var useTableStyles = core.makeStyles(function (_a) {
         },
         table: function (_a) {
             var fullWidth = _a.fullWidth;
-            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography.body1));
+            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
         },
         tableWrap: function () { return ({
             maxWidth: '100%',
@@ -942,36 +948,93 @@ var makeColumns = function (config) {
 /* eslint-disable react/jsx-key */
 var Table = function (props) {
     var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, enableMinHeight = props.enableMinHeight;
+    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, fullHeight = props.fullHeight, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, onPaginate = props.onPaginate;
+    var theme = core.useTheme();
     var classes = useTableStyles(props);
     var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    var instance = useTable_js.useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy_js.useSortBy, usePagination_js.usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, state = instance.state, rows = instance.rows;
+    var initialPaginationState = paginationOptions.initialState, restPaginationOptions = __rest$1(paginationOptions, ["initialState"]);
+    var initialState = __assign$1({}, initialPaginationState);
+    var instance = useTable_js.useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useSortBy_js.useSortBy, usePagination_js.usePagination);
+    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows;
     var isPaginated = pageCount > 1;
     var isEmpty = rows.length === 0;
+    var lineHeightRem = parseFloat(theme.typography[tableConstants.tableTypography].lineHeight);
+    var documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    var typographyHeight = lineHeightRem * documentFontSize;
+    var cellHeight = typographyHeight + theme.spacing(tableConstants.cellPaddingFactor * 2);
+    var headerHeight = cellHeight + tableConstants.headerBorder;
+    var bodyHeight = instance.state.pageSize * cellHeight;
+    var footerHeight = 88;
+    var minHeight = headerHeight + bodyHeight + footerHeight;
     var handlePagination = function (_e, pageNumber) {
-        gotoPage(pageNumber - 1);
+        var pageIndex = pageNumber - 1;
+        if (onPaginate) {
+            onPaginate(pageIndex, instance);
+        }
+        else {
+            gotoPage(pageIndex);
+        }
     };
-    return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
-        React__default['default'].createElement(core.Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
+    return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
+        React__default['default'].createElement(core.Box, { className: classes.tableWrap },
             React__default['default'].createElement("table", __assign$1({ className: classes.table }, getTableProps()),
                 React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
                 !isEmpty && !isLoading && (React__default['default'].createElement(TableBody, __assign$1({}, getTableBodyProps()), page.map(function (row) {
                     prepareRow(row);
                     return (React__default['default'].createElement(TableRow, __assign$1({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default['default'].createElement(TableCell, __assign$1({}, cell.getCellProps()), cell.render('Cell'))); })));
                 }))))),
-        isEmpty && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
+        isEmpty && !isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
             EmptyImage && EmptyImage(),
             React__default['default'].createElement(Typography, null, emptyMessage))),
         isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
             React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
-        isPaginated && !isLoading && (React__default['default'].createElement(TableFooter, null,
-            React__default['default'].createElement(lab.Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
+        isPaginated && (React__default['default'].createElement(TableFooter, null,
+            React__default['default'].createElement(lab.Pagination, { count: pageCount, page: instance.state.pageIndex + 1, onChange: handlePagination })))));
 };
 Table.defaultProps = {
     emptyMessage: 'No results.',
-    enableMinHeight: true,
+};
+
+/**
+ * Makes props for the Table component that will enable manual pagination and also provides page state.
+ */
+var useManualPagination = function (config) {
+    var _a = config.initialPageIndex, initialPageIndex = _a === void 0 ? 0 : _a, _b = config.initialPageSize, initialPageSize = _b === void 0 ? 10 : _b, total = config.total, onPaginate = config.onPaginate;
+    var _c = React.useState(0), pageIndex = _c[0], setPageIndex = _c[1];
+    var _d = React.useState(initialPageSize), pageSize = _d[0], setPageSize = _d[1];
+    var handlePagination = function (index, instance) {
+        if (onPaginate) {
+            onPaginate({ index: index, instance: instance }, setPageIndex);
+        }
+        else {
+            setPageIndex(index);
+        }
+    };
+    var manualPaginationProps = {
+        onPaginate: handlePagination,
+        tableOptions: {
+            useControlledState: function (state) {
+                return React.useMemo(function () { return (__assign$1(__assign$1({}, state), { pageIndex: pageIndex, pageSize: pageSize })); }, [pageIndex, pageSize]);
+            },
+        },
+        paginationOptions: {
+            initialState: { pageIndex: initialPageIndex, pageSize: pageSize },
+            manualPagination: true,
+            pageCount: Math.ceil(total / pageSize),
+        },
+    };
+    var pageState = {
+        pageIndex: pageIndex,
+        pageSize: pageSize,
+        setPageIndex: setPageIndex,
+        setPageSize: setPageSize,
+    };
+    return {
+        manualPaginationProps: manualPaginationProps,
+        pageState: pageState,
+    };
 };
 
 exports.Table = Table;
+exports.useManualPagination = useManualPagination;
 //# sourceMappingURL=index.js.map