@xyo-network/react-payload-table 2.35.0 → 2.35.2
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/Table/PayloadTableColumnConfig.d.ts.map +1 -1
- package/dist/cjs/components/Table/PayloadTableColumnConfig.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 +7 -6
- package/dist/cjs/components/Table/Table.js.map +1 -1
- package/dist/cjs/components/Table/TableRow.d.ts +1 -0
- package/dist/cjs/components/Table/TableRow.d.ts.map +1 -1
- package/dist/cjs/components/Table/TableRow.js +13 -2
- package/dist/cjs/components/Table/TableRow.js.map +1 -1
- package/dist/docs.json +126 -82
- package/dist/esm/components/Table/PayloadTableColumnConfig.d.ts.map +1 -1
- package/dist/esm/components/Table/PayloadTableColumnConfig.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 -5
- package/dist/esm/components/Table/Table.js.map +1 -1
- package/dist/esm/components/Table/TableRow.d.ts +1 -0
- package/dist/esm/components/Table/TableRow.d.ts.map +1 -1
- package/dist/esm/components/Table/TableRow.js +13 -3
- package/dist/esm/components/Table/TableRow.js.map +1 -1
- package/package.json +5 -5
- package/src/components/Table/PayloadTableColumnConfig.ts +0 -1
- package/src/components/Table/Table.stories.tsx +32 -18
- package/src/components/Table/Table.tsx +9 -5
- package/src/components/Table/TableRow.tsx +20 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PayloadTableColumnConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAAA,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,wBAAwB;IACvC,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PayloadTableColumnConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAAA,oBAAY,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,wBAAwB;IACvC,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC7B,EAAE,CAAC,EAAE,sBAAsB,EAAE,CAAA;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAIrE,CAAA;AAED,eAAO,MAAM,gCAAgC,QAAO,wBAOnD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PayloadTableColumnConfig.js","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,kBAAkB,GAA2C;IACxE,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"PayloadTableColumnConfig.js","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,kBAAkB,GAA2C;IACxE,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,CAAC,MAAM,gCAAgC,GAAG,GAA6B,EAAE;IAC7E,MAAM,EAAE,GAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAChE,MAAM,EAAE,GAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAChE,MAAM,EAAE,GAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAChE,MAAM,EAAE,GAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAChE,MAAM,EAAE,GAA6B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;IAChE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;AAC/B,CAAC,CAAA"}
|
|
@@ -9,6 +9,7 @@ export interface PayloadTableProps extends TableProps {
|
|
|
9
9
|
rowsPerPage?: number;
|
|
10
10
|
payloads?: XyoPayload[] | null;
|
|
11
11
|
columns?: PayloadTableColumnConfig;
|
|
12
|
+
maxSchemaDepth?: number;
|
|
12
13
|
}
|
|
13
14
|
export declare const PayloadTable: React.FC<PayloadTableProps>;
|
|
14
15
|
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -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,EAAkB,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjE,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;
|
|
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,EAAkB,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjE,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;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AA+CD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqGpD,CAAA"}
|
|
@@ -30,7 +30,8 @@ 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, rowsPerPage: rowsPerPageProp =
|
|
33
|
+
export const PayloadTable = ({ exploreDomain, archive, onRowClick, rowsPerPage: rowsPerPageProp = 25, payloads, children, columns = payloadTableColumnConfigDefaults(), maxSchemaDepth, ...props }) => {
|
|
34
|
+
const theme = useTheme();
|
|
34
35
|
const breakPoint = useBreakpoint();
|
|
35
36
|
const [page, setPage] = useState(0);
|
|
36
37
|
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
|
|
@@ -47,17 +48,17 @@ export const PayloadTable = ({ exploreDomain, archive, onRowClick, rowsPerPage:
|
|
|
47
48
|
setRowsPerPage(parseInt(event.target.value, 10));
|
|
48
49
|
setPage(0);
|
|
49
50
|
};
|
|
50
|
-
return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...props, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
|
|
51
|
+
return breakPoint ? (_jsxs(Table, { stickyHeader: true, ...props, children: [_jsx(TableHead, { style: { position: 'sticky', top: 0 }, children: _jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
|
|
51
52
|
return (_jsx(TableCell, { width: index === 0 ? '100%' : undefined, align: index === 0 ? 'left' : 'center', children: _jsx(Typography, { variant: "body2", noWrap: true, children: payloadColumnNames[column] }) }, index));
|
|
52
|
-
}) }) }), _jsxs(TableBody, {
|
|
53
|
+
}) }) }), _jsxs(TableBody, { children: [payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
|
|
53
54
|
// {payloads?.map((payload, index) => {
|
|
54
55
|
const wrapper = new PayloadWrapper(payload);
|
|
55
|
-
return (_jsx(XyoApiThrownErrorBoundary, { errorComponent: (e) => (_jsxs(Alert, { severity: "error", children: ["Error Loading Payload: ", _jsx(Typography, { fontWeight: "bold", children: e.message })] })), children: _jsx(PayloadTableRow, { archive: archive, onClick: onRowClick
|
|
56
|
+
return (_jsx(XyoApiThrownErrorBoundary, { errorComponent: (e) => (_jsxs(Alert, { severity: "error", children: ["Error Loading Payload: ", _jsx(Typography, { fontWeight: "bold", children: e.message })] })), children: _jsx(PayloadTableRow, { maxSchemaDepth: maxSchemaDepth, archive: archive, onClick: onRowClick
|
|
56
57
|
? () => {
|
|
57
58
|
onRowClick(payload);
|
|
58
59
|
}
|
|
59
60
|
: undefined, exploreDomain: exploreDomain, payload: payload }) }, `${wrapper.hash}-${index}`));
|
|
60
|
-
}), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadTableRow, {}))] }), _jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }],
|
|
61
|
+
}), children, emptyRows > 0 && Array(emptyRows).fill(_jsx(PayloadTableRow, {}))] }), _jsx(TableFooter, { style: { backgroundColor: theme.palette.background.default, bottom: 0, position: 'sticky' }, children: _jsx(TableRow, { children: _jsx(TablePagination, { rowsPerPageOptions: [5, 10, 25, { label: 'All', value: -1 }], count: payloadCount, rowsPerPage: rowsPerPage, page: page, style: { borderTop: '1px solid', borderTopColor: theme.palette.divider }, SelectProps: {
|
|
61
62
|
inputProps: {
|
|
62
63
|
'aria-label': 'rows per page',
|
|
63
64
|
},
|
|
@@ -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,EAAE,cAAc,EAAc,MAAM,sBAAsB,CAAA;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAE3E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAA4B,gCAAgC,EAAE,MAAM,4BAA4B,CAAA;AAC3H,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ export interface PayloadTableRowProps extends TableRowProps {
|
|
|
8
8
|
exploreDomain?: string;
|
|
9
9
|
columns?: PayloadTableColumnConfig;
|
|
10
10
|
network?: string;
|
|
11
|
+
maxSchemaDepth?: number;
|
|
11
12
|
}
|
|
12
13
|
export declare const PayloadTableRow: React.FC<PayloadTableRowProps>;
|
|
13
14
|
//# sourceMappingURL=TableRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAGA,OAAO,EAA8C,aAAa,EAAc,MAAM,eAAe,CAAA;AAErG,OAAO,EAAoC,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAInF,OAAO,EAAE,wBAAwB,EAA4D,MAAM,4BAA4B,CAAA;AAE/H,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAGA,OAAO,EAA8C,aAAa,EAAc,MAAM,eAAe,CAAA;AAErG,OAAO,EAAoC,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAInF,OAAO,EAAE,wBAAwB,EAA4D,MAAM,4BAA4B,CAAA;AAE/H,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgF1D,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
|
|
3
3
|
import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
|
|
4
4
|
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
|
|
@@ -8,12 +8,22 @@ import { PayloadValidator, PayloadWrapper } from '@xyo-network/payload';
|
|
|
8
8
|
import { useNetwork } from '@xyo-network/react-network';
|
|
9
9
|
import { HashTableCell } from '@xyo-network/react-shared';
|
|
10
10
|
import { payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig';
|
|
11
|
-
export const PayloadTableRow = ({ exploreDomain, network: networkProp, payload, archive, columns = payloadTableColumnConfigDefaults(), ...props }) => {
|
|
11
|
+
export const PayloadTableRow = ({ exploreDomain, network: networkProp, payload, archive, maxSchemaDepth, columns = payloadTableColumnConfigDefaults(), ...props }) => {
|
|
12
12
|
const breakPoint = useBreakpoint();
|
|
13
13
|
const wrapper = payload ? new PayloadWrapper(payload) : undefined;
|
|
14
14
|
const { network } = useNetwork();
|
|
15
15
|
const hash = (props) => (_jsx(HashTableCell, { archive: archive, width: "100%", value: wrapper?.hash, dataType: "payload", exploreDomain: exploreDomain, network: networkProp ?? network?.slug, ...props }, "hash"));
|
|
16
|
-
const
|
|
16
|
+
const reduceSchemaDepth = (schema, maxSchemaDepth) => {
|
|
17
|
+
if (maxSchemaDepth) {
|
|
18
|
+
const parts = schema?.split('.') ?? [];
|
|
19
|
+
const partsToRemove = parts.length - maxSchemaDepth > 0 ? parts.length - maxSchemaDepth : 0;
|
|
20
|
+
if (partsToRemove > 0) {
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx(_Fragment, { children: "\u2026" }), `${parts.slice(partsToRemove).reduce((previousValue, part) => `${previousValue}.${part}`)}`] }));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return schema;
|
|
25
|
+
};
|
|
26
|
+
const schema = (props) => (_jsx(TableCell, { title: payload?.schema, align: "center", ...props, children: _jsx(Typography, { fontFamily: "monospace", variant: "body2", noWrap: true, children: reduceSchemaDepth(payload?.schema, maxSchemaDepth) }) }, "payloads"));
|
|
17
27
|
const isValid = wrapper ? new PayloadValidator(wrapper.body).validate().length === 0 : undefined;
|
|
18
28
|
const valid = (props) => (_jsx(TableCell, { align: "center", ...props, children: isValid === undefined && payload != undefined ? (_jsx(WarningAmberRoundedIcon, { fontSize: "small", color: "warning" })) : isValid === true ? (_jsx(CheckCircleOutlineRoundedIcon, { fontSize: "small", color: "success" })) : isValid === false ? (_jsx(ErrorOutlineRoundedIcon, { color: "error", fontSize: "small" })) : (
|
|
19
29
|
//to keep row height consistent when no data provided, may need fix later
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,MAAM,+CAA+C,CAAA;AACzF,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,EAAE,KAAK,EAAE,SAAS,EAAkB,QAAQ,EAAiB,UAAU,EAAE,MAAM,eAAe,CAAA;AACrG,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAc,MAAM,sBAAsB,CAAA;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAA4B,gCAAgC,EAA0B,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow.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.20",
|
|
14
|
-
"@xyo-network/react-auth-service": "^2.35.
|
|
15
|
-
"@xyo-network/react-network": "^2.35.
|
|
16
|
-
"@xyo-network/react-payload-plugin": "^2.35.
|
|
17
|
-
"@xyo-network/react-shared": "^2.35.
|
|
14
|
+
"@xyo-network/react-auth-service": "^2.35.2",
|
|
15
|
+
"@xyo-network/react-network": "^2.35.2",
|
|
16
|
+
"@xyo-network/react-payload-plugin": "^2.35.2",
|
|
17
|
+
"@xyo-network/react-shared": "^2.35.2",
|
|
18
18
|
"tslib": "^2.4.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
},
|
|
77
77
|
"sideEffects": false,
|
|
78
78
|
"types": "dist/esm/index.d.ts",
|
|
79
|
-
"version": "2.35.
|
|
79
|
+
"version": "2.35.2"
|
|
80
80
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { Box } from '@mui/material'
|
|
1
2
|
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
3
|
+
import { XyoPayload } from '@xyo-network/payload'
|
|
2
4
|
import { sampleIdPayload, sampleSystemInfoBrowserPayload, useAppThemeDecorator } from '@xyo-network/react-storybook'
|
|
3
5
|
import { BrowserRouter } from 'react-router-dom'
|
|
4
6
|
|
|
@@ -17,7 +19,9 @@ const StorybookEntry = {
|
|
|
17
19
|
|
|
18
20
|
const Template: ComponentStory<typeof PayloadTable> = (args) => (
|
|
19
21
|
<BrowserRouter>
|
|
20
|
-
<
|
|
22
|
+
<Box height="90vh" overflow="auto">
|
|
23
|
+
<PayloadTable {...args}></PayloadTable>
|
|
24
|
+
</Box>
|
|
21
25
|
</BrowserRouter>
|
|
22
26
|
)
|
|
23
27
|
|
|
@@ -25,27 +29,37 @@ const Default = Template.bind({})
|
|
|
25
29
|
Default.args = {}
|
|
26
30
|
Default.decorators = [useAppThemeDecorator]
|
|
27
31
|
|
|
32
|
+
const payloads: XyoPayload[] = [
|
|
33
|
+
sampleIdPayload,
|
|
34
|
+
sampleSystemInfoBrowserPayload,
|
|
35
|
+
sampleIdPayload,
|
|
36
|
+
{ schema: 'network.xyo.debug.super.long.schema.for.some.reason' },
|
|
37
|
+
sampleSystemInfoBrowserPayload,
|
|
38
|
+
sampleIdPayload,
|
|
39
|
+
sampleSystemInfoBrowserPayload,
|
|
40
|
+
sampleIdPayload,
|
|
41
|
+
sampleSystemInfoBrowserPayload,
|
|
42
|
+
sampleIdPayload,
|
|
43
|
+
sampleSystemInfoBrowserPayload,
|
|
44
|
+
sampleIdPayload,
|
|
45
|
+
sampleSystemInfoBrowserPayload,
|
|
46
|
+
sampleIdPayload,
|
|
47
|
+
sampleSystemInfoBrowserPayload,
|
|
48
|
+
]
|
|
49
|
+
|
|
28
50
|
const WithData = Template.bind({})
|
|
29
51
|
WithData.args = {
|
|
30
|
-
payloads
|
|
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,
|
|
45
|
-
],
|
|
52
|
+
payloads,
|
|
46
53
|
}
|
|
47
54
|
WithData.decorators = [useAppThemeDecorator]
|
|
48
55
|
|
|
56
|
+
const WithDataAndMaxSchemaDepth = Template.bind({})
|
|
57
|
+
WithDataAndMaxSchemaDepth.args = {
|
|
58
|
+
maxSchemaDepth: 2,
|
|
59
|
+
payloads,
|
|
60
|
+
}
|
|
61
|
+
WithDataAndMaxSchemaDepth.decorators = [useAppThemeDecorator]
|
|
62
|
+
|
|
49
63
|
const WithError = Template.bind({})
|
|
50
64
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
51
65
|
const { ...badPayload } = sampleIdPayload
|
|
@@ -54,7 +68,7 @@ const { ...badPayload } = sampleIdPayload
|
|
|
54
68
|
//@ts-ignore
|
|
55
69
|
WithError.args = { payloads: [sampleIdPayload, badPayload] }
|
|
56
70
|
|
|
57
|
-
export { Default, WithData, WithError }
|
|
71
|
+
export { Default, WithData, WithDataAndMaxSchemaDepth, WithError }
|
|
58
72
|
|
|
59
73
|
// eslint-disable-next-line import/no-default-export
|
|
60
74
|
export default StorybookEntry
|
|
@@ -22,6 +22,7 @@ export interface PayloadTableProps extends TableProps {
|
|
|
22
22
|
rowsPerPage?: number
|
|
23
23
|
payloads?: XyoPayload[] | null
|
|
24
24
|
columns?: PayloadTableColumnConfig
|
|
25
|
+
maxSchemaDepth?: number
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
interface TablePaginationActionsProps {
|
|
@@ -73,12 +74,14 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
73
74
|
exploreDomain,
|
|
74
75
|
archive,
|
|
75
76
|
onRowClick,
|
|
76
|
-
rowsPerPage: rowsPerPageProp =
|
|
77
|
+
rowsPerPage: rowsPerPageProp = 25,
|
|
77
78
|
payloads,
|
|
78
79
|
children,
|
|
79
80
|
columns = payloadTableColumnConfigDefaults(),
|
|
81
|
+
maxSchemaDepth,
|
|
80
82
|
...props
|
|
81
83
|
}) => {
|
|
84
|
+
const theme = useTheme()
|
|
82
85
|
const breakPoint = useBreakpoint()
|
|
83
86
|
const [page, setPage] = useState(0)
|
|
84
87
|
const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)
|
|
@@ -101,7 +104,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
101
104
|
|
|
102
105
|
return breakPoint ? (
|
|
103
106
|
<Table stickyHeader {...props}>
|
|
104
|
-
<TableHead>
|
|
107
|
+
<TableHead style={{ position: 'sticky', top: 0 }}>
|
|
105
108
|
<TableRow>
|
|
106
109
|
{columns[breakPoint]?.map((column, index) => {
|
|
107
110
|
return (
|
|
@@ -114,7 +117,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
114
117
|
})}
|
|
115
118
|
</TableRow>
|
|
116
119
|
</TableHead>
|
|
117
|
-
<TableBody
|
|
120
|
+
<TableBody>
|
|
118
121
|
{payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((payload, index) => {
|
|
119
122
|
// {payloads?.map((payload, index) => {
|
|
120
123
|
const wrapper = new PayloadWrapper(payload)
|
|
@@ -128,6 +131,7 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
128
131
|
)}
|
|
129
132
|
>
|
|
130
133
|
<PayloadTableRow
|
|
134
|
+
maxSchemaDepth={maxSchemaDepth}
|
|
131
135
|
archive={archive}
|
|
132
136
|
onClick={
|
|
133
137
|
onRowClick
|
|
@@ -145,14 +149,14 @@ export const PayloadTable: React.FC<PayloadTableProps> = ({
|
|
|
145
149
|
{children}
|
|
146
150
|
{emptyRows > 0 && Array(emptyRows).fill(<PayloadTableRow />)}
|
|
147
151
|
</TableBody>
|
|
148
|
-
<TableFooter>
|
|
152
|
+
<TableFooter style={{ backgroundColor: theme.palette.background.default, bottom: 0, position: 'sticky' }}>
|
|
149
153
|
<TableRow>
|
|
150
154
|
<TablePagination
|
|
151
155
|
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
|
|
152
|
-
colSpan={3}
|
|
153
156
|
count={payloadCount}
|
|
154
157
|
rowsPerPage={rowsPerPage}
|
|
155
158
|
page={page}
|
|
159
|
+
style={{ borderTop: '1px solid', borderTopColor: theme.palette.divider }}
|
|
156
160
|
SelectProps={{
|
|
157
161
|
inputProps: {
|
|
158
162
|
'aria-label': 'rows per page',
|
|
@@ -15,6 +15,7 @@ export interface PayloadTableRowProps extends TableRowProps {
|
|
|
15
15
|
exploreDomain?: string
|
|
16
16
|
columns?: PayloadTableColumnConfig
|
|
17
17
|
network?: string
|
|
18
|
+
maxSchemaDepth?: number
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
|
|
@@ -22,6 +23,7 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
|
|
|
22
23
|
network: networkProp,
|
|
23
24
|
payload,
|
|
24
25
|
archive,
|
|
26
|
+
maxSchemaDepth,
|
|
25
27
|
columns = payloadTableColumnConfigDefaults(),
|
|
26
28
|
...props
|
|
27
29
|
}) => {
|
|
@@ -42,10 +44,26 @@ export const PayloadTableRow: React.FC<PayloadTableRowProps> = ({
|
|
|
42
44
|
/>
|
|
43
45
|
)
|
|
44
46
|
|
|
47
|
+
const reduceSchemaDepth = (schema?: string, maxSchemaDepth?: number) => {
|
|
48
|
+
if (maxSchemaDepth) {
|
|
49
|
+
const parts = schema?.split('.') ?? []
|
|
50
|
+
const partsToRemove = parts.length - maxSchemaDepth > 0 ? parts.length - maxSchemaDepth : 0
|
|
51
|
+
if (partsToRemove > 0) {
|
|
52
|
+
return (
|
|
53
|
+
<>
|
|
54
|
+
<>…</>
|
|
55
|
+
{`${parts.slice(partsToRemove).reduce((previousValue, part) => `${previousValue}.${part}`)}`}
|
|
56
|
+
</>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return schema
|
|
61
|
+
}
|
|
62
|
+
|
|
45
63
|
const schema: React.FC<TableCellProps> = (props) => (
|
|
46
|
-
<TableCell key="payloads" align="center" {...props}>
|
|
64
|
+
<TableCell title={payload?.schema} key="payloads" align="center" {...props}>
|
|
47
65
|
<Typography fontFamily="monospace" variant="body2" noWrap>
|
|
48
|
-
{payload?.schema}
|
|
66
|
+
{reduceSchemaDepth(payload?.schema, maxSchemaDepth)}
|
|
49
67
|
</Typography>
|
|
50
68
|
</TableCell>
|
|
51
69
|
)
|