@symply.io/basic-components 1.1.2-beta.3 → 1.1.2-beta.5
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/DataTable/TableBody.js +2 -2
- package/DataTable/TableBodyRow.js +74 -14
- package/DataTable/TableFooter.js +78 -11
- package/DataTable/TableHeader.js +86 -17
- package/DataTable/index.js +1 -3
- package/DataTable/types.d.ts +1 -2
- package/Sidebar/SidebarItem.js +3 -3
- package/package.json +1 -1
package/DataTable/TableBody.js
CHANGED
|
@@ -15,7 +15,7 @@ import TableBody from "@mui/material/TableBody";
|
|
|
15
15
|
import TableCell from "@mui/material/TableCell";
|
|
16
16
|
import TableBodyRow from "./TableBodyRow";
|
|
17
17
|
function TBody(props) {
|
|
18
|
-
var rows = props.rows, columns = props.columns,
|
|
19
|
-
return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns,
|
|
18
|
+
var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, onRowClick = props.onRowClick;
|
|
19
|
+
return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns, onRowClick: onRowClick }, "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
|
|
20
20
|
}
|
|
21
21
|
export default TBody;
|
|
@@ -9,28 +9,88 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { cloneElement } from "react";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { cloneElement, useState } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import TableCell from "@mui/material/TableCell";
|
|
16
|
-
import
|
|
16
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
17
|
+
import useTheme from "@mui/material/styles/useTheme";
|
|
17
18
|
function TableBodyRow(props) {
|
|
18
|
-
var row = props.row, rows = props.rows, columns = props.columns,
|
|
19
|
+
var row = props.row, rows = props.rows, columns = props.columns, onRowClick = props.onRowClick;
|
|
20
|
+
var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
|
|
19
21
|
var theme = useTheme();
|
|
20
|
-
|
|
22
|
+
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
+
var fixedLeftCols = isUpMd ? columns.filter(function (c) { return c.fixable === "left"; }) : [];
|
|
24
|
+
var fixedRightCols = isUpMd
|
|
25
|
+
? columns.filter(function (c) { return c.fixable === "right"; })
|
|
26
|
+
: [];
|
|
27
|
+
var dynamicCols = isUpMd ? columns.filter(function (c) { return !c.fixable; }) : columns;
|
|
28
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
21
29
|
"&:hover": {
|
|
22
|
-
cursor:
|
|
23
|
-
backgroundColor:
|
|
24
|
-
? alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
|
|
25
|
-
: "initial"
|
|
30
|
+
cursor: onRowClick ? "pointer" : "default",
|
|
31
|
+
backgroundColor: onRowClick ? "#fafafa" : "Menu"
|
|
26
32
|
}
|
|
27
|
-
},
|
|
33
|
+
}, onMouseEnter: function (event) {
|
|
34
|
+
setRowEl(event.currentTarget);
|
|
35
|
+
}, onMouseLeave: function () {
|
|
36
|
+
setRowEl(undefined);
|
|
37
|
+
}, onClick: onRowClick
|
|
28
38
|
? function () {
|
|
29
39
|
onRowClick(row);
|
|
30
40
|
}
|
|
31
|
-
: undefined }, { children:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
41
|
+
: undefined }, { children: [fixedLeftCols.map(function (col, index) {
|
|
42
|
+
var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
|
|
43
|
+
var left = fixedLeftCols
|
|
44
|
+
.slice(0, index)
|
|
45
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
46
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
47
|
+
width: width,
|
|
48
|
+
left: left,
|
|
49
|
+
position: "sticky",
|
|
50
|
+
zIndex: 10,
|
|
51
|
+
backgroundColor: onRowClick && rowEl ? "#fafafa" : "Menu",
|
|
52
|
+
"&::after": index === fixedLeftCols.length - 1
|
|
53
|
+
? {
|
|
54
|
+
position: "absolute",
|
|
55
|
+
top: 0,
|
|
56
|
+
right: 0,
|
|
57
|
+
bottom: "-1px",
|
|
58
|
+
width: "20px",
|
|
59
|
+
transform: "translateX(100%)",
|
|
60
|
+
transition: "box-shadow .3s",
|
|
61
|
+
content: "''",
|
|
62
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
63
|
+
}
|
|
64
|
+
: undefined
|
|
65
|
+
} }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
|
|
66
|
+
}), dynamicCols.map(function (col) {
|
|
67
|
+
var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
|
|
68
|
+
return (_jsx(TableCell, __assign({ align: align, sx: { width: width, zIndex: 9 } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
|
|
69
|
+
}), fixedRightCols.map(function (col, index) {
|
|
70
|
+
var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
|
|
71
|
+
var right = fixedRightCols
|
|
72
|
+
.slice(0, fixedRightCols.length - 1 - index)
|
|
73
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
74
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
75
|
+
width: width,
|
|
76
|
+
right: right,
|
|
77
|
+
position: "sticky",
|
|
78
|
+
zIndex: 10,
|
|
79
|
+
backgroundColor: onRowClick && rowEl ? "#fafafa" : "Menu",
|
|
80
|
+
"&::after": index === 0
|
|
81
|
+
? {
|
|
82
|
+
position: "absolute",
|
|
83
|
+
top: 0,
|
|
84
|
+
left: 0,
|
|
85
|
+
bottom: "-1px",
|
|
86
|
+
width: "20px",
|
|
87
|
+
transform: "translateX(100%)",
|
|
88
|
+
transition: "box-shadow .3s",
|
|
89
|
+
content: "''",
|
|
90
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
91
|
+
}
|
|
92
|
+
: undefined
|
|
93
|
+
} }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
|
|
94
|
+
})] })));
|
|
35
95
|
}
|
|
36
96
|
export default TableBodyRow;
|
package/DataTable/TableFooter.js
CHANGED
|
@@ -9,22 +9,89 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { cloneElement } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import Footer from "@mui/material/TableFooter";
|
|
16
16
|
import TableCell from "@mui/material/TableCell";
|
|
17
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
|
+
import useTheme from "@mui/material/styles/useTheme";
|
|
17
19
|
function TableFooter(props) {
|
|
18
20
|
var footers = props.footers;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
var theme = useTheme();
|
|
22
|
+
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
+
var fixedLeftFooters = isUpMd
|
|
24
|
+
? footers.filter(function (f) { return f.fixable === "left"; })
|
|
25
|
+
: [];
|
|
26
|
+
var fixedRightFooters = isUpMd
|
|
27
|
+
? footers.filter(function (f) { return f.fixable === "right"; })
|
|
28
|
+
: [];
|
|
29
|
+
var dynamicFooters = isUpMd ? footers.filter(function (f) { return !f.fixable; }) : footers;
|
|
30
|
+
return (_jsx(Footer, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
|
|
31
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = footer.align, align = _b === void 0 ? "center" : _b, width = footer.width;
|
|
32
|
+
var left = fixedLeftFooters
|
|
33
|
+
.slice(0, index)
|
|
34
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
35
|
+
return (_jsx(TableCell, __assign({ align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
36
|
+
position: "sticky",
|
|
37
|
+
backgroundColor: "#eaf0f6",
|
|
38
|
+
zIndex: 10,
|
|
39
|
+
left: left,
|
|
40
|
+
width: width,
|
|
41
|
+
userSelect: "none",
|
|
42
|
+
"&::after": index === fixedLeftFooters.length - 1
|
|
43
|
+
? {
|
|
44
|
+
position: "absolute",
|
|
45
|
+
top: 0,
|
|
46
|
+
right: 0,
|
|
47
|
+
bottom: "-1px",
|
|
48
|
+
width: "20px",
|
|
49
|
+
transform: "translateX(100%)",
|
|
50
|
+
transition: "box-shadow .3s",
|
|
51
|
+
content: "''",
|
|
52
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
53
|
+
}
|
|
54
|
+
: undefined
|
|
55
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
56
|
+
}), dynamicFooters.map(function (footer) {
|
|
57
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = footer.align, align = _b === void 0 ? "center" : _b, width = footer.width;
|
|
58
|
+
return (_jsx(TableCell, __assign({ align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
59
|
+
zIndex: 9,
|
|
60
|
+
width: width,
|
|
61
|
+
whiteSpace: "nowrap",
|
|
62
|
+
textOverflow: "ellipsis",
|
|
63
|
+
overflow: "hidden",
|
|
64
|
+
userSelect: "none"
|
|
65
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
66
|
+
}), fixedRightFooters.map(function (footer, index) {
|
|
67
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = footer.align, align = _b === void 0 ? "center" : _b, width = footer.width;
|
|
68
|
+
var right = fixedRightFooters
|
|
69
|
+
.slice(0, fixedRightFooters.length - 1 - index)
|
|
70
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
71
|
+
return (_jsx(TableCell, __assign({ align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
72
|
+
position: "sticky",
|
|
73
|
+
zIndex: 10,
|
|
74
|
+
width: width,
|
|
75
|
+
right: right,
|
|
76
|
+
backgroundColor: "#eaf0f6",
|
|
77
|
+
whiteSpace: "nowrap",
|
|
78
|
+
textOverflow: "ellipsis",
|
|
79
|
+
overflow: "hidden",
|
|
80
|
+
userSelect: "none",
|
|
81
|
+
"&::after": index === 0
|
|
82
|
+
? {
|
|
83
|
+
position: "absolute",
|
|
84
|
+
top: 0,
|
|
85
|
+
left: 0,
|
|
86
|
+
bottom: "-1px",
|
|
87
|
+
width: "20px",
|
|
88
|
+
transform: "translateX(100%)",
|
|
89
|
+
transition: "box-shadow .3s",
|
|
90
|
+
content: "''",
|
|
91
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
92
|
+
}
|
|
93
|
+
: undefined
|
|
94
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
95
|
+
})] })) }));
|
|
29
96
|
}
|
|
30
97
|
export default TableFooter;
|
package/DataTable/TableHeader.js
CHANGED
|
@@ -9,29 +9,98 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { cloneElement } from "react";
|
|
14
14
|
import TableRow from "@mui/material/TableRow";
|
|
15
15
|
import TableHead from "@mui/material/TableHead";
|
|
16
16
|
import TableCell from "@mui/material/TableCell";
|
|
17
|
-
import
|
|
17
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
|
+
import useTheme from "@mui/material/styles/useTheme";
|
|
18
19
|
function TableHeader(props) {
|
|
19
20
|
var headers = props.headers;
|
|
20
21
|
var theme = useTheme();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
22
|
+
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
23
|
+
var fixedLeftHeaders = isUpMd
|
|
24
|
+
? headers.filter(function (h) { return h.fixable === "left"; })
|
|
25
|
+
: [];
|
|
26
|
+
var fixedRightHeaders = isUpMd
|
|
27
|
+
? headers.filter(function (h) { return h.fixable === "right"; })
|
|
28
|
+
: [];
|
|
29
|
+
var dynamicHeaders = isUpMd ? headers.filter(function (h) { return !h.fixable; }) : headers;
|
|
30
|
+
return (_jsx(TableHead, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
|
|
31
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = header.align, align = _b === void 0 ? "center" : _b, width = header.width, title = header.title, _c = header.sortable, sortable = _c === void 0 ? false : _c, onSort = header.onSort;
|
|
32
|
+
var left = fixedLeftHeaders
|
|
33
|
+
.slice(0, index)
|
|
34
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
35
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
36
|
+
position: "sticky",
|
|
37
|
+
backgroundColor: "#eaf0f6",
|
|
38
|
+
zIndex: 10,
|
|
39
|
+
width: width,
|
|
40
|
+
left: left,
|
|
41
|
+
userSelect: "none",
|
|
42
|
+
cursor: sortable ? "pointer" : "default",
|
|
43
|
+
"&::after": index === fixedLeftHeaders.length - 1
|
|
44
|
+
? {
|
|
45
|
+
position: "absolute",
|
|
46
|
+
top: 0,
|
|
47
|
+
right: 0,
|
|
48
|
+
bottom: "-1px",
|
|
49
|
+
width: "20px",
|
|
50
|
+
transform: "translateX(100%)",
|
|
51
|
+
transition: "box-shadow .3s",
|
|
52
|
+
content: "''",
|
|
53
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
54
|
+
}
|
|
55
|
+
: undefined
|
|
56
|
+
}, onClick: function () {
|
|
57
|
+
onSort({ accessor: accessor });
|
|
58
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
59
|
+
}), dynamicHeaders.map(function (header) {
|
|
60
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = header.align, align = _b === void 0 ? "center" : _b, width = header.width, title = header.title, _c = header.sortable, sortable = _c === void 0 ? false : _c, onSort = header.onSort;
|
|
61
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
62
|
+
width: width,
|
|
63
|
+
zIndex: 9,
|
|
64
|
+
whiteSpace: "nowrap",
|
|
65
|
+
textOverflow: "ellipsis",
|
|
66
|
+
overflow: "hidden",
|
|
67
|
+
userSelect: "none",
|
|
68
|
+
cursor: sortable ? "pointer" : "default"
|
|
69
|
+
}, onClick: function () {
|
|
70
|
+
onSort({ accessor: accessor });
|
|
71
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
72
|
+
}), fixedRightHeaders.map(function (header, index) {
|
|
73
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = header.align, align = _b === void 0 ? "center" : _b, width = header.width, title = header.title, _c = header.sortable, sortable = _c === void 0 ? false : _c, onSort = header.onSort;
|
|
74
|
+
var right = fixedRightHeaders
|
|
75
|
+
.slice(0, fixedRightHeaders.length - 1 - index)
|
|
76
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
77
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, padding: disablePadding ? "none" : "normal", sx: {
|
|
78
|
+
position: "sticky",
|
|
79
|
+
backgroundColor: "#eaf0f6",
|
|
80
|
+
zIndex: 10,
|
|
81
|
+
width: width,
|
|
82
|
+
right: right,
|
|
83
|
+
whiteSpace: "nowrap",
|
|
84
|
+
textOverflow: "ellipsis",
|
|
85
|
+
overflow: "hidden",
|
|
86
|
+
userSelect: "none",
|
|
87
|
+
cursor: sortable ? "pointer" : "default",
|
|
88
|
+
"&::after": index === 0
|
|
89
|
+
? {
|
|
90
|
+
position: "absolute",
|
|
91
|
+
top: 0,
|
|
92
|
+
left: 0,
|
|
93
|
+
bottom: "-1px",
|
|
94
|
+
width: "20px",
|
|
95
|
+
transform: "translateX(100%)",
|
|
96
|
+
transition: "box-shadow .3s",
|
|
97
|
+
content: "''",
|
|
98
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
99
|
+
}
|
|
100
|
+
: undefined
|
|
101
|
+
}, onClick: function () {
|
|
102
|
+
onSort({ accessor: accessor });
|
|
103
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
104
|
+
})] })) }));
|
|
36
105
|
}
|
|
37
106
|
export default TableHeader;
|
package/DataTable/index.js
CHANGED
|
@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
13
|
import Table from "@mui/material/Table";
|
|
14
14
|
import TableContainer from "@mui/material/TableContainer";
|
|
15
|
-
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
16
15
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
17
16
|
import useCustomTheme from "../useCustomTheme";
|
|
18
17
|
import TableBody from "./TableBody";
|
|
@@ -21,14 +20,13 @@ import TableFooter from "./TableFooter";
|
|
|
21
20
|
function DataTable(props) {
|
|
22
21
|
var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
|
|
23
22
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
24
|
-
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
25
23
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, __assign({ sx: {
|
|
26
24
|
borderWidth: "thin",
|
|
27
25
|
borderColor: "#e5e5e5",
|
|
28
26
|
borderStyle: "solid",
|
|
29
27
|
borderRadius: "4px",
|
|
30
28
|
borderCollapse: "unset !important"
|
|
31
|
-
} }, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600 }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] })) })));
|
|
29
|
+
} }, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] })) })));
|
|
32
30
|
}
|
|
33
31
|
export default DataTable;
|
|
34
32
|
export { default as useDataTable } from "./useTable";
|
package/DataTable/types.d.ts
CHANGED
|
@@ -52,7 +52,6 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
|
|
|
52
52
|
columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
|
|
53
53
|
rows: Array<RowProps>;
|
|
54
54
|
noDataText?: string;
|
|
55
|
-
forFrozen?: boolean;
|
|
56
55
|
onRowClick?: (row: RowProps) => unknown;
|
|
57
56
|
};
|
|
58
57
|
export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
|
|
@@ -61,7 +60,7 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
|
|
|
61
60
|
export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
62
61
|
footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
|
|
63
62
|
};
|
|
64
|
-
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = TableHeaderProps<RowProps, ExtendedProps> &
|
|
63
|
+
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = TableHeaderProps<RowProps, ExtendedProps> & TableBodyProps<RowProps, ExtendedProps> & TableFooterProps<RowProps, ExtendedProps> & {
|
|
65
64
|
dense?: boolean;
|
|
66
65
|
stickyHeader?: boolean;
|
|
67
66
|
primaryColor?: CSSProperties["color"];
|
package/Sidebar/SidebarItem.js
CHANGED
|
@@ -11,9 +11,9 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import Chip from "@mui/material/Chip";
|
|
14
|
-
import ListItem from "@mui/material/ListItem";
|
|
15
14
|
import ListItemText from "@mui/material/ListItemText";
|
|
16
15
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
16
|
+
import ListItemButton from "@mui/material/ListItemButton";
|
|
17
17
|
import LockIcon from "@mui/icons-material/LockRounded";
|
|
18
18
|
import { useTheme, alpha } from "@mui/material/styles";
|
|
19
19
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
@@ -21,14 +21,14 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
|
21
21
|
function SidebarItem(props) {
|
|
22
22
|
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
|
|
23
23
|
var theme = useTheme();
|
|
24
|
-
return (_jsxs(
|
|
24
|
+
return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
|
|
25
25
|
paddingLeft: isSub ? theme.spacing(4) : undefined,
|
|
26
26
|
display: "flex",
|
|
27
27
|
width: "100%",
|
|
28
28
|
"&:hover": {
|
|
29
29
|
backgroundColor: alpha(theme.palette.primary.main, active
|
|
30
30
|
? theme.palette.action.activatedOpacity
|
|
31
|
-
: theme.palette.action.
|
|
31
|
+
: theme.palette.action.selectedOpacity)
|
|
32
32
|
},
|
|
33
33
|
backgroundColor: active
|
|
34
34
|
? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
|