@symply.io/basic-components 1.1.2-beta.4 → 1.1.2-beta.6
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 +13 -2
- package/DataTable/TableBodyRow.js +74 -14
- package/DataTable/TableFooter.js +72 -15
- package/DataTable/TableHeader.js +81 -18
- package/DataTable/index.js +40 -10
- package/DataTable/types.d.ts +10 -6
- package/README.md +63 -1
- package/Sidebar/SidebarItem.js +2 -2
- package/package.json +1 -1
package/DataTable/TableBody.js
CHANGED
|
@@ -9,13 +9,24 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
12
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
24
|
import TableRow from "@mui/material/TableRow";
|
|
14
25
|
import TableBody from "@mui/material/TableBody";
|
|
15
26
|
import TableCell from "@mui/material/TableCell";
|
|
16
27
|
import TableBodyRow from "./TableBodyRow";
|
|
17
28
|
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
|
|
29
|
+
var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
|
|
30
|
+
return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
|
|
20
31
|
}
|
|
21
32
|
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, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, 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 && leftShadowVisible
|
|
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 && rightShadowVisible
|
|
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,26 +9,83 @@ 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
|
|
17
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
18
|
+
import useTheme from "@mui/material/styles/useTheme";
|
|
18
19
|
function TableFooter(props) {
|
|
19
|
-
var footers = props.footers;
|
|
20
|
+
var footers = props.footers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
20
21
|
var theme = useTheme();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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.align, align = _a === void 0 ? "center" : _a, 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, 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 && leftShadowVisible
|
|
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.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
58
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
59
|
+
zIndex: 9,
|
|
60
|
+
width: width,
|
|
61
|
+
userSelect: "none"
|
|
62
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
63
|
+
}), fixedRightFooters.map(function (footer, index) {
|
|
64
|
+
var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
|
|
65
|
+
var right = fixedRightFooters
|
|
66
|
+
.slice(0, fixedRightFooters.length - 1 - index)
|
|
67
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
68
|
+
return (_jsx(TableCell, __assign({ align: align, sx: {
|
|
69
|
+
position: "sticky",
|
|
70
|
+
zIndex: 10,
|
|
71
|
+
width: width,
|
|
72
|
+
right: right,
|
|
73
|
+
backgroundColor: "#eaf0f6",
|
|
74
|
+
userSelect: "none",
|
|
75
|
+
"&::after": index === 0 && rightShadowVisible
|
|
76
|
+
? {
|
|
77
|
+
position: "absolute",
|
|
78
|
+
top: 0,
|
|
79
|
+
left: 0,
|
|
80
|
+
bottom: "-1px",
|
|
81
|
+
width: "20px",
|
|
82
|
+
transform: "translateX(-100%)",
|
|
83
|
+
transition: "box-shadow .3s",
|
|
84
|
+
content: "''",
|
|
85
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
86
|
+
}
|
|
87
|
+
: undefined
|
|
88
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
89
|
+
})] })) }));
|
|
33
90
|
}
|
|
34
91
|
export default TableFooter;
|
package/DataTable/TableHeader.js
CHANGED
|
@@ -9,29 +9,92 @@ 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
|
-
var headers = props.headers;
|
|
20
|
+
var headers = props.headers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
|
|
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.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, 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, 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 && leftShadowVisible
|
|
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.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
61
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
|
|
62
|
+
width: width,
|
|
63
|
+
zIndex: 9,
|
|
64
|
+
userSelect: "none",
|
|
65
|
+
cursor: sortable ? "pointer" : "default"
|
|
66
|
+
}, onClick: function () {
|
|
67
|
+
onSort({ accessor: accessor });
|
|
68
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
69
|
+
}), fixedRightHeaders.map(function (header, index) {
|
|
70
|
+
var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
|
|
71
|
+
var right = fixedRightHeaders
|
|
72
|
+
.slice(0, fixedRightHeaders.length - 1 - index)
|
|
73
|
+
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
74
|
+
return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
|
|
75
|
+
position: "sticky",
|
|
76
|
+
backgroundColor: "#eaf0f6",
|
|
77
|
+
zIndex: 10,
|
|
78
|
+
width: width,
|
|
79
|
+
right: right,
|
|
80
|
+
userSelect: "none",
|
|
81
|
+
cursor: sortable ? "pointer" : "default",
|
|
82
|
+
"&::after": index === 0 && rightShadowVisible
|
|
83
|
+
? {
|
|
84
|
+
position: "absolute",
|
|
85
|
+
top: 0,
|
|
86
|
+
left: 0,
|
|
87
|
+
bottom: "-1px",
|
|
88
|
+
width: "20px",
|
|
89
|
+
transform: "translateX(-100%)",
|
|
90
|
+
transition: "box-shadow .3s",
|
|
91
|
+
content: "''",
|
|
92
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
|
|
93
|
+
}
|
|
94
|
+
: undefined
|
|
95
|
+
}, onClick: function () {
|
|
96
|
+
onSort({ accessor: accessor });
|
|
97
|
+
} }, { children: cloneElement(Cell) }), accessor));
|
|
98
|
+
})] })) }));
|
|
36
99
|
}
|
|
37
100
|
export default TableHeader;
|
package/DataTable/index.js
CHANGED
|
@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
13
14
|
import Table from "@mui/material/Table";
|
|
14
15
|
import TableContainer from "@mui/material/TableContainer";
|
|
15
|
-
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
16
16
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
|
17
17
|
import useCustomTheme from "../useCustomTheme";
|
|
18
18
|
import TableBody from "./TableBody";
|
|
@@ -21,15 +21,45 @@ import TableFooter from "./TableFooter";
|
|
|
21
21
|
function DataTable(props) {
|
|
22
22
|
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
23
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
var tableRef = useRef(null);
|
|
25
|
+
var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
|
|
26
|
+
var _g = useState(false), rightShadowVisible = _g[0], setRightShadowVisible = _g[1];
|
|
27
|
+
var onProcessShadowVisible = useCallback(function () {
|
|
28
|
+
if (tableRef.current) {
|
|
29
|
+
var target = tableRef.current;
|
|
30
|
+
var scrollLeft = target.scrollLeft;
|
|
31
|
+
var scrollWidth = target.scrollWidth;
|
|
32
|
+
var clientWidth = target.clientWidth;
|
|
33
|
+
var hasScrollBar = scrollWidth > clientWidth;
|
|
34
|
+
console.log({
|
|
35
|
+
target: target,
|
|
36
|
+
scrollLeft: scrollLeft,
|
|
37
|
+
scrollWidth: scrollWidth,
|
|
38
|
+
clientWidth: clientWidth,
|
|
39
|
+
hasScrollBar: hasScrollBar
|
|
40
|
+
});
|
|
41
|
+
setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
|
|
42
|
+
setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft !== clientWidth);
|
|
43
|
+
}
|
|
44
|
+
}, []);
|
|
45
|
+
useEffect(function () {
|
|
46
|
+
if (columns) {
|
|
47
|
+
onProcessShadowVisible();
|
|
48
|
+
}
|
|
49
|
+
}, [columns, onProcessShadowVisible]);
|
|
50
|
+
useEffect(function () {
|
|
51
|
+
window.addEventListener("resize", onProcessShadowVisible);
|
|
52
|
+
}, [onProcessShadowVisible]);
|
|
53
|
+
useEffect(function () { return function () {
|
|
54
|
+
window.removeEventListener("scroll", onProcessShadowVisible);
|
|
55
|
+
}; }, [onProcessShadowVisible]);
|
|
56
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
|
|
57
|
+
borderWidth: "thin",
|
|
58
|
+
borderColor: "#e5e5e5",
|
|
59
|
+
borderStyle: "solid",
|
|
60
|
+
borderRadius: "4px",
|
|
61
|
+
borderCollapse: "unset !important"
|
|
62
|
+
} }, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })] })), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })));
|
|
33
63
|
}
|
|
34
64
|
export default DataTable;
|
|
35
65
|
export { default as useDataTable } from "./useTable";
|
package/DataTable/types.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ declare type InitialStateProps = {
|
|
|
10
10
|
};
|
|
11
11
|
export declare type ColumnProps = {
|
|
12
12
|
headerTip?: string;
|
|
13
|
-
disablePadding?: boolean;
|
|
14
13
|
Header: ReactElement;
|
|
15
14
|
Body: ReactElement;
|
|
16
15
|
Footer?: ReactElement;
|
|
@@ -28,15 +27,15 @@ export declare type UseTableBaseProps<RowProps extends KvProps> = {
|
|
|
28
27
|
onSort?: (props: SortingProps) => unknown;
|
|
29
28
|
};
|
|
30
29
|
export declare type UseTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = UseTableBaseProps<RowProps> & ExtendedProps;
|
|
31
|
-
export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
30
|
+
export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
32
31
|
Cell: ReactElement;
|
|
33
32
|
title: string;
|
|
34
33
|
onSort: ({ accessor }: Pick<SortingProps, "accessor">) => unknown;
|
|
35
34
|
};
|
|
36
|
-
export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
35
|
+
export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
37
36
|
Cell: ReactElement;
|
|
38
37
|
};
|
|
39
|
-
export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"
|
|
38
|
+
export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
|
|
40
39
|
Cell: ReactElement;
|
|
41
40
|
};
|
|
42
41
|
export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
@@ -47,12 +46,15 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
|
|
|
47
46
|
};
|
|
48
47
|
export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
49
48
|
headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
|
|
49
|
+
leftShadowVisible?: boolean;
|
|
50
|
+
rightShadowVisible?: boolean;
|
|
50
51
|
};
|
|
51
52
|
export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
52
53
|
columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
|
|
53
54
|
rows: Array<RowProps>;
|
|
55
|
+
leftShadowVisible?: boolean;
|
|
56
|
+
rightShadowVisible?: boolean;
|
|
54
57
|
noDataText?: string;
|
|
55
|
-
forFrozen?: boolean;
|
|
56
58
|
onRowClick?: (row: RowProps) => unknown;
|
|
57
59
|
};
|
|
58
60
|
export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
|
|
@@ -60,8 +62,10 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
|
|
|
60
62
|
};
|
|
61
63
|
export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
|
|
62
64
|
footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
|
|
65
|
+
leftShadowVisible?: boolean;
|
|
66
|
+
rightShadowVisible?: boolean;
|
|
63
67
|
};
|
|
64
|
-
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = TableHeaderProps<RowProps, ExtendedProps> & Omit<TableBodyProps<RowProps, ExtendedProps>, "
|
|
68
|
+
export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & {
|
|
65
69
|
dense?: boolean;
|
|
66
70
|
stickyHeader?: boolean;
|
|
67
71
|
primaryColor?: CSSProperties["color"];
|
package/README.md
CHANGED
|
@@ -15,11 +15,12 @@
|
|
|
15
15
|
- [Autocomplete](#autocomplete)
|
|
16
16
|
- [AutocompleteWithFilter](#autocompletewithfilter)
|
|
17
17
|
- [BasicModal](#basicmodal)
|
|
18
|
-
- [BasicTable](#basictable)
|
|
18
|
+
- [BasicTable [⚠️Deprecated]](#basictable)
|
|
19
19
|
- [BreadCrumbs](#breadcrumbs)
|
|
20
20
|
- [CheckBox](#checkbox)
|
|
21
21
|
- [CheckBoxGroup](#checkboxgroup)
|
|
22
22
|
- [Copyright](#copyright)
|
|
23
|
+
- [DataTable](#datatable)
|
|
23
24
|
- [DateInput](#dateinput)
|
|
24
25
|
- [FullDateInput](#fulldateinput)
|
|
25
26
|
- [MonthDayInput](#monthdayinput)
|
|
@@ -206,6 +207,8 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
|
|
|
206
207
|
|
|
207
208
|
Reusable table component
|
|
208
209
|
|
|
210
|
+
⚠️ This component will be deprecated in the next release. Please use [`DataTable`](#datatable) instead.
|
|
211
|
+
|
|
209
212
|
<h5>Import</h5>
|
|
210
213
|
|
|
211
214
|
```tsx
|
|
@@ -343,6 +346,65 @@ import Copyright from '@symply.io/basic-components/Copyright';
|
|
|
343
346
|
|
|
344
347
|
|
|
345
348
|
|
|
349
|
+
<h3>DataTable</h3>
|
|
350
|
+
|
|
351
|
+
Reusable table component
|
|
352
|
+
|
|
353
|
+
<h5>Import</h5>
|
|
354
|
+
|
|
355
|
+
```tsx
|
|
356
|
+
import { DataTable, useDataTable } from '@symply.io/basic-components';
|
|
357
|
+
// or
|
|
358
|
+
import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
<h5>Column Props (ColumnProps)</h5>
|
|
362
|
+
|
|
363
|
+
| Name | Type | Default | Required | Description |
|
|
364
|
+
| --------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
|
|
365
|
+
| accessor | string | | true | The key of the column, it should be unique. |
|
|
366
|
+
| align | "left" \|"center" \|"right" | | false | The alignment of the column. |
|
|
367
|
+
| Body | ReactElement | | true | The component to render the column body cell. |
|
|
368
|
+
| fixable | "left" \| "right" \|undefined | | false | If not undefined, the column can be frozen. <br/>⚠️ It doesn't work with IE11. |
|
|
369
|
+
| Footer | ReactElement | | false | The component to render the column footer cell. |
|
|
370
|
+
| Header | ReactElement | | true | The component to render the column header cell. |
|
|
371
|
+
| headerTip | string | | false | The tip title text when the mouse is over the header. |
|
|
372
|
+
| sortable | bool | | false | If true, the column can be sortable. |
|
|
373
|
+
| width | number | | false | The fixed width of cells. |
|
|
374
|
+
|
|
375
|
+
<h5>Hook Props</h5>
|
|
376
|
+
|
|
377
|
+
| Name | Type | Default | Required | Description |
|
|
378
|
+
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
|
|
379
|
+
| columns | Array\<IColumn\> | | true | table columns |
|
|
380
|
+
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
|
381
|
+
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
|
382
|
+
| initialState | { sortBy?: SortByProps } | | false | Set the initial states |
|
|
383
|
+
| onSort | func | | false | The function for sorting rows. |
|
|
384
|
+
|
|
385
|
+
<h5>Hook Returns</h5>
|
|
386
|
+
|
|
387
|
+
| Name | Type | Description |
|
|
388
|
+
| ------- | -------------------- | ------------------------- |
|
|
389
|
+
| headers | Array\<IHeader\> | The cells for the header. |
|
|
390
|
+
| columns | Array\<IBodyColumn\> | The cells for the body. |
|
|
391
|
+
| footers | Array\<IFooter> | The cells for the footer. |
|
|
392
|
+
| rows | Array<IRow\> | The rows for the table. |
|
|
393
|
+
|
|
394
|
+
<h5>Component Props</h5>
|
|
395
|
+
|
|
396
|
+
| Name | Type | Default | Required | Description |
|
|
397
|
+
| ------------ | -------------------- | ---------- | -------- | ------------------------------------------------------- |
|
|
398
|
+
| headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
|
|
399
|
+
| columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
|
|
400
|
+
| dense | bool | | false | If `true` the table size/density would be tight. |
|
|
401
|
+
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
|
402
|
+
| rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
|
|
403
|
+
| stickyHeader | bool | | false | Set the header sticky.<br/>⚠️ It doesn't work with IE11. |
|
|
404
|
+
| footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
|
|
346
408
|
<h3>DateInput</h3>
|
|
347
409
|
|
|
348
410
|
<h4>FullDateInput</h4>
|
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,7 +21,7 @@ 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%",
|