@symply.io/basic-components 1.7.0-alpha.3 → 1.7.0-alpha.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.
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { ForwardedRef } from "react";
|
|
2
|
+
import type { VirtualTableProps, TVirtualTableRow, TVirtualTableOptions, VirtualDataTableRefProps } from "./types";
|
|
3
|
+
declare const VirtualDataTable: <RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions>(props: VirtualTableProps<RowProps, OptionProps>, ref: ForwardedRef<VirtualDataTableRefProps>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const _default: <RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions>(props: VirtualTableProps<RowProps, OptionProps> & {
|
|
5
|
+
ref?: ForwardedRef<VirtualDataTableRefProps> | undefined;
|
|
6
|
+
}) => ReturnType<typeof VirtualDataTable>;
|
|
7
|
+
export default _default;
|
|
8
|
+
export type { VirtualDataTableRefProps, VirtualDataTableOrderType, VirtualDataTableSortingProps, } from "./types";
|
|
@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import {
|
|
13
|
-
import { forwardRef, cloneElement,
|
|
12
|
+
import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useMemo, useState, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
|
|
14
14
|
import { TableVirtuoso } from "react-virtuoso";
|
|
15
|
-
import Paper from "@mui/material/Paper";
|
|
16
15
|
import Table from "@mui/material/Table";
|
|
17
16
|
import TableRow from "@mui/material/TableRow";
|
|
18
17
|
import TableBody from "@mui/material/TableBody";
|
|
@@ -20,82 +19,130 @@ import TableCell from "@mui/material/TableCell";
|
|
|
20
19
|
import TableHead from "@mui/material/TableHead";
|
|
21
20
|
import TableFooter from "@mui/material/TableFooter";
|
|
22
21
|
import TableContainer from "@mui/material/TableContainer";
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
function
|
|
26
|
-
var rows = props.rows, columns = props.columns, dense = props.dense;
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
import Typography from "@mui/material/Typography";
|
|
23
|
+
import useInteractions from "./useInteractions";
|
|
24
|
+
var VirtualDataTable = function (props, ref) {
|
|
25
|
+
var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
|
|
26
|
+
var _b = useState(), rowEl = _b[0], setRowEl = _b[1];
|
|
27
|
+
var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, renderSortingSymbol = _c.renderSortingSymbol;
|
|
28
|
+
useImperativeHandle(ref, function () { return ({
|
|
29
|
+
onResetSorting: onResetSorting,
|
|
30
|
+
}); }, [onResetSorting]);
|
|
31
|
+
var handleCustomizeRowBgColor = useCallback(function (row, columns) {
|
|
32
|
+
var regex = /^#(\d|[a-f]|[A-F]){6}/i;
|
|
33
|
+
var _a = onCustomizeRowBgColor
|
|
34
|
+
? onCustomizeRowBgColor({ row: row, columns: columns })
|
|
35
|
+
: { normal: "#FEFEFE", hover: "#F2F1F3" }, normal = _a.normal, hover = _a.hover;
|
|
36
|
+
if (!(normal && regex.test(normal))) {
|
|
37
|
+
normal = "#FEFEFE";
|
|
35
38
|
}
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
if (!(hover && regex.test(hover))) {
|
|
40
|
+
hover = "#F2F1F3";
|
|
38
41
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({ component: Paper }, props, { ref: ref, sx: {
|
|
42
|
-
maxHeight: "inherit",
|
|
43
|
-
borderWidth: "thin",
|
|
44
|
-
borderColor: "#e5e5e5",
|
|
45
|
-
borderStyle: "solid",
|
|
46
|
-
borderRadius: "4px",
|
|
47
|
-
borderCollapse: "unset !important",
|
|
48
|
-
transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
49
|
-
} }))); }),
|
|
50
|
-
Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
|
|
51
|
-
borderCollapse: "separate",
|
|
52
|
-
minWidth: 600,
|
|
53
|
-
tableLayout: "fixed",
|
|
54
|
-
} }))); },
|
|
55
|
-
TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
|
|
56
|
-
TableRow: TableRow,
|
|
57
|
-
TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
|
|
58
|
-
TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
|
|
59
|
-
}); }, []);
|
|
42
|
+
return { normal: normal, hover: hover };
|
|
43
|
+
}, []);
|
|
60
44
|
var fixedHeaderContent = useCallback(function () {
|
|
61
|
-
return (_jsxs(TableRow, {
|
|
45
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
46
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
47
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
48
|
+
width: "100%",
|
|
49
|
+
} }, { children: [pinnedLeftCols.map(function (column, index) {
|
|
62
50
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
51
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
63
52
|
var left = pinnedLeftCols
|
|
64
53
|
.slice(0, index)
|
|
65
54
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
66
|
-
return (
|
|
55
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
56
|
+
if (canSortBy) {
|
|
57
|
+
handleSort({ accessor: accessor });
|
|
58
|
+
}
|
|
59
|
+
}, sx: {
|
|
67
60
|
position: "sticky",
|
|
68
61
|
left: left,
|
|
69
|
-
zIndex: 20,
|
|
70
62
|
width: width,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
userSelect: "none",
|
|
64
|
+
cursor: canSortBy ? "pointer" : "default",
|
|
65
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
66
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
67
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
68
|
+
? {
|
|
69
|
+
position: "absolute",
|
|
70
|
+
top: 0,
|
|
71
|
+
right: 0,
|
|
72
|
+
bottom: "-1px",
|
|
73
|
+
width: "20px",
|
|
74
|
+
transform: "translateX(100%)",
|
|
75
|
+
transition: "box-shadow .3s",
|
|
76
|
+
content: "''",
|
|
77
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
78
|
+
}
|
|
79
|
+
: undefined,
|
|
80
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
74
81
|
}), normalCols.map(function (column) {
|
|
75
82
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
76
|
-
|
|
77
|
-
|
|
83
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
84
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
85
|
+
if (canSortBy) {
|
|
86
|
+
handleSort({ accessor: accessor });
|
|
87
|
+
}
|
|
88
|
+
}, sx: {
|
|
78
89
|
width: width,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
90
|
+
userSelect: "none",
|
|
91
|
+
cursor: canSortBy ? "pointer" : "default",
|
|
92
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
93
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
94
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
82
95
|
}), pinnedRightCols.map(function (column, index) {
|
|
83
96
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
97
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
84
98
|
var right = pinnedRightCols
|
|
85
99
|
.slice(0, pinnedRightCols.length - 1 - index)
|
|
86
100
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
87
|
-
return (
|
|
101
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
102
|
+
if (canSortBy) {
|
|
103
|
+
handleSort({ accessor: accessor });
|
|
104
|
+
}
|
|
105
|
+
}, sx: {
|
|
88
106
|
position: "sticky",
|
|
89
107
|
right: right,
|
|
90
|
-
zIndex: 20,
|
|
91
108
|
width: width,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
109
|
+
userSelect: "none",
|
|
110
|
+
cursor: canSortBy ? "pointer" : "default",
|
|
111
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
112
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
113
|
+
"&::after": index === 0 && rightShadowVisible
|
|
114
|
+
? {
|
|
115
|
+
position: "absolute",
|
|
116
|
+
top: 0,
|
|
117
|
+
left: 0,
|
|
118
|
+
bottom: "-1px",
|
|
119
|
+
width: "20px",
|
|
120
|
+
transform: "translateX(-100%)",
|
|
121
|
+
transition: "box-shadow .3s",
|
|
122
|
+
content: "''",
|
|
123
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
124
|
+
}
|
|
125
|
+
: undefined,
|
|
126
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
127
|
+
})] })));
|
|
128
|
+
}, [
|
|
129
|
+
normalCols,
|
|
130
|
+
pinnedLeftCols,
|
|
131
|
+
pinnedRightCols,
|
|
132
|
+
headerBgColor,
|
|
133
|
+
sortingDisabled,
|
|
134
|
+
headerTextColor,
|
|
135
|
+
leftShadowVisible,
|
|
136
|
+
rightShadowVisible,
|
|
137
|
+
handleSort,
|
|
138
|
+
renderSortingSymbol,
|
|
139
|
+
]);
|
|
97
140
|
var fixedFooterContent = useCallback(function () {
|
|
98
|
-
return (_jsxs(TableRow, {
|
|
141
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
142
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
143
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
144
|
+
width: "100%F",
|
|
145
|
+
} }, { children: [pinnedLeftCols.map(function (column, index) {
|
|
99
146
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
100
147
|
var left = pinnedLeftCols
|
|
101
148
|
.slice(0, index)
|
|
@@ -103,17 +150,32 @@ function VirtualDataTable(props) {
|
|
|
103
150
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
104
151
|
position: "sticky",
|
|
105
152
|
left: left,
|
|
106
|
-
zIndex: 20,
|
|
107
153
|
width: width,
|
|
108
|
-
|
|
109
|
-
|
|
154
|
+
userSelect: "none",
|
|
155
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
156
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
157
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
158
|
+
? {
|
|
159
|
+
position: "absolute",
|
|
160
|
+
top: 0,
|
|
161
|
+
right: 0,
|
|
162
|
+
bottom: "-1px",
|
|
163
|
+
width: "20px",
|
|
164
|
+
transform: "translateX(100%)",
|
|
165
|
+
transition: "box-shadow .3s",
|
|
166
|
+
content: "''",
|
|
167
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
168
|
+
}
|
|
169
|
+
: undefined,
|
|
170
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
110
171
|
}), normalCols.map(function (column) {
|
|
111
172
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
112
173
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
113
|
-
zIndex: 9,
|
|
114
174
|
width: width,
|
|
115
|
-
|
|
116
|
-
|
|
175
|
+
userSelect: "none",
|
|
176
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
177
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
178
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
117
179
|
}), pinnedRightCols.map(function (column, index) {
|
|
118
180
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
119
181
|
var right = pinnedRightCols
|
|
@@ -122,13 +184,36 @@ function VirtualDataTable(props) {
|
|
|
122
184
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
123
185
|
position: "sticky",
|
|
124
186
|
right: right,
|
|
125
|
-
zIndex: 20,
|
|
126
187
|
width: width,
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
188
|
+
userSelect: "none",
|
|
189
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
190
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
191
|
+
"&::after": index === 0 && rightShadowVisible
|
|
192
|
+
? {
|
|
193
|
+
position: "absolute",
|
|
194
|
+
top: 0,
|
|
195
|
+
left: 0,
|
|
196
|
+
bottom: "-1px",
|
|
197
|
+
width: "20px",
|
|
198
|
+
transform: "translateX(-100%)",
|
|
199
|
+
transition: "box-shadow .3s",
|
|
200
|
+
content: "''",
|
|
201
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
202
|
+
}
|
|
203
|
+
: undefined,
|
|
204
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
205
|
+
})] })));
|
|
206
|
+
}, [
|
|
207
|
+
normalCols,
|
|
208
|
+
pinnedLeftCols,
|
|
209
|
+
pinnedRightCols,
|
|
210
|
+
footerBgColor,
|
|
211
|
+
footerTextColor,
|
|
212
|
+
leftShadowVisible,
|
|
213
|
+
rightShadowVisible,
|
|
214
|
+
]);
|
|
131
215
|
var itemContent = useCallback(function (rowIndex, row) {
|
|
216
|
+
var _a = handleCustomizeRowBgColor(row, columns), normal = _a.normal, hover = _a.hover;
|
|
132
217
|
return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
|
|
133
218
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
134
219
|
var left = pinnedLeftCols
|
|
@@ -137,17 +222,31 @@ function VirtualDataTable(props) {
|
|
|
137
222
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
138
223
|
position: "sticky",
|
|
139
224
|
left: left,
|
|
140
|
-
zIndex:
|
|
225
|
+
zIndex: 1,
|
|
141
226
|
width: width,
|
|
142
|
-
backgroundColor:
|
|
143
|
-
|
|
227
|
+
backgroundColor: (onRowClick && rowEl ? hover : normal) ||
|
|
228
|
+
"background.paper",
|
|
229
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
230
|
+
? {
|
|
231
|
+
position: "absolute",
|
|
232
|
+
top: 0,
|
|
233
|
+
right: 0,
|
|
234
|
+
bottom: "-1px",
|
|
235
|
+
width: "20px",
|
|
236
|
+
transform: "translateX(100%)",
|
|
237
|
+
transition: "box-shadow .3s",
|
|
238
|
+
content: "''",
|
|
239
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
240
|
+
}
|
|
241
|
+
: undefined,
|
|
242
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
144
243
|
}), normalCols.map(function (column) {
|
|
145
244
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
146
245
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
147
|
-
zIndex: 9,
|
|
148
246
|
width: width,
|
|
149
|
-
backgroundColor:
|
|
150
|
-
|
|
247
|
+
backgroundColor: (onRowClick && rowEl ? hover : normal) ||
|
|
248
|
+
"background.paper",
|
|
249
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
151
250
|
}), pinnedRightCols.map(function (column, index) {
|
|
152
251
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
153
252
|
var right = pinnedRightCols
|
|
@@ -156,12 +255,76 @@ function VirtualDataTable(props) {
|
|
|
156
255
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
157
256
|
position: "sticky",
|
|
158
257
|
right: right,
|
|
159
|
-
zIndex:
|
|
258
|
+
zIndex: 1,
|
|
160
259
|
width: width,
|
|
161
|
-
backgroundColor:
|
|
162
|
-
|
|
260
|
+
backgroundColor: (onRowClick && rowEl ? hover : normal) ||
|
|
261
|
+
"background.paper",
|
|
262
|
+
"&::after": index === 0 && rightShadowVisible
|
|
263
|
+
? {
|
|
264
|
+
position: "absolute",
|
|
265
|
+
top: 0,
|
|
266
|
+
left: 0,
|
|
267
|
+
bottom: "-1px",
|
|
268
|
+
width: "20px",
|
|
269
|
+
transform: "translateX(-100%)",
|
|
270
|
+
transition: "box-shadow .3s",
|
|
271
|
+
content: "''",
|
|
272
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
273
|
+
}
|
|
274
|
+
: undefined,
|
|
275
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
163
276
|
})] }));
|
|
164
|
-
}, [
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
277
|
+
}, [
|
|
278
|
+
rows,
|
|
279
|
+
normalCols,
|
|
280
|
+
pinnedLeftCols,
|
|
281
|
+
pinnedRightCols,
|
|
282
|
+
leftShadowVisible,
|
|
283
|
+
rightShadowVisible,
|
|
284
|
+
]);
|
|
285
|
+
var VirtuosoTableComponents = useMemo(function () { return ({
|
|
286
|
+
EmptyPlaceholder: function () { return (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length }, { children: _jsx(Typography, __assign({ align: "center", variant: "body1", fontSize: 14, fontWeight: 600 }, { children: noDataText })) })) })); },
|
|
287
|
+
Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({}, props, { ref: ref, sx: {
|
|
288
|
+
maxHeight: "inherit",
|
|
289
|
+
borderWidth: "thin",
|
|
290
|
+
borderColor: "#e5e5e5",
|
|
291
|
+
borderStyle: "solid",
|
|
292
|
+
borderRadius: "4px",
|
|
293
|
+
borderCollapse: "unset !important",
|
|
294
|
+
transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
295
|
+
} }))); }),
|
|
296
|
+
Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
|
|
297
|
+
borderCollapse: "separate",
|
|
298
|
+
minWidth: 600,
|
|
299
|
+
tableLayout: "fixed",
|
|
300
|
+
} }))); },
|
|
301
|
+
TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
|
|
302
|
+
TableRow: function (props) {
|
|
303
|
+
var _a = handleCustomizeRowBgColor(props.item, columns), normal = _a.normal, hover = _a.hover;
|
|
304
|
+
return (_jsx(TableRow, __assign({}, props, { sx: {
|
|
305
|
+
backgroundColor: normal,
|
|
306
|
+
"&:hover": {
|
|
307
|
+
cursor: onRowClick ? "pointer" : "default",
|
|
308
|
+
backgroundColor: onRowClick ? hover : normal,
|
|
309
|
+
},
|
|
310
|
+
}, onMouseEnter: function (event) {
|
|
311
|
+
setRowEl(event.currentTarget);
|
|
312
|
+
}, onMouseLeave: function () {
|
|
313
|
+
setRowEl(undefined);
|
|
314
|
+
}, onClick: onRowClick
|
|
315
|
+
? function () {
|
|
316
|
+
onRowClick(props.item);
|
|
317
|
+
}
|
|
318
|
+
: undefined, onContextMenu: function (event) {
|
|
319
|
+
event.preventDefault();
|
|
320
|
+
if (onContextMenu) {
|
|
321
|
+
onContextMenu(event, props.item);
|
|
322
|
+
}
|
|
323
|
+
} })));
|
|
324
|
+
},
|
|
325
|
+
TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
|
|
326
|
+
TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
|
|
327
|
+
}); }, [onRowClick, onContextMenu, onCustomizeRowBgColor]);
|
|
328
|
+
return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
|
|
329
|
+
};
|
|
330
|
+
export default forwardRef(VirtualDataTable);
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
import type { ReactElement, CSSProperties } from "react";
|
|
1
|
+
import type { ReactElement, CSSProperties, MouseEvent } from "react";
|
|
2
|
+
declare type HexColor = `#${string}`;
|
|
3
|
+
export declare type CustomVirtualTableRowBgColor = {
|
|
4
|
+
normal?: HexColor;
|
|
5
|
+
hover?: HexColor;
|
|
6
|
+
};
|
|
7
|
+
export declare type VirtualDataTableOrderType = "ASC" | "DESC" | "NONE";
|
|
8
|
+
export declare type VirtualDataTableSortingProps = {
|
|
9
|
+
accessor: string;
|
|
10
|
+
order: VirtualDataTableOrderType;
|
|
11
|
+
};
|
|
12
|
+
declare type InitialVirtualDataTableStateProps = {
|
|
13
|
+
sortBy?: VirtualDataTableSortingProps;
|
|
14
|
+
};
|
|
2
15
|
export declare type TVirtualTableRow = Record<string, any>;
|
|
16
|
+
export declare type TVirtualTableOptions = Record<string, any>;
|
|
3
17
|
export declare type TVirtualTableColumn = {
|
|
4
18
|
headerTip?: string;
|
|
5
19
|
Header: ReactElement;
|
|
@@ -11,10 +25,30 @@ export declare type TVirtualTableColumn = {
|
|
|
11
25
|
fixable?: "left" | "right";
|
|
12
26
|
width: number;
|
|
13
27
|
};
|
|
14
|
-
export interface
|
|
15
|
-
dense?: boolean;
|
|
28
|
+
export interface InteractionProps<RowProps extends TVirtualTableRow> {
|
|
16
29
|
rows: Array<RowProps>;
|
|
17
30
|
columns: Array<TVirtualTableColumn>;
|
|
18
|
-
|
|
19
|
-
|
|
31
|
+
initialState?: InitialVirtualDataTableStateProps;
|
|
32
|
+
sortingDisabled?: boolean;
|
|
33
|
+
onSort?: (props: VirtualDataTableSortingProps) => unknown;
|
|
34
|
+
}
|
|
35
|
+
export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProps extends TVirtualTableOptions> extends InteractionProps<RowProps> {
|
|
36
|
+
dense?: boolean;
|
|
37
|
+
height: number;
|
|
38
|
+
headerBgColor?: CSSProperties["color"];
|
|
39
|
+
headerTextColor?: CSSProperties["color"];
|
|
40
|
+
footerBgColor?: CSSProperties["color"];
|
|
41
|
+
footerTextColor?: CSSProperties["color"];
|
|
42
|
+
noDataText?: string;
|
|
43
|
+
onRowClick?: (row: RowProps) => unknown;
|
|
44
|
+
onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
|
|
45
|
+
onCustomizeRowBgColor?: ({ row, columns, }: {
|
|
46
|
+
row: RowProps;
|
|
47
|
+
columns: Array<TVirtualTableColumn>;
|
|
48
|
+
}) => CustomVirtualTableRowBgColor;
|
|
49
|
+
options?: OptionProps;
|
|
20
50
|
}
|
|
51
|
+
export declare type VirtualDataTableRefProps = {
|
|
52
|
+
onResetSorting: () => void;
|
|
53
|
+
};
|
|
54
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UIEventHandler } from "react";
|
|
2
|
+
import type { InteractionProps, TVirtualTableRow, TVirtualTableColumn, VirtualDataTableSortingProps } from "./types";
|
|
3
|
+
declare function useInteractions<RowProps extends TVirtualTableRow>(props: InteractionProps<RowProps>): {
|
|
4
|
+
normalCols: TVirtualTableColumn[];
|
|
5
|
+
pinnedLeftCols: TVirtualTableColumn[];
|
|
6
|
+
pinnedRightCols: TVirtualTableColumn[];
|
|
7
|
+
leftShadowVisible: boolean;
|
|
8
|
+
rightShadowVisible: boolean;
|
|
9
|
+
onScroll: UIEventHandler<HTMLDivElement>;
|
|
10
|
+
handleSort: ({ accessor }: Pick<VirtualDataTableSortingProps, "accessor">) => void;
|
|
11
|
+
onResetSorting: () => void;
|
|
12
|
+
renderSortingSymbol: (accessor: string) => "" | "↑" | "↓";
|
|
13
|
+
};
|
|
14
|
+
export default useInteractions;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { useMemo, useState, useCallback } from "react";
|
|
13
|
+
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
14
|
+
import useTheme from "@mui/material/styles/useTheme";
|
|
15
|
+
function useInteractions(props) {
|
|
16
|
+
var rows = props.rows, columns = props.columns, sortingDisabled = props.sortingDisabled, initialState = props.initialState, onSort = props.onSort;
|
|
17
|
+
var theme = useTheme();
|
|
18
|
+
var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
19
|
+
var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];
|
|
20
|
+
var _b = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _b[0], setRightShadowVisible = _b[1];
|
|
21
|
+
var initialSortingProps = useMemo(function () {
|
|
22
|
+
var sortBy = (initialState || {}).sortBy;
|
|
23
|
+
var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
|
|
24
|
+
return {
|
|
25
|
+
accessor: accessor || "",
|
|
26
|
+
order: !!accessor ? order || "NONE" : "NONE",
|
|
27
|
+
};
|
|
28
|
+
}, [initialState]);
|
|
29
|
+
var _c = useState(initialSortingProps), sortingProps = _c[0], setSortingProps = _c[1];
|
|
30
|
+
var handleSort = useCallback(function (_a) {
|
|
31
|
+
var accessor = _a.accessor;
|
|
32
|
+
if (!sortingDisabled) {
|
|
33
|
+
var newSortingProps = __assign({}, sortingProps);
|
|
34
|
+
if (accessor !== sortingProps.accessor ||
|
|
35
|
+
sortingProps.order === "NONE") {
|
|
36
|
+
newSortingProps = { accessor: accessor, order: "ASC" };
|
|
37
|
+
}
|
|
38
|
+
else if (sortingProps.order === "ASC") {
|
|
39
|
+
newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
|
|
43
|
+
}
|
|
44
|
+
if (onSort) {
|
|
45
|
+
onSort(__assign({}, newSortingProps));
|
|
46
|
+
}
|
|
47
|
+
setSortingProps(__assign({}, newSortingProps));
|
|
48
|
+
}
|
|
49
|
+
}, [sortingDisabled, onSort, sortingProps]);
|
|
50
|
+
var onResetSorting = useCallback(function () {
|
|
51
|
+
if (onSort) {
|
|
52
|
+
onSort(__assign({}, initialSortingProps));
|
|
53
|
+
}
|
|
54
|
+
setSortingProps(__assign({}, initialSortingProps));
|
|
55
|
+
}, [initialSortingProps, onSort]);
|
|
56
|
+
var renderSortingSymbol = useCallback(function (accessor) {
|
|
57
|
+
var field = sortingProps.accessor, order = sortingProps.order;
|
|
58
|
+
if (accessor !== field || order === "NONE") {
|
|
59
|
+
return "";
|
|
60
|
+
}
|
|
61
|
+
if (order === "ASC") {
|
|
62
|
+
return "↑";
|
|
63
|
+
}
|
|
64
|
+
return "↓";
|
|
65
|
+
}, [sortingProps]);
|
|
66
|
+
var onScroll = useCallback(function (event) {
|
|
67
|
+
var target = event.currentTarget;
|
|
68
|
+
var scrollLeft = target.scrollLeft;
|
|
69
|
+
var scrollWidth = target.scrollWidth;
|
|
70
|
+
var clientWidth = target.clientWidth;
|
|
71
|
+
var hasScrollBar = scrollWidth > clientWidth;
|
|
72
|
+
setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
|
|
73
|
+
setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
|
|
74
|
+
}, []);
|
|
75
|
+
var _d = useMemo(function () {
|
|
76
|
+
var hasData = rows.length > 0;
|
|
77
|
+
if (isUpMd && hasData) {
|
|
78
|
+
var left = columns.filter(function (c) { return c.fixable === "left"; });
|
|
79
|
+
var right = columns.filter(function (c) { return c.fixable === "right"; });
|
|
80
|
+
var dynamic = columns.filter(function (c) { return !c.fixable; });
|
|
81
|
+
return [left, dynamic, right];
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
return [[], columns, []];
|
|
85
|
+
}
|
|
86
|
+
}, [isUpMd, rows, columns]), pinnedLeftCols = _d[0], normalCols = _d[1], pinnedRightCols = _d[2];
|
|
87
|
+
return {
|
|
88
|
+
normalCols: normalCols,
|
|
89
|
+
pinnedLeftCols: pinnedLeftCols,
|
|
90
|
+
pinnedRightCols: pinnedRightCols,
|
|
91
|
+
leftShadowVisible: leftShadowVisible,
|
|
92
|
+
rightShadowVisible: rightShadowVisible,
|
|
93
|
+
onScroll: onScroll,
|
|
94
|
+
handleSort: handleSort,
|
|
95
|
+
onResetSorting: onResetSorting,
|
|
96
|
+
renderSortingSymbol: renderSortingSymbol,
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
export default useInteractions;
|