@xyo-network/react-payload-table 2.68.3 → 2.69.0

package/package.json

@@ -10,26 +10,26 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-promise": "^3.0.39",
-    "@xylabs/react-shared": "^3.0.39",
-    "@xyo-network/hash": "^2.90.23",
-    "@xyo-network/payload-model": "^2.90.23",
-    "@xyo-network/payload-validator": "^2.90.23",
-    "@xyo-network/react-error": "~2.68.3",
-    "@xyo-network/react-event": "~2.68.3",
-    "@xyo-network/react-network": "~2.68.3",
-    "@xyo-network/react-payload-plugin": "~2.68.3",
-    "@xyo-network/react-payload-plugin-resolver": "~2.68.3",
-    "@xyo-network/react-shared": "~2.68.3",
-    "@xyo-network/react-table": "~2.68.3"
+    "@xylabs/react-promise": "^3.1.0",
+    "@xylabs/react-shared": "^3.1.0",
+    "@xyo-network/hash": "^2.91.0",
+    "@xyo-network/payload-model": "^2.91.0",
+    "@xyo-network/payload-validator": "^2.91.0",
+    "@xyo-network/react-error": "~2.69.0",
+    "@xyo-network/react-event": "~2.69.0",
+    "@xyo-network/react-network": "~2.69.0",
+    "@xyo-network/react-payload-plugin": "~2.69.0",
+    "@xyo-network/react-payload-plugin-resolver": "~2.69.0",
+    "@xyo-network/react-shared": "~2.69.0",
+    "@xyo-network/react-table": "~2.69.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.6.16",
-    "@xylabs/delay": "^2.14.3",
-    "@xylabs/ts-scripts-yarn3": "^3.2.42",
-    "@xylabs/tsconfig-react": "^3.2.42",
-    "@xyo-network/react-crypto-market-uniswap-plugin": "~2.68.3",
-    "@xyo-network/react-storybook": "~2.68.3",
+    "@xylabs/delay": "^3.0.1",
+    "@xylabs/ts-scripts-yarn3": "^3.4.1",
+    "@xylabs/tsconfig-react": "^3.4.1",
+    "@xyo-network/react-crypto-market-uniswap-plugin": "~2.69.0",
+    "@xyo-network/react-storybook": "~2.69.0",
     "react-router-dom": "^6.22.1",
     "typescript": "^5.3.3"
   },
@@ -91,6 +91,6 @@
     "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
   },
   "sideEffects": false,
-  "version": "2.68.3",
+  "version": "2.69.0",
   "type": "module"
 }

package/src/components/DynamicTable/DynamicTableRow.tsx

@@ -74,36 +74,34 @@ export const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({
   )
 
   const render: React.FC<TableCellProps> = (props) => {
-    const Render: ComponentType<PayloadRenderProps & TableCellProps> | undefined = payload
-      ? resolver?.resolve(payload)?.components.table.cell
-      : undefined
+    const Render: ComponentType<PayloadRenderProps & TableCellProps> | undefined =
+      payload ? resolver?.resolve(payload)?.components.table.cell : undefined
     return Render ? <Render payload={payload} {...props} /> : <TableCell key="payloads" align="left" {...props}></TableCell>
   }
 
   const icon: React.FC<TableCellProps> = (props) => {
-    const Avatar: ComponentType<PayloadRenderProps & AvatarProps> | undefined = payload
-      ? resolver?.resolve(payload)?.components.avatar.image
-      : undefined
+    const Avatar: ComponentType<PayloadRenderProps & AvatarProps> | undefined =
+      payload ? resolver?.resolve(payload)?.components.avatar.image : undefined
 
     return (
       <TableCell key="payloads" align="left" {...props}>
-        {Avatar ? <Avatar payload={payload} /> : null}
+        {Avatar ?
+          <Avatar payload={payload} />
+        : null}
       </TableCell>
     )
   }
 
   const valid: React.FC<TableCellProps> = (props) => (
     <TableCell key="valid" align="center" {...props}>
-      {isValid === undefined && payload != undefined ? (
+      {isValid === undefined && payload != undefined ?
         <WarningAmberRoundedIcon fontSize="small" color="warning" />
-      ) : isValid === true ? (
+      : isValid === true ?
         <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
-      ) : isValid === false ? (
+      : isValid === false ?
         <ErrorOutlineRoundedIcon color="error" fontSize="small" />
-      ) : (
         //nbsp to keep row height consistent even when no data is provided for the row
-        <Typography> &nbsp;</Typography>
-      )}
+      : <Typography> &nbsp;</Typography>}
     </TableCell>
   )
 
@@ -116,11 +114,11 @@ export const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({
     valid,
   }
 
-  return breakPoint ? (
-    <TableRow style={{ maxWidth: '100vw' }} {...props}>
-      {columns[breakPoint]?.map((column) => {
-        return column.slug ? tableCells[column.slug]({}) : null
-      })}
-    </TableRow>
-  ) : null
+  return breakPoint ?
+      <TableRow style={{ maxWidth: '100vw' }} {...props}>
+        {columns[breakPoint]?.map((column) => {
+          return column.slug ? tableCells[column.slug]({}) : null
+        })}
+      </TableRow>
+    : null
 }

package/src/components/DynamicTable/Table.tsx

@@ -18,7 +18,7 @@ import { useBreakpoint } from '@xylabs/react-shared'
 import { Payload } from '@xyo-network/payload-model'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
-import { useEffect, useMemo, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 
 import { PayloadDynamicTableRow } from './DynamicTableRow'
 import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
@@ -62,16 +62,24 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
   return (
     <Box sx={{ flexShrink: 0, ml: 2.5 }}>
       <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
-        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+        {theme.direction === 'rtl' ?
+          <LastPageIcon />
+        : <FirstPageIcon />}
       </IconButton>
       <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
-        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+        {theme.direction === 'rtl' ?
+          <KeyboardArrowRight />
+        : <KeyboardArrowLeft />}
       </IconButton>
       <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="next page">
-        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+        {theme.direction === 'rtl' ?
+          <KeyboardArrowLeft />
+        : <KeyboardArrowRight />}
       </IconButton>
       <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
-        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+        {theme.direction === 'rtl' ?
+          <FirstPageIcon />
+        : <LastPageIcon />}
       </IconButton>
     </Box>
   )
@@ -111,71 +119,71 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
     setPage(0)
   }
 
-  return breakPoint ? (
-    <Table stickyHeader {...props}>
-      <TableHead>
-        <TableRow>
-          {columns[breakPoint]?.map((column, index) => {
+  return breakPoint ?
+      <Table stickyHeader {...props}>
+        <TableHead>
+          <TableRow>
+            {columns[breakPoint]?.map((column, index) => {
+              return (
+                <TableCell key={index} align={column.alignment ?? 'left'} width={column.width}>
+                  <Typography variant="body2" noWrap>
+                    {column.name}
+                  </Typography>
+                </TableCell>
+              )
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody sx={{ overflowY: 'scroll ' }}>
+          {payloadPairs?.map(([payload, hash], index) => {
             return (
-              <TableCell key={index} align={column.alignment ?? 'left'} width={column.width}>
-                <Typography variant="body2" noWrap>
-                  {column.name}
-                </Typography>
-              </TableCell>
-            )
-          })}
-        </TableRow>
-      </TableHead>
-      <TableBody sx={{ overflowY: 'scroll ' }}>
-        {payloadPairs?.map(([payload, hash], index) => {
-          return (
-            <ThrownErrorBoundary
-              boundaryName="PayloadTableBody"
-              key={`${hash}-${index}`}
-              errorComponent={(e) => (
-                <Alert severity="error">
-                  Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
-                </Alert>
-              )}
-            >
-              <PayloadDynamicTableRow
-                archive={archive}
-                onClick={
-                  onRowClick
-                    ? () => {
+              <ThrownErrorBoundary
+                boundaryName="PayloadTableBody"
+                key={`${hash}-${index}`}
+                errorComponent={(e) => (
+                  <Alert severity="error">
+                    Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+                  </Alert>
+                )}
+              >
+                <PayloadDynamicTableRow
+                  archive={archive}
+                  onClick={
+                    onRowClick ?
+                      () => {
                         onRowClick(payload)
                       }
                     : undefined
-                }
-                exploreDomain={exploreDomain}
-                payload={payload}
-              />
-            </ThrownErrorBoundary>
-          )
-        })}
-        {children}
-        {emptyRows > 0 && Array(emptyRows).fill(<PayloadDynamicTableRow />)}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TablePagination
-            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-            colSpan={5}
-            count={payloadCount}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            SelectProps={{
-              inputProps: {
-                'aria-label': 'rows per page',
-              },
-              native: true,
-            }}
-            onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
-            ActionsComponent={TablePaginationActions}
-          />
-        </TableRow>
-      </TableFooter>
-    </Table>
-  ) : null
+                  }
+                  exploreDomain={exploreDomain}
+                  payload={payload}
+                />
+              </ThrownErrorBoundary>
+            )
+          })}
+          {children}
+          {emptyRows ? (Array.from({ length: emptyRows }).fill(<PayloadDynamicTableRow />) as ReactNode[]) : null}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              colSpan={5}
+              count={payloadCount}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    : null
 }

package/src/components/Table/TableBody.tsx

@@ -1,6 +1,7 @@
 import { Alert, TableBody, Typography } from '@mui/material'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
 
 import { PayloadTableRow } from './TableRow'
 import { PayloadTableBodyProps } from './types'
@@ -21,7 +22,9 @@ export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
 
   return (
     <TableBody {...props}>
-      {noResults && NoResultRowComponent ? <NoResultRowComponent /> : null}
+      {noResults && NoResultRowComponent ?
+        <NoResultRowComponent />
+      : null}
       {payloadPairs?.map(([payload, hash], index) => {
         return (
           <ThrownErrorBoundary
@@ -37,11 +40,11 @@ export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
               maxSchemaDepth={maxSchemaDepth}
               archive={archive}
               onClick={
-                onRowClick
-                  ? () => {
-                      onRowClick(payload)
-                    }
-                  : undefined
+                onRowClick ?
+                  () => {
+                    onRowClick(payload)
+                  }
+                : undefined
               }
               exploreDomain={exploreDomain}
               payload={payload}
@@ -50,7 +53,7 @@ export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
         )
       })}
       {children}
-      {(emptyRows ?? 0) > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
+      {emptyRows ? (Array.from({ length: emptyRows }).fill(<PayloadTableRow />) as ReactNode[]) : null}
     </TableBody>
   )
 }

package/src/components/Table/TableHead.tsx

@@ -9,17 +9,17 @@ export const PayloadTableHead: React.FC<PayloadTableHeadProps> = ({ columns = pa
   return (
     <TableHead {...props}>
       <TableRow>
-        {breakPoint && columns
-          ? 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>
-              )
-            })
-          : null}
+        {breakPoint && columns ?
+          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>
+            )
+          })
+        : null}
       </TableRow>
     </TableHead>
   )

package/src/components/Table/TablePagination.tsx

@@ -39,13 +39,19 @@ export function TablePaginationActions({ count, enableNextPage, loading, onPageC
 
   return (
     <>
-      {loading ? <CircularProgress size={'small'} sx={{ height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) }} /> : null}
+      {loading ?
+        <CircularProgress size={'small'} sx={{ height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) }} />
+      : null}
       <Box sx={{ flexShrink: 0, ml: 2.5 }}>
         <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
-          {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+          {theme.direction === 'rtl' ?
+            <LastPageIcon />
+          : <FirstPageIcon />}
         </IconButton>
         <IconButton ref={paginationRef} onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
-          {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+          {theme.direction === 'rtl' ?
+            <KeyboardArrowRight />
+          : <KeyboardArrowLeft />}
         </IconButton>
         <IconButton
           ref={paginationRef}
@@ -53,10 +59,14 @@ export function TablePaginationActions({ count, enableNextPage, loading, onPageC
           disabled={!enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1}
           aria-label="next page"
         >
-          {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+          {theme.direction === 'rtl' ?
+            <KeyboardArrowLeft />
+          : <KeyboardArrowRight />}
         </IconButton>
         <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
-          {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+          {theme.direction === 'rtl' ?
+            <FirstPageIcon />
+          : <LastPageIcon />}
         </IconButton>
       </Box>
     </>

package/src/components/Table/TableRow.tsx

@@ -79,16 +79,14 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
 
   const valid: React.FC<TableCellProps> = (props) => (
     <TableCell key="valid" align="center" {...props}>
-      {isValid === undefined && payload != undefined ? (
+      {isValid === undefined && payload != undefined ?
         <WarningAmberRoundedIcon fontSize="small" color="warning" />
-      ) : isValid === true ? (
+      : isValid === true ?
         <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
-      ) : isValid === false ? (
+      : isValid === false ?
         <ErrorOutlineRoundedIcon color="error" fontSize="small" />
-      ) : (
         //to keep row height consistent when no data provided, may need fix later
-        <ErrorOutlineRoundedIcon sx={{ color: alpha('#fff', 0) }} fontSize="small" />
-      )}
+      : <ErrorOutlineRoundedIcon sx={{ color: alpha('#fff', 0) }} fontSize="small" />}
     </TableCell>
   )
 
@@ -98,11 +96,11 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
     valid,
   }
 
-  return breakPoint ? (
-    <TableRow style={{ maxWidth: '100vw' }} {...props}>
-      {columns[breakPoint]?.map((column) => {
-        return tableCells[column]({})
-      })}
-    </TableRow>
-  ) : null
+  return breakPoint ?
+      <TableRow style={{ maxWidth: '100vw' }} {...props}>
+        {columns[breakPoint]?.map((column) => {
+          return tableCells[column]({})
+        })}
+      </TableRow>
+    : null
 }

package/src/components/Table/TableRowNoData.tsx

@@ -14,11 +14,11 @@ export const TableRowNoData: React.FC<TableRowNoDataProps> = ({ additionalCells,
           No Data To Display...
         </Typography>
       </StyledTableCell>
-      {additionalCells
-        ? Array(additionalCells)
-            .fill(null)
-            .map((_fill, index) => <StyledTableCell key={index} hideBorder={hideBorder} />)
-        : null}
+      {additionalCells ?
+        Array.from({ length: additionalCells })
+          .fill(null)
+          .map((_fill, index) => <StyledTableCell key={index} hideBorder={hideBorder} />)
+      : null}
     </TableRow>
   )
 }