@xyo-network/react-payload-table 2.81.9 → 2.82.0

package/src/components/Table/FetchMoreTable.stories.tsx

@@ -3,10 +3,10 @@ import { Decorator, Meta, StoryFn } from '@storybook/react'
 import { delay } from '@xylabs/delay'
 import { Payload } from '@xyo-network/payload-model'
 import { useEvent } from '@xyo-network/react-event'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { PayloadTable } from './Table.js'
+import { PayloadTable } from './Table.tsx'
 
 const newPayloads = () =>
   Array(50)
@@ -34,7 +34,6 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
     setTimeout(() => {
       addToTotalPayloads(testPayloads)
     }, 500)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const addPayloads = () => {
@@ -59,7 +58,10 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
 
   return (
     <>
-      <Typography>Max Payloads: {maxPayloads}</Typography>
+      <Typography>
+        Max Payloads:
+        {maxPayloads}
+      </Typography>
       <Button variant="contained" onClick={newPayloadList}>
         Simulate Network Change
       </Button>
@@ -94,5 +96,4 @@ Default.decorators = [NewPayloadsDecorator]
 
 export { Default }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Table/Table.stories.tsx

@@ -3,10 +3,10 @@ import { Meta, StoryFn } from '@storybook/react'
 import { Payload } from '@xyo-network/payload-model'
 import { useEvent } from '@xyo-network/react-event'
 import { sampleIdPayload, sampleSystemInfoBrowserPayload } from '@xyo-network/react-storybook'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { PayloadTable } from './Table.js'
+import { PayloadTable } from './Table.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -25,9 +25,9 @@ const Template: StoryFn<typeof PayloadTable> = (args) => {
 
   return (
     <BrowserRouter>
-      {eventData ?
-        <Chip label={`EventData: ${eventData}`} onDelete={() => setEventData(undefined)} />
-      : null}
+      {eventData
+        ? <Chip label={`EventData: ${eventData}`} onDelete={() => setEventData(undefined)} />
+        : null}
       <PayloadTable ref={ref} {...args}></PayloadTable>
     </BrowserRouter>
   )
@@ -76,7 +76,7 @@ const WithInvalid = Template.bind({})
 const { schema, ...badPayload } = sampleIdPayload
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
+// @ts-ignore
 WithInvalid.args = { payloads: [sampleIdPayload, badPayload] }
 
 const WithNoResults = Template.bind({})
@@ -87,5 +87,4 @@ WithLoading.args = { loading: true, payloads: [] }
 
 export { Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -1,14 +1,14 @@
 import { Hash } from '@xylabs/hex'
 import { Payload } from '@xyo-network/payload-model'
 import { TableEx, TableExProps } from '@xyo-network/react-table'
-import { ComponentType, forwardRef, useEffect, useMemo, useState } from 'react'
+import React, { ComponentType, forwardRef, useEffect, useMemo, useState } from 'react'
 
-import { PayloadTableColumnConfig } from './PayloadTableColumnConfig.js'
-import { PayloadTableBody } from './TableBody.js'
-import { PayloadTableFooter } from './TableFooter.js'
-import { PayloadTableHead } from './TableHead.js'
-import { TableRowNoData } from './TableRowNoData.js'
-import { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types/index.js'
+import { PayloadTableColumnConfig } from './PayloadTableColumnConfig.ts'
+import { PayloadTableBody } from './TableBody.tsx'
+import { PayloadTableFooter } from './TableFooter.tsx'
+import { PayloadTableHead } from './TableHead.tsx'
+import { TableRowNoData } from './TableRowNoData.tsx'
+import { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types/index.ts'
 
 export interface PayloadTableProps extends TableExProps {
   PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>

package/src/components/Table/TableBody.tsx

@@ -1,10 +1,10 @@
 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 React, { ReactNode } from 'react'
 
-import { PayloadTableRow } from './TableRow.js'
-import { PayloadTableBodyProps } from './types/index.js'
+import { PayloadTableRow } from './TableRow.tsx'
+import { PayloadTableBodyProps } from './types/index.ts'
 
 export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
   children,
@@ -23,17 +23,19 @@ export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
 
   return (
     <TableBody {...props}>
-      {noResults && NoResultRowComponent ?
-        <NoResultRowComponent />
-      : null}
+      {noResults && NoResultRowComponent
+        ? <NoResultRowComponent />
+        : null}
       {payloadPairs?.map(([payload, hash], index) => {
         return (
           <ThrownErrorBoundary
             boundaryName="PayloadTableBody"
             key={`${hash}-${index}`}
-            errorComponent={(e) => (
+            errorComponent={e => (
               <Alert severity="error">
-                Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
+                Error Loading Payload:
+                {' '}
+                <Typography fontWeight="bold">{e.message}</Typography>
               </Alert>
             )}
           >
@@ -41,11 +43,11 @@ export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
               maxSchemaDepth={maxSchemaDepth}
               archive={archive}
               onClick={
-                onRowClick ?
-                  () => {
-                    onRowClick(payload)
-                  }
-                : undefined
+                onRowClick
+                  ? () => {
+                      onRowClick(payload)
+                    }
+                  : undefined
               }
               onHashClick={onHashClick}
               exploreDomain={exploreDomain}

package/src/components/Table/TableFooter.tsx

@@ -1,16 +1,17 @@
 import { styled, TablePagination, TableRow } from '@mui/material'
 import { TableFooterEx } from '@xyo-network/react-table'
+import React from 'react'
 
-import { TablePaginationActions } from './TablePagination.js'
-import { PayloadTableFooterProps } from './types/index.js'
+import { TablePaginationActions } from './TablePagination.tsx'
+import { PayloadTableFooterProps } from './types/index.ts'
 
 export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
   count,
   variant,
   page,
   rowsPerPage,
-  handleChangePage = () => {},
-  handleChangeRowsPerPage = () => {},
+  handleChangePage,
+  handleChangeRowsPerPage,
   fetchMorePayloads,
   loading,
 }) => (
@@ -27,8 +28,8 @@ export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
           },
           native: true,
         }}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
+        onPageChange={handleChangePage ?? (() => {})}
+        onRowsPerPageChange={handleChangeRowsPerPage ?? (() => {})}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ActionsComponent={(props: any) => <TablePaginationActions enableNextPage={!!fetchMorePayloads} loading={loading} {...props} />}
       />
@@ -40,6 +41,6 @@ const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
   '& > .MuiToolbar-root': {
     paddingLeft: theme.spacing(1),
   },
-  borderTop: '1px solid',
-  borderTopColor: theme.palette.divider,
+  'borderTop': '1px solid',
+  'borderTopColor': theme.palette.divider,
 }))

package/src/components/Table/TableHead.tsx

@@ -1,16 +1,18 @@
 import { TableCell, TableHead, TableRow, Typography } from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
+import React, { useMemo } from 'react'
 
-import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.js'
-import { PayloadTableHeadProps } from './types/index.js'
+import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.ts'
+import { PayloadTableHeadProps } from './types/index.ts'
 
-export const PayloadTableHead: React.FC<PayloadTableHeadProps> = ({ columns = payloadTableColumnConfigDefaults(), ...props }) => {
+export const PayloadTableHead: React.FC<PayloadTableHeadProps> = ({ columns, ...props }) => {
   const breakPoint = useBreakpoint()
+  const columnsMemo = useMemo(() => columns ?? payloadTableColumnConfigDefaults(), [columns])
   return (
     <TableHead {...props}>
       <TableRow>
-        {breakPoint && columns ?
-          columns[breakPoint]?.map((column, index) => {
+        {breakPoint
+          ? columnsMemo[breakPoint]?.map((column, index) => {
             return (
               <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
                 <Typography variant="body2" noWrap>
@@ -19,7 +21,7 @@ export const PayloadTableHead: React.FC<PayloadTableHeadProps> = ({ columns = pa
               </TableCell>
             )
           })
-        : null}
+          : null}
       </TableRow>
     </TableHead>
   )

package/src/components/Table/TablePagination.tsx

@@ -1,8 +1,9 @@
 import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'
 import { Box, CircularProgress, IconButton, useTheme } from '@mui/material'
 import { useEvent } from '@xyo-network/react-event'
+import React from 'react'
 
-import { PaginationNouns } from './types/index.js'
+import { PaginationNouns } from './types/index.ts'
 
 export interface TablePaginationActionsProps {
   count: number
@@ -39,19 +40,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}
@@ -59,14 +60,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

@@ -11,8 +11,9 @@ import { Payload } from '@xyo-network/payload-model'
 import { PayloadValidator } from '@xyo-network/payload-validator'
 import { useNetwork } from '@xyo-network/react-network'
 import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
+import React, { useMemo } from 'react'
 
-import { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig.js'
+import { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
 
 export interface PayloadTableRowProps extends TableRowProps {
   archive?: string
@@ -26,7 +27,7 @@ export interface PayloadTableRowProps extends TableRowProps {
 
 export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
   archive,
-  columns = payloadTableColumnConfigDefaults(),
+  columns,
   exploreDomain,
   maxSchemaDepth,
   network: networkProp,
@@ -40,7 +41,7 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
   const [errors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])
   const isValid = errors.length === 0
 
-  const hash: React.FC<TableCellProps> = (props) => (
+  const hash: React.FC<TableCellProps> = props => (
     <HashTableCell
       key="hash"
       archive={archive}
@@ -73,7 +74,7 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
     return schema
   }
 
-  const schema: React.FC<TableCellProps> = (props) => (
+  const schema: React.FC<TableCellProps> = props => (
     <TableCell title={payload?.schema} key="payloads" align="center" {...props}>
       <Typography fontFamily="monospace" variant="body2" noWrap>
         {reduceSchemaDepth(payload?.schema, maxSchemaDepth)}
@@ -81,16 +82,16 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
     </TableCell>
   )
 
-  const valid: React.FC<TableCellProps> = (props) => (
+  const valid: React.FC<TableCellProps> = props => (
     <TableCell key="valid" align="center" {...props}>
-      {isValid === undefined && payload != undefined ?
-        <WarningAmberRoundedIcon fontSize="small" color="warning" />
-      : isValid === true ?
-        <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
-      : 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" />}
+      {isValid === undefined && payload != undefined
+        ? <WarningAmberRoundedIcon fontSize="small" color="warning" />
+        : isValid === true
+          ? <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
+          : 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" />}
     </TableCell>
   )
 
@@ -100,11 +101,15 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
     valid,
   }
 
-  return breakPoint ?
-      <TableRow style={{ maxWidth: '100vw' }} {...props}>
-        {columns[breakPoint]?.map((column) => {
-          return tableCells[column]({})
-        })}
-      </TableRow>
+  const columnsMemo = useMemo(() => columns ?? payloadTableColumnConfigDefaults(), [columns])
+
+  return breakPoint
+    ? (
+        <TableRow style={{ maxWidth: '100vw' }} {...props}>
+          {columnsMemo[breakPoint]?.map((column) => {
+            return tableCells[column]({})
+          })}
+        </TableRow>
+      )
     : null
 }

package/src/components/Table/TableRowNoData.tsx

@@ -1,4 +1,5 @@
 import { styled, TableCell, TableRow, TableRowProps, Typography, TypographyProps } from '@mui/material'
+import React from 'react'
 
 export interface TableRowNoDataProps extends TableRowProps {
   additionalCells?: number
@@ -14,11 +15,11 @@ export const TableRowNoData: React.FC<TableRowNoDataProps> = ({ additionalCells,
           No Data To Display...
         </Typography>
       </StyledTableCell>
-      {additionalCells ?
-        Array.from({ length: additionalCells })
+      {additionalCells
+        ? Array.from({ length: additionalCells })
           .fill(null)
           .map((_fill, index) => <StyledTableCell key={index} hideBorder={hideBorder} />)
-      : null}
+        : null}
     </TableRow>
   )
 }

package/src/components/Table/index.ts

@@ -1,6 +1,6 @@
-export * from './PayloadTableColumnConfig.js'
-export * from './Table.js'
-export * from './TablePagination.js'
-export * from './TableRow.js'
-export * from './TableRowNoData.js'
-export * from './types/index.js'
+export * from './PayloadTableColumnConfig.ts'
+export * from './Table.tsx'
+export * from './TablePagination.tsx'
+export * from './TableRow.tsx'
+export * from './TableRowNoData.tsx'
+export * from './types/index.ts'

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

@@ -1,6 +1,6 @@
 import { TableHeadProps } from '@mui/material'
 
-import { PayloadTableColumnConfig, PayloadTableColumnSlug } from '../PayloadTableColumnConfig.js'
+import { PayloadTableColumnConfig, PayloadTableColumnSlug } from '../PayloadTableColumnConfig.ts'
 
 export interface PayloadTableHeadProps extends TableHeadProps {
   columns?: PayloadTableColumnConfig<PayloadTableColumnSlug>

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

@@ -1,4 +1,4 @@
-export * from './PaginationEventNouns.js'
-export * from './PayloadTableBodyProps.js'
-export * from './PayloadTableFooterProps.js'
-export * from './PayloadTableHeadProps.js'
+export * from './PaginationEventNouns.ts'
+export * from './PayloadTableBodyProps.ts'
+export * from './PayloadTableFooterProps.ts'
+export * from './PayloadTableHeadProps.ts'

package/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from './DynamicTable/index.js'
-export * from './Table/index.js'
+export * from './DynamicTable/index.ts'
+export * from './Table/index.ts'

package/src/index.ts

@@ -1 +1 @@
-export * from './components/index.js'
+export * from './components/index.ts'