@popmenu/table 0.19.5 → 0.22.0

package/build/components/Table/TableProps.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cell, Column } from 'react-table';
+import { Cell, Column, TableInstance, UsePaginationOptions } from 'react-table';
 export interface TableProps {
     /** Configurations for each individual column. */
     columns: Array<Column & {
@@ -13,8 +13,8 @@ export interface TableProps {
         label: string;
         action: (cell: Cell) => void;
     }>;
-    /** Styles the table to not shrink below the height of a full page. */
-    enableMinHeight?: boolean;
+    /** Styles the table to maintain the height of a fully populated page (entries in a table, not the window). */
+    fullHeight?: boolean;
     /** Styles the table to take up its containers full width. */
     fullWidth?: boolean;
     /** Enables sortability for columns. */
@@ -25,4 +25,15 @@ export interface TableProps {
     emptyMessage?: string;
     /** An image to be displayed with the empty message. */
     EmptyImage?: () => React.ReactNode;
+    /** Callback for managing pagination events. */
+    onPaginate?: (pageIndex: number, instance: TableInstance) => void;
+    /** Callback for managing pagination events. */
+    paginationOptions?: UsePaginationOptions<Record<string, unknown>> & Partial<{
+        initialState: Partial<{
+            pageSize: number;
+            pageIndex: number;
+        }>;
+    }>;
+    /** Added to the main parameter of the useTable hook. */
+    tableOptions?: Record<string, unknown>;
 }

package/build/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useManualPagination } from './useManualPagination';

package/build/hooks/useManualPagination/index.d.ts

@@ -0,0 +1 @@
+export { useManualPagination } from './useManualPagination';

package/build/hooks/useManualPagination/useManualPagination.d.ts

@@ -0,0 +1,5 @@
+import { UseManualPaginationConfig, UseManualPaginationResult } from './useManualPaginationTypes';
+/**
+ * Makes props for the Table component that will enable manual pagination and also provides page state.
+ */
+export declare const useManualPagination: (config: UseManualPaginationConfig) => UseManualPaginationResult;

package/build/hooks/useManualPagination/useManualPaginationTypes.d.ts

@@ -0,0 +1,52 @@
+import { TableInstance } from 'react-table';
+interface PaginationEvent {
+    /** Index of the page a user has selected. */
+    index: number;
+    /** The entire table instance by react-table. */
+    instance: TableInstance;
+}
+export interface UseManualPaginationConfig {
+    /** The total number of records available. */
+    total: number;
+    /** Sets the default page to show when the table is first presented. */
+    initialPageIndex?: number;
+    /** Sets the default page size to show when the table is first presented. */
+    initialPageSize?: number;
+    /** Callback triggered when a pagination even occurs. setPageIndex, which is the second arg of the callback,
+     * is required to be called manually. */
+    onPaginate?: (paginationEvent: PaginationEvent, setPageIndex: (index: number) => void) => void;
+}
+interface ManualPaginationProps {
+    /** A callback for pagination events. Should map to the Table component's onPaginate prop */
+    onPaginate: (index: number, instance: TableInstance) => void;
+    /** Additional configuration for the Table component. Should map to the Table component's tableOptions prop */
+    tableOptions: {
+        useControlledState: (state: Record<string, unknown>) => Record<string, unknown>;
+    };
+    /** Additional configuration for the Table component. Should map to the Table component's paginationOptions prop */
+    paginationOptions: {
+        initialState: {
+            pageIndex: number;
+            pageSize: number;
+        };
+        manualPagination: boolean;
+        pageCount: number;
+    };
+}
+interface PageState {
+    /** The number of rows a Table shows per page */
+    pageSize: number;
+    /** The page index a Table will show */
+    pageIndex: number;
+    /** Updates pageSize */
+    setPageSize: (size: number) => void;
+    /** Updates pageIndex */
+    setPageIndex: (index: number) => void;
+}
+export interface UseManualPaginationResult {
+    /** A collection of props for the Table component that will enable manual pagination. Apply with spread operator. */
+    manualPaginationProps: ManualPaginationProps;
+    /** Stateful values for controlling pages of a Table */
+    pageState: PageState;
+}
+export {};

package/build/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './hooks';

package/build/index.es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useMemo } from 'react';
+import React__default, { forwardRef, createElement, useMemo, useState } from 'react';
 import { useTable } from 'react-table/src/hooks/useTable.js';
 import { usePagination } from 'react-table/src/plugin-hooks/usePagination.js';
 import { useSortBy } from 'react-table/src/plugin-hooks/useSortBy.js';
@@ -678,6 +678,34 @@ var Tooltip = forwardRef(function (props, ref) {
 });
 Tooltip.displayName = 'Tooltip';
 
+makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(1),
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        minWidth: 40,
+        padding: 0,
+        textAlign: 'center',
+    },
+    adornedStart: {
+        padding: 0,
+    },
+    adornedEnd: {
+        padding: 0,
+    },
+}); });
+
 var TableFooter = function (props) {
     return (React__default.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
 };
@@ -810,9 +838,15 @@ var TableBody = function (props) {
     return React__default.createElement("tbody", __assign$1({}, restProps), children);
 };
 
+var tableConstants = {
+    tableTypography: 'body1',
+    cellPaddingFactor: 2,
+    headerBorder: 2,
+};
+
 var useTableCellStyles = makeStyles(function (theme) { return ({
     root: function () { return ({
-        padding: theme.spacing(2),
+        padding: theme.spacing(tableConstants.cellPaddingFactor),
     }); },
 }); });
 
@@ -834,7 +868,7 @@ var useTableStyles = 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%',
@@ -900,36 +934,92 @@ 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 = useTheme$1();
     var classes = useTableStyles(props);
     var columns = useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    var instance = useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy, 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(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useSortBy, 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.createElement(Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
-        React__default.createElement(Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
+    return (React__default.createElement(Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
+        React__default.createElement(Box, { className: classes.tableWrap },
             React__default.createElement("table", __assign$1({ className: classes.table }, getTableProps()),
                 React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__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.createElement(TableBody, __assign$1({}, getTableBodyProps()), page.map(function (row) {
                     prepareRow(row);
                     return (React__default.createElement(TableRow, __assign$1({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default.createElement(TableCell, __assign$1({}, cell.getCellProps()), cell.render('Cell'))); })));
                 }))))),
-        isEmpty && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
+        isEmpty && !isLoading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
             EmptyImage && EmptyImage(),
             React__default.createElement(Typography, null, emptyMessage))),
         isLoading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
             React__default.createElement(CircularProgress, { size: 80, color: "inherit" }))),
-        isPaginated && !isLoading && (React__default.createElement(TableFooter, null,
-            React__default.createElement(Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
+        isPaginated && (React__default.createElement(TableFooter, null,
+            React__default.createElement(Pagination, { count: pageCount, page: instance.state.pageIndex + 1, onChange: handlePagination })))));
 };
 Table.defaultProps = {
     emptyMessage: 'No results.',
-    enableMinHeight: true,
 };
 
-export { Table };
+/**
+ * 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 = useState(0), pageIndex = _c[0], setPageIndex = _c[1];
+    var _d = 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 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,
+    };
+};
+
+export { Table, useManualPagination };
 //# sourceMappingURL=index.es.js.map