@xyo-network/react-payload-table 2.32.0 → 2.33.1
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.
- package/dist/cjs/components/DynamicTable/Table.d.ts +1 -0
- package/dist/cjs/components/DynamicTable/Table.d.ts.map +1 -1
- package/dist/cjs/components/DynamicTable/Table.js +5 -2
- package/dist/cjs/components/DynamicTable/Table.js.map +1 -1
- package/dist/cjs/components/Table/Table.d.ts +1 -0
- package/dist/cjs/components/Table/Table.d.ts.map +1 -1
- package/dist/cjs/components/Table/Table.js +5 -2
- package/dist/cjs/components/Table/Table.js.map +1 -1
- package/dist/docs.json +176 -132
- package/dist/esm/components/DynamicTable/Table.d.ts +1 -0
- package/dist/esm/components/DynamicTable/Table.d.ts.map +1 -1
- package/dist/esm/components/DynamicTable/Table.js +6 -3
- package/dist/esm/components/DynamicTable/Table.js.map +1 -1
- package/dist/esm/components/Table/Table.d.ts +1 -0
- package/dist/esm/components/Table/Table.d.ts.map +1 -1
- package/dist/esm/components/Table/Table.js +6 -3
- package/dist/esm/components/Table/Table.js.map +1 -1
- package/package.json +5 -5
- package/src/components/DynamicTable/DynamicTable.stories.tsx +20 -10
- package/src/components/DynamicTable/Table.tsx +8 -2
- package/src/components/Table/Table.stories.tsx +17 -34
- package/src/components/Table/Table.tsx +9 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";AAIA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAKpE,OAAO,EAAE,+BAA+B,EAA2C,MAAM,mCAAmC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,UAAU;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,+BAA+B,CAAA;CAC1C;AA+CD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";AAIA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAKpE,OAAO,EAAE,+BAA+B,EAA2C,MAAM,mCAAmC,CAAA;AAE5H,MAAM,WAAW,wBAAyB,SAAQ,UAAU;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,+BAA+B,CAAA;CAC1C;AA+CD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiGlE,CAAA"}
|
|
@@ -7,7 +7,7 @@ import { Alert, Box, IconButton, Table, TableBody, TableCell, TableFooter, Table
|
|
|
7
7
|
import { useBreakpoint } from '@xylabs/react-shared';
|
|
8
8
|
import { XyoPayloadWrapper } from '@xyo-network/payload';
|
|
9
9
|
import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
|
|
10
|
-
import { useState } from 'react';
|
|
10
|
+
import { useEffect, useState } from 'react';
|
|
11
11
|
import { PayloadDynamicTableRow } from './DynamicTableRow';
|
|
12
12
|
import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig';
|
|
13
13
|
function TablePaginationActions(props) {
|
|
@@ -27,13 +27,16 @@ function TablePaginationActions(props) {
|
|
|
27
27
|
};
|
|
28
28
|
return (_jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === 'rtl' ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowRight, {}) : _jsx(KeyboardArrowLeft, {}) }), _jsx(IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowLeft, {}) : _jsx(KeyboardArrowRight, {}) }), _jsx(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === 'rtl' ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] }));
|
|
29
29
|
}
|
|
30
|
-
export const PayloadDynamicTable = ({ exploreDomain, archive, onRowClick, payloads, children, columns = payloadDynamicTableColumnConfigDefaults(), ...props }) => {
|
|
30
|
+
export const PayloadDynamicTable = ({ exploreDomain, archive, onRowClick, rowsPerPage: rowsPerPageProp = 10, payloads, children, columns = payloadDynamicTableColumnConfigDefaults(), ...props }) => {
|
|
31
31
|
const breakPoint = useBreakpoint();
|
|
32
32
|
const [page, setPage] = useState(0);
|
|
33
|
-
const [rowsPerPage, setRowsPerPage] = useState(
|
|
33
|
+
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
|
|
34
34
|
const payloadCount = payloads ? payloads.length : 0;
|
|
35
35
|
// Avoid a layout jump when reaching the last page with empty rows.
|
|
36
36
|
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setRowsPerPage(rowsPerPageProp);
|
|
39
|
+
}, [rowsPerPageProp]);
|
|
37
40
|
const handleChangePage = (event, newPage) => {
|
|
38
41
|
setPage(newPage);
|
|
39
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,iBAAiB,MAAM,uCAAuC,CAAA;AACrE,OAAO,kBAAkB,MAAM,wCAAwC,CAAA;AACvE,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EACL,KAAK,EACL,GAAG,EACH,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,eAAe,EAEf,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/DynamicTable/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+E,UAAU,EAAwB,MAAM,eAAe,CAAA;AAK7I,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAEpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAG3H,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;CACnC;AA+CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+E,UAAU,EAAwB,MAAM,eAAe,CAAA;AAK7I,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAA;AAEpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAsB,wBAAwB,EAAoC,MAAM,4BAA4B,CAAA;AAG3H,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,wBAAwB,CAAA;CACnC;AA+CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkGpD,CAAA"}
|
|
@@ -10,7 +10,7 @@ import { useTheme } from '@mui/material/styles';
|
|
|
10
10
|
import { useBreakpoint } from '@xylabs/react-shared';
|
|
11
11
|
import { XyoPayloadWrapper } from '@xyo-network/payload';
|
|
12
12
|
import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service';
|
|
13
|
-
import { useState } from 'react';
|
|
13
|
+
import { useEffect, useState } from 'react';
|
|
14
14
|
import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
|
|
15
15
|
import { PayloadTableRow } from './TableRow';
|
|
16
16
|
function TablePaginationActions(props) {
|
|
@@ -30,13 +30,16 @@ function TablePaginationActions(props) {
|
|
|
30
30
|
};
|
|
31
31
|
return (_jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === 'rtl' ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowRight, {}) : _jsx(KeyboardArrowLeft, {}) }), _jsx(IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === 'rtl' ? _jsx(KeyboardArrowLeft, {}) : _jsx(KeyboardArrowRight, {}) }), _jsx(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === 'rtl' ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] }));
|
|
32
32
|
}
|
|
33
|
-
export const PayloadTable = ({ exploreDomain, archive, onRowClick, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
|
|
33
|
+
export const PayloadTable = ({ exploreDomain, archive, onRowClick, rowsPerPage: rowsPerPageProp = 10, payloads, children, columns = payloadTableColumnConfigDefaults(), ...props }) => {
|
|
34
34
|
const breakPoint = useBreakpoint();
|
|
35
35
|
const [page, setPage] = useState(0);
|
|
36
|
-
const [rowsPerPage, setRowsPerPage] = useState(
|
|
36
|
+
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
|
|
37
37
|
const payloadCount = payloads ? payloads.length : 0;
|
|
38
38
|
// Avoid a layout jump when reaching the last page with empty rows.
|
|
39
39
|
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0;
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
setRowsPerPage(rowsPerPageProp);
|
|
42
|
+
}, [rowsPerPageProp]);
|
|
40
43
|
const handleChangePage = (event, newPage) => {
|
|
41
44
|
setPage(newPage);
|
|
42
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,iBAAiB,MAAM,uCAAuC,CAAA;AACrE,OAAO,kBAAkB,MAAM,wCAAwC,CAAA;AACvE,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAc,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7I,OAAO,GAAG,MAAM,mBAAmB,CAAA;AACnC,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAc,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAE3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@xylabs/react-shared": "^2.14.16",
|
|
14
|
-
"@xyo-network/react-auth-service": "^2.
|
|
15
|
-
"@xyo-network/react-network": "^2.
|
|
16
|
-
"@xyo-network/react-payload-plugin": "^2.
|
|
17
|
-
"@xyo-network/react-shared": "^2.
|
|
14
|
+
"@xyo-network/react-auth-service": "^2.33.1",
|
|
15
|
+
"@xyo-network/react-network": "^2.33.1",
|
|
16
|
+
"@xyo-network/react-payload-plugin": "^2.33.1",
|
|
17
|
+
"@xyo-network/react-shared": "^2.33.1",
|
|
18
18
|
"tslib": "^2.4.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
},
|
|
75
75
|
"sideEffects": false,
|
|
76
76
|
"types": "dist/esm/index.d.ts",
|
|
77
|
-
"version": "2.
|
|
77
|
+
"version": "2.33.1"
|
|
78
78
|
}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
2
2
|
import { UniswapPairsRenderPlugin } from '@xyo-network/react-crypto-market-uniswap-plugin'
|
|
3
3
|
import { DefaultPayloadRenderPlugin, PayloadRenderPluginResolverProvider, XyoPayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin'
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
sampleCoinGeckoPayload,
|
|
6
|
+
sampleIdPayload,
|
|
7
|
+
sampleSystemInfoBrowserPayload,
|
|
8
|
+
sampleUniswapPayload,
|
|
9
|
+
useAppThemeDecorator,
|
|
10
|
+
} from '@xyo-network/react-storybook'
|
|
5
11
|
import { BrowserRouter } from 'react-router-dom'
|
|
6
12
|
|
|
7
13
|
import { PayloadDynamicTable } from './Table'
|
|
@@ -34,34 +40,38 @@ Default.decorators = [useAppThemeDecorator]
|
|
|
34
40
|
const WithData = Template.bind({})
|
|
35
41
|
WithData.args = {
|
|
36
42
|
payloads: [
|
|
37
|
-
|
|
43
|
+
sampleIdPayload,
|
|
38
44
|
sampleUniswapPayload,
|
|
39
45
|
sampleCoinGeckoPayload,
|
|
40
|
-
|
|
46
|
+
sampleSystemInfoBrowserPayload,
|
|
47
|
+
sampleIdPayload,
|
|
41
48
|
sampleUniswapPayload,
|
|
42
|
-
|
|
49
|
+
sampleIdPayload,
|
|
43
50
|
sampleUniswapPayload,
|
|
44
51
|
sampleCoinGeckoPayload,
|
|
45
|
-
|
|
52
|
+
sampleSystemInfoBrowserPayload,
|
|
53
|
+
sampleIdPayload,
|
|
46
54
|
sampleUniswapPayload,
|
|
47
|
-
|
|
55
|
+
sampleIdPayload,
|
|
48
56
|
sampleUniswapPayload,
|
|
49
57
|
sampleCoinGeckoPayload,
|
|
50
|
-
|
|
58
|
+
sampleSystemInfoBrowserPayload,
|
|
59
|
+
sampleIdPayload,
|
|
51
60
|
sampleUniswapPayload,
|
|
52
|
-
|
|
61
|
+
sampleIdPayload,
|
|
53
62
|
sampleUniswapPayload,
|
|
63
|
+
sampleSystemInfoBrowserPayload,
|
|
54
64
|
],
|
|
55
65
|
}
|
|
56
66
|
WithData.decorators = [useAppThemeDecorator]
|
|
57
67
|
|
|
58
68
|
const WithError = Template.bind({})
|
|
59
69
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
60
|
-
const {
|
|
70
|
+
const { ...badPayload } = sampleIdPayload
|
|
61
71
|
|
|
62
72
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
63
73
|
//@ts-ignore
|
|
64
|
-
WithError.args = { payloads: [
|
|
74
|
+
WithError.args = { payloads: [sampleIdPayload, badPayload] }
|
|
65
75
|
|
|
66
76
|
export { Default, WithData, WithError }
|
|
67
77
|
|
|
@@ -20,7 +20,7 @@ import {
|
|
|
20
20
|
import { useBreakpoint } from '@xylabs/react-shared'
|
|
21
21
|
import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
|
|
22
22
|
import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
|
|
23
|
-
import { useState } from 'react'
|
|
23
|
+
import { useEffect, useState } from 'react'
|
|
24
24
|
|
|
25
25
|
import { PayloadDynamicTableRow } from './DynamicTableRow'
|
|
26
26
|
import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'
|
|
@@ -29,6 +29,7 @@ export interface PayloadDynamicTableProps extends TableProps {
|
|
|
29
29
|
exploreDomain?: string
|
|
30
30
|
archive?: string
|
|
31
31
|
onRowClick?: (value: XyoPayload) => void
|
|
32
|
+
rowsPerPage?: number
|
|
32
33
|
payloads?: XyoPayload[] | null
|
|
33
34
|
columns?: PayloadDynamicTableColumnConfig
|
|
34
35
|
}
|
|
@@ -82,6 +83,7 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
|
|
|
82
83
|
exploreDomain,
|
|
83
84
|
archive,
|
|
84
85
|
onRowClick,
|
|
86
|
+
rowsPerPage: rowsPerPageProp = 10,
|
|
85
87
|
payloads,
|
|
86
88
|
children,
|
|
87
89
|
columns = payloadDynamicTableColumnConfigDefaults(),
|
|
@@ -89,11 +91,15 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
|
|
|
89
91
|
}) => {
|
|
90
92
|
const breakPoint = useBreakpoint()
|
|
91
93
|
const [page, setPage] = useState(0)
|
|
92
|
-
const [rowsPerPage, setRowsPerPage] = useState(
|
|
94
|
+
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
|
|
93
95
|
const payloadCount = payloads ? payloads.length : 0
|
|
94
96
|
// Avoid a layout jump when reaching the last page with empty rows.
|
|
95
97
|
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
|
|
96
98
|
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
setRowsPerPage(rowsPerPageProp)
|
|
101
|
+
}, [rowsPerPageProp])
|
|
102
|
+
|
|
97
103
|
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
|
|
98
104
|
setPage(newPage)
|
|
99
105
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
2
|
-
import {
|
|
2
|
+
import { sampleIdPayload, sampleSystemInfoBrowserPayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
|
|
3
3
|
import { BrowserRouter } from 'react-router-dom'
|
|
4
4
|
|
|
5
5
|
import { PayloadTable } from './Table'
|
|
@@ -28,48 +28,31 @@ Default.decorators = [useAppThemeDecorator]
|
|
|
28
28
|
const WithData = Template.bind({})
|
|
29
29
|
WithData.args = {
|
|
30
30
|
payloads: [
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
samplePayload,
|
|
46
|
-
samplePayload,
|
|
47
|
-
samplePayload,
|
|
48
|
-
samplePayload,
|
|
49
|
-
samplePayload,
|
|
50
|
-
samplePayload,
|
|
51
|
-
samplePayload,
|
|
52
|
-
samplePayload,
|
|
53
|
-
samplePayload,
|
|
54
|
-
samplePayload,
|
|
55
|
-
samplePayload,
|
|
56
|
-
samplePayload,
|
|
57
|
-
samplePayload,
|
|
58
|
-
samplePayload,
|
|
59
|
-
samplePayload,
|
|
60
|
-
samplePayload,
|
|
61
|
-
samplePayload,
|
|
31
|
+
sampleIdPayload,
|
|
32
|
+
sampleSystemInfoBrowserPayload,
|
|
33
|
+
sampleIdPayload,
|
|
34
|
+
sampleSystemInfoBrowserPayload,
|
|
35
|
+
sampleIdPayload,
|
|
36
|
+
sampleSystemInfoBrowserPayload,
|
|
37
|
+
sampleIdPayload,
|
|
38
|
+
sampleSystemInfoBrowserPayload,
|
|
39
|
+
sampleIdPayload,
|
|
40
|
+
sampleSystemInfoBrowserPayload,
|
|
41
|
+
sampleIdPayload,
|
|
42
|
+
sampleSystemInfoBrowserPayload,
|
|
43
|
+
sampleIdPayload,
|
|
44
|
+
sampleSystemInfoBrowserPayload,
|
|
62
45
|
],
|
|
63
46
|
}
|
|
64
47
|
WithData.decorators = [useAppThemeDecorator]
|
|
65
48
|
|
|
66
49
|
const WithError = Template.bind({})
|
|
67
50
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
68
|
-
const {
|
|
51
|
+
const { ...badPayload } = sampleIdPayload
|
|
69
52
|
|
|
70
53
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
71
54
|
//@ts-ignore
|
|
72
|
-
WithError.args = { payloads: [
|
|
55
|
+
WithError.args = { payloads: [sampleIdPayload, badPayload] }
|
|
73
56
|
|
|
74
57
|
export { Default, WithData, WithError }
|
|
75
58
|
|
|
@@ -10,7 +10,7 @@ import { useBreakpoint } from '@xylabs/react-shared'
|
|
|
10
10
|
import { XyoPayload, XyoPayloadWrapper } from '@xyo-network/payload'
|
|
11
11
|
import { XyoApiThrownErrorBoundary } from '@xyo-network/react-auth-service'
|
|
12
12
|
import * as React from 'react'
|
|
13
|
-
import { useState } from 'react'
|
|
13
|
+
import { useEffect, useState } from 'react'
|
|
14
14
|
|
|
15
15
|
import { payloadColumnNames, PayloadTableColumnConfig, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig'
|
|
16
16
|
import { PayloadTableRow } from './TableRow'
|
|
@@ -19,6 +19,7 @@ export interface PayloadTableProps extends TableProps {
|
|
|
19
19
|
exploreDomain?: string
|
|
20
20
|
archive?: string
|
|
21
21
|
onRowClick?: (value: XyoPayload) => void
|
|
22
|
+
rowsPerPage?: number
|
|
22
23
|
payloads?: XyoPayload[] | null
|
|
23
24
|
columns?: PayloadTableColumnConfig
|
|
24
25
|
}
|
|
@@ -72,6 +73,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
72
73
|
exploreDomain,
|
|
73
74
|
archive,
|
|
74
75
|
onRowClick,
|
|
76
|
+
rowsPerPage: rowsPerPageProp = 10,
|
|
75
77
|
payloads,
|
|
76
78
|
children,
|
|
77
79
|
columns = payloadTableColumnConfigDefaults(),
|
|
@@ -79,11 +81,15 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
79
81
|
}) => {
|
|
80
82
|
const breakPoint = useBreakpoint()
|
|
81
83
|
const [page, setPage] = useState(0)
|
|
82
|
-
const [rowsPerPage, setRowsPerPage] = useState(
|
|
84
|
+
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
|
|
83
85
|
const payloadCount = payloads ? payloads.length : 0
|
|
84
86
|
// Avoid a layout jump when reaching the last page with empty rows.
|
|
85
87
|
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0
|
|
86
88
|
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
setRowsPerPage(rowsPerPageProp)
|
|
91
|
+
}, [rowsPerPageProp])
|
|
92
|
+
|
|
87
93
|
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
|
|
88
94
|
setPage(newPage)
|
|
89
95
|
}
|
|
@@ -115,7 +121,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
115
121
|
return (
|
|
116
122
|
<XyoApiThrownErrorBoundary
|
|
117
123
|
key={`${wrapper.hash}-${index}`}
|
|
118
|
-
errorComponent={(e) => (
|
|
124
|
+
errorComponent={(e: Error) => (
|
|
119
125
|
<Alert severity="error">
|
|
120
126
|
Error Loading Payload: <Typography fontWeight="bold">{e.message}</Typography>
|
|
121
127
|
</Alert>
|