@symply.io/basic-components 1.7.0-alpha.3 → 1.7.0-alpha.4
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, 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,113 @@ 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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var left = columns.filter(function (c) { return c.fixable === "left"; });
|
|
32
|
-
var right = columns.filter(function (c) { return c.fixable === "right"; });
|
|
33
|
-
var dynamic = columns.filter(function (c) { return !c.fixable; });
|
|
34
|
-
return [left, dynamic, right];
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
return [[], columns, []];
|
|
38
|
-
}
|
|
39
|
-
}, [isUpMd, columns]), pinnedLeftCols = _a[0], normalCols = _a[1], pinnedRightCols = _a[2];
|
|
40
|
-
var VirtuosoTableComponents = useMemo(function () { return ({
|
|
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
|
-
}); }, []);
|
|
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;
|
|
26
|
+
var _b = useInteractions({ rows: rows, columns: columns }), normalCols = _b.normalCols, pinnedLeftCols = _b.pinnedLeftCols, pinnedRightCols = _b.pinnedRightCols, leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onScroll = _b.onScroll, handleSort = _b.handleSort, onResetSorting = _b.onResetSorting, renderSortingSymbol = _b.renderSortingSymbol;
|
|
27
|
+
useImperativeHandle(ref, function () { return ({
|
|
28
|
+
onResetSorting: onResetSorting,
|
|
29
|
+
}); }, [onResetSorting]);
|
|
60
30
|
var fixedHeaderContent = useCallback(function () {
|
|
61
|
-
return (_jsxs(TableRow, {
|
|
31
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
32
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
33
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
34
|
+
width: "100%F",
|
|
35
|
+
} }, { children: [pinnedLeftCols.map(function (column, index) {
|
|
62
36
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
37
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
63
38
|
var left = pinnedLeftCols
|
|
64
39
|
.slice(0, index)
|
|
65
40
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
66
|
-
return (
|
|
41
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
42
|
+
if (canSortBy) {
|
|
43
|
+
handleSort({ accessor: accessor });
|
|
44
|
+
}
|
|
45
|
+
}, sx: {
|
|
67
46
|
position: "sticky",
|
|
68
47
|
left: left,
|
|
69
|
-
zIndex: 20,
|
|
70
48
|
width: width,
|
|
71
49
|
cursor: sortable ? "pointer" : "default",
|
|
72
|
-
backgroundColor: "
|
|
73
|
-
|
|
50
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
51
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
52
|
+
"&::after": index === pinnedLeftCols.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(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
74
66
|
}), normalCols.map(function (column) {
|
|
75
67
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
69
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
70
|
+
if (canSortBy) {
|
|
71
|
+
handleSort({ accessor: accessor });
|
|
72
|
+
}
|
|
73
|
+
}, sx: {
|
|
78
74
|
width: width,
|
|
79
75
|
cursor: sortable ? "pointer" : "default",
|
|
80
|
-
backgroundColor: "
|
|
81
|
-
|
|
76
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
77
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
78
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
82
79
|
}), pinnedRightCols.map(function (column, index) {
|
|
83
80
|
var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
|
|
81
|
+
var canSortBy = sortable && !sortingDisabled;
|
|
84
82
|
var right = pinnedRightCols
|
|
85
83
|
.slice(0, pinnedRightCols.length - 1 - index)
|
|
86
84
|
.reduce(function (w, t) { return w + (t.width || 0); }, 0);
|
|
87
|
-
return (
|
|
85
|
+
return (_jsxs(TableCell, __assign({ variant: "head", title: headerTip, align: align, onClick: function () {
|
|
86
|
+
if (canSortBy) {
|
|
87
|
+
handleSort({ accessor: accessor });
|
|
88
|
+
}
|
|
89
|
+
}, sx: {
|
|
88
90
|
position: "sticky",
|
|
89
91
|
right: right,
|
|
90
|
-
zIndex: 20,
|
|
91
92
|
width: width,
|
|
92
93
|
cursor: sortable ? "pointer" : "default",
|
|
93
|
-
backgroundColor: "
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
|
|
95
|
+
color: "".concat(headerTextColor || "inherit", " !important"),
|
|
96
|
+
"&::after": index === 0 && rightShadowVisible
|
|
97
|
+
? {
|
|
98
|
+
position: "absolute",
|
|
99
|
+
top: 0,
|
|
100
|
+
left: 0,
|
|
101
|
+
bottom: "-1px",
|
|
102
|
+
width: "20px",
|
|
103
|
+
transform: "translateX(-100%)",
|
|
104
|
+
transition: "box-shadow .3s",
|
|
105
|
+
content: "''",
|
|
106
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
107
|
+
}
|
|
108
|
+
: undefined,
|
|
109
|
+
} }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
|
|
110
|
+
})] })));
|
|
111
|
+
}, [
|
|
112
|
+
normalCols,
|
|
113
|
+
pinnedLeftCols,
|
|
114
|
+
pinnedRightCols,
|
|
115
|
+
headerBgColor,
|
|
116
|
+
sortingDisabled,
|
|
117
|
+
headerTextColor,
|
|
118
|
+
leftShadowVisible,
|
|
119
|
+
rightShadowVisible,
|
|
120
|
+
handleSort,
|
|
121
|
+
renderSortingSymbol,
|
|
122
|
+
]);
|
|
97
123
|
var fixedFooterContent = useCallback(function () {
|
|
98
|
-
return (_jsxs(TableRow, {
|
|
124
|
+
return (_jsxs(TableRow, __assign({ sx: {
|
|
125
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
126
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
127
|
+
width: "100%F",
|
|
128
|
+
} }, { children: [pinnedLeftCols.map(function (column, index) {
|
|
99
129
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
100
130
|
var left = pinnedLeftCols
|
|
101
131
|
.slice(0, index)
|
|
@@ -103,17 +133,30 @@ function VirtualDataTable(props) {
|
|
|
103
133
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
104
134
|
position: "sticky",
|
|
105
135
|
left: left,
|
|
106
|
-
zIndex: 20,
|
|
107
136
|
width: width,
|
|
108
|
-
backgroundColor: "
|
|
109
|
-
|
|
137
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
138
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
139
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
140
|
+
? {
|
|
141
|
+
position: "absolute",
|
|
142
|
+
top: 0,
|
|
143
|
+
right: 0,
|
|
144
|
+
bottom: "-1px",
|
|
145
|
+
width: "20px",
|
|
146
|
+
transform: "translateX(100%)",
|
|
147
|
+
transition: "box-shadow .3s",
|
|
148
|
+
content: "''",
|
|
149
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
150
|
+
}
|
|
151
|
+
: undefined,
|
|
152
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
110
153
|
}), normalCols.map(function (column) {
|
|
111
154
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
112
155
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
113
|
-
zIndex: 9,
|
|
114
156
|
width: width,
|
|
115
|
-
backgroundColor: "
|
|
116
|
-
|
|
157
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
158
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
159
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
117
160
|
}), pinnedRightCols.map(function (column, index) {
|
|
118
161
|
var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
|
|
119
162
|
var right = pinnedRightCols
|
|
@@ -122,12 +165,33 @@ function VirtualDataTable(props) {
|
|
|
122
165
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
123
166
|
position: "sticky",
|
|
124
167
|
right: right,
|
|
125
|
-
zIndex: 20,
|
|
126
168
|
width: width,
|
|
127
|
-
backgroundColor: "
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
169
|
+
backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
|
|
170
|
+
color: "".concat(footerTextColor || "inherit", " !important"),
|
|
171
|
+
"&::after": index === 0 && rightShadowVisible
|
|
172
|
+
? {
|
|
173
|
+
position: "absolute",
|
|
174
|
+
top: 0,
|
|
175
|
+
left: 0,
|
|
176
|
+
bottom: "-1px",
|
|
177
|
+
width: "20px",
|
|
178
|
+
transform: "translateX(-100%)",
|
|
179
|
+
transition: "box-shadow .3s",
|
|
180
|
+
content: "''",
|
|
181
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
182
|
+
}
|
|
183
|
+
: undefined,
|
|
184
|
+
} }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
|
|
185
|
+
})] })));
|
|
186
|
+
}, [
|
|
187
|
+
normalCols,
|
|
188
|
+
pinnedLeftCols,
|
|
189
|
+
pinnedRightCols,
|
|
190
|
+
footerBgColor,
|
|
191
|
+
footerTextColor,
|
|
192
|
+
leftShadowVisible,
|
|
193
|
+
rightShadowVisible,
|
|
194
|
+
]);
|
|
131
195
|
var itemContent = useCallback(function (rowIndex, row) {
|
|
132
196
|
return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
|
|
133
197
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
@@ -137,17 +201,29 @@ function VirtualDataTable(props) {
|
|
|
137
201
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
138
202
|
position: "sticky",
|
|
139
203
|
left: left,
|
|
140
|
-
zIndex:
|
|
204
|
+
zIndex: 1,
|
|
141
205
|
width: width,
|
|
142
206
|
backgroundColor: "background.paper",
|
|
143
|
-
|
|
207
|
+
"&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
|
|
208
|
+
? {
|
|
209
|
+
position: "absolute",
|
|
210
|
+
top: 0,
|
|
211
|
+
right: 0,
|
|
212
|
+
bottom: "-1px",
|
|
213
|
+
width: "20px",
|
|
214
|
+
transform: "translateX(100%)",
|
|
215
|
+
transition: "box-shadow .3s",
|
|
216
|
+
content: "''",
|
|
217
|
+
boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
218
|
+
}
|
|
219
|
+
: undefined,
|
|
220
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
144
221
|
}), normalCols.map(function (column) {
|
|
145
222
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
146
223
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
147
|
-
zIndex: 9,
|
|
148
224
|
width: width,
|
|
149
225
|
backgroundColor: "background.paper",
|
|
150
|
-
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
|
|
226
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
151
227
|
}), pinnedRightCols.map(function (column, index) {
|
|
152
228
|
var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
|
|
153
229
|
var right = pinnedRightCols
|
|
@@ -156,12 +232,53 @@ function VirtualDataTable(props) {
|
|
|
156
232
|
return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
|
|
157
233
|
position: "sticky",
|
|
158
234
|
right: right,
|
|
159
|
-
zIndex:
|
|
235
|
+
zIndex: 1,
|
|
160
236
|
width: width,
|
|
161
237
|
backgroundColor: "background.paper",
|
|
162
|
-
|
|
238
|
+
"&::after": index === 0 && rightShadowVisible
|
|
239
|
+
? {
|
|
240
|
+
position: "absolute",
|
|
241
|
+
top: 0,
|
|
242
|
+
left: 0,
|
|
243
|
+
bottom: "-1px",
|
|
244
|
+
width: "20px",
|
|
245
|
+
transform: "translateX(-100%)",
|
|
246
|
+
transition: "box-shadow .3s",
|
|
247
|
+
content: "''",
|
|
248
|
+
boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
|
|
249
|
+
}
|
|
250
|
+
: undefined,
|
|
251
|
+
} }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
|
|
163
252
|
})] }));
|
|
164
|
-
}, [
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
253
|
+
}, [
|
|
254
|
+
rows,
|
|
255
|
+
normalCols,
|
|
256
|
+
pinnedLeftCols,
|
|
257
|
+
pinnedRightCols,
|
|
258
|
+
leftShadowVisible,
|
|
259
|
+
rightShadowVisible,
|
|
260
|
+
]);
|
|
261
|
+
var VirtuosoTableComponents = useMemo(function () { return ({
|
|
262
|
+
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 })) })) })); },
|
|
263
|
+
Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({}, props, { ref: ref, sx: {
|
|
264
|
+
maxHeight: "inherit",
|
|
265
|
+
borderWidth: "thin",
|
|
266
|
+
borderColor: "#e5e5e5",
|
|
267
|
+
borderStyle: "solid",
|
|
268
|
+
borderRadius: "4px",
|
|
269
|
+
borderCollapse: "unset !important",
|
|
270
|
+
transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
271
|
+
} }))); }),
|
|
272
|
+
Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
|
|
273
|
+
borderCollapse: "separate",
|
|
274
|
+
minWidth: 600,
|
|
275
|
+
tableLayout: "fixed",
|
|
276
|
+
} }))); },
|
|
277
|
+
TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
|
|
278
|
+
TableRow: TableRow,
|
|
279
|
+
TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
|
|
280
|
+
TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
|
|
281
|
+
}); }, []);
|
|
282
|
+
return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
|
|
283
|
+
};
|
|
284
|
+
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
|
+
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: 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;
|