@proteinjs/ui 4.1.0 → 4.1.1

package/src/table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   TableContainer,
@@ -14,6 +14,8 @@ import {
   TableContainerOwnProps,
   ToolbarProps,
   CircularProgress,
+  TablePaginationProps,
+  TableCellProps,
 } from '@mui/material';
 import moment from 'moment';
 import { StringUtil } from '@proteinjs/util';
@@ -27,13 +29,16 @@ type ColumnValue<T, K extends keyof T> = T[K];
 export type CustomRenderer<T, K extends keyof T> = (value: ColumnValue<T, K>, row: T) => React.ReactNode;
 export type ColumnConfig<T> = {
   [K in keyof T]?: {
+    cellProps?: TableCellProps;
     renderer?: CustomRenderer<T, K>;
     /** If no header is provided, a default header will be used. Pass in `null` if you'd like the header to be omitted. */
     header?: string | React.ReactNode;
   };
 };
 
-type RowClickAction<T> = string | ((row: T) => void | Promise<void> | string | Promise<string>);
+type RowClickAction<T> =
+  | string
+  | ((row: T, event?: React.MouseEvent) => void | Promise<void> | string | Promise<string>);
 
 export type TableProps<T> = {
   title?: string;
@@ -42,6 +47,7 @@ export type TableProps<T> = {
   columnConfig?: ColumnConfig<T>;
   hideColumnHeaders?: boolean;
   tableLoader: TableLoader<T>;
+  refetchOnWindowFocus?: boolean;
   /** Setter which will be used to update the row count when rows are loaded */
   setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>;
   rowOnClick?: RowClickAction<T>;
@@ -49,8 +55,10 @@ export type TableProps<T> = {
   buttons?: TableButton<T>[];
   /** If true, use pagination for table page navigation, if false uses infinite scroll. Defaults to false. */
   pagination?: boolean;
-  /* Pertains to pagination or infinite scroll, depending on which is enabled. */
-  defaultRowsPerPage?: number;
+  /** Props passed into the TablePagination component. This component is only displayed if `pagination` is true. */
+  tablePaginationProps?: Partial<TablePaginationProps>;
+  /* Number of rows that are loaded per page. */
+  rowsPerPage?: number;
   /* Styling set on the root element of the toolbar. */
   toolbarSx?: ToolbarProps['sx'];
   /* Content that will be displayed in the toolbar section of the table. */
@@ -59,8 +67,15 @@ export type TableProps<T> = {
   tableContainerSx?: TableContainerOwnProps['sx'];
   /* Component displayed when there are no rows to display. */
   emptyTableComponent?: React.ReactNode;
-  /* Loading skeleton that's displayed before the table rows are first fetched. */
+  /* Loading skeleton that's displayed before the table rows are first fetched.\
+   * You can use these class names to target the containers with styling:
+   * - `loading-skeleton-table-body`
+   * - `loading-skeleton-row`
+   * - `loading-skeleton-cell`
+   */
   skeleton?: React.ReactNode;
+  /** Loader to display while items are fetching. Only applicable when pagination prop is false. */
+  infiniteScrollLoader?: React.ReactNode;
 };
 
 export function Table<T>({
@@ -70,26 +85,43 @@ export function Table<T>({
   columnConfig = {},
   hideColumnHeaders = false,
   tableLoader,
+  refetchOnWindowFocus = false,
   rowOnClick,
   setRowCount,
   pagination = false,
-  defaultRowsPerPage = 10,
+  tablePaginationProps,
+  rowsPerPage: rowsPerPageProp = 10,
   buttons,
   tableContainerSx,
   toolbarSx,
   toolbarContent,
   emptyTableComponent,
   skeleton,
+  infiniteScrollLoader,
 }: TableProps<T>) {
   const infiniteScroll = !pagination;
-  const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
   const [page, setPage] = useState(0);
   const [selectedRows, setSelectedRows] = useState<{ [key: number]: T }>({});
   const [selectAll, setSelectAll] = useState(false);
+  const infScrollContainerRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
 
   const { rows, totalRows, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage, resetQuery } =
-    useTableData<T>(tableLoader, rowsPerPage, page, infiniteScroll, setRowCount);
+    useTableData<T>(tableLoader, rowsPerPage, page, infiniteScroll, setRowCount, refetchOnWindowFocus);
+
+  const maxPage = Math.max(0, Math.ceil((totalRows || 0) / rowsPerPage) - 1);
+
+  // Adjust page if it exceeds maxPage
+  useEffect(() => {
+    if (!pagination || isLoading) {
+      return;
+    }
+
+    if (page > maxPage && maxPage >= 0) {
+      setPage(maxPage);
+    }
+  }, [page, maxPage, pagination, isLoading, totalRows]);
 
   useEffect(() => {
     resetQuery();
@@ -115,7 +147,12 @@ export function Table<T>({
     }
   }, [fetchNextPage, isFetchingNextPage]);
 
-  async function handleRowOnClick<T>(row: T, action: RowClickAction<T>, navigate: (url: string) => void) {
+  async function handleRowOnClick<T>(
+    row: T,
+    event: React.MouseEvent,
+    action: RowClickAction<T>,
+    navigate: (url: string) => void
+  ) {
     if (!action) {
       return;
     }
@@ -131,7 +168,7 @@ export function Table<T>({
     }
 
     // If action is a function, execute it
-    const result = action(row);
+    const result = action(row, event);
 
     if (result instanceof Promise) {
       // If the result is a Promise, wait for it to resolve
@@ -250,9 +287,9 @@ export function Table<T>({
             </TableRow>
           </TableHead>
           {isLoading && (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={totalColumns} align='center' sx={{ py: 3 }}>
+            <TableBody className='loading-skeleton-table-body'>
+              <TableRow className='loading-skeleton-row'>
+                <TableCell colSpan={totalColumns} align='center' className='loading-skeleton-cell' sx={{ py: 3 }}>
                   {skeleton ? skeleton : <CircularProgress />}
                 </TableCell>
               </TableRow>
@@ -278,7 +315,11 @@ export function Table<T>({
                     tabIndex={-1}
                     key={index}
                     selected={isSelected}
-                    onClick={rowOnClick ? () => handleRowOnClick(row, rowOnClick, navigate) : undefined}
+                    onClick={
+                      rowOnClick
+                        ? (event: React.MouseEvent) => handleRowOnClick(row, event, rowOnClick, navigate)
+                        : undefined
+                    }
                   >
                     {buttons && buttons.length > 0 && (
                       <TableCell padding='checkbox'>
@@ -298,7 +339,7 @@ export function Table<T>({
                     {columns.map((column, index) => {
                       const { value: cellValue, isCustomRendered } = formatCellValue(row[column], column, row);
                       return (
-                        <TableCell key={index}>
+                        <TableCell key={index} {...columnConfig?.[column]?.cellProps}>
                           {isCustomRendered ? cellValue : <Typography>{cellValue}</Typography>}
                         </TableCell>
                       );
@@ -325,33 +366,36 @@ export function Table<T>({
           sx={toolbarSx}
         />
       )}
-      <Box id='infinite-scroll-container' sx={{ width: '100%', flexGrow: 1, overflow: 'auto' }}>
+      <Box ref={infScrollContainerRef} sx={{ width: '100%', flexGrow: 1, overflow: 'auto' }}>
         {infiniteScroll ? (
           <InfiniteScroll
             dataLength={rows.length}
             next={handleFetchNextPage}
             hasMore={!!hasNextPage}
             loader={
-              <Typography variant='body2' sx={{ p: 3 }}>
-                Loading...
-              </Typography>
+              infiniteScrollLoader || (
+                <Typography variant='body2' sx={{ p: 2 }}>
+                  Loading...
+                </Typography>
+              )
             }
-            scrollableTarget='infinite-scroll-container'
+            scrollableTarget={React.createElement('div', { ref: infScrollContainerRef })}
           >
             {renderTableContainer()}
           </InfiniteScroll>
         ) : (
           renderTableContainer()
         )}
-        {pagination && !isLoading && (
+        {pagination && (
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 50, 100, 200]}
             component='div'
             count={totalRows || 0}
             rowsPerPage={rowsPerPage}
-            page={page}
+            page={isLoading ? page : Math.min(page, maxPage)}
             onPageChange={(event, newPage) => setPage(newPage)}
             onRowsPerPageChange={(event) => updateRowsPerPage(parseInt(event.target.value))}
+            {...tablePaginationProps}
           />
         )}
       </Box>

package/src/table/tableData.ts

@@ -11,12 +11,18 @@ import {
 import { TableLoader, RowWindow } from './TableLoader';
 import { useCallback, useMemo } from 'react';
 
+export type InfiniteQueryData<T> = {
+  pages: RowWindow<T>[];
+  pageParams: any[];
+};
+
 export function useTableData<T>(
   tableLoader: TableLoader<T>,
   rowsPerPage: number,
   page: number,
   infiniteScroll: boolean,
-  setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>
+  setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>,
+  refetchOnWindowFocus = false
 ) {
   const startIndex = useMemo(() => page * rowsPerPage, [page, rowsPerPage]);
   const endIndex = useMemo(() => startIndex + rowsPerPage, [startIndex, rowsPerPage]);
@@ -26,7 +32,7 @@ export function useTableData<T>(
     isLoading: isPaginatedLoading,
     error: paginatedError,
     refetch: refetchPaginatedData,
-  } = usePaginationTableQuery<T>(tableLoader, startIndex, endIndex, !infiniteScroll);
+  } = usePaginationTableQuery<T>(tableLoader, startIndex, endIndex, !infiniteScroll, refetchOnWindowFocus);
 
   const {
     data: infiniteData,
@@ -36,7 +42,7 @@ export function useTableData<T>(
     isFetchingNextPage,
     error: infiniteError,
     refetch: refetchInfiniteData,
-  } = useInfiniteScrollTableQuery<T>(tableLoader, rowsPerPage, setRowCount, infiniteScroll);
+  } = useInfiniteScrollTableQuery<T>(tableLoader, rowsPerPage, setRowCount, infiniteScroll, refetchOnWindowFocus);
 
   const rows = useMemo(
     () =>
@@ -90,7 +96,8 @@ export const usePaginationTableQuery = <T>(
   tableLoader: TableLoader<T>,
   startIndex: number,
   endIndex: number,
-  enabled = false
+  enabled = false,
+  refetchOnWindowFocus = false
 ): UseQueryResult<RowWindow<T>, Error> => {
   const { reactQueryKeys } = tableLoader;
 
@@ -105,7 +112,7 @@ export const usePaginationTableQuery = <T>(
     async () => await tableLoader.load(startIndex, endIndex),
     {
       enabled,
-      refetchOnWindowFocus: false,
+      refetchOnWindowFocus,
     }
   );
 };
@@ -114,7 +121,8 @@ export const useInfiniteScrollTableQuery = <T>(
   tableLoader: TableLoader<T>,
   rowsPerPage: number,
   setRowCount?: React.Dispatch<React.SetStateAction<number | undefined>>,
-  enabled = true
+  enabled = true,
+  refetchOnWindowFocus = false
 ): UseInfiniteQueryResult<RowWindow<T>, Error> => {
   const { reactQueryKeys } = tableLoader;
 
@@ -145,7 +153,7 @@ export const useInfiniteScrollTableQuery = <T>(
         endIndex: nextStartIndex + rowsPerPage,
       };
     },
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus,
   });
 };
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Brent Bahry
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.