@xyo-network/react-payload-table 2.37.24 → 2.37.26

package/src/components/Table/Table.tsx

@@ -3,7 +3,7 @@ import { useBreakpoint } from '@xylabs/react-shared'
 import { PayloadWrapper, XyoPayload } from '@xyo-network/payload'
 import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
 import { TableEx, TableExProps, TableFooterEx } from '@xyo-network/react-table'
-import { useEffect, useMemo, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 
 import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
 import { TablePaginationActions } from './TablePagination'
@@ -13,140 +13,158 @@ export interface PayloadTableProps extends TableExProps {
   exploreDomain?: string
   archive?: string
   onRowClick?: (value: XyoPayload) => void
-  fetchMorePayloads?: () => boolean
   rowsPerPage?: number
   payloads?: XyoPayload[] | null
+  loading?: boolean
   columns?: PayloadTableColumnConfig
+  /** External trigger to fetch more payloads */
+  fetchMorePayloads?: () => void
+  /** set number of schema parts to display starting from the end */
   maxSchemaDepth?: number
-  count?: number | null
-  loading?: boolean
+  /** Total number of payloads passed */
+  count?: number
 }
 
-export const PayloadTable: React.FC<PayloadTableProps> = ({
-  exploreDomain,
-  archive,
-  onRowClick,
-  fetchMorePayloads,
-  rowsPerPage: rowsPerPageProp = 25,
-  payloads,
-  children,
-  columns = payloadTableColumnConfigDefaults(),
-  maxSchemaDepth,
-  count,
-  loading = false,
-  variant = 'scrollable',
-  ...props
-}) => {
-  const breakPoint = useBreakpoint()
-  const [page, setPage] = useState(0)
-  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
-  const [payloadCount, setPayloadCount] = useState(0)
+export const PayloadTableWithRef = forwardRef<HTMLTableElement, PayloadTableProps>(
+  (
+    {
+      exploreDomain,
+      archive,
+      onRowClick,
+      fetchMorePayloads,
+      rowsPerPage: rowsPerPageProp = 25,
+      payloads,
+      children,
+      columns = payloadTableColumnConfigDefaults(),
+      maxSchemaDepth,
+      count = 0,
+      loading = false,
+      variant = 'scrollable',
+      ...props
+    },
+    ref,
+  ) => {
+    const breakPoint = useBreakpoint()
+    const [page, setPage] = useState(0)
+    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
+    const [visiblePayloads, setVisiblePayloads] = useState<XyoPayload[]>([])
 
-  const visiblePayloads = useMemo(() => payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [payloads, rowsPerPage, page])
-  // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount || 0) : 0
+    // Avoid a layout jump when reaching the last page with empty rows.
+    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0
 
-  // when the count changes but the payload reference does not, update the count manually
-  useEffect(() => {
-    setPayloadCount(payloads !== undefined ? payloads?.length ?? 0 : 0)
-  }, [count, payloads])
+    useEffect(() => {
+      setRowsPerPage(rowsPerPageProp)
+    }, [rowsPerPageProp])
 
-  useEffect(() => {
-    setRowsPerPage(rowsPerPageProp)
-  }, [rowsPerPageProp])
+    // React to various prop changes to derive new visible payloads
+    // count is needed to show initial payloads added async to the same payloads reference
+    useEffect(() => {
+      if (payloads) {
+        setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))
+      }
+    }, [count, page, payloads, rowsPerPage])
 
-  // If the payload reference changes, assume we have a new list and reset current page
-  useEffect(() => {
-    setPage(0)
-  }, [payloads])
+    // If the payload reference changes, assume we have a new list and reset current page
+    useEffect(() => {
+      setPage(0)
+    }, [payloads])
 
-  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
-    if (fetchMorePayloads) {
-      const buffer = rowsPerPage * 2
-      const lastVisiblePayload = visiblePayloads?.at(-1)
-      if (lastVisiblePayload) {
-        const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)
-        if (payloads && lastVisibleIndex !== undefined && payloads?.length - (lastVisibleIndex + 1) <= buffer) {
-          fetchMorePayloads()
+    const handleAdditionalPayloads = () => {
+      if (fetchMorePayloads && payloads) {
+        const buffer = rowsPerPage * 2
+        const lastVisiblePayload = visiblePayloads?.at(-1)
+        if (lastVisiblePayload) {
+          const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)
+          if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {
+            fetchMorePayloads()
+          }
         }
       }
     }
-    setPage(newPage)
-  }
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setRowsPerPage(parseInt(event.target.value, 10))
-    setPage(0)
-  }
+    const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+      handleAdditionalPayloads()
+      setPage(newPage)
+    }
+
+    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setRowsPerPage(parseInt(event.target.value, 10))
+      setPage(0)
+    }
 
-  return breakPoint ? (
-    <TableEx variant={variant} {...props}>
-      <TableHead>
-        <TableRow>
-          {columns[breakPoint]?.map((column, index) => {
+    return breakPoint ? (
+      <TableEx variant={variant} ref={ref} {...props}>
+        <TableHead>
+          <TableRow>
+            {columns[breakPoint]?.map((column, index) => {
+              return (
+                <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
+                  <Typography variant="body2" noWrap>
+                    {payloadColumnNames[column]}
+                  </Typography>
+                </TableCell>
+              )
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {visiblePayloads?.map((payload, index) => {
+            const wrapper = new PayloadWrapper(payload)
             return (
-              <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
-                <Typography variant="body2" noWrap>
-                  {payloadColumnNames[column]}
-                </Typography>
-              </TableCell>
+              <XyoApiThrownErrorBoundary
+                key={`${wrapper.hash}-${index}`}
+                errorComponent={(e: Error) => (
+                  <Alert severity="error">
+                    Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+                  </Alert>
+                )}
+              >
+                <PayloadTableRow
+                  maxSchemaDepth={maxSchemaDepth}
+                  archive={archive}
+                  onClick={
+                    onRowClick
+                      ? () => {
+                          onRowClick(payload)
+                        }
+                      : undefined
+                  }
+                  exploreDomain={exploreDomain}
+                  payload={payload}
+                />
+              </XyoApiThrownErrorBoundary>
             )
           })}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {visiblePayloads?.map((payload, index) => {
-          const wrapper = new PayloadWrapper(payload)
-          return (
-            <XyoApiThrownErrorBoundary
-              key={`${wrapper.hash}-${index}`}
-              errorComponent={(e: Error) => (
-                <Alert severity="error">
-                  Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
-                </Alert>
-              )}
-            >
-              <PayloadTableRow
-                maxSchemaDepth={maxSchemaDepth}
-                archive={archive}
-                onClick={
-                  onRowClick
-                    ? () => {
-                        onRowClick(payload)
-                      }
-                    : undefined
-                }
-                exploreDomain={exploreDomain}
-                payload={payload}
-              />
-            </XyoApiThrownErrorBoundary>
-          )
-        })}
-        {children}
-        {emptyRows > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
-      </TableBody>
-      <TableFooterEx variant={variant}>
-        <TableRow>
-          <StyledTablePagination
-            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-            count={payloadCount}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            SelectProps={{
-              inputProps: {
-                'aria-label': 'rows per page',
-              },
-              native: true,
-            }}
-            onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
-            ActionsComponent={(props) => <TablePaginationActions enableNextPage={!!fetchMorePayloads} loading={loading} {...props} />}
-          />
-        </TableRow>
-      </TableFooterEx>
-    </TableEx>
-  ) : null
-}
+          {children}
+          {emptyRows > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
+        </TableBody>
+        <TableFooterEx variant={variant}>
+          <TableRow>
+            <StyledTablePagination
+              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              count={count ?? 0}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={(props) => <TablePaginationActions enableNextPage={!!fetchMorePayloads} loading={loading} {...props} />}
+            />
+          </TableRow>
+        </TableFooterEx>
+      </TableEx>
+    ) : null
+  },
+)
+
+PayloadTableWithRef.displayName = 'PayloadTable'
+
+export const PayloadTable = PayloadTableWithRef
 
 const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
   '& > .MuiToolbar-root': {

package/src/components/Table/TablePagination.tsx

@@ -3,6 +3,9 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
 import LastPageIcon from '@mui/icons-material/LastPage'
 import { Box, CircularProgress, IconButton, useTheme } from '@mui/material'
+import { useXyoEvent } from '@xyo-network/react-event'
+
+import { PaginationNouns } from './types'
 
 interface TablePaginationActionsProps {
   count: number
@@ -15,20 +18,25 @@ interface TablePaginationActionsProps {
 
 export function TablePaginationActions({ count, page, rowsPerPage, onPageChange, enableNextPage, loading }: TablePaginationActionsProps) {
   const theme = useTheme()
+  const [paginationRef, paginationDispatch] = useXyoEvent<HTMLButtonElement, PaginationNouns>()
 
   const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    paginationDispatch('firstPage', 'click', 'true')
     onPageChange(event, 0)
   }
 
   const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    paginationDispatch('previousPage', 'click', (page - 1)?.toString())
     onPageChange(event, page - 1)
   }
 
   const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    paginationDispatch('nextPage', 'click', (page + 1)?.toString())
     onPageChange(event, page + 1)
   }
 
   const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    paginationDispatch('lastPage', 'click', 'true')
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
   }
 
@@ -39,10 +47,15 @@ export function TablePaginationActions({ count, page, rowsPerPage, onPageChange,
         <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
           {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
         </IconButton>
-        <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
+        <IconButton ref={paginationRef} onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
           {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
         </IconButton>
-        <IconButton onClick={handleNextButtonClick} disabled={!enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
+        <IconButton
+          ref={paginationRef}
+          onClick={handleNextButtonClick}
+          disabled={!enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1}
+          aria-label="next page"
+        >
           {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
         </IconButton>
         <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">

package/src/components/Table/index.ts

@@ -1,3 +1,5 @@
 export * from './PayloadTableColumnConfig'
 export * from './Table'
+export * from './TablePagination'
 export * from './TableRow'
+export * from './types'

package/src/components/Table/types/PaginationEventNouns.ts

@@ -0,0 +1 @@
+export type PaginationNouns = 'nextPage' | 'previousPage' | 'firstPage' | 'lastPage'

package/src/components/Table/types/index.ts

@@ -0,0 +1 @@
+export * from './PaginationEventNouns'