@xyo-network/react-payload-table 7.5.8 → 7.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/browser/components/Table/TableRowNoData.d.ts.map +1 -1
  2. package/dist/browser/index.mjs +438 -460
  3. package/dist/browser/index.mjs.map +1 -1
  4. package/package.json +182 -44
  5. package/src/components/DynamicTable/DynamicTable.stories.tsx +0 -72
  6. package/src/components/DynamicTable/DynamicTableRow.tsx +0 -134
  7. package/src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts +0 -98
  8. package/src/components/DynamicTable/Table.tsx +0 -194
  9. package/src/components/DynamicTable/index.ts +0 -3
  10. package/src/components/Table/FetchMoreTable.stories.tsx +0 -100
  11. package/src/components/Table/PayloadTableColumnConfig.ts +0 -22
  12. package/src/components/Table/Table.stories.tsx +0 -98
  13. package/src/components/Table/Table.tsx +0 -139
  14. package/src/components/Table/TableBody.tsx +0 -64
  15. package/src/components/Table/TableFooter.tsx +0 -44
  16. package/src/components/Table/TableHead.tsx +0 -31
  17. package/src/components/Table/TablePagination.tsx +0 -88
  18. package/src/components/Table/TableRow.tsx +0 -135
  19. package/src/components/Table/TableRowNoData.tsx +0 -39
  20. package/src/components/Table/index.ts +0 -7
  21. package/src/components/Table/lib/TableColumns.ts +0 -12
  22. package/src/components/Table/lib/index.ts +0 -1
  23. package/src/components/Table/types/PaginationEventNouns.ts +0 -1
  24. package/src/components/Table/types/PayloadTableBodyProps.ts +0 -21
  25. package/src/components/Table/types/PayloadTableFooterProps.ts +0 -13
  26. package/src/components/Table/types/PayloadTableHeadProps.ts +0 -7
  27. package/src/components/Table/types/index.ts +0 -4
  28. package/src/components/index.ts +0 -2
  29. package/src/components/lib/index.ts +0 -3
  30. package/src/global.d.ts +0 -1
  31. package/src/index.ts +0 -1
@@ -1,98 +0,0 @@
1
- import { Chip } from '@mui/material'
2
- import type { Meta, StoryFn } from '@storybook/react-vite'
3
- import { isDefined } from '@xylabs/sdk-js'
4
- import { asSchema, type Payload } from '@xyo-network/payload-model'
5
- import { useEvent } from '@xyo-network/react-event'
6
- import { sampleIdPayload, sampleSystemInfoBrowserPayload } from '@xyo-network/react-storybook'
7
- import React, { useState } from 'react'
8
- import { BrowserRouter } from 'react-router-dom'
9
-
10
- import { PayloadTable } from './Table.tsx'
11
- import { PayloadTableBody } from './TableBody.tsx'
12
- import { PayloadTableFooter } from './TableFooter.tsx'
13
- import { PayloadTableHead } from './TableHead.tsx'
14
-
15
- const payloads: Payload[] = [
16
- sampleIdPayload,
17
- sampleSystemInfoBrowserPayload,
18
- sampleIdPayload,
19
- { schema: asSchema('network.xyo.debug.super.long.schema.for.some.reason', true) },
20
- sampleSystemInfoBrowserPayload,
21
- sampleIdPayload,
22
- sampleSystemInfoBrowserPayload,
23
- sampleIdPayload,
24
- sampleSystemInfoBrowserPayload,
25
- sampleIdPayload,
26
- sampleSystemInfoBrowserPayload,
27
- sampleIdPayload,
28
- sampleSystemInfoBrowserPayload,
29
- sampleIdPayload,
30
- sampleSystemInfoBrowserPayload,
31
- ]
32
-
33
- const StorybookEntry = {
34
- argTypes: {},
35
- component: PayloadTable,
36
- parameters: { docs: { page: null } },
37
- title: 'payload/Table',
38
- } as Meta<typeof PayloadTable>
39
-
40
- const Template: StoryFn<typeof PayloadTable> = (args) => {
41
- const [eventData, setEventData] = useState<string | undefined>()
42
- const [ref] = useEvent<HTMLTableElement>((_noun, _verb, data) => {
43
- setEventData(data)
44
- })
45
-
46
- return (
47
- <BrowserRouter>
48
- {isDefined(eventData)
49
- ? <Chip label={`EventData: ${eventData}`} onDelete={() => setEventData(undefined)} />
50
- : null}
51
- <PayloadTable ref={ref} {...args}></PayloadTable>
52
- </BrowserRouter>
53
- )
54
- }
55
-
56
- const Default = Template.bind({})
57
- Default.args = {}
58
-
59
- const WithData = Template.bind({})
60
- WithData.args = {
61
- payloads,
62
- PayloadTableBodyComponent: PayloadTableBody,
63
- PayloadTableHeadComponent: PayloadTableHead,
64
- PayloadTableFooterComponent: PayloadTableFooter,
65
- clickableFields: ['hash'],
66
- }
67
-
68
- const WithOutStickyHeaderFooter = Template.bind({})
69
- WithOutStickyHeaderFooter.args = {
70
- payloads,
71
- variant: 'normal',
72
- }
73
-
74
- const WithDataAndMaxSchemaDepth = Template.bind({})
75
- WithDataAndMaxSchemaDepth.args = {
76
- maxSchemaDepth: 2,
77
- payloads,
78
- }
79
-
80
- const WithInvalid = Template.bind({})
81
-
82
- const { schema, ...badPayload } = sampleIdPayload
83
-
84
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
85
- // @ts-ignore
86
- WithInvalid.args = { payloads: [sampleIdPayload, badPayload] }
87
-
88
- const WithNoResults = Template.bind({})
89
- WithNoResults.args = { payloads: [] }
90
-
91
- const WithLoading = Template.bind({})
92
- WithLoading.args = { loading: true, payloads: [] }
93
-
94
- export {
95
- Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter,
96
- }
97
-
98
- export default StorybookEntry
@@ -1,139 +0,0 @@
1
- import { type Hash, isDefinedNotNull } from '@xylabs/sdk-js'
2
- import type { Payload } from '@xyo-network/payload-model'
3
- import type { TableExProps } from '@xyo-network/react-table'
4
- import { TableEx } from '@xyo-network/react-table'
5
- import type { ComponentType } from 'react'
6
- import React, { useMemo, useState } from 'react'
7
-
8
- import type { PayloadTableColumnConfig, PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
9
- import { PayloadTableBody } from './TableBody.tsx'
10
- import { PayloadTableFooter } from './TableFooter.tsx'
11
- import { PayloadTableHead } from './TableHead.tsx'
12
- import { TableRowNoData } from './TableRowNoData.tsx'
13
- import type {
14
- PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps,
15
- } from './types/index.ts'
16
-
17
- export interface PayloadTableProps extends TableExProps {
18
- PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>
19
- PayloadTableFooterComponent?: ComponentType<PayloadTableFooterProps>
20
- PayloadTableHeadComponent?: ComponentType<PayloadTableHeadProps>
21
- /** @deprecated - archives are no longer used */
22
- archive?: string
23
- clickableFields?: PayloadTableColumnSlug[]
24
- columns?: PayloadTableColumnConfig
25
- /** Total number of payloads passed */
26
- count?: number
27
- /** @deprecated - use events to build links instead of passing props */
28
- exploreDomain?: string
29
- /** External trigger to fetch more payloads */
30
- fetchMorePayloads?: () => void
31
- loading?: boolean
32
- /** set number of schema parts to display starting from the end */
33
- maxSchemaDepth?: number
34
- onHashClick?: (value: Hash) => void
35
- onRowClick?: (value: Payload) => void
36
- payloads?: Payload[] | null
37
- rowsPerPage?: number
38
- }
39
-
40
- export const PayloadTableWithRef: React.FC<PayloadTableProps> = (
41
- {
42
- clickableFields,
43
- onHashClick,
44
- onRowClick,
45
- fetchMorePayloads,
46
- rowsPerPage: rowsPerPageProp = 25,
47
- payloads,
48
- columns,
49
- PayloadTableHeadComponent = PayloadTableHead,
50
- PayloadTableBodyComponent = PayloadTableBody,
51
- PayloadTableFooterComponent = PayloadTableFooter,
52
- maxSchemaDepth,
53
- count = 0,
54
- loading = false,
55
- variant = 'scrollable',
56
- ...props
57
- },
58
- ) => {
59
- const [page, setPage] = useState(0)
60
- const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
61
- const [previousRowsPerPage, setPreviousRowsPerPage] = useState(rowsPerPageProp)
62
- if (rowsPerPageProp !== previousRowsPerPage) {
63
- setPreviousRowsPerPage(rowsPerPageProp)
64
- setRowsPerPage(rowsPerPageProp)
65
- }
66
- const [visiblePayloads, setVisiblePayloads] = useState<Payload[]>([])
67
-
68
- // Avoid a layout jump when reaching the last page with empty rows.
69
- const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0
70
-
71
- // React to various prop changes to derive new visible payloads
72
- // count is needed to show initial payloads added async to the same payloads reference
73
- const [previousPayloads, setPreviousPayloads] = useState(payloads)
74
- if (payloads !== previousPayloads) {
75
- // If the payload reference changes, assume we have a new list and reset current page
76
- setPreviousPayloads(payloads)
77
- setPage(0)
78
- if (isDefinedNotNull(payloads)) {
79
- setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))
80
- }
81
- }
82
-
83
- const handleAdditionalPayloads = () => {
84
- if (fetchMorePayloads && payloads) {
85
- const buffer = rowsPerPage * 2
86
- const lastVisiblePayload = visiblePayloads?.at(-1)
87
- if (lastVisiblePayload) {
88
- const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)
89
- if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {
90
- fetchMorePayloads()
91
- }
92
- }
93
- }
94
- }
95
-
96
- const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
97
- handleAdditionalPayloads()
98
- setPage(newPage)
99
- }
100
-
101
- const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
102
- setRowsPerPage(Number.parseInt(event.target.value, 10))
103
- setPage(0)
104
- }
105
-
106
- const noResults = useMemo(() => {
107
- return !loading && (visiblePayloads.length === 0)
108
- }, [loading, visiblePayloads])
109
-
110
- return (
111
- <TableEx variant={variant} {...props}>
112
- <PayloadTableHeadComponent columns={columns} />
113
- <PayloadTableBodyComponent
114
- clickableFields={clickableFields}
115
- payloads={visiblePayloads}
116
- maxSchemaDepth={maxSchemaDepth}
117
- onRowClick={onRowClick}
118
- onHashClick={onHashClick}
119
- emptyRows={emptyRows}
120
- noResults={noResults}
121
- NoResultRowComponent={TableRowNoData}
122
- />
123
- <PayloadTableFooterComponent
124
- count={count}
125
- variant={variant}
126
- rowsPerPage={rowsPerPage}
127
- handleChangePage={handleChangePage}
128
- handleChangeRowsPerPage={handleChangeRowsPerPage}
129
- fetchMorePayloads={fetchMorePayloads}
130
- loading={loading}
131
- page={page}
132
- />
133
- </TableEx>
134
- )
135
- }
136
-
137
- PayloadTableWithRef.displayName = 'PayloadTable'
138
-
139
- export const PayloadTable = PayloadTableWithRef
@@ -1,64 +0,0 @@
1
- import {
2
- Alert, TableBody, Typography,
3
- } from '@mui/material'
4
- import { ThrownErrorBoundary } from '@xylabs/react-error'
5
- import { usePayloadHashes } from '@xyo-network/react-shared'
6
- import type { ReactNode } from 'react'
7
- import React from 'react'
8
-
9
- import { PayloadTableRow } from './TableRow.tsx'
10
- import type { PayloadTableBodyProps } from './types/index.ts'
11
-
12
- export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
13
- children,
14
- clickableFields,
15
- payloads,
16
- maxSchemaDepth,
17
- onHashClick,
18
- onRowClick,
19
- emptyRows,
20
- noResults,
21
- NoResultRowComponent,
22
- ...props
23
- }) => {
24
- const payloadPairs = usePayloadHashes(payloads)
25
-
26
- return (
27
- <TableBody {...props}>
28
- {noResults && NoResultRowComponent
29
- ? <NoResultRowComponent />
30
- : null}
31
- {payloadPairs?.map(([payload, hash], index) => {
32
- return (
33
- <ThrownErrorBoundary
34
- boundaryName="PayloadTableBody"
35
- key={`${hash}-${index}`}
36
- errorComponent={e => (
37
- <Alert severity="error">
38
- Error Loading Payload:
39
- {' '}
40
- <Typography fontWeight="bold">{e.message}</Typography>
41
- </Alert>
42
- )}
43
- >
44
- <PayloadTableRow
45
- clickableFields={clickableFields}
46
- maxSchemaDepth={maxSchemaDepth}
47
- onClick={
48
- onRowClick
49
- ? () => {
50
- onRowClick(payload)
51
- }
52
- : undefined
53
- }
54
- onHashClick={onHashClick}
55
- payload={payload}
56
- />
57
- </ThrownErrorBoundary>
58
- )
59
- })}
60
- {children}
61
- {emptyRows ? (Array.from({ length: emptyRows }).fill(<PayloadTableRow />) as ReactNode[]) : null}
62
- </TableBody>
63
- )
64
- }
@@ -1,44 +0,0 @@
1
- import {
2
- styled, TablePagination, TableRow,
3
- } from '@mui/material'
4
- import { TableFooterEx } from '@xyo-network/react-table'
5
- import React from 'react'
6
-
7
- import { TablePaginationActions } from './TablePagination.tsx'
8
- import type { PayloadTableFooterProps } from './types/index.ts'
9
-
10
- export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
11
- count,
12
- variant,
13
- page,
14
- rowsPerPage,
15
- handleChangePage,
16
- handleChangeRowsPerPage,
17
- fetchMorePayloads,
18
- loading,
19
- }) => (
20
- <TableFooterEx variant={variant}>
21
- <TableRow>
22
- <StyledTablePagination
23
- rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
24
- count={count ?? 0}
25
- rowsPerPage={rowsPerPage ?? 10}
26
- page={page ?? 0}
27
- SelectProps={{
28
- inputProps: { 'aria-label': 'rows per page' },
29
- native: true,
30
- }}
31
- onPageChange={handleChangePage ?? (() => {})}
32
- onRowsPerPageChange={handleChangeRowsPerPage ?? (() => {})}
33
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
34
- ActionsComponent={(props: any) => <TablePaginationActions enableNextPage={!!fetchMorePayloads} loading={loading} {...props} />}
35
- />
36
- </TableRow>
37
- </TableFooterEx>
38
- )
39
-
40
- const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
41
- '& > .MuiToolbar-root': { paddingLeft: theme.spacing(1) },
42
- 'borderTop': '1px solid',
43
- 'borderTopColor': theme.vars.palette.divider,
44
- }))
@@ -1,31 +0,0 @@
1
- import {
2
- TableCell, TableHead, TableRow, Typography,
3
- } from '@mui/material'
4
- import { useBreakpoint } from '@xylabs/react-shared'
5
- import React, { useMemo } from 'react'
6
-
7
- import type { PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
8
- import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.ts'
9
- import type { PayloadTableHeadProps } from './types/index.ts'
10
-
11
- export const PayloadTableHead: React.FC<PayloadTableHeadProps<PayloadTableColumnSlug>> = ({ columns, ...props }) => {
12
- const breakPoint = useBreakpoint()
13
- const columnsMemo = useMemo(() => columns ?? payloadTableColumnConfigDefaults(), [columns])
14
- return (
15
- <TableHead {...props}>
16
- <TableRow>
17
- {breakPoint
18
- ? columnsMemo[breakPoint]?.map((column, index) => {
19
- return (
20
- <TableCell key={index} width={index === 0 ? '100%' : undefined} align={index === 0 ? 'left' : 'center'}>
21
- <Typography variant="body2" noWrap>
22
- {payloadColumnNames[column]}
23
- </Typography>
24
- </TableCell>
25
- )
26
- })
27
- : null}
28
- </TableRow>
29
- </TableHead>
30
- )
31
- }
@@ -1,88 +0,0 @@
1
- import {
2
- FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
3
- } from '@mui/icons-material'
4
- import {
5
- Box, CircularProgress, IconButton, useTheme,
6
- } from '@mui/material'
7
- import { useEvent } from '@xyo-network/react-event'
8
- import React from 'react'
9
-
10
- import type { PaginationNouns } from './types/index.ts'
11
-
12
- export interface TablePaginationActionsProps {
13
- count: number
14
- enableNextPage?: boolean
15
- loading?: boolean
16
- onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void
17
- page: number
18
- rowsPerPage: number
19
- }
20
-
21
- export function TablePaginationActions({
22
- count, enableNextPage, loading, onPageChange, page, rowsPerPage,
23
- }: Readonly<TablePaginationActionsProps>) {
24
- const theme = useTheme()
25
- const [paginationRef, paginationDispatch] = useEvent<HTMLButtonElement, PaginationNouns>()
26
-
27
- const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
28
- paginationDispatch('firstPage', 'click', 'true')
29
- onPageChange(event, 0)
30
- }
31
-
32
- const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
33
- paginationDispatch('previousPage', 'click', (page - 1)?.toString())
34
- onPageChange(event, page - 1)
35
- }
36
-
37
- const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
38
- paginationDispatch('nextPage', 'click', (page + 1)?.toString())
39
- onPageChange(event, page + 1)
40
- }
41
-
42
- const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
43
- paginationDispatch('lastPage', 'click', 'true')
44
- onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
45
- }
46
-
47
- return (
48
- <>
49
- {loading
50
- ? (
51
- <CircularProgress
52
- size="small"
53
- sx={{
54
- height: theme.spacing(2), position: 'absolute', width: theme.spacing(2),
55
- }}
56
- />
57
- )
58
- : null}
59
- <Box sx={{ flexShrink: 0, ml: 2.5 }}>
60
- <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
61
- {theme.direction === 'rtl'
62
- ? <LastPageIcon />
63
- : <FirstPageIcon />}
64
- </IconButton>
65
- <IconButton ref={paginationRef} onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
66
- {theme.direction === 'rtl'
67
- ? <KeyboardArrowRight />
68
- : <KeyboardArrowLeft />}
69
- </IconButton>
70
- <IconButton
71
- ref={paginationRef}
72
- onClick={handleNextButtonClick}
73
- disabled={!enableNextPage && page >= Math.ceil(count / rowsPerPage) - 1}
74
- aria-label="next page"
75
- >
76
- {theme.direction === 'rtl'
77
- ? <KeyboardArrowLeft />
78
- : <KeyboardArrowRight />}
79
- </IconButton>
80
- <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label="last page">
81
- {theme.direction === 'rtl'
82
- ? <FirstPageIcon />
83
- : <LastPageIcon />}
84
- </IconButton>
85
- </Box>
86
- </>
87
- )
88
- }
@@ -1,135 +0,0 @@
1
- import {
2
- CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,
3
- ErrorOutlineRounded as ErrorOutlineRoundedIcon,
4
- WarningAmberRounded as WarningAmberRoundedIcon,
5
- } from '@mui/icons-material'
6
- import type { TableRowProps } from '@mui/material'
7
- import {
8
- alpha, Link, TableCell, TableRow, Typography,
9
- } from '@mui/material'
10
- import { usePromise } from '@xylabs/react-promise'
11
- import { useBreakpoint } from '@xylabs/react-shared'
12
- import type { Hash } from '@xylabs/sdk-js'
13
- import { isDefined } from '@xylabs/sdk-js'
14
- import type { Payload } from '@xyo-network/payload-model'
15
- import { PayloadValidator } from '@xyo-network/payload-validator'
16
- import { useEvent } from '@xyo-network/react-event'
17
- import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
18
- import React, { useMemo } from 'react'
19
-
20
- import type { TableCellRenderer } from '../lib/index.ts'
21
- import type { PayloadTableColumnConfig, PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
22
- import { payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.ts'
23
-
24
- export interface PayloadTableRowProps extends TableRowProps {
25
- /** @deprecated - archives are no longer used */
26
- archive?: string
27
- clickableFields?: PayloadTableColumnSlug[]
28
- columns?: PayloadTableColumnConfig
29
- /** @deprecated - use event listeners instead of link building via props */
30
- exploreDomain?: string
31
- maxSchemaDepth?: number
32
- network?: string
33
- onHashClick?: (value: Hash) => void
34
- payload?: Payload
35
- }
36
-
37
- export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
38
- clickableFields,
39
- columns,
40
- maxSchemaDepth,
41
- network: networkProp,
42
- onHashClick,
43
- payload,
44
- ...props
45
- }) => {
46
- const breakPoint = useBreakpoint()
47
- const payloadHash = usePayloadHash(payload)
48
- const [anchorRef, dispatch] = useEvent<HTMLAnchorElement>()
49
- const [errors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])
50
- const isValid = errors.length === 0
51
-
52
- const hash: TableCellRenderer = props => (
53
- <HashTableCell
54
- dataType="payload"
55
- key="hash"
56
- onHashClick={onHashClick}
57
- value={payloadHash}
58
- width="100%"
59
- {...props}
60
- >
61
- {isDefined(payloadHash) && (
62
- <>
63
- {clickableFields?.includes('hash')
64
- ? (
65
- <Link onClick={() => dispatch('hash', 'click', payloadHash)} ref={anchorRef} sx={{ cursor: 'pointer' }}>{payloadHash}</Link>
66
- )
67
- : payloadHash}
68
- </>
69
- )}
70
- </HashTableCell>
71
- )
72
-
73
- const reduceSchemaDepth = (schema?: string, maxSchemaDepth?: number) => {
74
- if (isDefined(maxSchemaDepth)) {
75
- const parts = schema?.split('.') ?? []
76
- const partsToRemove = Math.max(parts.length - maxSchemaDepth, 0)
77
- if (partsToRemove > 0) {
78
- return (
79
- <>
80
- <>&#x2026;</>
81
- {
82
-
83
- `${parts.slice(partsToRemove).reduce((previousValue, part) => previousValue + '.' + part, '')}`
84
- }
85
- </>
86
- )
87
- }
88
- }
89
- return schema
90
- }
91
-
92
- const schema: TableCellRenderer = props => (
93
- <TableCell title={payload?.schema} key="payloads" align="center" {...props}>
94
- <Typography fontFamily="monospace" variant="body2" noWrap>
95
- {clickableFields?.includes('schema')
96
- ? (
97
- <Link sx={{ cursor: 'pointer' }}>{reduceSchemaDepth(payload?.schema, maxSchemaDepth)}</Link>
98
- )
99
- : reduceSchemaDepth(payload?.schema, maxSchemaDepth)}
100
-
101
- </Typography>
102
- </TableCell>
103
- )
104
-
105
- const valid: TableCellRenderer = props => (
106
- <TableCell key="valid" align="center" {...props}>
107
- {isValid === undefined && payload != undefined
108
- ? <WarningAmberRoundedIcon fontSize="small" color="warning" />
109
- : isValid === true
110
- ? <CheckCircleOutlineRoundedIcon fontSize="small" color="success" />
111
- : isValid === false
112
- ? <ErrorOutlineRoundedIcon color="error" fontSize="small" />
113
- // to keep row height consistent when no data provided, may need fix later
114
- : <ErrorOutlineRoundedIcon sx={{ color: alpha('#fff', 0) }} fontSize="small" />}
115
- </TableCell>
116
- )
117
-
118
- const tableCells: Record<PayloadTableColumnSlug, TableCellRenderer> = {
119
- hash,
120
- schema,
121
- valid,
122
- }
123
-
124
- const columnsMemo = useMemo(() => columns ?? payloadTableColumnConfigDefaults(), [columns])
125
-
126
- return isDefined(breakPoint)
127
- ? (
128
- <TableRow style={{ maxWidth: '100vw' }} {...props}>
129
- {columnsMemo[breakPoint]?.map((column) => {
130
- return tableCells[column]({})
131
- })}
132
- </TableRow>
133
- )
134
- : null
135
- }
@@ -1,39 +0,0 @@
1
- import type { TableRowProps, TypographyProps } from '@mui/material'
2
- import {
3
- styled, TableCell, TableRow, Typography,
4
- } from '@mui/material'
5
- import React from 'react'
6
-
7
- export interface TableRowNoDataProps extends TableRowProps {
8
- additionalCells?: number
9
- hideBorder?: boolean
10
- typographyProps?: TypographyProps
11
- }
12
-
13
- export const TableRowNoData: React.FC<TableRowNoDataProps> = ({
14
- additionalCells, hideBorder = false, typographyProps, ...props
15
- }) => {
16
- return (
17
- <TableRow {...props}>
18
- <StyledTableCell hideBorder={hideBorder}>
19
- <Typography variant="body2" {...typographyProps}>
20
- No Data To Display...
21
- </Typography>
22
- </StyledTableCell>
23
- {additionalCells
24
- ? Array.from({ length: additionalCells })
25
- .fill(null)
26
- .map((_fill, index) => <StyledTableCell key={index} hideBorder={hideBorder} />)
27
- : null}
28
- </TableRow>
29
- )
30
- }
31
-
32
- interface StyledTableCellProps {
33
- hideBorder?: boolean
34
- }
35
-
36
- const StyledTableCell = styled(TableCell, {
37
- name: 'StyledTableCell',
38
- shouldForwardProp: (prop: string) => prop !== 'hideBorder',
39
- })<StyledTableCellProps>(({ hideBorder }) => ({ ...(hideBorder && { border: 'none' }) }))
@@ -1,7 +0,0 @@
1
- export * from './lib/index.ts'
2
- export * from './PayloadTableColumnConfig.ts'
3
- export * from './Table.tsx'
4
- export * from './TablePagination.tsx'
5
- export * from './TableRow.tsx'
6
- export * from './TableRowNoData.tsx'
7
- export * from './types/index.ts'
@@ -1,12 +0,0 @@
1
- export type TableColumnNames<T extends string> = Record<T, string>
2
-
3
- export interface TableColumnConfig<T> {
4
- xs?: T[]
5
- // eslint-disable-next-line @typescript-eslint/member-ordering
6
- sm?: T[]
7
- // eslint-disable-next-line @typescript-eslint/member-ordering
8
- md?: T[]
9
- // eslint-disable-next-line @typescript-eslint/member-ordering
10
- lg?: T[]
11
- xl?: T[]
12
- }
@@ -1 +0,0 @@
1
- export * from './TableColumns.ts'
@@ -1 +0,0 @@
1
- export type PaginationNouns = 'nextPage' | 'previousPage' | 'firstPage' | 'lastPage'