material-react-table-narender 3.0.3 → 3.0.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/package.json +17 -17
- package/dist/index.d.ts +0 -1918
- package/dist/index.esm.js +0 -4363
- package/dist/index.esm.js.map +0 -1
- package/dist/index.js +0 -4557
- package/dist/index.js.map +0 -1
package/dist/index.js
DELETED
|
@@ -1,4557 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var reactTable = require('@tanstack/react-table');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
var IconButton = require('@mui/material/IconButton');
|
|
10
|
-
var Tooltip = require('@mui/material/Tooltip');
|
|
11
|
-
var Box = require('@mui/material/Box');
|
|
12
|
-
var Button = require('@mui/material/Button');
|
|
13
|
-
var CircularProgress = require('@mui/material/CircularProgress');
|
|
14
|
-
var styles = require('@mui/material/styles');
|
|
15
|
-
var Menu = require('@mui/material/Menu');
|
|
16
|
-
var ListItemIcon = require('@mui/material/ListItemIcon');
|
|
17
|
-
var MenuItem = require('@mui/material/MenuItem');
|
|
18
|
-
var Stack = require('@mui/material/Stack');
|
|
19
|
-
var Checkbox = require('@mui/material/Checkbox');
|
|
20
|
-
var Radio = require('@mui/material/Radio');
|
|
21
|
-
var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
|
|
22
|
-
var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
|
|
23
|
-
var CancelIcon = require('@mui/icons-material/Cancel');
|
|
24
|
-
var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
|
|
25
|
-
var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
|
|
26
|
-
var ClearAllIcon = require('@mui/icons-material/ClearAll');
|
|
27
|
-
var CloseIcon = require('@mui/icons-material/Close');
|
|
28
|
-
var ContentCopy = require('@mui/icons-material/ContentCopy');
|
|
29
|
-
var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
|
|
30
|
-
var DensityMediumIcon = require('@mui/icons-material/DensityMedium');
|
|
31
|
-
var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
|
|
32
|
-
var DragHandleIcon = require('@mui/icons-material/DragHandle');
|
|
33
|
-
var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
|
|
34
|
-
var EditIcon = require('@mui/icons-material/Edit');
|
|
35
|
-
var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
|
|
36
|
-
var FilterAltIcon = require('@mui/icons-material/FilterAlt');
|
|
37
|
-
var FilterListIcon = require('@mui/icons-material/FilterList');
|
|
38
|
-
var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
|
|
39
|
-
var FirstPageIcon = require('@mui/icons-material/FirstPage');
|
|
40
|
-
var FullscreenIcon = require('@mui/icons-material/Fullscreen');
|
|
41
|
-
var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
|
|
42
|
-
var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
|
|
43
|
-
var LastPageIcon = require('@mui/icons-material/LastPage');
|
|
44
|
-
var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
|
|
45
|
-
var MoreVertIcon = require('@mui/icons-material/MoreVert');
|
|
46
|
-
var PushPinIcon = require('@mui/icons-material/PushPin');
|
|
47
|
-
var RestartAltIcon = require('@mui/icons-material/RestartAlt');
|
|
48
|
-
var SaveIcon = require('@mui/icons-material/Save');
|
|
49
|
-
var SearchIcon = require('@mui/icons-material/Search');
|
|
50
|
-
var SearchOffIcon = require('@mui/icons-material/SearchOff');
|
|
51
|
-
var SortIcon = require('@mui/icons-material/Sort');
|
|
52
|
-
var SyncAltIcon = require('@mui/icons-material/SyncAlt');
|
|
53
|
-
var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
|
|
54
|
-
var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
|
|
55
|
-
var reactVirtual = require('@tanstack/react-virtual');
|
|
56
|
-
var Paper = require('@mui/material/Paper');
|
|
57
|
-
var TableContainer = require('@mui/material/TableContainer');
|
|
58
|
-
var Table = require('@mui/material/Table');
|
|
59
|
-
var TableBody = require('@mui/material/TableBody');
|
|
60
|
-
var Typography = require('@mui/material/Typography');
|
|
61
|
-
var TableRow = require('@mui/material/TableRow');
|
|
62
|
-
var Skeleton = require('@mui/material/Skeleton');
|
|
63
|
-
var TableCell = require('@mui/material/TableCell');
|
|
64
|
-
var highlightWords = require('highlight-words');
|
|
65
|
-
var TextField = require('@mui/material/TextField');
|
|
66
|
-
var Collapse = require('@mui/material/Collapse');
|
|
67
|
-
var TableFooter = require('@mui/material/TableFooter');
|
|
68
|
-
var TableHead = require('@mui/material/TableHead');
|
|
69
|
-
var FormControlLabel = require('@mui/material/FormControlLabel');
|
|
70
|
-
var Autocomplete = require('@mui/material/Autocomplete');
|
|
71
|
-
var Chip = require('@mui/material/Chip');
|
|
72
|
-
var InputAdornment = require('@mui/material/InputAdornment');
|
|
73
|
-
var utils = require('@mui/material/utils');
|
|
74
|
-
var DatePicker = require('@mui/x-date-pickers/DatePicker');
|
|
75
|
-
var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
|
|
76
|
-
var TimePicker = require('@mui/x-date-pickers/TimePicker');
|
|
77
|
-
var FormHelperText = require('@mui/material/FormHelperText');
|
|
78
|
-
var Slider = require('@mui/material/Slider');
|
|
79
|
-
var Grow = require('@mui/material/Grow');
|
|
80
|
-
var Popover = require('@mui/material/Popover');
|
|
81
|
-
var Divider = require('@mui/material/Divider');
|
|
82
|
-
var Badge = require('@mui/material/Badge');
|
|
83
|
-
var TableSortLabel = require('@mui/material/TableSortLabel');
|
|
84
|
-
var Alert = require('@mui/material/Alert');
|
|
85
|
-
var AlertTitle = require('@mui/material/AlertTitle');
|
|
86
|
-
var Dialog = require('@mui/material/Dialog');
|
|
87
|
-
var DialogActions = require('@mui/material/DialogActions');
|
|
88
|
-
var DialogContent = require('@mui/material/DialogContent');
|
|
89
|
-
var DialogTitle = require('@mui/material/DialogTitle');
|
|
90
|
-
var useMediaQuery = require('@mui/material/useMediaQuery');
|
|
91
|
-
var LinearProgress = require('@mui/material/LinearProgress');
|
|
92
|
-
var InputLabel = require('@mui/material/InputLabel');
|
|
93
|
-
var Pagination = require('@mui/material/Pagination');
|
|
94
|
-
var PaginationItem = require('@mui/material/PaginationItem');
|
|
95
|
-
var Select = require('@mui/material/Select');
|
|
96
|
-
var Fade = require('@mui/material/Fade');
|
|
97
|
-
var Switch = require('@mui/material/Switch');
|
|
98
|
-
|
|
99
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
100
|
-
|
|
101
|
-
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
|
|
102
|
-
var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
|
|
103
|
-
var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
|
|
104
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
105
|
-
var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
|
|
106
|
-
var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
|
|
107
|
-
var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
|
|
108
|
-
var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
|
|
109
|
-
var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
|
|
110
|
-
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
|
|
111
|
-
var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
|
|
112
|
-
var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
|
|
113
|
-
var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
|
|
114
|
-
var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
|
|
115
|
-
var ChevronLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeftIcon);
|
|
116
|
-
var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
|
|
117
|
-
var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
|
|
118
|
-
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
|
|
119
|
-
var ContentCopy__default = /*#__PURE__*/_interopDefaultLegacy(ContentCopy);
|
|
120
|
-
var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
|
|
121
|
-
var DensityMediumIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityMediumIcon);
|
|
122
|
-
var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallIcon);
|
|
123
|
-
var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
|
|
124
|
-
var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
|
|
125
|
-
var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
|
|
126
|
-
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
|
|
127
|
-
var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
|
|
128
|
-
var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
|
|
129
|
-
var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
|
|
130
|
-
var FirstPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(FirstPageIcon);
|
|
131
|
-
var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
|
|
132
|
-
var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
|
|
133
|
-
var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
|
|
134
|
-
var LastPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(LastPageIcon);
|
|
135
|
-
var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
|
|
136
|
-
var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
|
|
137
|
-
var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
|
|
138
|
-
var RestartAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(RestartAltIcon);
|
|
139
|
-
var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
|
|
140
|
-
var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
|
|
141
|
-
var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
|
|
142
|
-
var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
|
|
143
|
-
var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
|
|
144
|
-
var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
|
|
145
|
-
var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
|
|
146
|
-
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
|
|
147
|
-
var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
|
|
148
|
-
var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
|
|
149
|
-
var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
|
|
150
|
-
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
151
|
-
var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
|
|
152
|
-
var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
|
|
153
|
-
var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
|
|
154
|
-
var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
|
|
155
|
-
var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
|
|
156
|
-
var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
|
|
157
|
-
var TableFooter__default = /*#__PURE__*/_interopDefaultLegacy(TableFooter);
|
|
158
|
-
var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
|
|
159
|
-
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
|
|
160
|
-
var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete);
|
|
161
|
-
var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
|
|
162
|
-
var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
|
|
163
|
-
var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
|
|
164
|
-
var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
|
|
165
|
-
var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
|
|
166
|
-
var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
|
|
167
|
-
var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
|
|
168
|
-
var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
|
|
169
|
-
var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
|
|
170
|
-
var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
|
|
171
|
-
var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
|
|
172
|
-
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
|
|
173
|
-
var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
|
|
174
|
-
var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
|
|
175
|
-
var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
|
|
176
|
-
var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
|
|
177
|
-
var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
|
|
178
|
-
var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
|
|
179
|
-
var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
|
|
180
|
-
var PaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(PaginationItem);
|
|
181
|
-
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
|
|
182
|
-
var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
|
|
183
|
-
var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
|
|
184
|
-
|
|
185
|
-
const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
|
|
186
|
-
const getAllLeafColumnDefs = (columns) => {
|
|
187
|
-
const allLeafColumnDefs = [];
|
|
188
|
-
const getLeafColumns = (cols) => {
|
|
189
|
-
cols.forEach((col) => {
|
|
190
|
-
if (col.columns) {
|
|
191
|
-
getLeafColumns(col.columns);
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
allLeafColumnDefs.push(col);
|
|
195
|
-
}
|
|
196
|
-
});
|
|
197
|
-
};
|
|
198
|
-
getLeafColumns(columns);
|
|
199
|
-
return allLeafColumnDefs;
|
|
200
|
-
};
|
|
201
|
-
const prepareColumns = ({ columnDefs, tableOptions, }) => {
|
|
202
|
-
const { aggregationFns = {}, defaultDisplayColumn, filterFns = {}, sortingFns = {}, state: { columnFilterFns = {} } = {}, } = tableOptions;
|
|
203
|
-
return columnDefs.map((columnDef) => {
|
|
204
|
-
var _a, _b;
|
|
205
|
-
//assign columnId
|
|
206
|
-
if (!columnDef.id)
|
|
207
|
-
columnDef.id = getColumnId(columnDef);
|
|
208
|
-
//assign columnDefType
|
|
209
|
-
if (!columnDef.columnDefType)
|
|
210
|
-
columnDef.columnDefType = 'data';
|
|
211
|
-
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
|
|
212
|
-
columnDef.columnDefType = 'group';
|
|
213
|
-
//recursively prepare columns if this is a group column
|
|
214
|
-
columnDef.columns = prepareColumns({
|
|
215
|
-
columnDefs: columnDef.columns,
|
|
216
|
-
tableOptions,
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
else if (columnDef.columnDefType === 'data') {
|
|
220
|
-
//assign aggregationFns if multiple aggregationFns are provided
|
|
221
|
-
if (Array.isArray(columnDef.aggregationFn)) {
|
|
222
|
-
const aggFns = columnDef.aggregationFn;
|
|
223
|
-
columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
|
|
224
|
-
}
|
|
225
|
-
//assign filterFns
|
|
226
|
-
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
227
|
-
columnDef.filterFn =
|
|
228
|
-
(_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
|
|
229
|
-
columnDef._filterFn =
|
|
230
|
-
columnFilterFns[columnDef.id];
|
|
231
|
-
}
|
|
232
|
-
//assign sortingFns
|
|
233
|
-
if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
|
|
234
|
-
// @ts-ignore
|
|
235
|
-
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
else if (columnDef.columnDefType === 'display') {
|
|
239
|
-
columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
|
|
240
|
-
}
|
|
241
|
-
return columnDef;
|
|
242
|
-
});
|
|
243
|
-
};
|
|
244
|
-
const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
|
|
245
|
-
if (draggedColumn.getCanPin()) {
|
|
246
|
-
draggedColumn.pin(targetColumn.getIsPinned());
|
|
247
|
-
}
|
|
248
|
-
const newColumnOrder = [...columnOrder];
|
|
249
|
-
newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
|
|
250
|
-
return newColumnOrder;
|
|
251
|
-
};
|
|
252
|
-
const getDefaultColumnFilterFn = (columnDef) => {
|
|
253
|
-
const { filterVariant } = columnDef;
|
|
254
|
-
if (filterVariant === 'multi-select')
|
|
255
|
-
return 'arrIncludesSome';
|
|
256
|
-
if (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range'))
|
|
257
|
-
return 'betweenInclusive';
|
|
258
|
-
if (filterVariant === 'select' || filterVariant === 'checkbox')
|
|
259
|
-
return 'equals';
|
|
260
|
-
return 'fuzzy';
|
|
261
|
-
};
|
|
262
|
-
const getColumnFilterInfo = ({ header, table, }) => {
|
|
263
|
-
var _a;
|
|
264
|
-
const { options: { columnFilterModeOptions }, } = table;
|
|
265
|
-
const { column } = header;
|
|
266
|
-
const { columnDef } = column;
|
|
267
|
-
const { filterVariant } = columnDef;
|
|
268
|
-
const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
|
|
269
|
-
const isAutocompleteFilter = filterVariant === 'autocomplete';
|
|
270
|
-
const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
|
|
271
|
-
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
|
|
272
|
-
const isSelectFilter = filterVariant === 'select';
|
|
273
|
-
const isMultiSelectFilter = filterVariant === 'multi-select';
|
|
274
|
-
const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
|
|
275
|
-
(!isSelectFilter && !isMultiSelectFilter);
|
|
276
|
-
const currentFilterOption = columnDef._filterFn;
|
|
277
|
-
const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
|
|
278
|
-
const facetedUniqueValues = column.getFacetedUniqueValues();
|
|
279
|
-
return {
|
|
280
|
-
allowedColumnFilterOptions,
|
|
281
|
-
currentFilterOption,
|
|
282
|
-
facetedUniqueValues,
|
|
283
|
-
isAutocompleteFilter,
|
|
284
|
-
isDateFilter,
|
|
285
|
-
isMultiSelectFilter,
|
|
286
|
-
isRangeFilter,
|
|
287
|
-
isSelectFilter,
|
|
288
|
-
isTextboxFilter,
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
const useDropdownOptions = ({ header, table, }) => {
|
|
292
|
-
const { column } = header;
|
|
293
|
-
const { columnDef } = column;
|
|
294
|
-
const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
|
295
|
-
return react.useMemo(() => {
|
|
296
|
-
var _a;
|
|
297
|
-
return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
|
|
298
|
-
facetedUniqueValues
|
|
299
|
-
? Array.from(facetedUniqueValues.keys())
|
|
300
|
-
.filter((value) => value !== null && value !== undefined)
|
|
301
|
-
.sort((a, b) => a.localeCompare(b))
|
|
302
|
-
: undefined);
|
|
303
|
-
}, [
|
|
304
|
-
columnDef.filterSelectOptions,
|
|
305
|
-
facetedUniqueValues,
|
|
306
|
-
isMultiSelectFilter,
|
|
307
|
-
isSelectFilter,
|
|
308
|
-
]);
|
|
309
|
-
};
|
|
310
|
-
|
|
311
|
-
const flexRender = reactTable.flexRender;
|
|
312
|
-
function createMRTColumnHelper() {
|
|
313
|
-
return {
|
|
314
|
-
accessor: (accessor, column) => {
|
|
315
|
-
return typeof accessor === 'function'
|
|
316
|
-
? Object.assign(Object.assign({}, column), { accessorFn: accessor })
|
|
317
|
-
: Object.assign(Object.assign({}, column), { accessorKey: accessor });
|
|
318
|
-
},
|
|
319
|
-
display: (column) => column,
|
|
320
|
-
group: (column) => column,
|
|
321
|
-
};
|
|
322
|
-
}
|
|
323
|
-
const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => reactTable.createRow(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
|
|
324
|
-
[getColumnId(col)]: '',
|
|
325
|
-
}))), rowIndex, depth, subRows, parentId);
|
|
326
|
-
|
|
327
|
-
const fuzzy$1 = (rowA, rowB, columnId) => {
|
|
328
|
-
let dir = 0;
|
|
329
|
-
if (rowA.columnFiltersMeta[columnId]) {
|
|
330
|
-
dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
|
|
331
|
-
}
|
|
332
|
-
// Provide a fallback for when the item ranks are equal
|
|
333
|
-
return dir === 0
|
|
334
|
-
? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
|
|
335
|
-
: dir;
|
|
336
|
-
};
|
|
337
|
-
const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy: fuzzy$1 });
|
|
338
|
-
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
|
|
339
|
-
Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
|
340
|
-
|
|
341
|
-
const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
|
|
342
|
-
const getValueAndLabel = (option) => {
|
|
343
|
-
var _a, _b;
|
|
344
|
-
let label = '';
|
|
345
|
-
let value = '';
|
|
346
|
-
if (option) {
|
|
347
|
-
if (typeof option !== 'object') {
|
|
348
|
-
label = option;
|
|
349
|
-
value = option;
|
|
350
|
-
}
|
|
351
|
-
else {
|
|
352
|
-
label = (_a = option.label) !== null && _a !== void 0 ? _a : option.value;
|
|
353
|
-
value = (_b = option.value) !== null && _b !== void 0 ? _b : label;
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
return { label, value };
|
|
357
|
-
};
|
|
358
|
-
|
|
359
|
-
const getMRT_Rows = (table, all) => {
|
|
360
|
-
const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
|
|
361
|
-
const { creatingRow, pagination } = getState();
|
|
362
|
-
const isRankingRows = getIsRankingRows(table);
|
|
363
|
-
let rows = [];
|
|
364
|
-
if (!isRankingRows) {
|
|
365
|
-
rows =
|
|
366
|
-
!enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
|
|
367
|
-
? all
|
|
368
|
-
? getPrePaginationRowModel().rows
|
|
369
|
-
: getRowModel().rows
|
|
370
|
-
: getCenterRows();
|
|
371
|
-
}
|
|
372
|
-
else {
|
|
373
|
-
// fuzzy ranking adjustments
|
|
374
|
-
rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
|
375
|
-
if (enablePagination && !manualPagination && !all) {
|
|
376
|
-
const start = pagination.pageIndex * pagination.pageSize;
|
|
377
|
-
rows = rows.slice(start, start + pagination.pageSize);
|
|
378
|
-
}
|
|
379
|
-
if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
|
380
|
-
// "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
|
|
381
|
-
rows = rows.filter((row) => !row.getIsPinned());
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
// row pinning adjustments
|
|
385
|
-
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
|
|
386
|
-
const centerPinnedRowIds = rows
|
|
387
|
-
.filter((row) => row.getIsPinned())
|
|
388
|
-
.map((r) => r.id);
|
|
389
|
-
rows = [
|
|
390
|
-
...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
|
|
391
|
-
...rows,
|
|
392
|
-
];
|
|
393
|
-
}
|
|
394
|
-
// blank inserted creating row adjustments
|
|
395
|
-
if (positionCreatingRow !== undefined &&
|
|
396
|
-
creatingRow &&
|
|
397
|
-
createDisplayMode === 'row') {
|
|
398
|
-
const creatingRowIndex = !isNaN(+positionCreatingRow)
|
|
399
|
-
? +positionCreatingRow
|
|
400
|
-
: positionCreatingRow === 'top'
|
|
401
|
-
? 0
|
|
402
|
-
: rows.length;
|
|
403
|
-
rows = [
|
|
404
|
-
...rows.slice(0, creatingRowIndex),
|
|
405
|
-
creatingRow,
|
|
406
|
-
...rows.slice(creatingRowIndex),
|
|
407
|
-
];
|
|
408
|
-
}
|
|
409
|
-
return rows;
|
|
410
|
-
};
|
|
411
|
-
const getCanRankRows = (table) => {
|
|
412
|
-
const { getState, options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, }, } = table;
|
|
413
|
-
const { expanded, globalFilterFn } = getState();
|
|
414
|
-
return (!manualExpanding &&
|
|
415
|
-
!manualFiltering &&
|
|
416
|
-
!manualGrouping &&
|
|
417
|
-
!manualSorting &&
|
|
418
|
-
enableGlobalFilterRankedResults &&
|
|
419
|
-
globalFilterFn === 'fuzzy' &&
|
|
420
|
-
expanded !== true &&
|
|
421
|
-
!Object.values(expanded).some(Boolean));
|
|
422
|
-
};
|
|
423
|
-
const getIsRankingRows = (table) => {
|
|
424
|
-
const { globalFilter, sorting } = table.getState();
|
|
425
|
-
return (getCanRankRows(table) &&
|
|
426
|
-
globalFilter &&
|
|
427
|
-
!Object.values(sorting).some(Boolean));
|
|
428
|
-
};
|
|
429
|
-
const getIsRowSelected = ({ row, table, }) => {
|
|
430
|
-
const { options: { enableRowSelection }, } = table;
|
|
431
|
-
return (row.getIsSelected() ||
|
|
432
|
-
(parseFromValuesOrFunc(enableRowSelection, row) &&
|
|
433
|
-
row.getCanSelectSubRows() &&
|
|
434
|
-
row.getIsAllSubRowsSelected()));
|
|
435
|
-
};
|
|
436
|
-
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
|
|
437
|
-
var _a;
|
|
438
|
-
const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
|
|
439
|
-
const { pagination: { pageIndex, pageSize }, } = getState();
|
|
440
|
-
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
|
|
441
|
-
const wasCurrentRowChecked = getIsRowSelected({ row, table });
|
|
442
|
-
// toggle selection of this row
|
|
443
|
-
row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
|
|
444
|
-
const changedRowIds = new Set([row.id]);
|
|
445
|
-
// if shift key is pressed, select all rows between last selected and this one
|
|
446
|
-
if (enableBatchRowSelection &&
|
|
447
|
-
enableMultiRowSelection &&
|
|
448
|
-
event.nativeEvent.shiftKey &&
|
|
449
|
-
lastSelectedRowId.current !== null) {
|
|
450
|
-
const rows = getMRT_Rows(table, true);
|
|
451
|
-
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
|
|
452
|
-
if (lastIndex !== -1) {
|
|
453
|
-
const isLastIndexChecked = getIsRowSelected({
|
|
454
|
-
row: rows === null || rows === void 0 ? void 0 : rows[lastIndex],
|
|
455
|
-
table,
|
|
456
|
-
});
|
|
457
|
-
const currentIndex = staticRowIndex + paginationOffset;
|
|
458
|
-
const [start, end] = lastIndex < currentIndex
|
|
459
|
-
? [lastIndex, currentIndex]
|
|
460
|
-
: [currentIndex, lastIndex];
|
|
461
|
-
// toggle selection of all rows between last selected and this one
|
|
462
|
-
// but only if the last selected row is not the same as the current one
|
|
463
|
-
if (wasCurrentRowChecked !== isLastIndexChecked) {
|
|
464
|
-
for (let i = start; i <= end; i++) {
|
|
465
|
-
rows[i].toggleSelected(!wasCurrentRowChecked);
|
|
466
|
-
changedRowIds.add(rows[i].id);
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
// record the last selected row id
|
|
472
|
-
lastSelectedRowId.current = row.id;
|
|
473
|
-
// if all sub rows were selected, unselect them
|
|
474
|
-
if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
|
|
475
|
-
(_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
|
|
476
|
-
}
|
|
477
|
-
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
|
478
|
-
changedRowIds.forEach((rowId) => {
|
|
479
|
-
const rowToTogglePin = table.getRow(rowId);
|
|
480
|
-
rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
|
|
481
|
-
? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
|
|
482
|
-
? 'bottom'
|
|
483
|
-
: 'top'
|
|
484
|
-
: false);
|
|
485
|
-
});
|
|
486
|
-
}
|
|
487
|
-
};
|
|
488
|
-
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
|
489
|
-
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
|
|
490
|
-
selectAllMode === 'all' || forceAll
|
|
491
|
-
? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
|
|
492
|
-
: table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
|
|
493
|
-
if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
|
|
494
|
-
table.setRowPinning({ bottom: [], top: [] });
|
|
495
|
-
}
|
|
496
|
-
lastSelectedRowId.current = null;
|
|
497
|
-
};
|
|
498
|
-
|
|
499
|
-
const isWinCtrlMacMeta = (event) => {
|
|
500
|
-
return ((event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
|
|
501
|
-
(event.metaKey && navigator.platform.toLowerCase().includes('mac')));
|
|
502
|
-
};
|
|
503
|
-
const isCellEditable = ({ cell, table, }) => {
|
|
504
|
-
const { enableEditing } = table.options;
|
|
505
|
-
const { column: { columnDef }, row, } = cell;
|
|
506
|
-
return (!cell.getIsPlaceholder() &&
|
|
507
|
-
parseFromValuesOrFunc(enableEditing, row) &&
|
|
508
|
-
parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
|
|
509
|
-
};
|
|
510
|
-
const openEditingCell = ({ cell, table, }) => {
|
|
511
|
-
const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
|
|
512
|
-
const { column } = cell;
|
|
513
|
-
if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
|
|
514
|
-
table.setEditingCell(cell);
|
|
515
|
-
queueMicrotask(() => {
|
|
516
|
-
var _a, _b;
|
|
517
|
-
const textField = (_a = editInputRefs.current) === null || _a === void 0 ? void 0 : _a[column.id];
|
|
518
|
-
if (textField) {
|
|
519
|
-
textField.focus();
|
|
520
|
-
(_b = textField.select) === null || _b === void 0 ? void 0 : _b.call(textField);
|
|
521
|
-
}
|
|
522
|
-
});
|
|
523
|
-
}
|
|
524
|
-
};
|
|
525
|
-
const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
|
|
526
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
527
|
-
if (!table.options.enableKeyboardShortcuts)
|
|
528
|
-
return;
|
|
529
|
-
if (event.isPropagationStopped())
|
|
530
|
-
return;
|
|
531
|
-
const currentCell = event.currentTarget;
|
|
532
|
-
if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
|
|
533
|
-
navigator.clipboard.writeText(cellValue);
|
|
534
|
-
}
|
|
535
|
-
else if (['Enter', ' '].includes(event.key)) {
|
|
536
|
-
if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
|
|
537
|
-
event.preventDefault();
|
|
538
|
-
getMRT_RowSelectionHandler({
|
|
539
|
-
row: cell.row,
|
|
540
|
-
table,
|
|
541
|
-
//@ts-ignore
|
|
542
|
-
staticRowIndex: +event.target.getAttribute('data-index'),
|
|
543
|
-
})(event);
|
|
544
|
-
}
|
|
545
|
-
else if (((_b = header === null || header === void 0 ? void 0 : header.column) === null || _b === void 0 ? void 0 : _b.id) === 'mrt-row-select' &&
|
|
546
|
-
table.options.enableSelectAll) {
|
|
547
|
-
event.preventDefault();
|
|
548
|
-
getMRT_SelectAllHandler({
|
|
549
|
-
table,
|
|
550
|
-
})(event);
|
|
551
|
-
}
|
|
552
|
-
else if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-expand' &&
|
|
553
|
-
(cell.row.getCanExpand() ||
|
|
554
|
-
((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
|
|
555
|
-
event.preventDefault();
|
|
556
|
-
cell.row.toggleExpanded();
|
|
557
|
-
}
|
|
558
|
-
else if (((_f = header === null || header === void 0 ? void 0 : header.column) === null || _f === void 0 ? void 0 : _f.id) === 'mrt-row-expand' &&
|
|
559
|
-
table.options.enableExpandAll) {
|
|
560
|
-
event.preventDefault();
|
|
561
|
-
table.toggleAllRowsExpanded();
|
|
562
|
-
}
|
|
563
|
-
else if ((cell === null || cell === void 0 ? void 0 : cell.column.id) === 'mrt-row-pin') {
|
|
564
|
-
event.preventDefault();
|
|
565
|
-
cell.row.getIsPinned()
|
|
566
|
-
? cell.row.pin(false)
|
|
567
|
-
: cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
|
|
568
|
-
? 'bottom'
|
|
569
|
-
: 'top');
|
|
570
|
-
}
|
|
571
|
-
else if (header && isWinCtrlMacMeta(event)) {
|
|
572
|
-
const actionsButton = currentCell.querySelector(`button[aria-label="${table.options.localization.columnActions}"]`);
|
|
573
|
-
if (actionsButton) {
|
|
574
|
-
actionsButton.click();
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
|
|
578
|
-
event.preventDefault();
|
|
579
|
-
header.column.toggleSorting();
|
|
580
|
-
}
|
|
581
|
-
}
|
|
582
|
-
else if ([
|
|
583
|
-
'ArrowRight',
|
|
584
|
-
'ArrowLeft',
|
|
585
|
-
'ArrowUp',
|
|
586
|
-
'ArrowDown',
|
|
587
|
-
'Home',
|
|
588
|
-
'End',
|
|
589
|
-
'PageUp',
|
|
590
|
-
'PageDown',
|
|
591
|
-
].includes(event.key)) {
|
|
592
|
-
event.preventDefault();
|
|
593
|
-
const currentRow = parentElement || currentCell.closest('tr');
|
|
594
|
-
const tableElement = containerElement || currentCell.closest('table');
|
|
595
|
-
const allCells = cellElements ||
|
|
596
|
-
Array.from((tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('th, td')) || []);
|
|
597
|
-
const currentCellIndex = allCells.indexOf(currentCell);
|
|
598
|
-
const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
|
|
599
|
-
let nextCell = undefined;
|
|
600
|
-
//home/end first or last cell in row
|
|
601
|
-
const findEdgeCell = (rowIndex, edge) => {
|
|
602
|
-
var _a;
|
|
603
|
-
const row = rowIndex === 'c'
|
|
604
|
-
? currentRow
|
|
605
|
-
: rowIndex === 'f'
|
|
606
|
-
? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
|
|
607
|
-
: (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
|
|
608
|
-
const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
|
|
609
|
-
const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
|
|
610
|
-
return targetCell;
|
|
611
|
-
};
|
|
612
|
-
//page up/down first or last cell in column
|
|
613
|
-
const findBottomTopCell = (columnIndex, edge) => {
|
|
614
|
-
var _a;
|
|
615
|
-
const row = edge === 't'
|
|
616
|
-
? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
|
|
617
|
-
: (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
|
|
618
|
-
const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
|
|
619
|
-
const targetCell = rowCells[columnIndex];
|
|
620
|
-
return targetCell;
|
|
621
|
-
};
|
|
622
|
-
const findAdjacentCell = (columnIndex, searchDirection) => {
|
|
623
|
-
const searchArray = searchDirection === 'f'
|
|
624
|
-
? allCells.slice(currentCellIndex + 1)
|
|
625
|
-
: allCells.slice(0, currentCellIndex).reverse();
|
|
626
|
-
return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
|
|
627
|
-
};
|
|
628
|
-
switch (event.key) {
|
|
629
|
-
case 'ArrowRight':
|
|
630
|
-
nextCell = findAdjacentCell(currentIndex + 1, 'f');
|
|
631
|
-
break;
|
|
632
|
-
case 'ArrowLeft':
|
|
633
|
-
nextCell = findAdjacentCell(currentIndex - 1, 'b');
|
|
634
|
-
break;
|
|
635
|
-
case 'ArrowUp':
|
|
636
|
-
nextCell = findAdjacentCell(currentIndex, 'b');
|
|
637
|
-
break;
|
|
638
|
-
case 'ArrowDown':
|
|
639
|
-
nextCell = findAdjacentCell(currentIndex, 'f');
|
|
640
|
-
break;
|
|
641
|
-
case 'Home':
|
|
642
|
-
nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
|
|
643
|
-
break;
|
|
644
|
-
case 'End':
|
|
645
|
-
nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
|
|
646
|
-
break;
|
|
647
|
-
case 'PageUp':
|
|
648
|
-
nextCell = findBottomTopCell(currentIndex, 't');
|
|
649
|
-
break;
|
|
650
|
-
case 'PageDown':
|
|
651
|
-
nextCell = findBottomTopCell(currentIndex, 'b');
|
|
652
|
-
break;
|
|
653
|
-
}
|
|
654
|
-
if (nextCell) {
|
|
655
|
-
nextCell.focus();
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
};
|
|
659
|
-
|
|
660
|
-
function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
|
|
661
|
-
const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
|
|
662
|
-
return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
|
|
663
|
-
}
|
|
664
|
-
const showRowPinningColumn = (tableOptions) => {
|
|
665
|
-
const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
|
|
666
|
-
return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
|
|
667
|
-
};
|
|
668
|
-
const showRowDragColumn = (tableOptions) => {
|
|
669
|
-
const { enableRowDragging, enableRowOrdering } = tableOptions;
|
|
670
|
-
return !!(enableRowDragging || enableRowOrdering);
|
|
671
|
-
};
|
|
672
|
-
const showRowExpandColumn = (tableOptions) => {
|
|
673
|
-
const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
|
|
674
|
-
return !!(enableExpanding ||
|
|
675
|
-
(enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
|
|
676
|
-
renderDetailPanel);
|
|
677
|
-
};
|
|
678
|
-
const showRowActionsColumn = (tableOptions) => {
|
|
679
|
-
const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
|
|
680
|
-
return !!(enableRowActions ||
|
|
681
|
-
(creatingRow && createDisplayMode === 'row') ||
|
|
682
|
-
(enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
|
|
683
|
-
};
|
|
684
|
-
const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
|
|
685
|
-
const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
|
|
686
|
-
const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
|
|
687
|
-
const getLeadingDisplayColumnIds = (tableOptions) => [
|
|
688
|
-
showRowPinningColumn(tableOptions) && 'mrt-row-pin',
|
|
689
|
-
showRowDragColumn(tableOptions) && 'mrt-row-drag',
|
|
690
|
-
tableOptions.positionActionsColumn === 'first' &&
|
|
691
|
-
showRowActionsColumn(tableOptions) &&
|
|
692
|
-
'mrt-row-actions',
|
|
693
|
-
tableOptions.positionExpandColumn === 'first' &&
|
|
694
|
-
showRowExpandColumn(tableOptions) &&
|
|
695
|
-
'mrt-row-expand',
|
|
696
|
-
showRowSelectionColumn(tableOptions) && 'mrt-row-select',
|
|
697
|
-
showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
|
|
698
|
-
].filter(Boolean);
|
|
699
|
-
const getTrailingDisplayColumnIds = (tableOptions) => [
|
|
700
|
-
tableOptions.positionActionsColumn === 'last' &&
|
|
701
|
-
showRowActionsColumn(tableOptions) &&
|
|
702
|
-
'mrt-row-actions',
|
|
703
|
-
tableOptions.positionExpandColumn === 'last' &&
|
|
704
|
-
showRowExpandColumn(tableOptions) &&
|
|
705
|
-
'mrt-row-expand',
|
|
706
|
-
showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
|
|
707
|
-
].filter(Boolean);
|
|
708
|
-
const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
|
|
709
|
-
const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
|
|
710
|
-
const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
|
|
711
|
-
const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
|
|
712
|
-
const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
|
|
713
|
-
let allLeafColumnDefIds = reset
|
|
714
|
-
? defaultColumnDefIds
|
|
715
|
-
: Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
|
|
716
|
-
allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
|
|
717
|
-
!trailingDisplayColIds.includes(colId));
|
|
718
|
-
return [
|
|
719
|
-
...leadingDisplayColIds,
|
|
720
|
-
...allLeafColumnDefIds,
|
|
721
|
-
...trailingDisplayColIds,
|
|
722
|
-
];
|
|
723
|
-
};
|
|
724
|
-
|
|
725
|
-
const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
|
|
726
|
-
|
|
727
|
-
const fuzzy = (row, columnId, filterValue, addMeta) => {
|
|
728
|
-
const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
|
|
729
|
-
threshold: matchSorterUtils.rankings.MATCHES,
|
|
730
|
-
});
|
|
731
|
-
addMeta(itemRank);
|
|
732
|
-
return itemRank.passed;
|
|
733
|
-
};
|
|
734
|
-
fuzzy.autoRemove = (val) => !val;
|
|
735
|
-
const contains = (row, id, filterValue) => {
|
|
736
|
-
var _a;
|
|
737
|
-
return !!((_a = row
|
|
738
|
-
.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim()));
|
|
739
|
-
};
|
|
740
|
-
contains.autoRemove = (val) => !val;
|
|
741
|
-
const startsWith = (row, id, filterValue) => {
|
|
742
|
-
var _a;
|
|
743
|
-
return !!((_a = row
|
|
744
|
-
.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim()));
|
|
745
|
-
};
|
|
746
|
-
startsWith.autoRemove = (val) => !val;
|
|
747
|
-
const endsWith = (row, id, filterValue) => {
|
|
748
|
-
var _a;
|
|
749
|
-
return !!((_a = row
|
|
750
|
-
.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim()));
|
|
751
|
-
};
|
|
752
|
-
endsWith.autoRemove = (val) => !val;
|
|
753
|
-
const equals = (row, id, filterValue) => {
|
|
754
|
-
var _a;
|
|
755
|
-
return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) ===
|
|
756
|
-
filterValue.toString().toLowerCase().trim();
|
|
757
|
-
};
|
|
758
|
-
equals.autoRemove = (val) => !val;
|
|
759
|
-
const notEquals = (row, id, filterValue) => {
|
|
760
|
-
var _a;
|
|
761
|
-
return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) !==
|
|
762
|
-
filterValue.toString().toLowerCase().trim();
|
|
763
|
-
};
|
|
764
|
-
notEquals.autoRemove = (val) => !val;
|
|
765
|
-
const greaterThan = (row, id, filterValue) => {
|
|
766
|
-
var _a, _b, _c;
|
|
767
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
|
|
768
|
-
? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) > +filterValue
|
|
769
|
-
: ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) > filterValue.toString().toLowerCase().trim();
|
|
770
|
-
};
|
|
771
|
-
greaterThan.autoRemove = (val) => !val;
|
|
772
|
-
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
|
773
|
-
greaterThanOrEqualTo.autoRemove = (val) => !val;
|
|
774
|
-
const lessThan = (row, id, filterValue) => {
|
|
775
|
-
var _a, _b, _c;
|
|
776
|
-
return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
|
|
777
|
-
? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) < +filterValue
|
|
778
|
-
: ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) < filterValue.toString().toLowerCase().trim();
|
|
779
|
-
};
|
|
780
|
-
lessThan.autoRemove = (val) => !val;
|
|
781
|
-
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
|
782
|
-
lessThanOrEqualTo.autoRemove = (val) => !val;
|
|
783
|
-
const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
|
|
784
|
-
greaterThan(row, id, filterValues[0])) &&
|
|
785
|
-
((!isNaN(+filterValues[0]) &&
|
|
786
|
-
!isNaN(+filterValues[1]) &&
|
|
787
|
-
+filterValues[0] > +filterValues[1]) ||
|
|
788
|
-
['', undefined].includes(filterValues[1]) ||
|
|
789
|
-
lessThan(row, id, filterValues[1]));
|
|
790
|
-
between.autoRemove = (val) => !val;
|
|
791
|
-
const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
|
|
792
|
-
greaterThanOrEqualTo(row, id, filterValues[0])) &&
|
|
793
|
-
((!isNaN(+filterValues[0]) &&
|
|
794
|
-
!isNaN(+filterValues[1]) &&
|
|
795
|
-
+filterValues[0] > +filterValues[1]) ||
|
|
796
|
-
['', undefined].includes(filterValues[1]) ||
|
|
797
|
-
lessThanOrEqualTo(row, id, filterValues[1]));
|
|
798
|
-
betweenInclusive.autoRemove = (val) => !val;
|
|
799
|
-
const empty = (row, id, _filterValue) => { var _a; return !((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
|
|
800
|
-
empty.autoRemove = (val) => !val;
|
|
801
|
-
const notEmpty = (row, id, _filterValue) => { var _a; return !!((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
|
|
802
|
-
notEmpty.autoRemove = (val) => !val;
|
|
803
|
-
const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { between,
|
|
804
|
-
betweenInclusive,
|
|
805
|
-
contains,
|
|
806
|
-
empty,
|
|
807
|
-
endsWith,
|
|
808
|
-
equals,
|
|
809
|
-
fuzzy,
|
|
810
|
-
greaterThan,
|
|
811
|
-
greaterThanOrEqualTo,
|
|
812
|
-
lessThan,
|
|
813
|
-
lessThanOrEqualTo,
|
|
814
|
-
notEmpty,
|
|
815
|
-
notEquals,
|
|
816
|
-
startsWith });
|
|
817
|
-
|
|
818
|
-
/******************************************************************************
|
|
819
|
-
Copyright (c) Microsoft Corporation.
|
|
820
|
-
|
|
821
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
822
|
-
purpose with or without fee is hereby granted.
|
|
823
|
-
|
|
824
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
825
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
826
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
827
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
828
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
829
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
830
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
831
|
-
***************************************************************************** */
|
|
832
|
-
|
|
833
|
-
function __rest(s, e) {
|
|
834
|
-
var t = {};
|
|
835
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
836
|
-
t[p] = s[p];
|
|
837
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
838
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
839
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
840
|
-
t[p[i]] = s[p[i]];
|
|
841
|
-
}
|
|
842
|
-
return t;
|
|
843
|
-
}
|
|
844
|
-
|
|
845
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
846
|
-
var e = new Error(message);
|
|
847
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
848
|
-
};
|
|
849
|
-
|
|
850
|
-
const MRT_EditActionButtons = (_a) => {
|
|
851
|
-
var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
|
|
852
|
-
const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
|
|
853
|
-
const { creatingRow, editingRow, isSaving } = getState();
|
|
854
|
-
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
|
|
855
|
-
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
|
|
856
|
-
const handleCancel = () => {
|
|
857
|
-
if (isCreating) {
|
|
858
|
-
onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
|
|
859
|
-
setCreatingRow(null);
|
|
860
|
-
}
|
|
861
|
-
else if (isEditing) {
|
|
862
|
-
onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
|
|
863
|
-
setEditingRow(null);
|
|
864
|
-
}
|
|
865
|
-
row._valuesCache = {}; //reset values cache
|
|
866
|
-
};
|
|
867
|
-
const handleSubmitRow = () => {
|
|
868
|
-
var _a, _b;
|
|
869
|
-
//look for auto-filled input values
|
|
870
|
-
(_b = Object.values((_a = editInputRefs.current) !== null && _a !== void 0 ? _a : {})
|
|
871
|
-
.filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _b === void 0 ? void 0 : _b.forEach((input) => {
|
|
872
|
-
if (input.value !== undefined &&
|
|
873
|
-
Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
|
|
874
|
-
// @ts-ignore
|
|
875
|
-
row._valuesCache[input.name] = input.value;
|
|
876
|
-
}
|
|
877
|
-
});
|
|
878
|
-
if (isCreating)
|
|
879
|
-
onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
|
|
880
|
-
exitCreatingMode: () => setCreatingRow(null),
|
|
881
|
-
row,
|
|
882
|
-
table,
|
|
883
|
-
values: row._valuesCache,
|
|
884
|
-
});
|
|
885
|
-
else if (isEditing) {
|
|
886
|
-
onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
|
|
887
|
-
exitEditingMode: () => setEditingRow(null),
|
|
888
|
-
row,
|
|
889
|
-
table,
|
|
890
|
-
values: row === null || row === void 0 ? void 0 : row._valuesCache,
|
|
891
|
-
});
|
|
892
|
-
}
|
|
893
|
-
};
|
|
894
|
-
return (jsxRuntime.jsx(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
|
|
895
|
-
(isEditing && onEditingRowSave)) && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", disabled: isSaving, onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { disabled: isSaving, onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
|
|
896
|
-
};
|
|
897
|
-
|
|
898
|
-
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
|
|
899
|
-
const getMRTTheme = (mrtTheme, muiTheme) => {
|
|
900
|
-
var _a;
|
|
901
|
-
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
|
902
|
-
const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
|
|
903
|
-
? styles.lighten(muiTheme.palette.background.default, 0.05)
|
|
904
|
-
: muiTheme.palette.background.default);
|
|
905
|
-
return Object.assign({ baseBackgroundColor, cellNavigationOutlineColor: muiTheme.palette.primary.main, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
|
|
906
|
-
? styles.darken(muiTheme.palette.warning.dark, 0.25)
|
|
907
|
-
: styles.lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
|
|
908
|
-
};
|
|
909
|
-
const commonCellBeforeAfterStyles = {
|
|
910
|
-
content: '""',
|
|
911
|
-
height: '100%',
|
|
912
|
-
left: 0,
|
|
913
|
-
position: 'absolute',
|
|
914
|
-
top: 0,
|
|
915
|
-
width: '100%',
|
|
916
|
-
zIndex: -1,
|
|
917
|
-
};
|
|
918
|
-
const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
|
|
919
|
-
const { baseBackgroundColor } = table.options.mrtTheme;
|
|
920
|
-
const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
|
|
921
|
-
return {
|
|
922
|
-
'&[data-pinned="true"]': {
|
|
923
|
-
'&:before': Object.assign({ backgroundColor: styles.alpha(styles.darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
|
|
924
|
-
? isPinned === 'left' && column.getIsLastColumn(isPinned)
|
|
925
|
-
? `-4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
|
926
|
-
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
|
|
927
|
-
? `4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
|
|
928
|
-
: undefined
|
|
929
|
-
: undefined }, commonCellBeforeAfterStyles),
|
|
930
|
-
},
|
|
931
|
-
};
|
|
932
|
-
};
|
|
933
|
-
const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
|
|
934
|
-
var _a, _b, _c, _d, _e, _f;
|
|
935
|
-
const { getState, options: { enableColumnVirtualization, layoutMode }, } = table;
|
|
936
|
-
const { draggingColumn } = getState();
|
|
937
|
-
const { columnDef } = column;
|
|
938
|
-
const { columnDefType } = columnDef;
|
|
939
|
-
const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
|
|
940
|
-
const widthStyles = {
|
|
941
|
-
minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
|
|
942
|
-
width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
|
|
943
|
-
};
|
|
944
|
-
if (layoutMode === 'grid') {
|
|
945
|
-
widthStyles.flex = `${[0, false].includes(columnDef.grow)
|
|
946
|
-
? 0
|
|
947
|
-
: `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size)`} 0 auto`;
|
|
948
|
-
}
|
|
949
|
-
else if (layoutMode === 'grid-no-grow') {
|
|
950
|
-
widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
|
|
951
|
-
}
|
|
952
|
-
const pinnedStyles = isColumnPinned
|
|
953
|
-
? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
|
|
954
|
-
? `${column.getStart('left')}px`
|
|
955
|
-
: undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
|
|
956
|
-
? `${column.getAfter('right')}px`
|
|
957
|
-
: undefined }) : {};
|
|
958
|
-
return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, justifyContent: columnDefType === 'group'
|
|
959
|
-
? 'center'
|
|
960
|
-
: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
|
|
961
|
-
? tableCellProps.align
|
|
962
|
-
: undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
|
|
963
|
-
((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
|
|
964
|
-
? 0.5
|
|
965
|
-
: 1, position: 'relative', transition: enableColumnVirtualization
|
|
966
|
-
? 'none'
|
|
967
|
-
: `padding 150ms ease-in-out`, zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
|
|
968
|
-
? 2
|
|
969
|
-
: columnDefType !== 'group' && isColumnPinned
|
|
970
|
-
? 1
|
|
971
|
-
: 0, '&:focus-visible': {
|
|
972
|
-
outline: `2px solid ${table.options.mrtTheme.cellNavigationOutlineColor}`,
|
|
973
|
-
outlineOffset: '-2px',
|
|
974
|
-
} }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
|
|
975
|
-
};
|
|
976
|
-
const getCommonToolbarStyles = ({ table, }) => ({
|
|
977
|
-
alignItems: 'flex-start',
|
|
978
|
-
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
|
|
979
|
-
display: 'grid',
|
|
980
|
-
flexWrap: 'wrap-reverse',
|
|
981
|
-
minHeight: '3.5rem',
|
|
982
|
-
overflow: 'hidden',
|
|
983
|
-
position: 'relative',
|
|
984
|
-
transition: 'all 150ms ease-in-out',
|
|
985
|
-
zIndex: 1,
|
|
986
|
-
});
|
|
987
|
-
const flipIconStyles = (theme) => theme.direction === 'rtl'
|
|
988
|
-
? { style: { transform: 'scaleX(-1)' } }
|
|
989
|
-
: undefined;
|
|
990
|
-
const getCommonTooltipProps = (placement) => ({
|
|
991
|
-
disableInteractive: true,
|
|
992
|
-
enterDelay: 1000,
|
|
993
|
-
enterNextDelay: 1000,
|
|
994
|
-
placement,
|
|
995
|
-
});
|
|
996
|
-
|
|
997
|
-
const MRT_ActionMenuItem = (_a) => {
|
|
998
|
-
var { icon, label, onOpenSubMenu, table } = _a, rest = __rest(_a, ["icon", "label", "onOpenSubMenu", "table"]);
|
|
999
|
-
const { options: { icons: { ArrowRightIcon }, }, } = table;
|
|
1000
|
-
return (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ sx: {
|
|
1001
|
-
alignItems: 'center',
|
|
1002
|
-
justifyContent: 'space-between',
|
|
1003
|
-
minWidth: '120px',
|
|
1004
|
-
my: 0,
|
|
1005
|
-
py: '6px',
|
|
1006
|
-
}, tabIndex: 0 }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
1007
|
-
alignItems: 'center',
|
|
1008
|
-
display: 'flex',
|
|
1009
|
-
}, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: icon }), label] }), onOpenSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] })));
|
|
1010
|
-
};
|
|
1011
|
-
|
|
1012
|
-
const MRT_RowActionMenu = (_a) => {
|
|
1013
|
-
var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
|
|
1014
|
-
const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
|
|
1015
|
-
const { density } = getState();
|
|
1016
|
-
const menuItems = react.useMemo(() => {
|
|
1017
|
-
const items = [];
|
|
1018
|
-
const editItem = parseFromValuesOrFunc(enableEditing, row) &&
|
|
1019
|
-
['modal', 'row'].includes(editDisplayMode) && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table }, 'edit'));
|
|
1020
|
-
if (editItem)
|
|
1021
|
-
items.push(editItem);
|
|
1022
|
-
const rowActionMenuItems = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
|
|
1023
|
-
closeMenu: () => setAnchorEl(null),
|
|
1024
|
-
row,
|
|
1025
|
-
staticRowIndex,
|
|
1026
|
-
table,
|
|
1027
|
-
});
|
|
1028
|
-
if (rowActionMenuItems === null || rowActionMenuItems === void 0 ? void 0 : rowActionMenuItems.length)
|
|
1029
|
-
items.push(...rowActionMenuItems);
|
|
1030
|
-
return items;
|
|
1031
|
-
}, [renderRowActionMenuItems, row, staticRowIndex, table]);
|
|
1032
|
-
if (!menuItems.length)
|
|
1033
|
-
return null;
|
|
1034
|
-
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
|
1035
|
-
dense: density === 'compact',
|
|
1036
|
-
sx: {
|
|
1037
|
-
backgroundColor: menuBackgroundColor,
|
|
1038
|
-
},
|
|
1039
|
-
}, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: menuItems })));
|
|
1040
|
-
};
|
|
1041
|
-
|
|
1042
|
-
const commonIconButtonStyles = {
|
|
1043
|
-
'&:hover': {
|
|
1044
|
-
opacity: 1,
|
|
1045
|
-
},
|
|
1046
|
-
height: '2rem',
|
|
1047
|
-
ml: '10px',
|
|
1048
|
-
opacity: 0.5,
|
|
1049
|
-
transition: 'opacity 150ms',
|
|
1050
|
-
width: '2rem',
|
|
1051
|
-
};
|
|
1052
|
-
const MRT_ToggleRowActionMenuButton = (_a) => {
|
|
1053
|
-
var _b;
|
|
1054
|
-
var { cell, row, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "row", "staticRowIndex", "table"]);
|
|
1055
|
-
const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
|
|
1056
|
-
const { creatingRow, editingRow } = getState();
|
|
1057
|
-
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
|
|
1058
|
-
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
|
|
1059
|
-
const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
|
|
1060
|
-
(isEditing && editDisplayMode === 'row');
|
|
1061
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
1062
|
-
const handleOpenRowActionMenu = (event) => {
|
|
1063
|
-
event.stopPropagation();
|
|
1064
|
-
event.preventDefault();
|
|
1065
|
-
setAnchorEl(event.currentTarget);
|
|
1066
|
-
};
|
|
1067
|
-
const handleStartEditMode = (event) => {
|
|
1068
|
-
event.stopPropagation();
|
|
1069
|
-
setEditingRow(Object.assign({}, row));
|
|
1070
|
-
setAnchorEl(null);
|
|
1071
|
-
};
|
|
1072
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, staticRowIndex, table })) : showEditActionButtons ? (jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
|
|
1073
|
-
parseFromValuesOrFunc(enableEditing, row) &&
|
|
1074
|
-
['modal', 'row'].includes(editDisplayMode) ? (jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(EditIcon, {}) })) })) : ((_b = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
|
|
1075
|
-
row,
|
|
1076
|
-
staticRowIndex,
|
|
1077
|
-
table,
|
|
1078
|
-
})) === null || _b === void 0 ? void 0 : _b.length) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsxRuntime.jsx(MoreHorizIcon, {}) })) })), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
|
|
1079
|
-
};
|
|
1080
|
-
|
|
1081
|
-
const getMRT_RowActionsColumnDef = (tableOptions) => {
|
|
1082
|
-
return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
|
|
1083
|
-
header: 'actions',
|
|
1084
|
-
id: 'mrt-row-actions',
|
|
1085
|
-
size: 70,
|
|
1086
|
-
tableOptions,
|
|
1087
|
-
}));
|
|
1088
|
-
};
|
|
1089
|
-
|
|
1090
|
-
const MRT_GrabHandleButton = (_a) => {
|
|
1091
|
-
var _b, _c;
|
|
1092
|
-
var { location, table } = _a, rest = __rest(_a, ["location", "table"]);
|
|
1093
|
-
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
|
|
1094
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, rest, { onClick: (e) => {
|
|
1095
|
-
var _a;
|
|
1096
|
-
e.stopPropagation();
|
|
1097
|
-
(_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
|
|
1098
|
-
}, sx: (theme) => (Object.assign({ '&:active': {
|
|
1099
|
-
cursor: 'grabbing',
|
|
1100
|
-
}, '&:hover': {
|
|
1101
|
-
backgroundColor: 'transparent',
|
|
1102
|
-
opacity: 1,
|
|
1103
|
-
}, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), title: undefined, children: jsxRuntime.jsx(DragHandleIcon, {}) })) })));
|
|
1104
|
-
};
|
|
1105
|
-
|
|
1106
|
-
const MRT_TableBodyRowGrabHandle = (_a) => {
|
|
1107
|
-
var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
|
|
1108
|
-
const { options: { muiRowDragHandleProps }, } = table;
|
|
1109
|
-
const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
|
|
1110
|
-
row,
|
|
1111
|
-
table,
|
|
1112
|
-
})), rest);
|
|
1113
|
-
const handleDragStart = (event) => {
|
|
1114
|
-
var _a;
|
|
1115
|
-
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
1116
|
-
try {
|
|
1117
|
-
event.dataTransfer.setDragImage(rowRef.current, 0, 0);
|
|
1118
|
-
}
|
|
1119
|
-
catch (e) {
|
|
1120
|
-
console.error(e);
|
|
1121
|
-
}
|
|
1122
|
-
table.setDraggingRow(row);
|
|
1123
|
-
};
|
|
1124
|
-
const handleDragEnd = (event) => {
|
|
1125
|
-
var _a;
|
|
1126
|
-
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
1127
|
-
table.setDraggingRow(null);
|
|
1128
|
-
table.setHoveredRow(null);
|
|
1129
|
-
};
|
|
1130
|
-
return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
|
|
1131
|
-
};
|
|
1132
|
-
|
|
1133
|
-
const getMRT_RowDragColumnDef = (tableOptions) => {
|
|
1134
|
-
return Object.assign({ Cell: ({ row, rowRef, table }) => (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
|
|
1135
|
-
header: 'move',
|
|
1136
|
-
id: 'mrt-row-drag',
|
|
1137
|
-
size: 60,
|
|
1138
|
-
tableOptions,
|
|
1139
|
-
}));
|
|
1140
|
-
};
|
|
1141
|
-
|
|
1142
|
-
const MRT_ExpandAllButton = (_a) => {
|
|
1143
|
-
var _b, _c;
|
|
1144
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
1145
|
-
const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
|
|
1146
|
-
const { density, isLoading } = getState();
|
|
1147
|
-
const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
|
|
1148
|
-
table,
|
|
1149
|
-
})), rest);
|
|
1150
|
-
const isAllRowsExpanded = getIsAllRowsExpanded();
|
|
1151
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
|
|
1152
|
-
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
|
|
1153
|
-
transition: 'transform 150ms',
|
|
1154
|
-
} })) })) }) })));
|
|
1155
|
-
};
|
|
1156
|
-
|
|
1157
|
-
const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
|
|
1158
|
-
var _a, _b;
|
|
1159
|
-
const theme = styles.useTheme();
|
|
1160
|
-
const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel, }, } = table;
|
|
1161
|
-
const { density } = getState();
|
|
1162
|
-
const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
|
|
1163
|
-
row,
|
|
1164
|
-
staticRowIndex,
|
|
1165
|
-
table,
|
|
1166
|
-
});
|
|
1167
|
-
const canExpand = row.getCanExpand();
|
|
1168
|
-
const isExpanded = row.getIsExpanded();
|
|
1169
|
-
const handleToggleExpand = (event) => {
|
|
1170
|
-
var _a;
|
|
1171
|
-
event.stopPropagation();
|
|
1172
|
-
row.toggleExpanded();
|
|
1173
|
-
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
1174
|
-
};
|
|
1175
|
-
const detailPanel = !!(renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
|
|
1176
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ disableHoverListener: !canExpand && !detailPanel }, getCommonTooltipProps(), { title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !detailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !detailPanel ? 0.3 : 1, [theme.direction === 'rtl' || positionExpandColumn === 'last'
|
|
1177
|
-
? 'mr'
|
|
1178
|
-
: 'ml']: `${row.depth * 16}px`, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
|
|
1179
|
-
transform: `rotate(${!canExpand && !renderDetailPanel
|
|
1180
|
-
? positionExpandColumn === 'last' ||
|
|
1181
|
-
theme.direction === 'rtl'
|
|
1182
|
-
? 90
|
|
1183
|
-
: -90
|
|
1184
|
-
: isExpanded
|
|
1185
|
-
? -180
|
|
1186
|
-
: 0}deg)`,
|
|
1187
|
-
transition: 'transform 150ms',
|
|
1188
|
-
} })) })) }) })));
|
|
1189
|
-
};
|
|
1190
|
-
|
|
1191
|
-
const getMRT_RowExpandColumnDef = (tableOptions) => {
|
|
1192
|
-
var _a;
|
|
1193
|
-
const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping }, } = tableOptions;
|
|
1194
|
-
const alignProps = positionExpandColumn === 'last'
|
|
1195
|
-
? {
|
|
1196
|
-
align: 'right',
|
|
1197
|
-
}
|
|
1198
|
-
: undefined;
|
|
1199
|
-
return Object.assign({ Cell: ({ cell, column, row, staticRowIndex, table }) => {
|
|
1200
|
-
var _a, _b, _c;
|
|
1201
|
-
const expandButtonProps = { row, staticRowIndex, table };
|
|
1202
|
-
const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
|
|
1203
|
-
if (groupedColumnMode === 'remove' && row.groupingColumnId) {
|
|
1204
|
-
return (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('right'), { title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsxRuntime.jsx("span", { children: row.groupingValue }) })), !!subRowsLength && jsxRuntime.jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
|
|
1205
|
-
}
|
|
1206
|
-
else {
|
|
1207
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
|
|
1208
|
-
}
|
|
1209
|
-
}, Header: enableExpandAll
|
|
1210
|
-
? ({ table }) => {
|
|
1211
|
-
var _a;
|
|
1212
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandAllButton, { table: table }), groupedColumnMode === 'remove' &&
|
|
1213
|
-
((_a = grouping === null || grouping === void 0 ? void 0 : grouping.map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)) === null || _a === void 0 ? void 0 : _a.join(', '))] }));
|
|
1214
|
-
}
|
|
1215
|
-
: undefined, muiTableBodyCellProps: alignProps, muiTableHeadCellProps: alignProps }, defaultDisplayColumnProps({
|
|
1216
|
-
header: 'expand',
|
|
1217
|
-
id: 'mrt-row-expand',
|
|
1218
|
-
size: groupedColumnMode === 'remove'
|
|
1219
|
-
? ((_a = defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size) !== null && _a !== void 0 ? _a : 180)
|
|
1220
|
-
: renderDetailPanel
|
|
1221
|
-
? enableExpandAll
|
|
1222
|
-
? 60
|
|
1223
|
-
: 70
|
|
1224
|
-
: 100,
|
|
1225
|
-
tableOptions,
|
|
1226
|
-
}));
|
|
1227
|
-
};
|
|
1228
|
-
|
|
1229
|
-
const getMRT_RowNumbersColumnDef = (tableOptions) => {
|
|
1230
|
-
const { localization, rowNumberDisplayMode } = tableOptions;
|
|
1231
|
-
const { pagination: { pageIndex, pageSize }, } = tableOptions.state;
|
|
1232
|
-
return Object.assign({ Cell: ({ row, staticRowIndex }) => {
|
|
1233
|
-
var _a;
|
|
1234
|
-
return ((_a = (rowNumberDisplayMode === 'static'
|
|
1235
|
-
? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
|
|
1236
|
-
: row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
1237
|
-
}, Header: () => localization.rowNumber, grow: false }, defaultDisplayColumnProps({
|
|
1238
|
-
header: 'rowNumbers',
|
|
1239
|
-
id: 'mrt-row-numbers',
|
|
1240
|
-
size: 50,
|
|
1241
|
-
tableOptions,
|
|
1242
|
-
}));
|
|
1243
|
-
};
|
|
1244
|
-
|
|
1245
|
-
const MRT_RowPinButton = (_a) => {
|
|
1246
|
-
var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
|
|
1247
|
-
const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
|
|
1248
|
-
const isPinned = row.getIsPinned();
|
|
1249
|
-
const [tooltipOpened, setTooltipOpened] = react.useState(false);
|
|
1250
|
-
const handleTogglePin = (event) => {
|
|
1251
|
-
setTooltipOpened(false);
|
|
1252
|
-
event.stopPropagation();
|
|
1253
|
-
row.pin(isPinned ? false : pinningPosition);
|
|
1254
|
-
};
|
|
1255
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.pin, onBlur: () => setTooltipOpened(false), onClick: handleTogglePin, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsxRuntime.jsx(CloseIcon, {})) : (jsxRuntime.jsx(PushPinIcon, { fontSize: "small", style: {
|
|
1256
|
-
transform: `rotate(${rowPinningDisplayMode === 'sticky'
|
|
1257
|
-
? 135
|
|
1258
|
-
: pinningPosition === 'top'
|
|
1259
|
-
? 180
|
|
1260
|
-
: 0}deg)`,
|
|
1261
|
-
} })) })) })));
|
|
1262
|
-
};
|
|
1263
|
-
|
|
1264
|
-
const MRT_TableBodyRowPinButton = (_a) => {
|
|
1265
|
-
var { row, table } = _a, rest = __rest(_a, ["row", "table"]);
|
|
1266
|
-
const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
|
|
1267
|
-
const { density } = getState();
|
|
1268
|
-
const canPin = parseFromValuesOrFunc(enableRowPinning, row);
|
|
1269
|
-
if (!canPin)
|
|
1270
|
-
return null;
|
|
1271
|
-
const rowPinButtonProps = Object.assign({ row,
|
|
1272
|
-
table }, rest);
|
|
1273
|
-
if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
|
|
1274
|
-
return (jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
1275
|
-
display: 'flex',
|
|
1276
|
-
flexDirection: density === 'compact' ? 'row' : 'column',
|
|
1277
|
-
}, children: [jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
|
|
1278
|
-
}
|
|
1279
|
-
return (jsxRuntime.jsx(MRT_RowPinButton, Object.assign({ pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }, rowPinButtonProps)));
|
|
1280
|
-
};
|
|
1281
|
-
|
|
1282
|
-
const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
1283
|
-
return Object.assign({ Cell: ({ row, table }) => (jsxRuntime.jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
|
|
1284
|
-
header: 'pin',
|
|
1285
|
-
id: 'mrt-row-pin',
|
|
1286
|
-
size: 60,
|
|
1287
|
-
tableOptions,
|
|
1288
|
-
}));
|
|
1289
|
-
};
|
|
1290
|
-
|
|
1291
|
-
const MRT_SelectCheckbox = (_a) => {
|
|
1292
|
-
var _b;
|
|
1293
|
-
var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
|
|
1294
|
-
const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
|
|
1295
|
-
const { density, isLoading } = getState();
|
|
1296
|
-
const selectAll = !row;
|
|
1297
|
-
const allRowsSelected = selectAll
|
|
1298
|
-
? selectAllMode === 'page'
|
|
1299
|
-
? table.getIsAllPageRowsSelected()
|
|
1300
|
-
: table.getIsAllRowsSelected()
|
|
1301
|
-
: undefined;
|
|
1302
|
-
const isChecked = selectAll
|
|
1303
|
-
? allRowsSelected
|
|
1304
|
-
: getIsRowSelected({ row, table });
|
|
1305
|
-
const checkboxProps = Object.assign(Object.assign({}, (selectAll
|
|
1306
|
-
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
|
|
1307
|
-
: parseFromValuesOrFunc(muiSelectCheckboxProps, {
|
|
1308
|
-
row,
|
|
1309
|
-
staticRowIndex,
|
|
1310
|
-
table,
|
|
1311
|
-
}))), rest);
|
|
1312
|
-
const onSelectionChange = row
|
|
1313
|
-
? getMRT_RowSelectionHandler({
|
|
1314
|
-
row,
|
|
1315
|
-
staticRowIndex,
|
|
1316
|
-
table,
|
|
1317
|
-
})
|
|
1318
|
-
: undefined;
|
|
1319
|
-
const onSelectAllChange = getMRT_SelectAllHandler({ table });
|
|
1320
|
-
const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
|
|
1321
|
-
? localization.toggleSelectAll
|
|
1322
|
-
: localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
|
|
1323
|
-
'aria-label': selectAll
|
|
1324
|
-
? localization.toggleSelectAll
|
|
1325
|
-
: localization.toggleSelectRow,
|
|
1326
|
-
}, onChange: (event) => {
|
|
1327
|
-
event.stopPropagation();
|
|
1328
|
-
selectAll ? onSelectAllChange(event) : onSelectionChange(event);
|
|
1329
|
-
}, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
|
|
1330
|
-
var _a;
|
|
1331
|
-
e.stopPropagation();
|
|
1332
|
-
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
1333
|
-
}, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
|
|
1334
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
|
|
1335
|
-
? localization.toggleSelectAll
|
|
1336
|
-
: localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: !isChecked && selectAll
|
|
1337
|
-
? table.getIsSomeRowsSelected()
|
|
1338
|
-
: (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) })));
|
|
1339
|
-
};
|
|
1340
|
-
|
|
1341
|
-
const getMRT_RowSelectColumnDef = (tableOptions) => {
|
|
1342
|
-
const { enableMultiRowSelection, enableSelectAll } = tableOptions;
|
|
1343
|
-
return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
|
|
1344
|
-
? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })
|
|
1345
|
-
: undefined, grow: false }, defaultDisplayColumnProps({
|
|
1346
|
-
header: 'select',
|
|
1347
|
-
id: 'mrt-row-select',
|
|
1348
|
-
size: enableSelectAll ? 60 : 70,
|
|
1349
|
-
tableOptions,
|
|
1350
|
-
}));
|
|
1351
|
-
};
|
|
1352
|
-
|
|
1353
|
-
const MRT_Default_Icons = {
|
|
1354
|
-
ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
|
|
1355
|
-
ArrowRightIcon: ArrowRightIcon__default["default"],
|
|
1356
|
-
CancelIcon: CancelIcon__default["default"],
|
|
1357
|
-
ChevronLeftIcon: ChevronLeftIcon__default["default"],
|
|
1358
|
-
ChevronRightIcon: ChevronRightIcon__default["default"],
|
|
1359
|
-
ClearAllIcon: ClearAllIcon__default["default"],
|
|
1360
|
-
CloseIcon: CloseIcon__default["default"],
|
|
1361
|
-
ContentCopy: ContentCopy__default["default"],
|
|
1362
|
-
DensityLargeIcon: DensityLargeIcon__default["default"],
|
|
1363
|
-
DensityMediumIcon: DensityMediumIcon__default["default"],
|
|
1364
|
-
DensitySmallIcon: DensitySmallIcon__default["default"],
|
|
1365
|
-
DragHandleIcon: DragHandleIcon__default["default"],
|
|
1366
|
-
DynamicFeedIcon: DynamicFeedIcon__default["default"],
|
|
1367
|
-
EditIcon: EditIcon__default["default"],
|
|
1368
|
-
ExpandMoreIcon: ExpandMoreIcon__default["default"],
|
|
1369
|
-
FilterAltIcon: FilterAltIcon__default["default"],
|
|
1370
|
-
FilterListIcon: FilterListIcon__default["default"],
|
|
1371
|
-
FilterListOffIcon: FilterListOffIcon__default["default"],
|
|
1372
|
-
FirstPageIcon: FirstPageIcon__default["default"],
|
|
1373
|
-
FullscreenExitIcon: FullscreenExitIcon__default["default"],
|
|
1374
|
-
FullscreenIcon: FullscreenIcon__default["default"],
|
|
1375
|
-
KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
|
|
1376
|
-
LastPageIcon: LastPageIcon__default["default"],
|
|
1377
|
-
MoreHorizIcon: MoreHorizIcon__default["default"],
|
|
1378
|
-
MoreVertIcon: MoreVertIcon__default["default"],
|
|
1379
|
-
PushPinIcon: PushPinIcon__default["default"],
|
|
1380
|
-
RestartAltIcon: RestartAltIcon__default["default"],
|
|
1381
|
-
SaveIcon: SaveIcon__default["default"],
|
|
1382
|
-
SearchIcon: SearchIcon__default["default"],
|
|
1383
|
-
SearchOffIcon: SearchOffIcon__default["default"],
|
|
1384
|
-
SortIcon: SortIcon__default["default"],
|
|
1385
|
-
SyncAltIcon: SyncAltIcon__default["default"],
|
|
1386
|
-
ViewColumnIcon: ViewColumnIcon__default["default"],
|
|
1387
|
-
VisibilityOffIcon: VisibilityOffIcon__default["default"],
|
|
1388
|
-
};
|
|
1389
|
-
|
|
1390
|
-
const MRT_Localization_EN = {
|
|
1391
|
-
actions: 'Actions',
|
|
1392
|
-
and: 'and',
|
|
1393
|
-
cancel: 'Cancel',
|
|
1394
|
-
changeFilterMode: 'Change filter mode',
|
|
1395
|
-
changeSearchMode: 'Change search mode',
|
|
1396
|
-
clearFilter: 'Clear filter',
|
|
1397
|
-
clearSearch: 'Clear search',
|
|
1398
|
-
clearSelection: 'Clear selection',
|
|
1399
|
-
clearSort: 'Clear sort',
|
|
1400
|
-
clickToCopy: 'Click to copy',
|
|
1401
|
-
copy: 'Copy',
|
|
1402
|
-
collapse: 'Collapse',
|
|
1403
|
-
collapseAll: 'Collapse all',
|
|
1404
|
-
columnActions: 'Column Actions',
|
|
1405
|
-
copiedToClipboard: 'Copied to clipboard',
|
|
1406
|
-
dropToGroupBy: 'Drop to group by {column}',
|
|
1407
|
-
edit: 'Edit',
|
|
1408
|
-
expand: 'Expand',
|
|
1409
|
-
expandAll: 'Expand all',
|
|
1410
|
-
filterArrIncludes: 'Includes',
|
|
1411
|
-
filterArrIncludesAll: 'Includes all',
|
|
1412
|
-
filterArrIncludesSome: 'Includes',
|
|
1413
|
-
filterBetween: 'Between',
|
|
1414
|
-
filterBetweenInclusive: 'Between Inclusive',
|
|
1415
|
-
filterByColumn: 'Filter by {column}',
|
|
1416
|
-
filterContains: 'Contains',
|
|
1417
|
-
filterEmpty: 'Empty',
|
|
1418
|
-
filterEndsWith: 'Ends With',
|
|
1419
|
-
filterEquals: 'Equals',
|
|
1420
|
-
filterEqualsString: 'Equals',
|
|
1421
|
-
filterFuzzy: 'Fuzzy',
|
|
1422
|
-
filterGreaterThan: 'Greater Than',
|
|
1423
|
-
filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
|
|
1424
|
-
filterInNumberRange: 'Between',
|
|
1425
|
-
filterIncludesString: 'Contains',
|
|
1426
|
-
filterIncludesStringSensitive: 'Contains',
|
|
1427
|
-
filterLessThan: 'Less Than',
|
|
1428
|
-
filterLessThanOrEqualTo: 'Less Than Or Equal To',
|
|
1429
|
-
filterMode: 'Filter Mode: {filterType}',
|
|
1430
|
-
filterNotEmpty: 'Not Empty',
|
|
1431
|
-
filterNotEquals: 'Not Equals',
|
|
1432
|
-
filterStartsWith: 'Starts With',
|
|
1433
|
-
filterWeakEquals: 'Equals',
|
|
1434
|
-
filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
|
|
1435
|
-
goToFirstPage: 'Go to first page',
|
|
1436
|
-
goToLastPage: 'Go to last page',
|
|
1437
|
-
goToNextPage: 'Go to next page',
|
|
1438
|
-
goToPreviousPage: 'Go to previous page',
|
|
1439
|
-
grab: 'Grab',
|
|
1440
|
-
groupByColumn: 'Group by {column}',
|
|
1441
|
-
groupedBy: 'Grouped by ',
|
|
1442
|
-
hideAll: 'Hide all',
|
|
1443
|
-
hideColumn: 'Hide {column} column',
|
|
1444
|
-
max: 'Max',
|
|
1445
|
-
min: 'Min',
|
|
1446
|
-
move: 'Move',
|
|
1447
|
-
noRecordsToDisplay: 'No records to display',
|
|
1448
|
-
noResultsFound: 'No results found',
|
|
1449
|
-
of: 'of',
|
|
1450
|
-
or: 'or',
|
|
1451
|
-
pin: 'Pin',
|
|
1452
|
-
pinToLeft: 'Pin to left',
|
|
1453
|
-
pinToRight: 'Pin to right',
|
|
1454
|
-
resetColumnSize: 'Reset column size',
|
|
1455
|
-
resetOrder: 'Reset order',
|
|
1456
|
-
rowActions: 'Row Actions',
|
|
1457
|
-
rowNumber: '#',
|
|
1458
|
-
rowNumbers: 'Row Numbers',
|
|
1459
|
-
rowsPerPage: 'Rows per page',
|
|
1460
|
-
save: 'Save',
|
|
1461
|
-
search: 'Search',
|
|
1462
|
-
selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
|
|
1463
|
-
select: 'Select',
|
|
1464
|
-
showAll: 'Show all',
|
|
1465
|
-
showAllColumns: 'Show all columns',
|
|
1466
|
-
showHideColumns: 'Show/Hide columns',
|
|
1467
|
-
showHideFilters: 'Show/Hide filters',
|
|
1468
|
-
showHideSearch: 'Show/Hide search',
|
|
1469
|
-
sortByColumnAsc: 'Sort by {column} ascending',
|
|
1470
|
-
sortByColumnDesc: 'Sort by {column} descending',
|
|
1471
|
-
sortedByColumnAsc: 'Sorted by {column} ascending',
|
|
1472
|
-
sortedByColumnDesc: 'Sorted by {column} descending',
|
|
1473
|
-
thenBy: ', then by ',
|
|
1474
|
-
toggleDensity: 'Toggle density',
|
|
1475
|
-
toggleFullScreen: 'Toggle full screen',
|
|
1476
|
-
toggleSelectAll: 'Toggle select all',
|
|
1477
|
-
toggleSelectRow: 'Toggle select row',
|
|
1478
|
-
toggleVisibility: 'Toggle visibility',
|
|
1479
|
-
ungroupByColumn: 'Ungroup by {column}',
|
|
1480
|
-
unpin: 'Unpin',
|
|
1481
|
-
unpinAll: 'Unpin all',
|
|
1482
|
-
};
|
|
1483
|
-
|
|
1484
|
-
const MRT_DefaultColumn = {
|
|
1485
|
-
filterVariant: 'text',
|
|
1486
|
-
maxSize: 1000,
|
|
1487
|
-
minSize: 40,
|
|
1488
|
-
size: 180,
|
|
1489
|
-
};
|
|
1490
|
-
const MRT_DefaultDisplayColumn = {
|
|
1491
|
-
columnDefType: 'display',
|
|
1492
|
-
enableClickToCopy: false,
|
|
1493
|
-
enableColumnActions: false,
|
|
1494
|
-
enableColumnDragging: false,
|
|
1495
|
-
enableColumnFilter: false,
|
|
1496
|
-
enableColumnOrdering: false,
|
|
1497
|
-
enableEditing: false,
|
|
1498
|
-
enableGlobalFilter: false,
|
|
1499
|
-
enableGrouping: false,
|
|
1500
|
-
enableHiding: false,
|
|
1501
|
-
enableResizing: false,
|
|
1502
|
-
enableSorting: false,
|
|
1503
|
-
};
|
|
1504
|
-
const useMRT_TableOptions = (_a) => {
|
|
1505
|
-
var _b;
|
|
1506
|
-
var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, id = react.useId(), layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableKeyboardShortcuts", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "id", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
|
|
1507
|
-
const theme = styles.useTheme();
|
|
1508
|
-
icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
|
|
1509
|
-
localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
|
|
1510
|
-
mrtTheme = react.useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
|
1511
|
-
aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
|
|
1512
|
-
filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
|
|
1513
|
-
sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
|
|
1514
|
-
defaultColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
|
|
1515
|
-
defaultDisplayColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
|
|
1516
|
-
//cannot be changed after initialization
|
|
1517
|
-
[enableColumnVirtualization, enableRowVirtualization] = react.useMemo(() => [enableColumnVirtualization, enableRowVirtualization], []);
|
|
1518
|
-
if (!columnResizeDirection) {
|
|
1519
|
-
columnResizeDirection = theme.direction || 'ltr';
|
|
1520
|
-
}
|
|
1521
|
-
layoutMode =
|
|
1522
|
-
layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
|
|
1523
|
-
if (layoutMode === 'semantic' &&
|
|
1524
|
-
(enableRowVirtualization || enableColumnVirtualization)) {
|
|
1525
|
-
layoutMode = 'grid';
|
|
1526
|
-
}
|
|
1527
|
-
if (enableRowVirtualization) {
|
|
1528
|
-
enableStickyHeader = true;
|
|
1529
|
-
}
|
|
1530
|
-
if (enablePagination === false && manualPagination === undefined) {
|
|
1531
|
-
manualPagination = true;
|
|
1532
|
-
}
|
|
1533
|
-
if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
1534
|
-
manualFiltering = true;
|
|
1535
|
-
manualGrouping = true;
|
|
1536
|
-
manualPagination = true;
|
|
1537
|
-
manualSorting = true;
|
|
1538
|
-
}
|
|
1539
|
-
return Object.assign({ aggregationFns,
|
|
1540
|
-
autoResetExpanded,
|
|
1541
|
-
columnFilterDisplayMode,
|
|
1542
|
-
columnResizeDirection,
|
|
1543
|
-
columnResizeMode,
|
|
1544
|
-
createDisplayMode,
|
|
1545
|
-
defaultColumn,
|
|
1546
|
-
defaultDisplayColumn,
|
|
1547
|
-
editDisplayMode,
|
|
1548
|
-
enableBatchRowSelection,
|
|
1549
|
-
enableBottomToolbar,
|
|
1550
|
-
enableColumnActions,
|
|
1551
|
-
enableColumnFilters,
|
|
1552
|
-
enableColumnOrdering,
|
|
1553
|
-
enableColumnPinning,
|
|
1554
|
-
enableColumnResizing,
|
|
1555
|
-
enableColumnVirtualization,
|
|
1556
|
-
enableDensityToggle,
|
|
1557
|
-
enableExpandAll,
|
|
1558
|
-
enableExpanding,
|
|
1559
|
-
enableFacetedValues,
|
|
1560
|
-
enableFilterMatchHighlighting,
|
|
1561
|
-
enableFilters,
|
|
1562
|
-
enableFullScreenToggle,
|
|
1563
|
-
enableGlobalFilter,
|
|
1564
|
-
enableGlobalFilterRankedResults,
|
|
1565
|
-
enableGrouping,
|
|
1566
|
-
enableHiding,
|
|
1567
|
-
enableKeyboardShortcuts,
|
|
1568
|
-
enableMultiRowSelection,
|
|
1569
|
-
enableMultiSort,
|
|
1570
|
-
enablePagination,
|
|
1571
|
-
enableRowPinning,
|
|
1572
|
-
enableRowSelection,
|
|
1573
|
-
enableRowVirtualization,
|
|
1574
|
-
enableSelectAll,
|
|
1575
|
-
enableSorting,
|
|
1576
|
-
enableStickyHeader,
|
|
1577
|
-
enableTableFooter,
|
|
1578
|
-
enableTableHead,
|
|
1579
|
-
enableToolbarInternalActions,
|
|
1580
|
-
enableTopToolbar,
|
|
1581
|
-
filterFns, getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: enableExpanding || enableGrouping ? reactTable.getExpandedRowModel() : undefined, getFacetedMinMaxValues: enableFacetedValues
|
|
1582
|
-
? reactTable.getFacetedMinMaxValues()
|
|
1583
|
-
: undefined, getFacetedRowModel: enableFacetedValues ? reactTable.getFacetedRowModel() : undefined, getFacetedUniqueValues: enableFacetedValues
|
|
1584
|
-
? reactTable.getFacetedUniqueValues()
|
|
1585
|
-
: undefined, getFilteredRowModel: (enableColumnFilters || enableGlobalFilter || enableFilters) &&
|
|
1586
|
-
!manualFiltering
|
|
1587
|
-
? reactTable.getFilteredRowModel()
|
|
1588
|
-
: undefined, getGroupedRowModel: enableGrouping && !manualGrouping ? reactTable.getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination && !manualPagination
|
|
1589
|
-
? reactTable.getPaginationRowModel()
|
|
1590
|
-
: undefined, getSortedRowModel: enableSorting && !manualSorting ? reactTable.getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
|
|
1591
|
-
id,
|
|
1592
|
-
layoutMode,
|
|
1593
|
-
localization,
|
|
1594
|
-
manualFiltering,
|
|
1595
|
-
manualGrouping,
|
|
1596
|
-
manualPagination,
|
|
1597
|
-
manualSorting,
|
|
1598
|
-
mrtTheme,
|
|
1599
|
-
paginationDisplayMode,
|
|
1600
|
-
positionActionsColumn,
|
|
1601
|
-
positionCreatingRow,
|
|
1602
|
-
positionExpandColumn,
|
|
1603
|
-
positionGlobalFilter,
|
|
1604
|
-
positionPagination,
|
|
1605
|
-
positionToolbarAlertBanner,
|
|
1606
|
-
positionToolbarDropZone,
|
|
1607
|
-
rowNumberDisplayMode,
|
|
1608
|
-
rowPinningDisplayMode,
|
|
1609
|
-
selectAllMode,
|
|
1610
|
-
sortingFns }, rest);
|
|
1611
|
-
};
|
|
1612
|
-
|
|
1613
|
-
const blankColProps = {
|
|
1614
|
-
children: null,
|
|
1615
|
-
sx: {
|
|
1616
|
-
minWidth: 0,
|
|
1617
|
-
p: 0,
|
|
1618
|
-
width: 0,
|
|
1619
|
-
},
|
|
1620
|
-
};
|
|
1621
|
-
const getMRT_RowSpacerColumnDef = (tableOptions) => {
|
|
1622
|
-
return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps({
|
|
1623
|
-
id: 'mrt-row-spacer',
|
|
1624
|
-
size: 0,
|
|
1625
|
-
tableOptions,
|
|
1626
|
-
})), { grow: true }), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
|
|
1627
|
-
};
|
|
1628
|
-
|
|
1629
|
-
const useMRT_Effects = (table) => {
|
|
1630
|
-
const { getIsSomeRowsPinned, getPrePaginationRowModel, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
|
|
1631
|
-
const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
|
|
1632
|
-
const totalColumnCount = table.options.columns.length;
|
|
1633
|
-
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
|
|
1634
|
-
const rerender = react.useReducer(() => ({}), {})[1];
|
|
1635
|
-
const initialBodyHeight = react.useRef(null);
|
|
1636
|
-
const previousTop = react.useRef(null);
|
|
1637
|
-
react.useEffect(() => {
|
|
1638
|
-
if (typeof window !== 'undefined') {
|
|
1639
|
-
initialBodyHeight.current = document.body.style.height;
|
|
1640
|
-
}
|
|
1641
|
-
}, []);
|
|
1642
|
-
//hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
|
|
1643
|
-
react.useEffect(() => {
|
|
1644
|
-
if (typeof window !== 'undefined') {
|
|
1645
|
-
if (isFullScreen) {
|
|
1646
|
-
previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
|
|
1647
|
-
document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
|
|
1648
|
-
}
|
|
1649
|
-
else {
|
|
1650
|
-
document.body.style.height = initialBodyHeight.current;
|
|
1651
|
-
if (!previousTop.current)
|
|
1652
|
-
return;
|
|
1653
|
-
//restore scroll position
|
|
1654
|
-
window.scrollTo({
|
|
1655
|
-
behavior: 'instant',
|
|
1656
|
-
top: -1 * previousTop.current,
|
|
1657
|
-
});
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
}, [isFullScreen]);
|
|
1661
|
-
//recalculate column order when columns change or features are toggled on/off
|
|
1662
|
-
react.useEffect(() => {
|
|
1663
|
-
if (totalColumnCount !== columnOrder.length) {
|
|
1664
|
-
table.setColumnOrder(getDefaultColumnOrderIds(table.options));
|
|
1665
|
-
}
|
|
1666
|
-
}, [totalColumnCount]);
|
|
1667
|
-
//if page index is out of bounds, set it to the last page
|
|
1668
|
-
react.useEffect(() => {
|
|
1669
|
-
if (!enablePagination || isLoading || showSkeletons)
|
|
1670
|
-
return;
|
|
1671
|
-
const { pageIndex, pageSize } = pagination;
|
|
1672
|
-
const firstVisibleRowIndex = pageIndex * pageSize;
|
|
1673
|
-
if (firstVisibleRowIndex >= totalRowCount) {
|
|
1674
|
-
table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
|
|
1675
|
-
}
|
|
1676
|
-
}, [totalRowCount]);
|
|
1677
|
-
//turn off sort when global filter is looking for ranked results
|
|
1678
|
-
const appliedSort = react.useRef(sorting);
|
|
1679
|
-
react.useEffect(() => {
|
|
1680
|
-
if (sorting.length) {
|
|
1681
|
-
appliedSort.current = sorting;
|
|
1682
|
-
}
|
|
1683
|
-
}, [sorting]);
|
|
1684
|
-
react.useEffect(() => {
|
|
1685
|
-
if (!getCanRankRows(table))
|
|
1686
|
-
return;
|
|
1687
|
-
if (globalFilter) {
|
|
1688
|
-
table.setSorting([]);
|
|
1689
|
-
}
|
|
1690
|
-
else {
|
|
1691
|
-
table.setSorting(() => appliedSort.current || []);
|
|
1692
|
-
}
|
|
1693
|
-
}, [globalFilter]);
|
|
1694
|
-
//fix pinned row top style when density changes
|
|
1695
|
-
react.useEffect(() => {
|
|
1696
|
-
if (enableRowPinning && getIsSomeRowsPinned()) {
|
|
1697
|
-
setTimeout(() => {
|
|
1698
|
-
rerender();
|
|
1699
|
-
}, 150);
|
|
1700
|
-
}
|
|
1701
|
-
}, [density]);
|
|
1702
|
-
};
|
|
1703
|
-
|
|
1704
|
-
/**
|
|
1705
|
-
* The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
|
|
1706
|
-
* @param definedTableOptions - table options with proper defaults set
|
|
1707
|
-
* @returns the MRT table instance
|
|
1708
|
-
*/
|
|
1709
|
-
const useMRT_TableInstance = (definedTableOptions) => {
|
|
1710
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
|
|
1711
|
-
const lastSelectedRowId = react.useRef(null);
|
|
1712
|
-
const actionCellRef = react.useRef(null);
|
|
1713
|
-
const bottomToolbarRef = react.useRef(null);
|
|
1714
|
-
const editInputRefs = react.useRef({});
|
|
1715
|
-
const filterInputRefs = react.useRef({});
|
|
1716
|
-
const searchInputRef = react.useRef(null);
|
|
1717
|
-
const tableContainerRef = react.useRef(null);
|
|
1718
|
-
const tableHeadCellRefs = react.useRef({});
|
|
1719
|
-
const tablePaperRef = react.useRef(null);
|
|
1720
|
-
const topToolbarRef = react.useRef(null);
|
|
1721
|
-
const tableHeadRef = react.useRef(null);
|
|
1722
|
-
const tableFooterRef = react.useRef(null);
|
|
1723
|
-
//transform initial state with proper column order
|
|
1724
|
-
const initialState = react.useMemo(() => {
|
|
1725
|
-
var _a, _b, _c;
|
|
1726
|
-
const initState = (_a = definedTableOptions.initialState) !== null && _a !== void 0 ? _a : {};
|
|
1727
|
-
initState.columnOrder =
|
|
1728
|
-
(_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, definedTableOptions), { state: Object.assign(Object.assign({}, definedTableOptions.initialState), definedTableOptions.state) }));
|
|
1729
|
-
initState.globalFilterFn = (_c = definedTableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
|
|
1730
|
-
return initState;
|
|
1731
|
-
}, []);
|
|
1732
|
-
definedTableOptions.initialState = initialState;
|
|
1733
|
-
const [actionCell, setActionCell] = react.useState((_a = initialState.actionCell) !== null && _a !== void 0 ? _a : null);
|
|
1734
|
-
const [creatingRow, _setCreatingRow] = react.useState((_b = initialState.creatingRow) !== null && _b !== void 0 ? _b : null);
|
|
1735
|
-
const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => {
|
|
1736
|
-
var _a, _b, _c, _d;
|
|
1737
|
-
return ({
|
|
1738
|
-
[getColumnId(col)]: col.filterFn instanceof Function
|
|
1739
|
-
? ((_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom')
|
|
1740
|
-
: ((_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col)),
|
|
1741
|
-
});
|
|
1742
|
-
})));
|
|
1743
|
-
const [columnOrder, onColumnOrderChange] = react.useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
|
|
1744
|
-
const [columnSizingInfo, onColumnSizingInfoChange] = react.useState((_d = initialState.columnSizingInfo) !== null && _d !== void 0 ? _d : {});
|
|
1745
|
-
const [density, setDensity] = react.useState((_e = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _e !== void 0 ? _e : 'comfortable');
|
|
1746
|
-
const [draggingColumn, setDraggingColumn] = react.useState((_f = initialState.draggingColumn) !== null && _f !== void 0 ? _f : null);
|
|
1747
|
-
const [draggingRow, setDraggingRow] = react.useState((_g = initialState.draggingRow) !== null && _g !== void 0 ? _g : null);
|
|
1748
|
-
const [editingCell, setEditingCell] = react.useState((_h = initialState.editingCell) !== null && _h !== void 0 ? _h : null);
|
|
1749
|
-
const [editingRow, setEditingRow] = react.useState((_j = initialState.editingRow) !== null && _j !== void 0 ? _j : null);
|
|
1750
|
-
const [globalFilterFn, setGlobalFilterFn] = react.useState((_k = initialState.globalFilterFn) !== null && _k !== void 0 ? _k : 'fuzzy');
|
|
1751
|
-
const [grouping, onGroupingChange] = react.useState((_l = initialState.grouping) !== null && _l !== void 0 ? _l : []);
|
|
1752
|
-
const [hoveredColumn, setHoveredColumn] = react.useState((_m = initialState.hoveredColumn) !== null && _m !== void 0 ? _m : null);
|
|
1753
|
-
const [hoveredRow, setHoveredRow] = react.useState((_o = initialState.hoveredRow) !== null && _o !== void 0 ? _o : null);
|
|
1754
|
-
const [isFullScreen, setIsFullScreen] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _p !== void 0 ? _p : false);
|
|
1755
|
-
const [pagination, onPaginationChange] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _q !== void 0 ? _q : { pageIndex: 0, pageSize: 10 });
|
|
1756
|
-
const [showAlertBanner, setShowAlertBanner] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _r !== void 0 ? _r : false);
|
|
1757
|
-
const [showColumnFilters, setShowColumnFilters] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _s !== void 0 ? _s : false);
|
|
1758
|
-
const [showGlobalFilter, setShowGlobalFilter] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _t !== void 0 ? _t : false);
|
|
1759
|
-
const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _u !== void 0 ? _u : false);
|
|
1760
|
-
definedTableOptions.state = Object.assign({ actionCell,
|
|
1761
|
-
columnFilterFns,
|
|
1762
|
-
columnOrder,
|
|
1763
|
-
columnSizingInfo,
|
|
1764
|
-
creatingRow,
|
|
1765
|
-
density,
|
|
1766
|
-
draggingColumn,
|
|
1767
|
-
draggingRow,
|
|
1768
|
-
editingCell,
|
|
1769
|
-
editingRow,
|
|
1770
|
-
globalFilterFn,
|
|
1771
|
-
grouping,
|
|
1772
|
-
hoveredColumn,
|
|
1773
|
-
hoveredRow,
|
|
1774
|
-
isFullScreen,
|
|
1775
|
-
pagination,
|
|
1776
|
-
showAlertBanner,
|
|
1777
|
-
showColumnFilters,
|
|
1778
|
-
showGlobalFilter,
|
|
1779
|
-
showToolbarDropZone }, definedTableOptions.state);
|
|
1780
|
-
//The table options now include all state needed to help determine column visibility and order logic
|
|
1781
|
-
const statefulTableOptions = definedTableOptions;
|
|
1782
|
-
//don't recompute columnDefs while resizing column or dragging column/row
|
|
1783
|
-
const columnDefsRef = react.useRef([]);
|
|
1784
|
-
statefulTableOptions.columns =
|
|
1785
|
-
statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
|
|
1786
|
-
statefulTableOptions.state.draggingColumn ||
|
|
1787
|
-
statefulTableOptions.state.draggingRow
|
|
1788
|
-
? columnDefsRef.current
|
|
1789
|
-
: prepareColumns({
|
|
1790
|
-
columnDefs: [
|
|
1791
|
-
...[
|
|
1792
|
-
showRowPinningColumn(statefulTableOptions) &&
|
|
1793
|
-
getMRT_RowPinningColumnDef(statefulTableOptions),
|
|
1794
|
-
showRowDragColumn(statefulTableOptions) &&
|
|
1795
|
-
getMRT_RowDragColumnDef(statefulTableOptions),
|
|
1796
|
-
showRowActionsColumn(statefulTableOptions) &&
|
|
1797
|
-
getMRT_RowActionsColumnDef(statefulTableOptions),
|
|
1798
|
-
showRowExpandColumn(statefulTableOptions) &&
|
|
1799
|
-
getMRT_RowExpandColumnDef(statefulTableOptions),
|
|
1800
|
-
showRowSelectionColumn(statefulTableOptions) &&
|
|
1801
|
-
getMRT_RowSelectColumnDef(statefulTableOptions),
|
|
1802
|
-
showRowNumbersColumn(statefulTableOptions) &&
|
|
1803
|
-
getMRT_RowNumbersColumnDef(statefulTableOptions),
|
|
1804
|
-
].filter(Boolean),
|
|
1805
|
-
...statefulTableOptions.columns,
|
|
1806
|
-
...[
|
|
1807
|
-
showRowSpacerColumn(statefulTableOptions) &&
|
|
1808
|
-
getMRT_RowSpacerColumnDef(statefulTableOptions),
|
|
1809
|
-
].filter(Boolean),
|
|
1810
|
-
],
|
|
1811
|
-
tableOptions: statefulTableOptions,
|
|
1812
|
-
});
|
|
1813
|
-
columnDefsRef.current = statefulTableOptions.columns;
|
|
1814
|
-
//if loading, generate blank rows to show skeleton loaders
|
|
1815
|
-
statefulTableOptions.data = react.useMemo(() => (statefulTableOptions.state.isLoading ||
|
|
1816
|
-
statefulTableOptions.state.showSkeletons) &&
|
|
1817
|
-
!statefulTableOptions.data.length
|
|
1818
|
-
? [
|
|
1819
|
-
...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null),
|
|
1820
|
-
].map(() => Object.assign({}, ...getAllLeafColumnDefs(statefulTableOptions.columns).map((col) => ({
|
|
1821
|
-
[getColumnId(col)]: null,
|
|
1822
|
-
}))))
|
|
1823
|
-
: statefulTableOptions.data, [
|
|
1824
|
-
statefulTableOptions.data,
|
|
1825
|
-
statefulTableOptions.state.isLoading,
|
|
1826
|
-
statefulTableOptions.state.showSkeletons,
|
|
1827
|
-
]);
|
|
1828
|
-
//@ts-ignore
|
|
1829
|
-
const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
|
|
1830
|
-
onColumnSizingInfoChange,
|
|
1831
|
-
onGroupingChange,
|
|
1832
|
-
onPaginationChange }, statefulTableOptions), { globalFilterFn: (_v = statefulTableOptions.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
|
|
1833
|
-
table.refs = {
|
|
1834
|
-
actionCellRef,
|
|
1835
|
-
bottomToolbarRef,
|
|
1836
|
-
editInputRefs,
|
|
1837
|
-
filterInputRefs,
|
|
1838
|
-
lastSelectedRowId,
|
|
1839
|
-
searchInputRef,
|
|
1840
|
-
tableContainerRef,
|
|
1841
|
-
tableFooterRef,
|
|
1842
|
-
tableHeadCellRefs,
|
|
1843
|
-
tableHeadRef,
|
|
1844
|
-
tablePaperRef,
|
|
1845
|
-
topToolbarRef,
|
|
1846
|
-
};
|
|
1847
|
-
table.setActionCell =
|
|
1848
|
-
(_w = statefulTableOptions.onActionCellChange) !== null && _w !== void 0 ? _w : setActionCell;
|
|
1849
|
-
table.setCreatingRow = (row) => {
|
|
1850
|
-
var _a, _b;
|
|
1851
|
-
let _row = row;
|
|
1852
|
-
if (row === true) {
|
|
1853
|
-
_row = createRow(table);
|
|
1854
|
-
}
|
|
1855
|
-
(_b = (_a = statefulTableOptions === null || statefulTableOptions === void 0 ? void 0 : statefulTableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(statefulTableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
|
|
1856
|
-
};
|
|
1857
|
-
table.setColumnFilterFns =
|
|
1858
|
-
(_x = statefulTableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
|
|
1859
|
-
table.setDensity = (_y = statefulTableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
|
|
1860
|
-
table.setDraggingColumn =
|
|
1861
|
-
(_z = statefulTableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
|
|
1862
|
-
table.setDraggingRow =
|
|
1863
|
-
(_0 = statefulTableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
|
|
1864
|
-
table.setEditingCell =
|
|
1865
|
-
(_1 = statefulTableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
|
|
1866
|
-
table.setEditingRow =
|
|
1867
|
-
(_2 = statefulTableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
|
|
1868
|
-
table.setGlobalFilterFn =
|
|
1869
|
-
(_3 = statefulTableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
|
|
1870
|
-
table.setHoveredColumn =
|
|
1871
|
-
(_4 = statefulTableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
|
|
1872
|
-
table.setHoveredRow =
|
|
1873
|
-
(_5 = statefulTableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
|
|
1874
|
-
table.setIsFullScreen =
|
|
1875
|
-
(_6 = statefulTableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
|
|
1876
|
-
table.setShowAlertBanner =
|
|
1877
|
-
(_7 = statefulTableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
|
|
1878
|
-
table.setShowColumnFilters =
|
|
1879
|
-
(_8 = statefulTableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
|
|
1880
|
-
table.setShowGlobalFilter =
|
|
1881
|
-
(_9 = statefulTableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
|
|
1882
|
-
table.setShowToolbarDropZone =
|
|
1883
|
-
(_10 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
|
|
1884
|
-
useMRT_Effects(table);
|
|
1885
|
-
return table;
|
|
1886
|
-
};
|
|
1887
|
-
|
|
1888
|
-
const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
|
|
1889
|
-
|
|
1890
|
-
const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
1891
|
-
const newIndexes = reactVirtual.defaultRangeExtractor(range);
|
|
1892
|
-
if (draggingIndex === undefined)
|
|
1893
|
-
return newIndexes;
|
|
1894
|
-
if (draggingIndex >= 0 &&
|
|
1895
|
-
draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
|
|
1896
|
-
newIndexes.unshift(draggingIndex);
|
|
1897
|
-
}
|
|
1898
|
-
if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
|
|
1899
|
-
newIndexes.push(draggingIndex);
|
|
1900
|
-
}
|
|
1901
|
-
return newIndexes;
|
|
1902
|
-
};
|
|
1903
|
-
|
|
1904
|
-
const useMRT_ColumnVirtualizer = (table) => {
|
|
1905
|
-
var _a, _b, _c, _d;
|
|
1906
|
-
const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
|
|
1907
|
-
const { columnPinning, columnVisibility, draggingColumn } = getState();
|
|
1908
|
-
if (!enableColumnVirtualization)
|
|
1909
|
-
return undefined;
|
|
1910
|
-
const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
|
|
1911
|
-
table,
|
|
1912
|
-
});
|
|
1913
|
-
const visibleColumns = table.getVisibleLeafColumns();
|
|
1914
|
-
const [leftPinnedIndexes, rightPinnedIndexes] = react.useMemo(() => enableColumnPinning
|
|
1915
|
-
? [
|
|
1916
|
-
table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
|
|
1917
|
-
table
|
|
1918
|
-
.getRightVisibleLeafColumns()
|
|
1919
|
-
.map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
|
|
1920
|
-
.sort((a, b) => a - b),
|
|
1921
|
-
]
|
|
1922
|
-
: [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
|
|
1923
|
-
const numPinnedLeft = leftPinnedIndexes.length;
|
|
1924
|
-
const numPinnedRight = rightPinnedIndexes.length;
|
|
1925
|
-
const draggingColumnIndex = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
|
|
1926
|
-
? visibleColumns.findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
|
|
1927
|
-
: undefined, [draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id]);
|
|
1928
|
-
const columnVirtualizer = reactVirtual.useVirtualizer(Object.assign({ count: visibleColumns.length, estimateSize: (index) => visibleColumns[index].getSize(), getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: react.useCallback((range) => {
|
|
1929
|
-
const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
|
|
1930
|
-
if (!numPinnedLeft && !numPinnedRight) {
|
|
1931
|
-
return newIndexes;
|
|
1932
|
-
}
|
|
1933
|
-
return [
|
|
1934
|
-
...new Set([
|
|
1935
|
-
...leftPinnedIndexes,
|
|
1936
|
-
...newIndexes,
|
|
1937
|
-
...rightPinnedIndexes,
|
|
1938
|
-
]),
|
|
1939
|
-
];
|
|
1940
|
-
}, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps));
|
|
1941
|
-
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
1942
|
-
columnVirtualizer.virtualColumns = virtualColumns;
|
|
1943
|
-
const numColumns = virtualColumns.length;
|
|
1944
|
-
if (numColumns) {
|
|
1945
|
-
const totalSize = columnVirtualizer.getTotalSize();
|
|
1946
|
-
const leftNonPinnedStart = ((_a = virtualColumns[numPinnedLeft]) === null || _a === void 0 ? void 0 : _a.start) || 0;
|
|
1947
|
-
const leftNonPinnedEnd = ((_b = virtualColumns[leftPinnedIndexes.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0;
|
|
1948
|
-
const rightNonPinnedStart = ((_c = virtualColumns[numColumns - numPinnedRight]) === null || _c === void 0 ? void 0 : _c.start) || 0;
|
|
1949
|
-
const rightNonPinnedEnd = ((_d = virtualColumns[numColumns - numPinnedRight - 1]) === null || _d === void 0 ? void 0 : _d.end) || 0;
|
|
1950
|
-
columnVirtualizer.virtualPaddingLeft =
|
|
1951
|
-
leftNonPinnedStart - leftNonPinnedEnd;
|
|
1952
|
-
columnVirtualizer.virtualPaddingRight =
|
|
1953
|
-
totalSize -
|
|
1954
|
-
rightNonPinnedEnd -
|
|
1955
|
-
(numPinnedRight ? totalSize - rightNonPinnedStart : 0);
|
|
1956
|
-
}
|
|
1957
|
-
if (columnVirtualizerInstanceRef) {
|
|
1958
|
-
//@ts-ignore
|
|
1959
|
-
columnVirtualizerInstanceRef.current = columnVirtualizer;
|
|
1960
|
-
}
|
|
1961
|
-
return columnVirtualizer;
|
|
1962
|
-
};
|
|
1963
|
-
|
|
1964
|
-
const useMRT_RowVirtualizer = (table, rows) => {
|
|
1965
|
-
var _a;
|
|
1966
|
-
const { getRowModel, getState, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
|
|
1967
|
-
const { density, draggingRow, expanded } = getState();
|
|
1968
|
-
if (!enableRowVirtualization)
|
|
1969
|
-
return undefined;
|
|
1970
|
-
const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
|
|
1971
|
-
table,
|
|
1972
|
-
});
|
|
1973
|
-
const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length;
|
|
1974
|
-
const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
|
|
1975
|
-
const rowVirtualizer = reactVirtual.useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
|
|
1976
|
-
? expanded === true
|
|
1977
|
-
? 100
|
|
1978
|
-
: 0
|
|
1979
|
-
: normalRowHeight, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
|
|
1980
|
-
navigator.userAgent.indexOf('Firefox') === -1
|
|
1981
|
-
? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
|
|
1982
|
-
: undefined, overscan: 4, rangeExtractor: react.useCallback((range) => {
|
|
1983
|
-
var _a;
|
|
1984
|
-
return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
|
|
1985
|
-
}, [draggingRow]) }, rowVirtualizerProps));
|
|
1986
|
-
rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
|
|
1987
|
-
if (rowVirtualizerInstanceRef) {
|
|
1988
|
-
//@ts-ignore
|
|
1989
|
-
rowVirtualizerInstanceRef.current = rowVirtualizer;
|
|
1990
|
-
}
|
|
1991
|
-
return rowVirtualizer;
|
|
1992
|
-
};
|
|
1993
|
-
|
|
1994
|
-
const useMRT_Rows = (table) => {
|
|
1995
|
-
const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
|
|
1996
|
-
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
|
|
1997
|
-
const rows = react.useMemo(() => getMRT_Rows(table), [
|
|
1998
|
-
creatingRow,
|
|
1999
|
-
data,
|
|
2000
|
-
enableGlobalFilterRankedResults,
|
|
2001
|
-
expanded,
|
|
2002
|
-
getRowModel().rows,
|
|
2003
|
-
globalFilter,
|
|
2004
|
-
pagination.pageIndex,
|
|
2005
|
-
pagination.pageSize,
|
|
2006
|
-
positionCreatingRow,
|
|
2007
|
-
rowPinning,
|
|
2008
|
-
sorting,
|
|
2009
|
-
]);
|
|
2010
|
-
return rows;
|
|
2011
|
-
};
|
|
2012
|
-
|
|
2013
|
-
const allowedTypes = ['string', 'number'];
|
|
2014
|
-
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
|
|
2015
|
-
var _a, _b, _c;
|
|
2016
|
-
const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
|
|
2017
|
-
const { column, row } = cell;
|
|
2018
|
-
const { columnDef } = column;
|
|
2019
|
-
const { globalFilter, globalFilterFn } = getState();
|
|
2020
|
-
const filterValue = column.getFilterValue();
|
|
2021
|
-
let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
|
|
2022
|
-
? columnDef.AggregatedCell({
|
|
2023
|
-
cell,
|
|
2024
|
-
column,
|
|
2025
|
-
row,
|
|
2026
|
-
table,
|
|
2027
|
-
staticColumnIndex,
|
|
2028
|
-
staticRowIndex,
|
|
2029
|
-
})
|
|
2030
|
-
: row.getIsGrouped() && !cell.getIsGrouped()
|
|
2031
|
-
? null
|
|
2032
|
-
: cell.getIsGrouped() && columnDef.GroupedCell
|
|
2033
|
-
? columnDef.GroupedCell({
|
|
2034
|
-
cell,
|
|
2035
|
-
column,
|
|
2036
|
-
row,
|
|
2037
|
-
table,
|
|
2038
|
-
staticColumnIndex,
|
|
2039
|
-
staticRowIndex,
|
|
2040
|
-
})
|
|
2041
|
-
: undefined;
|
|
2042
|
-
const isGroupedValue = renderedCellValue !== undefined;
|
|
2043
|
-
if (!isGroupedValue) {
|
|
2044
|
-
renderedCellValue = cell.renderValue();
|
|
2045
|
-
}
|
|
2046
|
-
if (enableFilterMatchHighlighting &&
|
|
2047
|
-
columnDef.enableFilterMatchHighlighting !== false &&
|
|
2048
|
-
String(renderedCellValue) &&
|
|
2049
|
-
allowedTypes.includes(typeof renderedCellValue) &&
|
|
2050
|
-
((filterValue &&
|
|
2051
|
-
allowedTypes.includes(typeof filterValue) &&
|
|
2052
|
-
['autocomplete', 'text'].includes(columnDef.filterVariant)) ||
|
|
2053
|
-
(globalFilter &&
|
|
2054
|
-
allowedTypes.includes(typeof globalFilter) &&
|
|
2055
|
-
column.getCanGlobalFilter()))) {
|
|
2056
|
-
const chunks = highlightWords__default["default"] === null || highlightWords__default["default"] === void 0 ? void 0 : highlightWords__default["default"]({
|
|
2057
|
-
matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
|
|
2058
|
-
query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
|
|
2059
|
-
text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
|
|
2060
|
-
});
|
|
2061
|
-
if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
|
|
2062
|
-
renderedCellValue = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], { "aria-hidden": "true", component: "span", sx: match
|
|
2063
|
-
? {
|
|
2064
|
-
backgroundColor: matchHighlightColor,
|
|
2065
|
-
borderRadius: '2px',
|
|
2066
|
-
color: (theme) => theme.palette.mode === 'dark'
|
|
2067
|
-
? theme.palette.common.white
|
|
2068
|
-
: theme.palette.common.black,
|
|
2069
|
-
padding: '2px 1px',
|
|
2070
|
-
}
|
|
2071
|
-
: undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
|
|
2072
|
-
}
|
|
2073
|
-
}
|
|
2074
|
-
if (columnDef.Cell && !isGroupedValue) {
|
|
2075
|
-
renderedCellValue = columnDef.Cell({
|
|
2076
|
-
cell,
|
|
2077
|
-
column,
|
|
2078
|
-
renderedCellValue,
|
|
2079
|
-
row,
|
|
2080
|
-
rowRef,
|
|
2081
|
-
staticColumnIndex,
|
|
2082
|
-
staticRowIndex,
|
|
2083
|
-
table,
|
|
2084
|
-
});
|
|
2085
|
-
}
|
|
2086
|
-
return renderedCellValue;
|
|
2087
|
-
};
|
|
2088
|
-
|
|
2089
|
-
const MRT_CopyButton = (_a) => {
|
|
2090
|
-
var _b;
|
|
2091
|
-
var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
|
|
2092
|
-
const { options: { localization, muiCopyButtonProps }, } = table;
|
|
2093
|
-
const { column, row } = cell;
|
|
2094
|
-
const { columnDef } = column;
|
|
2095
|
-
const [copied, setCopied] = react.useState(false);
|
|
2096
|
-
const handleCopy = (event, text) => {
|
|
2097
|
-
event.stopPropagation();
|
|
2098
|
-
navigator.clipboard.writeText(text);
|
|
2099
|
-
setCopied(true);
|
|
2100
|
-
setTimeout(() => setCopied(false), 4000);
|
|
2101
|
-
};
|
|
2102
|
-
const buttonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
|
|
2103
|
-
cell,
|
|
2104
|
-
column,
|
|
2105
|
-
row,
|
|
2106
|
-
table,
|
|
2107
|
-
})), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
|
|
2108
|
-
cell,
|
|
2109
|
-
column,
|
|
2110
|
-
row,
|
|
2111
|
-
table,
|
|
2112
|
-
})), rest);
|
|
2113
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', py: 0, textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
|
|
2114
|
-
};
|
|
2115
|
-
|
|
2116
|
-
const MRT_EditCellTextField = (_a) => {
|
|
2117
|
-
var _b, _c;
|
|
2118
|
-
var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
|
|
2119
|
-
const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
|
|
2120
|
-
const { column, row } = cell;
|
|
2121
|
-
const { columnDef } = column;
|
|
2122
|
-
const { creatingRow, editingRow } = getState();
|
|
2123
|
-
const { editSelectOptions, editVariant } = columnDef;
|
|
2124
|
-
const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
|
|
2125
|
-
const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
|
|
2126
|
-
const [value, setValue] = react.useState(() => cell.getValue());
|
|
2127
|
-
const [completesComposition, setCompletesComposition] = react.useState(true);
|
|
2128
|
-
const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
|
|
2129
|
-
cell,
|
|
2130
|
-
column,
|
|
2131
|
-
row,
|
|
2132
|
-
table,
|
|
2133
|
-
})), parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
|
|
2134
|
-
cell,
|
|
2135
|
-
column,
|
|
2136
|
-
row,
|
|
2137
|
-
table,
|
|
2138
|
-
})), rest);
|
|
2139
|
-
const selectOptions = parseFromValuesOrFunc(editSelectOptions, {
|
|
2140
|
-
cell,
|
|
2141
|
-
column,
|
|
2142
|
-
row,
|
|
2143
|
-
table,
|
|
2144
|
-
});
|
|
2145
|
-
const isSelectEdit = editVariant === 'select' || (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select);
|
|
2146
|
-
const saveInputValueToRowCache = (newValue) => {
|
|
2147
|
-
//@ts-ignore
|
|
2148
|
-
row._valuesCache[column.id] = newValue;
|
|
2149
|
-
if (isCreating) {
|
|
2150
|
-
setCreatingRow(row);
|
|
2151
|
-
}
|
|
2152
|
-
else if (isEditing) {
|
|
2153
|
-
setEditingRow(row);
|
|
2154
|
-
}
|
|
2155
|
-
};
|
|
2156
|
-
const handleChange = (event) => {
|
|
2157
|
-
var _a;
|
|
2158
|
-
(_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
2159
|
-
setValue(event.target.value);
|
|
2160
|
-
if (isSelectEdit) {
|
|
2161
|
-
saveInputValueToRowCache(event.target.value);
|
|
2162
|
-
}
|
|
2163
|
-
};
|
|
2164
|
-
const handleBlur = (event) => {
|
|
2165
|
-
var _a;
|
|
2166
|
-
(_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
2167
|
-
saveInputValueToRowCache(value);
|
|
2168
|
-
setEditingCell(null);
|
|
2169
|
-
};
|
|
2170
|
-
const handleEnterKeyDown = (event) => {
|
|
2171
|
-
var _a, _b, _c;
|
|
2172
|
-
(_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
2173
|
-
if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
|
|
2174
|
-
(_c = (_b = editInputRefs.current) === null || _b === void 0 ? void 0 : _b[column.id]) === null || _c === void 0 ? void 0 : _c.blur();
|
|
2175
|
-
}
|
|
2176
|
-
};
|
|
2177
|
-
if (columnDef.Edit) {
|
|
2178
|
-
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
|
|
2179
|
-
}
|
|
2180
|
-
return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
|
|
2181
|
-
if (inputRef) {
|
|
2182
|
-
editInputRefs.current[column.id] = inputRef;
|
|
2183
|
-
if (textFieldProps.inputRef) {
|
|
2184
|
-
textFieldProps.inputRef = inputRef;
|
|
2185
|
-
}
|
|
2186
|
-
}
|
|
2187
|
-
}, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
|
|
2188
|
-
? columnDef.header
|
|
2189
|
-
: undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
|
|
2190
|
-
? columnDef.header
|
|
2191
|
-
: undefined, select: isSelectEdit, size: "small", value: value !== null && value !== void 0 ? value : '', variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign(Object.assign({}, (textFieldProps.variant !== 'outlined'
|
|
2192
|
-
? { disableUnderline: editDisplayMode === 'table' }
|
|
2193
|
-
: {})), textFieldProps.InputProps), { sx: (theme) => {
|
|
2194
|
-
var _a;
|
|
2195
|
-
return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
|
|
2196
|
-
} }), SelectProps: Object.assign({ MenuProps: { disableScrollLock: true } }, textFieldProps.SelectProps), inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
|
|
2197
|
-
var _a;
|
|
2198
|
-
e.stopPropagation();
|
|
2199
|
-
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
|
2200
|
-
}, onKeyDown: handleEnterKeyDown, onCompositionStart: () => setCompletesComposition(false), onCompositionEnd: () => setCompletesComposition(true), children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.map((option) => {
|
|
2201
|
-
const { label, value } = getValueAndLabel(option);
|
|
2202
|
-
return (jsxRuntime.jsx(MenuItem__default["default"], { sx: {
|
|
2203
|
-
alignItems: 'center',
|
|
2204
|
-
display: 'flex',
|
|
2205
|
-
gap: '0.5rem',
|
|
2206
|
-
m: 0,
|
|
2207
|
-
}, value: value, children: label }, value));
|
|
2208
|
-
}) })));
|
|
2209
|
-
};
|
|
2210
|
-
|
|
2211
|
-
const MRT_TableBodyCell = (_a) => {
|
|
2212
|
-
var _b, _c, _d, _e, _f;
|
|
2213
|
-
var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
|
|
2214
|
-
const theme = styles.useTheme();
|
|
2215
|
-
const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
|
|
2216
|
-
const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
|
2217
|
-
const { column, row } = cell;
|
|
2218
|
-
const { columnDef } = column;
|
|
2219
|
-
const { columnDefType } = columnDef;
|
|
2220
|
-
const args = { cell, column, row, table };
|
|
2221
|
-
const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args)), rest);
|
|
2222
|
-
const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
|
|
2223
|
-
cell,
|
|
2224
|
-
column,
|
|
2225
|
-
row,
|
|
2226
|
-
table,
|
|
2227
|
-
});
|
|
2228
|
-
const [skeletonWidth, setSkeletonWidth] = react.useState(100);
|
|
2229
|
-
react.useEffect(() => {
|
|
2230
|
-
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
|
|
2231
|
-
return;
|
|
2232
|
-
const size = column.getSize();
|
|
2233
|
-
setSkeletonWidth(columnDefType === 'display'
|
|
2234
|
-
? size / 2
|
|
2235
|
-
: Math.round(Math.random() * (size - size / 3) + size / 3));
|
|
2236
|
-
}, [isLoading, showSkeletons]);
|
|
2237
|
-
const draggingBorders = react.useMemo(() => {
|
|
2238
|
-
const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
|
|
2239
|
-
const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
|
|
2240
|
-
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
|
|
2241
|
-
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
|
2242
|
-
const isFirstColumn = column.getIsFirstColumn();
|
|
2243
|
-
const isLastColumn = column.getIsLastColumn();
|
|
2244
|
-
const isLastRow = numRows && staticRowIndex === numRows - 1;
|
|
2245
|
-
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
|
|
2246
|
-
const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
|
|
2247
|
-
const borderStyle = showResizeBorder
|
|
2248
|
-
? `2px solid ${draggingBorderColor} !important`
|
|
2249
|
-
: isDraggingColumn || isDraggingRow
|
|
2250
|
-
? `1px dashed ${theme.palette.grey[500]} !important`
|
|
2251
|
-
: isHoveredColumn || isHoveredRow || isResizingColumn
|
|
2252
|
-
? `2px dashed ${draggingBorderColor} !important`
|
|
2253
|
-
: undefined;
|
|
2254
|
-
if (showResizeBorder) {
|
|
2255
|
-
return columnResizeDirection === 'ltr'
|
|
2256
|
-
? { borderRight: borderStyle }
|
|
2257
|
-
: { borderLeft: borderStyle };
|
|
2258
|
-
}
|
|
2259
|
-
return borderStyle
|
|
2260
|
-
? {
|
|
2261
|
-
borderBottom: isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
|
|
2262
|
-
? borderStyle
|
|
2263
|
-
: undefined,
|
|
2264
|
-
borderLeft: isDraggingColumn ||
|
|
2265
|
-
isHoveredColumn ||
|
|
2266
|
-
((isDraggingRow || isHoveredRow) && isFirstColumn)
|
|
2267
|
-
? borderStyle
|
|
2268
|
-
: undefined,
|
|
2269
|
-
borderRight: isDraggingColumn ||
|
|
2270
|
-
isHoveredColumn ||
|
|
2271
|
-
((isDraggingRow || isHoveredRow) && isLastColumn)
|
|
2272
|
-
? borderStyle
|
|
2273
|
-
: undefined,
|
|
2274
|
-
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
|
|
2275
|
-
}
|
|
2276
|
-
: undefined;
|
|
2277
|
-
}, [
|
|
2278
|
-
columnSizingInfo.isResizingColumn,
|
|
2279
|
-
draggingColumn,
|
|
2280
|
-
draggingRow,
|
|
2281
|
-
hoveredColumn,
|
|
2282
|
-
hoveredRow,
|
|
2283
|
-
staticRowIndex,
|
|
2284
|
-
]);
|
|
2285
|
-
const isColumnPinned = enableColumnPinning &&
|
|
2286
|
-
columnDef.columnDefType !== 'group' &&
|
|
2287
|
-
column.getIsPinned();
|
|
2288
|
-
const isEditable = isCellEditable({ cell, table });
|
|
2289
|
-
const isEditing = isEditable &&
|
|
2290
|
-
!['custom', 'modal'].includes(editDisplayMode) &&
|
|
2291
|
-
(editDisplayMode === 'table' ||
|
|
2292
|
-
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
|
|
2293
|
-
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
|
|
2294
|
-
!row.getIsGrouped();
|
|
2295
|
-
const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
|
|
2296
|
-
const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
|
|
2297
|
-
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
|
|
2298
|
-
!['context-menu', false].includes(
|
|
2299
|
-
// @ts-ignore
|
|
2300
|
-
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
|
|
2301
|
-
const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
|
|
2302
|
-
const cellValueProps = {
|
|
2303
|
-
cell,
|
|
2304
|
-
table,
|
|
2305
|
-
staticColumnIndex,
|
|
2306
|
-
staticRowIndex,
|
|
2307
|
-
};
|
|
2308
|
-
const handleDoubleClick = (event) => {
|
|
2309
|
-
var _a;
|
|
2310
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
2311
|
-
openEditingCell({ cell, table });
|
|
2312
|
-
};
|
|
2313
|
-
const handleDragEnter = (e) => {
|
|
2314
|
-
var _a;
|
|
2315
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
|
|
2316
|
-
if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
|
|
2317
|
-
setHoveredColumn(null);
|
|
2318
|
-
}
|
|
2319
|
-
if (enableColumnOrdering && draggingColumn) {
|
|
2320
|
-
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
|
2321
|
-
}
|
|
2322
|
-
};
|
|
2323
|
-
const handleDragOver = (e) => {
|
|
2324
|
-
if (columnDef.enableColumnOrdering !== false) {
|
|
2325
|
-
e.preventDefault();
|
|
2326
|
-
}
|
|
2327
|
-
};
|
|
2328
|
-
const handleContextMenu = (e) => {
|
|
2329
|
-
var _a;
|
|
2330
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
|
|
2331
|
-
if (isRightClickable) {
|
|
2332
|
-
e.preventDefault();
|
|
2333
|
-
table.setActionCell(cell);
|
|
2334
|
-
table.refs.actionCellRef.current = e.currentTarget;
|
|
2335
|
-
}
|
|
2336
|
-
};
|
|
2337
|
-
const handleKeyDown = (event) => {
|
|
2338
|
-
var _a;
|
|
2339
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
2340
|
-
cellKeyboardShortcuts({
|
|
2341
|
-
cell,
|
|
2342
|
-
cellValue: cell.getValue(),
|
|
2343
|
-
event,
|
|
2344
|
-
table,
|
|
2345
|
-
});
|
|
2346
|
-
};
|
|
2347
|
-
return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
|
|
2348
|
-
outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
|
|
2349
|
-
(editDisplayMode === 'cell' && isEditable) ||
|
|
2350
|
-
(editDisplayMode === 'table' && (isCreating || isEditing))
|
|
2351
|
-
? `1px solid ${theme.palette.grey[500]}`
|
|
2352
|
-
: undefined,
|
|
2353
|
-
textOverflow: 'clip',
|
|
2354
|
-
}, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isRightClickable
|
|
2355
|
-
? 'context-menu'
|
|
2356
|
-
: isEditable && editDisplayMode === 'cell'
|
|
2357
|
-
? 'pointer'
|
|
2358
|
-
: 'inherit', outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id
|
|
2359
|
-
? `1px solid ${theme.palette.grey[500]}`
|
|
2360
|
-
: undefined, outlineOffset: '-1px', overflow: 'hidden', p: density === 'compact'
|
|
2361
|
-
? columnDefType === 'display'
|
|
2362
|
-
? '0 0.5rem'
|
|
2363
|
-
: '0.5rem'
|
|
2364
|
-
: density === 'comfortable'
|
|
2365
|
-
? columnDefType === 'display'
|
|
2366
|
-
? '0.5rem 0.75rem'
|
|
2367
|
-
: '1rem'
|
|
2368
|
-
: columnDefType === 'display'
|
|
2369
|
-
? '1rem 1.25rem'
|
|
2370
|
-
: '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal' }, getCommonMRTCellStyles({
|
|
2371
|
-
column,
|
|
2372
|
-
table,
|
|
2373
|
-
tableCellProps,
|
|
2374
|
-
theme,
|
|
2375
|
-
})), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? (((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null)) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
|
|
2376
|
-
(['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
|
|
2377
|
-
!row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
|
|
2378
|
-
cell,
|
|
2379
|
-
column,
|
|
2380
|
-
renderedCellValue: cell.renderValue(),
|
|
2381
|
-
row,
|
|
2382
|
-
rowRef,
|
|
2383
|
-
staticColumnIndex,
|
|
2384
|
-
staticRowIndex,
|
|
2385
|
-
table,
|
|
2386
|
-
})) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
|
|
2387
|
-
};
|
|
2388
|
-
const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
|
|
2389
|
-
|
|
2390
|
-
const MRT_TableDetailPanel = (_a) => {
|
|
2391
|
-
var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
|
2392
|
-
const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
|
|
2393
|
-
const { isLoading } = getState();
|
|
2394
|
-
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
|
2395
|
-
isDetailPanel: true,
|
|
2396
|
-
row,
|
|
2397
|
-
staticRowIndex,
|
|
2398
|
-
table,
|
|
2399
|
-
});
|
|
2400
|
-
const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiDetailPanelProps, {
|
|
2401
|
-
row,
|
|
2402
|
-
table,
|
|
2403
|
-
})), rest);
|
|
2404
|
-
const DetailPanel = !isLoading && (renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
|
|
2405
|
-
return (jsxRuntime.jsx(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", "data-index": renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex, ref: (node) => {
|
|
2406
|
-
var _a;
|
|
2407
|
-
if (node) {
|
|
2408
|
-
(_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer, node);
|
|
2409
|
-
}
|
|
2410
|
-
} }, tableRowProps, { sx: (theme) => {
|
|
2411
|
-
var _a, _b;
|
|
2412
|
-
return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: virtualRow ? 'absolute' : undefined, top: virtualRow
|
|
2413
|
-
? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
|
|
2414
|
-
: undefined, transform: virtualRow
|
|
2415
|
-
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
|
2416
|
-
: undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
|
2417
|
-
}, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !virtualRow ? 'all 150ms ease-in-out' : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: virtualRow ? (row.getIsExpanded() && DetailPanel) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
|
|
2418
|
-
};
|
|
2419
|
-
|
|
2420
|
-
const MRT_TableBodyRow = (_a) => {
|
|
2421
|
-
var _b, _c, _d, _f;
|
|
2422
|
-
var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
|
|
2423
|
-
const theme = styles.useTheme();
|
|
2424
|
-
const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
|
|
2425
|
-
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
|
|
2426
|
-
const visibleCells = row.getVisibleCells();
|
|
2427
|
-
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
|
2428
|
-
const isRowSelected = getIsRowSelected({ row, table });
|
|
2429
|
-
const isRowPinned = enableRowPinning && row.getIsPinned();
|
|
2430
|
-
const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
|
|
2431
|
-
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
|
2432
|
-
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyRowProps, {
|
|
2433
|
-
row,
|
|
2434
|
-
staticRowIndex,
|
|
2435
|
-
table,
|
|
2436
|
-
})), rest);
|
|
2437
|
-
const [bottomPinnedIndex, topPinnedIndex] = react.useMemo(() => {
|
|
2438
|
-
if (!enableRowPinning ||
|
|
2439
|
-
!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
|
|
2440
|
-
!pinnedRowIds ||
|
|
2441
|
-
!row.getIsPinned())
|
|
2442
|
-
return [];
|
|
2443
|
-
return [
|
|
2444
|
-
[...pinnedRowIds].reverse().indexOf(row.id),
|
|
2445
|
-
pinnedRowIds.indexOf(row.id),
|
|
2446
|
-
];
|
|
2447
|
-
}, [pinnedRowIds, rowPinning]);
|
|
2448
|
-
const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
|
|
2449
|
-
((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
|
|
2450
|
-
0;
|
|
2451
|
-
const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
|
|
2452
|
-
const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
|
|
2453
|
-
const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
|
|
2454
|
-
const customRowHeight =
|
|
2455
|
-
// @ts-ignore
|
|
2456
|
-
parseInt((_f = (_d = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _d === void 0 ? void 0 : _d.height) !== null && _f !== void 0 ? _f : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
|
|
2457
|
-
const rowHeight = customRowHeight || defaultRowHeight;
|
|
2458
|
-
const handleDragEnter = (_e) => {
|
|
2459
|
-
if (enableRowOrdering && draggingRow) {
|
|
2460
|
-
setHoveredRow(row);
|
|
2461
|
-
}
|
|
2462
|
-
};
|
|
2463
|
-
const handleDragOver = (e) => {
|
|
2464
|
-
e.preventDefault();
|
|
2465
|
-
};
|
|
2466
|
-
const rowRef = react.useRef(null);
|
|
2467
|
-
const cellHighlightColor = isRowSelected
|
|
2468
|
-
? selectedRowBackgroundColor
|
|
2469
|
-
: isRowPinned
|
|
2470
|
-
? pinnedRowBackgroundColor
|
|
2471
|
-
: undefined;
|
|
2472
|
-
const cellHighlightColorHover = (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
|
|
2473
|
-
? isRowSelected
|
|
2474
|
-
? cellHighlightColor
|
|
2475
|
-
: theme.palette.mode === 'dark'
|
|
2476
|
-
? `${styles.lighten(baseBackgroundColor, 0.3)}`
|
|
2477
|
-
: `${styles.darken(baseBackgroundColor, 0.3)}`
|
|
2478
|
-
: undefined;
|
|
2479
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
|
2480
|
-
if (node) {
|
|
2481
|
-
rowRef.current = node;
|
|
2482
|
-
rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
|
|
2483
|
-
}
|
|
2484
|
-
}, selected: isRowSelected }, tableRowProps, { style: Object.assign({ transform: virtualRow
|
|
2485
|
-
? `translateY(${virtualRow.start}px)`
|
|
2486
|
-
: undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td:after': cellHighlightColorHover
|
|
2487
|
-
? Object.assign({ backgroundColor: styles.alpha(cellHighlightColorHover, 0.3) }, commonCellBeforeAfterStyles) : undefined, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
|
|
2488
|
-
? `${bottomPinnedIndex * rowHeight +
|
|
2489
|
-
(enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
|
|
2490
|
-
: undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
|
|
2491
|
-
? 'absolute'
|
|
2492
|
-
: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
|
|
2493
|
-
? 'sticky'
|
|
2494
|
-
: 'relative', td: Object.assign({}, getCommonPinnedCellStyles({ table, theme })), 'td:after': cellHighlightColor
|
|
2495
|
-
? Object.assign({ backgroundColor: cellHighlightColor }, commonCellBeforeAfterStyles) : undefined, top: virtualRow
|
|
2496
|
-
? 0
|
|
2497
|
-
: topPinnedIndex !== undefined && isRowPinned
|
|
2498
|
-
? `${topPinnedIndex * rowHeight +
|
|
2499
|
-
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
|
|
2500
|
-
: undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned ? 2 : 0 }, sx)), children: [virtualPaddingLeft ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
|
|
2501
|
-
let cell = cellOrVirtualCell;
|
|
2502
|
-
if (columnVirtualizer) {
|
|
2503
|
-
staticColumnIndex = cellOrVirtualCell.index;
|
|
2504
|
-
cell = visibleCells[staticColumnIndex];
|
|
2505
|
-
}
|
|
2506
|
-
const props = {
|
|
2507
|
-
cell,
|
|
2508
|
-
numRows,
|
|
2509
|
-
rowRef,
|
|
2510
|
-
staticColumnIndex,
|
|
2511
|
-
staticRowIndex,
|
|
2512
|
-
table,
|
|
2513
|
-
};
|
|
2514
|
-
const key = `${cell.id}-${staticRowIndex}`;
|
|
2515
|
-
return cell ? (memoMode === 'cells' &&
|
|
2516
|
-
cell.column.columnDef.columnDefType === 'data' &&
|
|
2517
|
-
!draggingColumn &&
|
|
2518
|
-
!draggingRow &&
|
|
2519
|
-
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
|
|
2520
|
-
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), key)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), key))) : null;
|
|
2521
|
-
}), virtualPaddingRight ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsxRuntime.jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
|
|
2522
|
-
};
|
|
2523
|
-
const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
|
|
2524
|
-
|
|
2525
|
-
const MRT_TableBody = (_a) => {
|
|
2526
|
-
var _b, _c, _d, _e, _f, _g;
|
|
2527
|
-
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
|
2528
|
-
const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
|
|
2529
|
-
const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
|
|
2530
|
-
const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
|
|
2531
|
-
const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
|
|
2532
|
-
((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
|
|
2533
|
-
0;
|
|
2534
|
-
const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
|
|
2535
|
-
const pinnedRowIds = react.useMemo(() => {
|
|
2536
|
-
var _a, _b;
|
|
2537
|
-
if (!((_a = rowPinning.bottom) === null || _a === void 0 ? void 0 : _a.length) && !((_b = rowPinning.top) === null || _b === void 0 ? void 0 : _b.length))
|
|
2538
|
-
return [];
|
|
2539
|
-
return getRowModel()
|
|
2540
|
-
.rows.filter((row) => row.getIsPinned())
|
|
2541
|
-
.map((r) => r.id);
|
|
2542
|
-
}, [rowPinning, getRowModel().rows]);
|
|
2543
|
-
const rows = useMRT_Rows(table);
|
|
2544
|
-
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
|
|
2545
|
-
const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
|
|
2546
|
-
const commonRowProps = {
|
|
2547
|
-
columnVirtualizer,
|
|
2548
|
-
numRows: rows.length,
|
|
2549
|
-
table,
|
|
2550
|
-
};
|
|
2551
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
|
|
2552
|
-
getIsSomeRowsPinned('top') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, staticRowIndex) => {
|
|
2553
|
-
const props = Object.assign(Object.assign({}, commonRowProps), { row,
|
|
2554
|
-
staticRowIndex });
|
|
2555
|
-
return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
|
2556
|
-
}) }))), jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
|
|
2557
|
-
? `${rowVirtualizer.getTotalSize()}px`
|
|
2558
|
-
: undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
|
|
2559
|
-
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
|
2560
|
-
}, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
|
|
2561
|
-
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
|
2562
|
-
}, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsxRuntime.jsx(Typography__default["default"], { sx: {
|
|
2563
|
-
color: 'text.secondary',
|
|
2564
|
-
fontStyle: 'italic',
|
|
2565
|
-
maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 360}px)`,
|
|
2566
|
-
py: '2rem',
|
|
2567
|
-
textAlign: 'center',
|
|
2568
|
-
width: '100%',
|
|
2569
|
-
}, children: globalFilter || columnFilters.length
|
|
2570
|
-
? localization.noResultsFound
|
|
2571
|
-
: localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, staticRowIndex) => {
|
|
2572
|
-
let row = rowOrVirtualRow;
|
|
2573
|
-
if (rowVirtualizer) {
|
|
2574
|
-
if (renderDetailPanel) {
|
|
2575
|
-
if (rowOrVirtualRow.index % 2 === 1) {
|
|
2576
|
-
return null;
|
|
2577
|
-
}
|
|
2578
|
-
else {
|
|
2579
|
-
staticRowIndex = rowOrVirtualRow.index / 2;
|
|
2580
|
-
}
|
|
2581
|
-
}
|
|
2582
|
-
else {
|
|
2583
|
-
staticRowIndex = rowOrVirtualRow.index;
|
|
2584
|
-
}
|
|
2585
|
-
row = rows[staticRowIndex];
|
|
2586
|
-
}
|
|
2587
|
-
const props = Object.assign(Object.assign({}, commonRowProps), { pinnedRowIds,
|
|
2588
|
-
row,
|
|
2589
|
-
rowVirtualizer,
|
|
2590
|
-
staticRowIndex, virtualRow: rowVirtualizer
|
|
2591
|
-
? rowOrVirtualRow
|
|
2592
|
-
: undefined });
|
|
2593
|
-
const key = `${row.id}-${row.index}`;
|
|
2594
|
-
return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), key));
|
|
2595
|
-
}) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
|
|
2596
|
-
getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, staticRowIndex) => {
|
|
2597
|
-
const props = Object.assign(Object.assign({}, commonRowProps), { row,
|
|
2598
|
-
staticRowIndex });
|
|
2599
|
-
return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
|
2600
|
-
}) })))] }));
|
|
2601
|
-
};
|
|
2602
|
-
const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
2603
|
-
|
|
2604
|
-
const MRT_TableFooterCell = (_a) => {
|
|
2605
|
-
var _b, _c, _d;
|
|
2606
|
-
var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
|
|
2607
|
-
const theme = styles.useTheme();
|
|
2608
|
-
const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableKeyboardShortcuts, }, } = table;
|
|
2609
|
-
const { density } = getState();
|
|
2610
|
-
const { column } = footer;
|
|
2611
|
-
const { columnDef } = column;
|
|
2612
|
-
const { columnDefType } = columnDef;
|
|
2613
|
-
const isColumnPinned = enableColumnPinning &&
|
|
2614
|
-
columnDef.columnDefType !== 'group' &&
|
|
2615
|
-
column.getIsPinned();
|
|
2616
|
-
const args = { column, table };
|
|
2617
|
-
const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
|
|
2618
|
-
const handleKeyDown = (event) => {
|
|
2619
|
-
var _a;
|
|
2620
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
2621
|
-
cellKeyboardShortcuts({
|
|
2622
|
-
event,
|
|
2623
|
-
cellValue: footer.column.columnDef.footer,
|
|
2624
|
-
table,
|
|
2625
|
-
});
|
|
2626
|
-
};
|
|
2627
|
-
return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
|
|
2628
|
-
? 'center'
|
|
2629
|
-
: theme.direction === 'rtl'
|
|
2630
|
-
? 'right'
|
|
2631
|
-
: 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined, variant: "footer" }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
|
|
2632
|
-
? '0.5rem'
|
|
2633
|
-
: density === 'comfortable'
|
|
2634
|
-
? '1rem'
|
|
2635
|
-
: '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
|
|
2636
|
-
column,
|
|
2637
|
-
header: footer,
|
|
2638
|
-
table,
|
|
2639
|
-
tableCellProps,
|
|
2640
|
-
theme,
|
|
2641
|
-
})), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
|
|
2642
|
-
? null
|
|
2643
|
-
: ((_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
|
|
2644
|
-
column,
|
|
2645
|
-
footer,
|
|
2646
|
-
table,
|
|
2647
|
-
})) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null)) })));
|
|
2648
|
-
};
|
|
2649
|
-
|
|
2650
|
-
const MRT_TableFooterRow = (_a) => {
|
|
2651
|
-
var _b;
|
|
2652
|
-
var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
|
|
2653
|
-
const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
|
|
2654
|
-
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
|
2655
|
-
// if no content in row, skip row
|
|
2656
|
-
if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
|
|
2657
|
-
!!header.column.columnDef.footer) ||
|
|
2658
|
-
header.column.columnDef.Footer))) {
|
|
2659
|
-
return null;
|
|
2660
|
-
}
|
|
2661
|
-
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
|
|
2662
|
-
footerGroup,
|
|
2663
|
-
table,
|
|
2664
|
-
})), rest);
|
|
2665
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
|
|
2666
|
-
let footer = footerOrVirtualFooter;
|
|
2667
|
-
if (columnVirtualizer) {
|
|
2668
|
-
staticColumnIndex = footerOrVirtualFooter
|
|
2669
|
-
.index;
|
|
2670
|
-
footer = footerGroup.headers[staticColumnIndex];
|
|
2671
|
-
}
|
|
2672
|
-
return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, staticColumnIndex: staticColumnIndex, table: table }, footer.id)) : null;
|
|
2673
|
-
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
|
2674
|
-
};
|
|
2675
|
-
|
|
2676
|
-
const MRT_TableFooter = (_a) => {
|
|
2677
|
-
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
|
2678
|
-
const { getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
|
|
2679
|
-
const { isFullScreen } = getState();
|
|
2680
|
-
const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
|
|
2681
|
-
table,
|
|
2682
|
-
})), rest);
|
|
2683
|
-
const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
|
|
2684
|
-
const footerGroups = table.getFooterGroups();
|
|
2685
|
-
//if no footer cells at all, skip footer
|
|
2686
|
-
if (!footerGroups.some((footerGroup) => {
|
|
2687
|
-
var _a;
|
|
2688
|
-
return (_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
|
|
2689
|
-
!!header.column.columnDef.footer) ||
|
|
2690
|
-
header.column.columnDef.Footer);
|
|
2691
|
-
})) {
|
|
2692
|
-
return null;
|
|
2693
|
-
}
|
|
2694
|
-
return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
|
|
2695
|
-
tableFooterRef.current = ref;
|
|
2696
|
-
if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
|
|
2697
|
-
// @ts-ignore
|
|
2698
|
-
tableFooterProps.ref.current = ref;
|
|
2699
|
-
}
|
|
2700
|
-
}, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
|
|
2701
|
-
? theme.palette.mode === 'light'
|
|
2702
|
-
? `1px solid ${theme.palette.grey[300]}`
|
|
2703
|
-
: `1px solid ${theme.palette.grey[700]}`
|
|
2704
|
-
: undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: footerGroups.map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
|
|
2705
|
-
};
|
|
2706
|
-
|
|
2707
|
-
const mrtFilterOptions = (localization) => [
|
|
2708
|
-
{
|
|
2709
|
-
divider: false,
|
|
2710
|
-
label: localization.filterFuzzy,
|
|
2711
|
-
option: 'fuzzy',
|
|
2712
|
-
symbol: '≈',
|
|
2713
|
-
},
|
|
2714
|
-
{
|
|
2715
|
-
divider: false,
|
|
2716
|
-
label: localization.filterContains,
|
|
2717
|
-
option: 'contains',
|
|
2718
|
-
symbol: '*',
|
|
2719
|
-
},
|
|
2720
|
-
{
|
|
2721
|
-
divider: false,
|
|
2722
|
-
label: localization.filterStartsWith,
|
|
2723
|
-
option: 'startsWith',
|
|
2724
|
-
symbol: 'a',
|
|
2725
|
-
},
|
|
2726
|
-
{
|
|
2727
|
-
divider: true,
|
|
2728
|
-
label: localization.filterEndsWith,
|
|
2729
|
-
option: 'endsWith',
|
|
2730
|
-
symbol: 'z',
|
|
2731
|
-
},
|
|
2732
|
-
{
|
|
2733
|
-
divider: false,
|
|
2734
|
-
label: localization.filterEquals,
|
|
2735
|
-
option: 'equals',
|
|
2736
|
-
symbol: '=',
|
|
2737
|
-
},
|
|
2738
|
-
{
|
|
2739
|
-
divider: true,
|
|
2740
|
-
label: localization.filterNotEquals,
|
|
2741
|
-
option: 'notEquals',
|
|
2742
|
-
symbol: '≠',
|
|
2743
|
-
},
|
|
2744
|
-
{
|
|
2745
|
-
divider: false,
|
|
2746
|
-
label: localization.filterBetween,
|
|
2747
|
-
option: 'between',
|
|
2748
|
-
symbol: '⇿',
|
|
2749
|
-
},
|
|
2750
|
-
{
|
|
2751
|
-
divider: true,
|
|
2752
|
-
label: localization.filterBetweenInclusive,
|
|
2753
|
-
option: 'betweenInclusive',
|
|
2754
|
-
symbol: '⬌',
|
|
2755
|
-
},
|
|
2756
|
-
{
|
|
2757
|
-
divider: false,
|
|
2758
|
-
label: localization.filterGreaterThan,
|
|
2759
|
-
option: 'greaterThan',
|
|
2760
|
-
symbol: '>',
|
|
2761
|
-
},
|
|
2762
|
-
{
|
|
2763
|
-
divider: false,
|
|
2764
|
-
label: localization.filterGreaterThanOrEqualTo,
|
|
2765
|
-
option: 'greaterThanOrEqualTo',
|
|
2766
|
-
symbol: '≥',
|
|
2767
|
-
},
|
|
2768
|
-
{
|
|
2769
|
-
divider: false,
|
|
2770
|
-
label: localization.filterLessThan,
|
|
2771
|
-
option: 'lessThan',
|
|
2772
|
-
symbol: '<',
|
|
2773
|
-
},
|
|
2774
|
-
{
|
|
2775
|
-
divider: true,
|
|
2776
|
-
label: localization.filterLessThanOrEqualTo,
|
|
2777
|
-
option: 'lessThanOrEqualTo',
|
|
2778
|
-
symbol: '≤',
|
|
2779
|
-
},
|
|
2780
|
-
{
|
|
2781
|
-
divider: false,
|
|
2782
|
-
label: localization.filterEmpty,
|
|
2783
|
-
option: 'empty',
|
|
2784
|
-
symbol: '∅',
|
|
2785
|
-
},
|
|
2786
|
-
{
|
|
2787
|
-
divider: false,
|
|
2788
|
-
label: localization.filterNotEmpty,
|
|
2789
|
-
option: 'notEmpty',
|
|
2790
|
-
symbol: '!∅',
|
|
2791
|
-
},
|
|
2792
|
-
];
|
|
2793
|
-
const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
|
|
2794
|
-
const emptyModes = ['empty', 'notEmpty'];
|
|
2795
|
-
const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
|
|
2796
|
-
const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
|
|
2797
|
-
const MRT_FilterOptionMenu = (_a) => {
|
|
2798
|
-
var _b, _c, _d, _e;
|
|
2799
|
-
var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
|
|
2800
|
-
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
|
2801
|
-
const { density, globalFilterFn } = getState();
|
|
2802
|
-
const { column } = header !== null && header !== void 0 ? header : {};
|
|
2803
|
-
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
|
2804
|
-
const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
|
|
2805
|
-
let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
|
|
2806
|
-
if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
|
|
2807
|
-
allowedColumnFilterOptions = [
|
|
2808
|
-
...rangeModes,
|
|
2809
|
-
...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
|
|
2810
|
-
].filter((option) => rangeModes.includes(option));
|
|
2811
|
-
}
|
|
2812
|
-
const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
|
|
2813
|
-
? allowedColumnFilterOptions === undefined ||
|
|
2814
|
-
(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
|
|
2815
|
-
: (!globalFilterModeOptions ||
|
|
2816
|
-
globalFilterModeOptions.includes(filterOption.option)) &&
|
|
2817
|
-
['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
|
|
2818
|
-
const handleSelectFilterMode = (option) => {
|
|
2819
|
-
var _a, _b;
|
|
2820
|
-
const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
|
|
2821
|
-
if (!header || !column) {
|
|
2822
|
-
// global filter mode
|
|
2823
|
-
setGlobalFilterFn(option);
|
|
2824
|
-
}
|
|
2825
|
-
else if (option !== prevFilterMode) {
|
|
2826
|
-
// column filter mode
|
|
2827
|
-
setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
|
|
2828
|
-
// reset filter value and/or perform new filter render
|
|
2829
|
-
if (emptyModes.includes(option)) {
|
|
2830
|
-
// will now be empty/notEmpty filter mode
|
|
2831
|
-
if (currentFilterValue !== ' ' &&
|
|
2832
|
-
!emptyModes.includes(prevFilterMode)) {
|
|
2833
|
-
column.setFilterValue(' ');
|
|
2834
|
-
}
|
|
2835
|
-
else if (currentFilterValue) {
|
|
2836
|
-
column.setFilterValue(currentFilterValue); // perform new filter render
|
|
2837
|
-
}
|
|
2838
|
-
}
|
|
2839
|
-
else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
|
|
2840
|
-
arrModes.includes(option)) {
|
|
2841
|
-
// will now be array filter mode
|
|
2842
|
-
if (currentFilterValue instanceof String ||
|
|
2843
|
-
(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
|
|
2844
|
-
column.setFilterValue([]);
|
|
2845
|
-
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
|
|
2846
|
-
}
|
|
2847
|
-
else if (currentFilterValue) {
|
|
2848
|
-
column.setFilterValue(currentFilterValue); // perform new filter render
|
|
2849
|
-
}
|
|
2850
|
-
}
|
|
2851
|
-
else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
|
|
2852
|
-
rangeModes.includes(option)) {
|
|
2853
|
-
// will now be range filter mode
|
|
2854
|
-
if (!Array.isArray(currentFilterValue) ||
|
|
2855
|
-
(!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
|
|
2856
|
-
!rangeModes.includes(prevFilterMode))) {
|
|
2857
|
-
column.setFilterValue(['', '']);
|
|
2858
|
-
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
|
|
2859
|
-
}
|
|
2860
|
-
else {
|
|
2861
|
-
column.setFilterValue(currentFilterValue); // perform new filter render
|
|
2862
|
-
}
|
|
2863
|
-
}
|
|
2864
|
-
else {
|
|
2865
|
-
// will now be single value filter mode
|
|
2866
|
-
if (Array.isArray(currentFilterValue)) {
|
|
2867
|
-
column.setFilterValue('');
|
|
2868
|
-
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
|
|
2869
|
-
}
|
|
2870
|
-
else if (currentFilterValue === ' ' &&
|
|
2871
|
-
emptyModes.includes(prevFilterMode)) {
|
|
2872
|
-
column.setFilterValue(undefined);
|
|
2873
|
-
}
|
|
2874
|
-
else {
|
|
2875
|
-
column.setFilterValue(currentFilterValue); // perform new filter render
|
|
2876
|
-
}
|
|
2877
|
-
}
|
|
2878
|
-
}
|
|
2879
|
-
setAnchorEl(null);
|
|
2880
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
|
2881
|
-
};
|
|
2882
|
-
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
|
2883
|
-
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
|
2884
|
-
dense: density === 'compact',
|
|
2885
|
-
sx: {
|
|
2886
|
-
backgroundColor: menuBackgroundColor,
|
|
2887
|
-
},
|
|
2888
|
-
}, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
|
|
2889
|
-
? ((_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
|
|
2890
|
-
column: column,
|
|
2891
|
-
internalFilterOptions,
|
|
2892
|
-
onSelectFilterMode: handleSelectFilterMode,
|
|
2893
|
-
table,
|
|
2894
|
-
})) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
|
|
2895
|
-
column: column,
|
|
2896
|
-
internalFilterOptions,
|
|
2897
|
-
onSelectFilterMode: handleSelectFilterMode,
|
|
2898
|
-
table,
|
|
2899
|
-
}))
|
|
2900
|
-
: renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
|
|
2901
|
-
internalFilterOptions,
|
|
2902
|
-
onSelectFilterMode: handleSelectFilterMode,
|
|
2903
|
-
table,
|
|
2904
|
-
}))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxRuntime.jsx(MRT_ActionMenuItem, { divider: divider, icon: symbol, label: label, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, table: table, value: option }, index))) })));
|
|
2905
|
-
};
|
|
2906
|
-
|
|
2907
|
-
const MRT_ColumnActionMenu = (_a) => {
|
|
2908
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
2909
|
-
var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
|
|
2910
|
-
const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
|
|
2911
|
-
const { column } = header;
|
|
2912
|
-
const { columnDef } = column;
|
|
2913
|
-
const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
|
|
2914
|
-
const columnFilterValue = column.getFilterValue();
|
|
2915
|
-
const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
|
|
2916
|
-
const handleClearSort = () => {
|
|
2917
|
-
column.clearSorting();
|
|
2918
|
-
setAnchorEl(null);
|
|
2919
|
-
};
|
|
2920
|
-
const handleSortAsc = () => {
|
|
2921
|
-
column.toggleSorting(false);
|
|
2922
|
-
setAnchorEl(null);
|
|
2923
|
-
};
|
|
2924
|
-
const handleSortDesc = () => {
|
|
2925
|
-
column.toggleSorting(true);
|
|
2926
|
-
setAnchorEl(null);
|
|
2927
|
-
};
|
|
2928
|
-
const handleResetColumnSize = () => {
|
|
2929
|
-
setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
|
|
2930
|
-
column.resetSize();
|
|
2931
|
-
setAnchorEl(null);
|
|
2932
|
-
};
|
|
2933
|
-
const handleHideColumn = () => {
|
|
2934
|
-
column.toggleVisibility(false);
|
|
2935
|
-
setAnchorEl(null);
|
|
2936
|
-
};
|
|
2937
|
-
const handlePinColumn = (pinDirection) => {
|
|
2938
|
-
column.pin(pinDirection);
|
|
2939
|
-
setAnchorEl(null);
|
|
2940
|
-
};
|
|
2941
|
-
const handleGroupByColumn = () => {
|
|
2942
|
-
column.toggleGrouping();
|
|
2943
|
-
setColumnOrder((old) => ['mrt-row-expand', ...old]);
|
|
2944
|
-
setAnchorEl(null);
|
|
2945
|
-
};
|
|
2946
|
-
const handleClearFilter = () => {
|
|
2947
|
-
column.setFilterValue(undefined);
|
|
2948
|
-
setAnchorEl(null);
|
|
2949
|
-
if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
|
|
2950
|
-
setColumnFilterFns((prev) => {
|
|
2951
|
-
var _a;
|
|
2952
|
-
return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
|
|
2953
|
-
});
|
|
2954
|
-
}
|
|
2955
|
-
};
|
|
2956
|
-
const handleFilterByColumn = () => {
|
|
2957
|
-
setShowColumnFilters(true);
|
|
2958
|
-
queueMicrotask(() => { var _a, _b; return (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus(); });
|
|
2959
|
-
setAnchorEl(null);
|
|
2960
|
-
};
|
|
2961
|
-
const handleShowAllColumns = () => {
|
|
2962
|
-
getAllLeafColumns()
|
|
2963
|
-
.filter((col) => col.columnDef.enableHiding !== false)
|
|
2964
|
-
.forEach((col) => col.toggleVisibility(true));
|
|
2965
|
-
setAnchorEl(null);
|
|
2966
|
-
};
|
|
2967
|
-
const handleOpenFilterModeMenu = (event) => {
|
|
2968
|
-
event.stopPropagation();
|
|
2969
|
-
setFilterMenuAnchorEl(event.currentTarget);
|
|
2970
|
-
};
|
|
2971
|
-
const isSelectFilter = !!columnDef.filterSelectOptions;
|
|
2972
|
-
const allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
|
|
2973
|
-
const showFilterModeSubMenu = enableColumnFilterModes &&
|
|
2974
|
-
columnDef.enableColumnFilterModes !== false &&
|
|
2975
|
-
!isSelectFilter &&
|
|
2976
|
-
(allowedColumnFilterOptions === undefined ||
|
|
2977
|
-
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
|
2978
|
-
const internalColumnMenuItems = [
|
|
2979
|
-
...(enableSorting && column.getCanSort()
|
|
2980
|
-
? [
|
|
2981
|
-
enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
|
|
2982
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }), label: (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header)), onClick: handleSortAsc, table: table }, 1),
|
|
2983
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: jsxRuntime.jsx(SortIcon, {}), label: (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header)), onClick: handleSortDesc, table: table }, 2),
|
|
2984
|
-
]
|
|
2985
|
-
: []),
|
|
2986
|
-
...(enableColumnFilters && column.getCanFilter()
|
|
2987
|
-
? [
|
|
2988
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnFilterValue ||
|
|
2989
|
-
(Array.isArray(columnFilterValue) &&
|
|
2990
|
-
!columnFilterValue.filter((value) => value).length), icon: jsxRuntime.jsx(FilterListOffIcon, {}), label: localization.clearFilter, onClick: handleClearFilter, table: table }, 3),
|
|
2991
|
-
columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, icon: jsxRuntime.jsx(FilterListIcon, {}), label: (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header)), onClick: showColumnFilters
|
|
2992
|
-
? handleOpenFilterModeMenu
|
|
2993
|
-
: handleFilterByColumn, onOpenSubMenu: showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined, table: table }, 4)),
|
|
2994
|
-
showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
|
|
2995
|
-
].filter(Boolean)
|
|
2996
|
-
: []),
|
|
2997
|
-
...(enableGrouping && column.getCanGroup()
|
|
2998
|
-
? [
|
|
2999
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { divider: enableColumnPinning, icon: jsxRuntime.jsx(DynamicFeedIcon, {}), label: (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)), onClick: handleGroupByColumn, table: table }, 6),
|
|
3000
|
-
]
|
|
3001
|
-
: []),
|
|
3002
|
-
...(enableColumnPinning && column.getCanPin()
|
|
3003
|
-
? [
|
|
3004
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }), label: localization.pinToLeft, onClick: () => handlePinColumn('left'), table: table }, 7),
|
|
3005
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), icon: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }), label: localization.pinToRight, onClick: () => handlePinColumn('right'), table: table }, 8),
|
|
3006
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, icon: jsxRuntime.jsx(PushPinIcon, {}), label: localization.unpin, onClick: () => handlePinColumn(false), table: table }, 9),
|
|
3007
|
-
]
|
|
3008
|
-
: []),
|
|
3009
|
-
...(enableColumnResizing && column.getCanResize()
|
|
3010
|
-
? [
|
|
3011
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
|
|
3012
|
-
]
|
|
3013
|
-
: []),
|
|
3014
|
-
...(enableHiding
|
|
3015
|
-
? [
|
|
3016
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !column.getCanHide(), icon: jsxRuntime.jsx(VisibilityOffIcon, {}), label: (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header)), onClick: handleHideColumn, table: table }, 11),
|
|
3017
|
-
jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
|
|
3018
|
-
.length, icon: jsxRuntime.jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
|
|
3019
|
-
]
|
|
3020
|
-
: []),
|
|
3021
|
-
].filter(Boolean);
|
|
3022
|
-
return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
|
3023
|
-
dense: density === 'compact',
|
|
3024
|
-
sx: {
|
|
3025
|
-
backgroundColor: menuBackgroundColor,
|
|
3026
|
-
},
|
|
3027
|
-
}, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
|
|
3028
|
-
closeMenu: () => setAnchorEl(null),
|
|
3029
|
-
column,
|
|
3030
|
-
internalColumnMenuItems,
|
|
3031
|
-
table,
|
|
3032
|
-
})) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
|
|
3033
|
-
closeMenu: () => setAnchorEl(null),
|
|
3034
|
-
column,
|
|
3035
|
-
internalColumnMenuItems,
|
|
3036
|
-
table,
|
|
3037
|
-
})) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
|
|
3038
|
-
};
|
|
3039
|
-
|
|
3040
|
-
const MRT_TableHeadCellColumnActionsButton = (_a) => {
|
|
3041
|
-
var _b, _c;
|
|
3042
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3043
|
-
const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
|
|
3044
|
-
const { column } = header;
|
|
3045
|
-
const { columnDef } = column;
|
|
3046
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
3047
|
-
const handleClick = (event) => {
|
|
3048
|
-
event.stopPropagation();
|
|
3049
|
-
event.preventDefault();
|
|
3050
|
-
setAnchorEl(event.currentTarget);
|
|
3051
|
-
};
|
|
3052
|
-
const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
|
|
3053
|
-
column,
|
|
3054
|
-
table,
|
|
3055
|
-
})), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
|
|
3056
|
-
column,
|
|
3057
|
-
table,
|
|
3058
|
-
})), rest);
|
|
3059
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps('top'), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
|
|
3060
|
-
opacity: 1,
|
|
3061
|
-
}, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) })), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
|
|
3062
|
-
};
|
|
3063
|
-
|
|
3064
|
-
const MRT_FilterCheckbox = (_a) => {
|
|
3065
|
-
var _b, _c, _d;
|
|
3066
|
-
var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
|
|
3067
|
-
const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
|
|
3068
|
-
const { density } = getState();
|
|
3069
|
-
const { columnDef } = column;
|
|
3070
|
-
const checkboxProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
|
|
3071
|
-
column,
|
|
3072
|
-
table,
|
|
3073
|
-
})), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
|
|
3074
|
-
column,
|
|
3075
|
-
table,
|
|
3076
|
-
})), rest);
|
|
3077
|
-
const filterLabel = (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', columnDef.header);
|
|
3078
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
|
|
3079
|
-
var _a;
|
|
3080
|
-
column.setFilterValue(column.getFilterValue() === undefined
|
|
3081
|
-
? 'true'
|
|
3082
|
-
: column.getFilterValue() === 'true'
|
|
3083
|
-
? 'false'
|
|
3084
|
-
: undefined);
|
|
3085
|
-
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
|
|
3086
|
-
}, onClick: (e) => {
|
|
3087
|
-
var _a;
|
|
3088
|
-
e.stopPropagation();
|
|
3089
|
-
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
3090
|
-
}, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_d = checkboxProps.title) !== null && _d !== void 0 ? _d : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) })));
|
|
3091
|
-
};
|
|
3092
|
-
|
|
3093
|
-
const MRT_FilterTextField = (_a) => {
|
|
3094
|
-
var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
3095
|
-
var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
|
|
3096
|
-
const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
|
|
3097
|
-
const { column } = header;
|
|
3098
|
-
const { columnDef } = column;
|
|
3099
|
-
const { filterVariant } = columnDef;
|
|
3100
|
-
const args = { column, rangeFilterIndex, table };
|
|
3101
|
-
const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
|
|
3102
|
-
const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
|
|
3103
|
-
const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
|
|
3104
|
-
const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
|
|
3105
|
-
const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
|
|
3106
|
-
const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
|
|
3107
|
-
const dropdownOptions = useDropdownOptions({ header, table });
|
|
3108
|
-
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
|
3109
|
-
? //@ts-ignore
|
|
3110
|
-
localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
|
3111
|
-
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
|
|
3112
|
-
: '';
|
|
3113
|
-
const filterPlaceholder = !isRangeFilter
|
|
3114
|
-
? ((_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)))
|
|
3115
|
-
: rangeFilterIndex === 0
|
|
3116
|
-
? localization.min
|
|
3117
|
-
: rangeFilterIndex === 1
|
|
3118
|
-
? localization.max
|
|
3119
|
-
: '';
|
|
3120
|
-
const showChangeModeButton = !!(enableColumnFilterModes &&
|
|
3121
|
-
columnDef.enableColumnFilterModes !== false &&
|
|
3122
|
-
!rangeFilterIndex &&
|
|
3123
|
-
(allowedColumnFilterOptions === undefined ||
|
|
3124
|
-
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
|
|
3125
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
3126
|
-
const [filterValue, setFilterValue] = react.useState(() => {
|
|
3127
|
-
var _a, _b;
|
|
3128
|
-
return isMultiSelectFilter
|
|
3129
|
-
? column.getFilterValue() || []
|
|
3130
|
-
: isRangeFilter
|
|
3131
|
-
? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
|
|
3132
|
-
: ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
|
|
3133
|
-
});
|
|
3134
|
-
const [autocompleteValue, setAutocompleteValue] = react.useState(isAutocompleteFilter ? filterValue : null);
|
|
3135
|
-
const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
|
|
3136
|
-
if (isRangeFilter) {
|
|
3137
|
-
column.setFilterValue((old) => {
|
|
3138
|
-
const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
|
|
3139
|
-
newFilterValues[rangeFilterIndex] = newValue !== null && newValue !== void 0 ? newValue : undefined;
|
|
3140
|
-
return newFilterValues;
|
|
3141
|
-
});
|
|
3142
|
-
}
|
|
3143
|
-
else {
|
|
3144
|
-
column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
|
|
3145
|
-
}
|
|
3146
|
-
}, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
|
|
3147
|
-
const handleChange = (newValue) => {
|
|
3148
|
-
setFilterValue(newValue !== null && newValue !== void 0 ? newValue : '');
|
|
3149
|
-
handleChangeDebounced(newValue);
|
|
3150
|
-
};
|
|
3151
|
-
const handleTextFieldChange = (event) => {
|
|
3152
|
-
var _a;
|
|
3153
|
-
const newValue = textFieldProps.type === 'date'
|
|
3154
|
-
? event.target.valueAsDate
|
|
3155
|
-
: textFieldProps.type === 'number'
|
|
3156
|
-
? event.target.valueAsNumber
|
|
3157
|
-
: event.target.value;
|
|
3158
|
-
handleChange(newValue);
|
|
3159
|
-
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
3160
|
-
};
|
|
3161
|
-
const handleAutocompleteChange = (newValue) => {
|
|
3162
|
-
setAutocompleteValue(newValue);
|
|
3163
|
-
handleChange(getValueAndLabel(newValue).value);
|
|
3164
|
-
};
|
|
3165
|
-
const handleClear = () => {
|
|
3166
|
-
if (isMultiSelectFilter) {
|
|
3167
|
-
setFilterValue([]);
|
|
3168
|
-
column.setFilterValue([]);
|
|
3169
|
-
}
|
|
3170
|
-
else if (isRangeFilter) {
|
|
3171
|
-
setFilterValue('');
|
|
3172
|
-
column.setFilterValue((old) => {
|
|
3173
|
-
const newFilterValues = (Array.isArray(old) && old) || ['', ''];
|
|
3174
|
-
newFilterValues[rangeFilterIndex] = undefined;
|
|
3175
|
-
return newFilterValues;
|
|
3176
|
-
});
|
|
3177
|
-
}
|
|
3178
|
-
else {
|
|
3179
|
-
setFilterValue('');
|
|
3180
|
-
column.setFilterValue(undefined);
|
|
3181
|
-
}
|
|
3182
|
-
};
|
|
3183
|
-
const handleClearEmptyFilterChip = () => {
|
|
3184
|
-
setFilterValue('');
|
|
3185
|
-
column.setFilterValue(undefined);
|
|
3186
|
-
setColumnFilterFns((prev) => {
|
|
3187
|
-
var _a;
|
|
3188
|
-
return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
|
|
3189
|
-
});
|
|
3190
|
-
};
|
|
3191
|
-
const handleFilterMenuOpen = (event) => {
|
|
3192
|
-
setAnchorEl(event.currentTarget);
|
|
3193
|
-
};
|
|
3194
|
-
const isMounted = react.useRef(false);
|
|
3195
|
-
react.useEffect(() => {
|
|
3196
|
-
if (isMounted.current) {
|
|
3197
|
-
const filterValue = column.getFilterValue();
|
|
3198
|
-
if (filterValue === undefined) {
|
|
3199
|
-
handleClear();
|
|
3200
|
-
}
|
|
3201
|
-
else if (isRangeFilter && rangeFilterIndex !== undefined) {
|
|
3202
|
-
setFilterValue(filterValue[rangeFilterIndex]);
|
|
3203
|
-
}
|
|
3204
|
-
else {
|
|
3205
|
-
setFilterValue(filterValue);
|
|
3206
|
-
}
|
|
3207
|
-
}
|
|
3208
|
-
isMounted.current = true;
|
|
3209
|
-
}, [column.getFilterValue()]);
|
|
3210
|
-
if (columnDef.Filter) {
|
|
3211
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
|
|
3212
|
-
}
|
|
3213
|
-
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
|
|
3214
|
-
height: '2rem',
|
|
3215
|
-
transform: 'scale(0.9)',
|
|
3216
|
-
width: '2rem',
|
|
3217
|
-
}, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })) : null;
|
|
3218
|
-
const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
|
|
3219
|
-
const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
|
|
3220
|
-
sx: {
|
|
3221
|
-
fontSize: '0.75rem',
|
|
3222
|
-
lineHeight: '0.8rem',
|
|
3223
|
-
whiteSpace: 'nowrap',
|
|
3224
|
-
},
|
|
3225
|
-
}, InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
|
|
3226
|
-
? { endAdornment, startAdornment }
|
|
3227
|
-
: { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}',
|
|
3228
|
-
// @ts-ignore
|
|
3229
|
-
localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
|
|
3230
|
-
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
|
|
3231
|
-
'aria-label': filterPlaceholder,
|
|
3232
|
-
autoComplete: 'off',
|
|
3233
|
-
disabled: !!filterChipLabel,
|
|
3234
|
-
sx: {
|
|
3235
|
-
textOverflow: 'ellipsis',
|
|
3236
|
-
width: filterChipLabel ? 0 : undefined,
|
|
3237
|
-
},
|
|
3238
|
-
title: filterPlaceholder,
|
|
3239
|
-
}, inputRef: (inputRef) => {
|
|
3240
|
-
filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
|
|
3241
|
-
inputRef;
|
|
3242
|
-
if (textFieldProps.inputRef) {
|
|
3243
|
-
textFieldProps.inputRef = inputRef;
|
|
3244
|
-
}
|
|
3245
|
-
}, margin: 'none', placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
|
|
3246
|
-
? undefined
|
|
3247
|
-
: filterPlaceholder, variant: 'standard' }, textFieldProps), { onKeyDown: (e) => {
|
|
3248
|
-
var _a;
|
|
3249
|
-
e.stopPropagation();
|
|
3250
|
-
(_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
|
3251
|
-
}, sx: (theme) => (Object.assign({ minWidth: isDateFilter
|
|
3252
|
-
? '160px'
|
|
3253
|
-
: enableColumnFilterModes && rangeFilterIndex === 0
|
|
3254
|
-
? '110px'
|
|
3255
|
-
: isRangeFilter
|
|
3256
|
-
? '100px'
|
|
3257
|
-
: !filterChipLabel
|
|
3258
|
-
? '120px'
|
|
3259
|
-
: 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
|
|
3260
|
-
const commonDatePickerProps = {
|
|
3261
|
-
onChange: (newDate) => {
|
|
3262
|
-
handleChange(newDate);
|
|
3263
|
-
},
|
|
3264
|
-
value: filterValue || null,
|
|
3265
|
-
};
|
|
3266
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
|
|
3267
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
|
|
3268
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
|
|
3269
|
-
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
|
|
3270
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
|
|
3271
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
|
|
3272
|
-
} }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
|
|
3273
|
-
field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
|
|
3274
|
-
textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
|
|
3275
|
-
} }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label,
|
|
3276
|
-
// @ts-ignore
|
|
3277
|
-
onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
|
|
3278
|
-
var _a;
|
|
3279
|
-
return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
|
|
3280
|
-
}, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
|
|
3281
|
-
? (selected) => !Array.isArray(selected) || selected.length === 0 ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
|
|
3282
|
-
const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
|
|
3283
|
-
return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
|
|
3284
|
-
}) }))
|
|
3285
|
-
: undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
|
|
3286
|
-
? Array.isArray(filterValue)
|
|
3287
|
-
? filterValue
|
|
3288
|
-
: []
|
|
3289
|
-
: filterValue, children: (isSelectFilter || isMultiSelectFilter) && [
|
|
3290
|
-
jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
|
|
3291
|
-
...[
|
|
3292
|
-
(_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
|
|
3293
|
-
var _a;
|
|
3294
|
-
const { label, value } = getValueAndLabel(option);
|
|
3295
|
-
return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
|
|
3296
|
-
alignItems: 'center',
|
|
3297
|
-
display: 'flex',
|
|
3298
|
-
gap: '0.5rem',
|
|
3299
|
-
m: 0,
|
|
3300
|
-
}, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), label, ' ', !columnDef.filterSelectOptions &&
|
|
3301
|
-
`(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
|
|
3302
|
-
}),
|
|
3303
|
-
],
|
|
3304
|
-
] }))), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
|
|
3305
|
-
};
|
|
3306
|
-
|
|
3307
|
-
const MRT_FilterRangeFields = (_a) => {
|
|
3308
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3309
|
-
return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [0, 1].map((rangeFilterIndex) => (jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
|
|
3310
|
-
};
|
|
3311
|
-
|
|
3312
|
-
const MRT_FilterRangeSlider = (_a) => {
|
|
3313
|
-
var _b, _c;
|
|
3314
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3315
|
-
const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs }, } = table;
|
|
3316
|
-
const { column } = header;
|
|
3317
|
-
const { columnDef } = column;
|
|
3318
|
-
const currentFilterOption = columnDef._filterFn;
|
|
3319
|
-
const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
|
|
3320
|
-
const sliderProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table })), rest);
|
|
3321
|
-
let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
|
|
3322
|
-
? [sliderProps.min, sliderProps.max]
|
|
3323
|
-
: ((_b = column.getFacetedMinMaxValues()) !== null && _b !== void 0 ? _b : [0, 1]);
|
|
3324
|
-
//fix potential TanStack Table bugs where min or max is an array
|
|
3325
|
-
if (Array.isArray(min))
|
|
3326
|
-
min = min[0];
|
|
3327
|
-
if (Array.isArray(max))
|
|
3328
|
-
max = max[0];
|
|
3329
|
-
if (min === null)
|
|
3330
|
-
min = 0;
|
|
3331
|
-
if (max === null)
|
|
3332
|
-
max = 1;
|
|
3333
|
-
const [filterValues, setFilterValues] = react.useState([min, max]);
|
|
3334
|
-
const columnFilterValue = column.getFilterValue();
|
|
3335
|
-
const isMounted = react.useRef(false);
|
|
3336
|
-
react.useEffect(() => {
|
|
3337
|
-
if (isMounted.current) {
|
|
3338
|
-
if (columnFilterValue === undefined) {
|
|
3339
|
-
setFilterValues([min, max]);
|
|
3340
|
-
}
|
|
3341
|
-
else if (Array.isArray(columnFilterValue)) {
|
|
3342
|
-
setFilterValues(columnFilterValue);
|
|
3343
|
-
}
|
|
3344
|
-
}
|
|
3345
|
-
isMounted.current = true;
|
|
3346
|
-
}, [columnFilterValue, min, max]);
|
|
3347
|
-
return (jsxRuntime.jsxs(Stack__default["default"], { children: [jsxRuntime.jsx(Slider__default["default"], Object.assign({ disableSwap: true, max: max, min: min, onChange: (_event, values) => {
|
|
3348
|
-
setFilterValues(values);
|
|
3349
|
-
}, onChangeCommitted: (_event, value) => {
|
|
3350
|
-
if (Array.isArray(value)) {
|
|
3351
|
-
if (value[0] <= min && value[1] >= max) {
|
|
3352
|
-
//if the user has selected the entire range, remove the filter
|
|
3353
|
-
column.setFilterValue(undefined);
|
|
3354
|
-
}
|
|
3355
|
-
else {
|
|
3356
|
-
column.setFilterValue(value);
|
|
3357
|
-
}
|
|
3358
|
-
}
|
|
3359
|
-
}, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
|
|
3360
|
-
input: {
|
|
3361
|
-
ref: (node) => {
|
|
3362
|
-
var _a, _b;
|
|
3363
|
-
if (node) {
|
|
3364
|
-
filterInputRefs.current[`${column.id}-0`] = node;
|
|
3365
|
-
// @ts-ignore
|
|
3366
|
-
if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
|
|
3367
|
-
//@ts-ignore
|
|
3368
|
-
sliderProps.slotProps.input.ref = node;
|
|
3369
|
-
}
|
|
3370
|
-
}
|
|
3371
|
-
},
|
|
3372
|
-
},
|
|
3373
|
-
}, sx: (theme) => (Object.assign({ m: 'auto', minWidth: `${column.getSize() - 50}px`, mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
|
|
3374
|
-
fontSize: '0.75rem',
|
|
3375
|
-
lineHeight: '0.8rem',
|
|
3376
|
-
m: '-3px -6px',
|
|
3377
|
-
whiteSpace: 'nowrap',
|
|
3378
|
-
}, children: localization.filterMode.replace('{filterType}',
|
|
3379
|
-
// @ts-ignore
|
|
3380
|
-
localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
|
3381
|
-
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
|
|
3382
|
-
};
|
|
3383
|
-
|
|
3384
|
-
const MRT_TableHeadCellFilterContainer = (_a) => {
|
|
3385
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3386
|
-
const { getState, options: { columnFilterDisplayMode }, } = table;
|
|
3387
|
-
const { showColumnFilters } = getState();
|
|
3388
|
-
const { column } = header;
|
|
3389
|
-
const { columnDef } = column;
|
|
3390
|
-
const { isRangeFilter } = getColumnFilterInfo({ header, table });
|
|
3391
|
-
return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
|
|
3392
|
-
};
|
|
3393
|
-
|
|
3394
|
-
const MRT_TableHeadCellFilterLabel = (_a) => {
|
|
3395
|
-
var _b, _c;
|
|
3396
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3397
|
-
const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
|
|
3398
|
-
const { column } = header;
|
|
3399
|
-
const { columnDef } = column;
|
|
3400
|
-
const filterValue = column.getFilterValue();
|
|
3401
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
3402
|
-
const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
|
|
3403
|
-
const dropdownOptions = useDropdownOptions({ header, table });
|
|
3404
|
-
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value ===
|
|
3405
|
-
(index !== undefined ? filterValue[index] : filterValue))).label;
|
|
3406
|
-
const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
|
|
3407
|
-
(!!filterValue && !Array.isArray(filterValue));
|
|
3408
|
-
const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
|
|
3409
|
-
? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
|
|
3410
|
-
: localization.filteringByColumn
|
|
3411
|
-
.replace('{column}', String(columnDef.header))
|
|
3412
|
-
.replace('{filterType}', currentFilterOption
|
|
3413
|
-
? // @ts-ignore
|
|
3414
|
-
localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
|
|
3415
|
-
(currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
|
|
3416
|
-
: '')
|
|
3417
|
-
.replace('{filterValue}', `"${Array.isArray(filterValue)
|
|
3418
|
-
? filterValue
|
|
3419
|
-
.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
|
|
3420
|
-
.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
|
3421
|
-
: isSelectFilter
|
|
3422
|
-
? getSelectLabel()
|
|
3423
|
-
: filterValue}"`)
|
|
3424
|
-
.replace('" "', '');
|
|
3425
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
|
|
3426
|
-
(!!filterValue && !isRangeFilter) ||
|
|
3427
|
-
(isRangeFilter && // @ts-ignore
|
|
3428
|
-
(!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
|
|
3429
|
-
if (columnFilterDisplayMode === 'popover') {
|
|
3430
|
-
setAnchorEl(event.currentTarget);
|
|
3431
|
-
}
|
|
3432
|
-
else {
|
|
3433
|
-
setShowColumnFilters(true);
|
|
3434
|
-
}
|
|
3435
|
-
queueMicrotask(() => {
|
|
3436
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3437
|
-
(_c = (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
3438
|
-
(_f = (_e = (_d = filterInputRefs.current) === null || _d === void 0 ? void 0 : _d[`${column.id}-0`]) === null || _e === void 0 ? void 0 : _e.select) === null || _f === void 0 ? void 0 : _f.call(_e);
|
|
3439
|
-
});
|
|
3440
|
-
event.stopPropagation();
|
|
3441
|
-
}, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
|
|
3442
|
-
horizontal: 'center',
|
|
3443
|
-
vertical: 'top',
|
|
3444
|
-
}, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
|
|
3445
|
-
//@ts-ignore
|
|
3446
|
-
event.stopPropagation();
|
|
3447
|
-
setAnchorEl(null);
|
|
3448
|
-
}, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
|
|
3449
|
-
horizontal: 'center',
|
|
3450
|
-
vertical: 'bottom',
|
|
3451
|
-
}, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
|
|
3452
|
-
};
|
|
3453
|
-
|
|
3454
|
-
const MRT_TableHeadCellGrabHandle = (_a) => {
|
|
3455
|
-
var { column, table, tableHeadCellRef } = _a, rest = __rest(_a, ["column", "table", "tableHeadCellRef"]);
|
|
3456
|
-
const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
|
|
3457
|
-
const { columnDef } = column;
|
|
3458
|
-
const { columnOrder, draggingColumn, hoveredColumn } = getState();
|
|
3459
|
-
const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
|
|
3460
|
-
column,
|
|
3461
|
-
table,
|
|
3462
|
-
})), rest);
|
|
3463
|
-
const handleDragStart = (event) => {
|
|
3464
|
-
var _a;
|
|
3465
|
-
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
3466
|
-
setDraggingColumn(column);
|
|
3467
|
-
try {
|
|
3468
|
-
event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
|
|
3469
|
-
}
|
|
3470
|
-
catch (e) {
|
|
3471
|
-
console.error(e);
|
|
3472
|
-
}
|
|
3473
|
-
};
|
|
3474
|
-
const handleDragEnd = (event) => {
|
|
3475
|
-
var _a;
|
|
3476
|
-
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
3477
|
-
if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
|
|
3478
|
-
column.toggleGrouping();
|
|
3479
|
-
}
|
|
3480
|
-
else if (enableColumnOrdering &&
|
|
3481
|
-
hoveredColumn &&
|
|
3482
|
-
(hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
|
|
3483
|
-
setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
|
|
3484
|
-
}
|
|
3485
|
-
setDraggingColumn(null);
|
|
3486
|
-
setHoveredColumn(null);
|
|
3487
|
-
};
|
|
3488
|
-
return (jsxRuntime.jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
|
|
3489
|
-
};
|
|
3490
|
-
|
|
3491
|
-
const MRT_TableHeadCellResizeHandle = (_a) => {
|
|
3492
|
-
var _b;
|
|
3493
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3494
|
-
const { getState, options: { columnResizeDirection, columnResizeMode }, setColumnSizingInfo, } = table;
|
|
3495
|
-
const { density } = getState();
|
|
3496
|
-
const { column } = header;
|
|
3497
|
-
const handler = header.getResizeHandler();
|
|
3498
|
-
const mx = density === 'compact'
|
|
3499
|
-
? '-8px'
|
|
3500
|
-
: density === 'comfortable'
|
|
3501
|
-
? '-16px'
|
|
3502
|
-
: '-24px';
|
|
3503
|
-
const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
|
|
3504
|
-
return (jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
|
|
3505
|
-
setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
|
|
3506
|
-
column.resetSize();
|
|
3507
|
-
}, onMouseDown: handler, onTouchStart: handler, style: {
|
|
3508
|
-
transform: column.getIsResizing() && columnResizeMode === 'onEnd'
|
|
3509
|
-
? `translateX(${(columnResizeDirection === 'rtl' ? -1 : 1) *
|
|
3510
|
-
((_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0)}px)`
|
|
3511
|
-
: undefined,
|
|
3512
|
-
}, sx: (theme) => ({
|
|
3513
|
-
'&:active > hr': {
|
|
3514
|
-
backgroundColor: theme.palette.info.main,
|
|
3515
|
-
opacity: header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
|
|
3516
|
-
},
|
|
3517
|
-
cursor: 'col-resize',
|
|
3518
|
-
left: columnResizeDirection === 'rtl' ? lr : undefined,
|
|
3519
|
-
ml: columnResizeDirection === 'rtl' ? mx : undefined,
|
|
3520
|
-
mr: columnResizeDirection === 'ltr' ? mx : undefined,
|
|
3521
|
-
position: 'absolute',
|
|
3522
|
-
px: '4px',
|
|
3523
|
-
right: columnResizeDirection === 'ltr' ? lr : undefined,
|
|
3524
|
-
}), children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transform: 'translateX(4px)', transition: column.getIsResizing()
|
|
3525
|
-
? undefined
|
|
3526
|
-
: 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
|
|
3527
|
-
};
|
|
3528
|
-
|
|
3529
|
-
const MRT_TableHeadCellSortLabel = (_a) => {
|
|
3530
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
|
3531
|
-
const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
|
|
3532
|
-
const { column } = header;
|
|
3533
|
-
const { columnDef } = column;
|
|
3534
|
-
const { isLoading, showSkeletons, sorting } = getState();
|
|
3535
|
-
const isSorted = !!column.getIsSorted();
|
|
3536
|
-
const sortTooltip = isLoading || showSkeletons
|
|
3537
|
-
? ''
|
|
3538
|
-
: column.getIsSorted()
|
|
3539
|
-
? column.getIsSorted() === 'desc'
|
|
3540
|
-
? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
|
|
3541
|
-
: localization.sortedByColumnAsc.replace('{column}', columnDef.header)
|
|
3542
|
-
: column.getNextSortingOrder() === 'desc'
|
|
3543
|
-
? localization.sortByColumnDesc.replace('{column}', columnDef.header)
|
|
3544
|
-
: localization.sortByColumnAsc.replace('{column}', columnDef.header);
|
|
3545
|
-
const direction = isSorted
|
|
3546
|
-
? column.getIsSorted()
|
|
3547
|
-
: undefined;
|
|
3548
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], Object.assign({ IconComponent: !isSorted
|
|
3549
|
-
? (props) => (jsxRuntime.jsx(SyncAltIcon, Object.assign({}, props, { direction: direction, style: {
|
|
3550
|
-
transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
|
|
3551
|
-
} })))
|
|
3552
|
-
: ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: direction, onClick: (e) => {
|
|
3553
|
-
var _a;
|
|
3554
|
-
e.stopPropagation();
|
|
3555
|
-
(_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
|
|
3556
|
-
} }, rest, { sx: (theme) => (Object.assign({ '.MuiTableSortLabel-icon': {
|
|
3557
|
-
color: `${theme.palette.mode === 'dark'
|
|
3558
|
-
? theme.palette.text.primary
|
|
3559
|
-
: theme.palette.text.secondary} !important`,
|
|
3560
|
-
}, flex: '0 0', opacity: isSorted ? 1 : 0.3, transition: 'all 150ms ease-in-out', width: '3ch' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) })) }) }));
|
|
3561
|
-
};
|
|
3562
|
-
|
|
3563
|
-
const MRT_TableHeadCell = (_a) => {
|
|
3564
|
-
var _b, _c, _d, _f, _g, _h, _j;
|
|
3565
|
-
var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
|
|
3566
|
-
const theme = styles.useTheme();
|
|
3567
|
-
const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableKeyboardShortcuts, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
|
3568
|
-
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
|
3569
|
-
const { column } = header;
|
|
3570
|
-
const { columnDef } = column;
|
|
3571
|
-
const { columnDefType } = columnDef;
|
|
3572
|
-
const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
|
|
3573
|
-
column,
|
|
3574
|
-
table,
|
|
3575
|
-
})), rest);
|
|
3576
|
-
const isColumnPinned = enableColumnPinning &&
|
|
3577
|
-
columnDef.columnDefType !== 'group' &&
|
|
3578
|
-
column.getIsPinned();
|
|
3579
|
-
const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
|
|
3580
|
-
columnDef.enableColumnActions !== false;
|
|
3581
|
-
const showDragHandle = enableColumnDragging !== false &&
|
|
3582
|
-
columnDef.enableColumnDragging !== false &&
|
|
3583
|
-
(enableColumnDragging ||
|
|
3584
|
-
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
|
|
3585
|
-
(enableGrouping &&
|
|
3586
|
-
columnDef.enableGrouping !== false &&
|
|
3587
|
-
!grouping.includes(column.id)));
|
|
3588
|
-
const headerPL = react.useMemo(() => {
|
|
3589
|
-
let pl = 0;
|
|
3590
|
-
if (column.getCanSort())
|
|
3591
|
-
pl += 1;
|
|
3592
|
-
if (showColumnActions)
|
|
3593
|
-
pl += 1.75;
|
|
3594
|
-
if (showDragHandle)
|
|
3595
|
-
pl += 1.5;
|
|
3596
|
-
return pl;
|
|
3597
|
-
}, [showColumnActions, showDragHandle]);
|
|
3598
|
-
const draggingBorders = react.useMemo(() => {
|
|
3599
|
-
const showResizeBorder = columnSizingInfo.isResizingColumn === column.id &&
|
|
3600
|
-
columnResizeMode === 'onChange' &&
|
|
3601
|
-
!header.subHeaders.length;
|
|
3602
|
-
const borderStyle = showResizeBorder
|
|
3603
|
-
? `2px solid ${draggingBorderColor} !important`
|
|
3604
|
-
: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
|
|
3605
|
-
? `1px dashed ${theme.palette.grey[500]}`
|
|
3606
|
-
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
|
3607
|
-
? `2px dashed ${draggingBorderColor}`
|
|
3608
|
-
: undefined;
|
|
3609
|
-
if (showResizeBorder) {
|
|
3610
|
-
return columnResizeDirection === 'ltr'
|
|
3611
|
-
? { borderRight: borderStyle }
|
|
3612
|
-
: { borderLeft: borderStyle };
|
|
3613
|
-
}
|
|
3614
|
-
const draggingBorders = borderStyle
|
|
3615
|
-
? {
|
|
3616
|
-
borderLeft: borderStyle,
|
|
3617
|
-
borderRight: borderStyle,
|
|
3618
|
-
borderTop: borderStyle,
|
|
3619
|
-
}
|
|
3620
|
-
: undefined;
|
|
3621
|
-
return draggingBorders;
|
|
3622
|
-
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
|
|
3623
|
-
const handleDragEnter = (_e) => {
|
|
3624
|
-
if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
|
|
3625
|
-
setHoveredColumn(null);
|
|
3626
|
-
}
|
|
3627
|
-
if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
|
|
3628
|
-
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
|
3629
|
-
}
|
|
3630
|
-
};
|
|
3631
|
-
const handleDragOver = (e) => {
|
|
3632
|
-
if (columnDef.enableColumnOrdering !== false) {
|
|
3633
|
-
e.preventDefault();
|
|
3634
|
-
}
|
|
3635
|
-
};
|
|
3636
|
-
const handleKeyDown = (event) => {
|
|
3637
|
-
var _a;
|
|
3638
|
-
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
3639
|
-
cellKeyboardShortcuts({
|
|
3640
|
-
event,
|
|
3641
|
-
cellValue: header.column.columnDef.header,
|
|
3642
|
-
table,
|
|
3643
|
-
header,
|
|
3644
|
-
});
|
|
3645
|
-
};
|
|
3646
|
-
const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
|
|
3647
|
-
column,
|
|
3648
|
-
header,
|
|
3649
|
-
table,
|
|
3650
|
-
})) !== null && _b !== void 0 ? _b : columnDef.header;
|
|
3651
|
-
return (jsxRuntime.jsxs(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
|
|
3652
|
-
? 'center'
|
|
3653
|
-
: theme.direction === 'rtl'
|
|
3654
|
-
? 'right'
|
|
3655
|
-
: 'left', "aria-sort": column.getIsSorted()
|
|
3656
|
-
? column.getIsSorted() === 'asc'
|
|
3657
|
-
? 'ascending'
|
|
3658
|
-
: 'descending'
|
|
3659
|
-
: 'none', colSpan: header.colSpan, "data-can-sort": column.getCanSort() || undefined, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, "data-sort": column.getIsSorted() || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
|
|
3660
|
-
var _a;
|
|
3661
|
-
if (node) {
|
|
3662
|
-
tableHeadCellRefs.current[column.id] = node;
|
|
3663
|
-
if (columnDefType !== 'group') {
|
|
3664
|
-
(_a = columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(columnVirtualizer, node);
|
|
3665
|
-
}
|
|
3666
|
-
}
|
|
3667
|
-
}, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
|
|
3668
|
-
'.MuiButtonBase-root': {
|
|
3669
|
-
opacity: 1,
|
|
3670
|
-
},
|
|
3671
|
-
}, flexDirection: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
|
|
3672
|
-
? '0.5rem'
|
|
3673
|
-
: density === 'comfortable'
|
|
3674
|
-
? columnDefType === 'display'
|
|
3675
|
-
? '0.75rem'
|
|
3676
|
-
: '1rem'
|
|
3677
|
-
: columnDefType === 'display'
|
|
3678
|
-
? '1rem 1.25rem'
|
|
3679
|
-
: '1.5rem', pb: columnDefType === 'display'
|
|
3680
|
-
? 0
|
|
3681
|
-
: showColumnFilters || density === 'compact'
|
|
3682
|
-
? '0.4rem'
|
|
3683
|
-
: '0.6rem', pt: columnDefType === 'group' || density === 'compact'
|
|
3684
|
-
? '0.25rem'
|
|
3685
|
-
: density === 'comfortable'
|
|
3686
|
-
? '.75rem'
|
|
3687
|
-
: '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top' }, getCommonMRTCellStyles({
|
|
3688
|
-
column,
|
|
3689
|
-
header,
|
|
3690
|
-
table,
|
|
3691
|
-
tableCellProps,
|
|
3692
|
-
theme,
|
|
3693
|
-
})), draggingBorders)), children: [header.isPlaceholder
|
|
3694
|
-
? null
|
|
3695
|
-
: ((_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
|
|
3696
|
-
alignItems: 'center',
|
|
3697
|
-
display: 'flex',
|
|
3698
|
-
flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
|
|
3699
|
-
justifyContent: columnDefType === 'group' ||
|
|
3700
|
-
(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
|
|
3701
|
-
? 'center'
|
|
3702
|
-
: column.getCanResize()
|
|
3703
|
-
? 'space-between'
|
|
3704
|
-
: 'flex-start',
|
|
3705
|
-
position: 'relative',
|
|
3706
|
-
width: '100%',
|
|
3707
|
-
}, children: [jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
|
|
3708
|
-
alignItems: 'center',
|
|
3709
|
-
cursor: column.getCanSort() && columnDefType !== 'group'
|
|
3710
|
-
? 'pointer'
|
|
3711
|
-
: undefined,
|
|
3712
|
-
display: 'flex',
|
|
3713
|
-
flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
|
|
3714
|
-
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
|
3715
|
-
pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
|
|
3716
|
-
? `${headerPL}rem`
|
|
3717
|
-
: undefined,
|
|
3718
|
-
}, children: [jsxRuntime.jsx(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
|
|
3719
|
-
'&:hover': {
|
|
3720
|
-
textOverflow: 'clip',
|
|
3721
|
-
},
|
|
3722
|
-
minWidth: `${Math.min((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0, 4)}ch`,
|
|
3723
|
-
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
|
3724
|
-
textOverflow: 'ellipsis',
|
|
3725
|
-
whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
|
|
3726
|
-
? 'nowrap'
|
|
3727
|
-
: 'normal',
|
|
3728
|
-
}, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
|
|
3729
|
-
whiteSpace: 'nowrap',
|
|
3730
|
-
}, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
|
|
3731
|
-
current: (_j = tableHeadCellRefs.current) === null || _j === void 0 ? void 0 : _j[column.id],
|
|
3732
|
-
} })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
|
|
3733
|
-
};
|
|
3734
|
-
|
|
3735
|
-
const MRT_TableHeadRow = (_a) => {
|
|
3736
|
-
var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
|
|
3737
|
-
const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
|
|
3738
|
-
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
|
|
3739
|
-
const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
|
|
3740
|
-
headerGroup,
|
|
3741
|
-
table,
|
|
3742
|
-
})), rest);
|
|
3743
|
-
return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
|
|
3744
|
-
? 'sticky'
|
|
3745
|
-
: 'relative', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
|
|
3746
|
-
let header = headerOrVirtualHeader;
|
|
3747
|
-
if (columnVirtualizer) {
|
|
3748
|
-
staticColumnIndex = headerOrVirtualHeader
|
|
3749
|
-
.index;
|
|
3750
|
-
header = headerGroup.headers[staticColumnIndex];
|
|
3751
|
-
}
|
|
3752
|
-
return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { columnVirtualizer: columnVirtualizer, header: header, staticColumnIndex: staticColumnIndex, table: table }, header.id)) : null;
|
|
3753
|
-
}), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
|
|
3754
|
-
};
|
|
3755
|
-
|
|
3756
|
-
const MRT_ToolbarAlertBanner = (_a) => {
|
|
3757
|
-
var _b, _c, _d;
|
|
3758
|
-
var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
|
|
3759
|
-
const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
|
|
3760
|
-
const { density, grouping, rowSelection, showAlertBanner } = getState();
|
|
3761
|
-
const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
|
|
3762
|
-
table,
|
|
3763
|
-
})), rest);
|
|
3764
|
-
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
|
|
3765
|
-
table,
|
|
3766
|
-
});
|
|
3767
|
-
const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
|
|
3768
|
-
const selectedRowCount = react.useMemo(() => manualPagination
|
|
3769
|
-
? Object.values(rowSelection).filter(Boolean).length
|
|
3770
|
-
: getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
|
|
3771
|
-
const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
|
|
3772
|
-
const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
|
|
3773
|
-
return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
|
|
3774
|
-
var _a, _b;
|
|
3775
|
-
return (Object.assign({ '& .MuiAlert-message': {
|
|
3776
|
-
maxWidth: `calc(${(_b = (_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 360}px - 1rem)`,
|
|
3777
|
-
width: '100%',
|
|
3778
|
-
}, borderRadius: 0, fontSize: '1rem', left: 0, mb: stackAlertBanner
|
|
3779
|
-
? 0
|
|
3780
|
-
: positionToolbarAlertBanner === 'bottom'
|
|
3781
|
-
? '-1rem'
|
|
3782
|
-
: undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme)));
|
|
3783
|
-
}, children: (_d = renderToolbarAlertBannerContent === null || renderToolbarAlertBannerContent === void 0 ? void 0 : renderToolbarAlertBannerContent({
|
|
3784
|
-
groupedAlert,
|
|
3785
|
-
selectedAlert,
|
|
3786
|
-
table,
|
|
3787
|
-
})) !== null && _d !== void 0 ? _d : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Stack__default["default"], { sx: {
|
|
3788
|
-
p: positionToolbarAlertBanner !== 'head-overlay'
|
|
3789
|
-
? '0.5rem 1rem'
|
|
3790
|
-
: density === 'spacious'
|
|
3791
|
-
? '0.75rem 1.25rem'
|
|
3792
|
-
: density === 'comfortable'
|
|
3793
|
-
? '0.5rem 0.75rem'
|
|
3794
|
-
: '0.25rem 0.5rem',
|
|
3795
|
-
}, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsxRuntime.jsx("br", {})), jsxRuntime.jsxs(Box__default["default"], { sx: { display: 'flex' }, children: [enableRowSelection &&
|
|
3796
|
-
enableSelectAll &&
|
|
3797
|
-
positionToolbarAlertBanner === 'head-overlay' && (jsxRuntime.jsx(MRT_SelectCheckbox, { table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsxRuntime.jsx("br", {}), groupedAlert] })] })) })) }));
|
|
3798
|
-
};
|
|
3799
|
-
|
|
3800
|
-
const MRT_TableHead = (_a) => {
|
|
3801
|
-
var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
|
|
3802
|
-
const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
|
|
3803
|
-
const { isFullScreen, showAlertBanner } = getState();
|
|
3804
|
-
const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
|
|
3805
|
-
const stickyHeader = enableStickyHeader || isFullScreen;
|
|
3806
|
-
return (jsxRuntime.jsx(TableHead__default["default"], Object.assign({}, tableHeadProps, { ref: (ref) => {
|
|
3807
|
-
tableHeadRef.current = ref;
|
|
3808
|
-
if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
|
|
3809
|
-
// @ts-ignore
|
|
3810
|
-
tableHeadProps.ref.current = ref;
|
|
3811
|
-
}
|
|
3812
|
-
}, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
|
|
3813
|
-
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
|
|
3814
|
-
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
|
3815
|
-
}, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
|
|
3816
|
-
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
|
3817
|
-
padding: 0,
|
|
3818
|
-
}, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
|
|
3819
|
-
.getHeaderGroups()
|
|
3820
|
-
.map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
|
|
3821
|
-
};
|
|
3822
|
-
|
|
3823
|
-
const MRT_Table = (_a) => {
|
|
3824
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
3825
|
-
const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption, }, } = table;
|
|
3826
|
-
const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
|
|
3827
|
-
const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
|
|
3828
|
-
const Caption = parseFromValuesOrFunc(renderCaption, { table });
|
|
3829
|
-
const columnSizeVars = react.useMemo(() => {
|
|
3830
|
-
const headers = getFlatHeaders();
|
|
3831
|
-
const colSizes = {};
|
|
3832
|
-
for (let i = 0; i < headers.length; i++) {
|
|
3833
|
-
const header = headers[i];
|
|
3834
|
-
const colSize = header.getSize();
|
|
3835
|
-
colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
|
|
3836
|
-
colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
|
|
3837
|
-
}
|
|
3838
|
-
return colSizes;
|
|
3839
|
-
}, [columns, columnSizing, columnSizingInfo, columnVisibility]);
|
|
3840
|
-
const columnVirtualizer = useMRT_ColumnVirtualizer(table);
|
|
3841
|
-
const commonTableGroupProps = {
|
|
3842
|
-
columnVirtualizer,
|
|
3843
|
-
table,
|
|
3844
|
-
};
|
|
3845
|
-
return (jsxRuntime.jsxs(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [!!Caption && jsxRuntime.jsx("caption", { children: Caption }), enableTableHead && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
|
|
3846
|
-
};
|
|
3847
|
-
|
|
3848
|
-
const MRT_TableLoadingOverlay = (_a) => {
|
|
3849
|
-
var _b;
|
|
3850
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
3851
|
-
const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
|
|
3852
|
-
const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
|
|
3853
|
-
return (jsxRuntime.jsx(Box__default["default"], { sx: {
|
|
3854
|
-
alignItems: 'center',
|
|
3855
|
-
backgroundColor: styles.alpha(baseBackgroundColor, 0.5),
|
|
3856
|
-
bottom: 0,
|
|
3857
|
-
display: 'flex',
|
|
3858
|
-
justifyContent: 'center',
|
|
3859
|
-
left: 0,
|
|
3860
|
-
maxHeight: '100vh',
|
|
3861
|
-
position: 'absolute',
|
|
3862
|
-
right: 0,
|
|
3863
|
-
top: 0,
|
|
3864
|
-
width: '100%',
|
|
3865
|
-
zIndex: 3,
|
|
3866
|
-
}, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: `mrt-progress-${id}` }, circularProgressProps))) }));
|
|
3867
|
-
};
|
|
3868
|
-
|
|
3869
|
-
const MRT_CellActionMenu = (_a) => {
|
|
3870
|
-
var _b, _c;
|
|
3871
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
3872
|
-
const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
|
|
3873
|
-
const { actionCell, density } = getState();
|
|
3874
|
-
const cell = actionCell;
|
|
3875
|
-
const { row } = cell;
|
|
3876
|
-
const { column } = cell;
|
|
3877
|
-
const { columnDef } = column;
|
|
3878
|
-
const handleClose = (event) => {
|
|
3879
|
-
event === null || event === void 0 ? void 0 : event.stopPropagation();
|
|
3880
|
-
table.setActionCell(null);
|
|
3881
|
-
actionCellRef.current = null;
|
|
3882
|
-
};
|
|
3883
|
-
const internalMenuItems = [
|
|
3884
|
-
(parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
|
|
3885
|
-
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
|
|
3886
|
-
'context-menu') && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ContentCopy, {}), label: localization.copy, onClick: (event) => {
|
|
3887
|
-
event.stopPropagation();
|
|
3888
|
-
navigator.clipboard.writeText(cell.getValue());
|
|
3889
|
-
handleClose();
|
|
3890
|
-
}, table: table }, 'mrt-copy')),
|
|
3891
|
-
parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(EditIcon, {}), label: localization.edit, onClick: () => {
|
|
3892
|
-
openEditingCell({ cell, table });
|
|
3893
|
-
handleClose();
|
|
3894
|
-
}, table: table }, 'mrt-edit')),
|
|
3895
|
-
].filter(Boolean);
|
|
3896
|
-
const renderActionProps = {
|
|
3897
|
-
cell,
|
|
3898
|
-
closeMenu: handleClose,
|
|
3899
|
-
column,
|
|
3900
|
-
internalMenuItems,
|
|
3901
|
-
row,
|
|
3902
|
-
table,
|
|
3903
|
-
};
|
|
3904
|
-
const menuItems = (_c = (_b = columnDef.renderCellActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, renderActionProps)) !== null && _c !== void 0 ? _c : renderCellActionMenuItems === null || renderCellActionMenuItems === void 0 ? void 0 : renderCellActionMenuItems(renderActionProps);
|
|
3905
|
-
return ((!!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) || !!(internalMenuItems === null || internalMenuItems === void 0 ? void 0 : internalMenuItems.length)) && (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
|
|
3906
|
-
dense: density === 'compact',
|
|
3907
|
-
sx: {
|
|
3908
|
-
backgroundColor: menuBackgroundColor,
|
|
3909
|
-
},
|
|
3910
|
-
}, anchorEl: actionCellRef.current, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: handleClose, open: !!cell, transformOrigin: { horizontal: -100, vertical: 8 } }, rest, { children: menuItems !== null && menuItems !== void 0 ? menuItems : internalMenuItems }))));
|
|
3911
|
-
};
|
|
3912
|
-
|
|
3913
|
-
const MRT_EditRowModal = (_a) => {
|
|
3914
|
-
var _b;
|
|
3915
|
-
var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
|
|
3916
|
-
const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
|
|
3917
|
-
const { creatingRow, editingRow } = getState();
|
|
3918
|
-
const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
|
|
3919
|
-
const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
|
|
3920
|
-
parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
|
|
3921
|
-
const internalEditComponents = row
|
|
3922
|
-
.getAllCells()
|
|
3923
|
-
.filter((cell) => cell.column.columnDef.columnDefType === 'data')
|
|
3924
|
-
.map((cell) => (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
|
|
3925
|
-
return (jsxRuntime.jsx(Dialog__default["default"], Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
|
|
3926
|
-
var _a;
|
|
3927
|
-
if (creatingRow) {
|
|
3928
|
-
onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
|
|
3929
|
-
setCreatingRow(null);
|
|
3930
|
-
}
|
|
3931
|
-
else {
|
|
3932
|
-
onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
|
|
3933
|
-
setEditingRow(null);
|
|
3934
|
-
}
|
|
3935
|
-
row._valuesCache = {}; //reset values cache
|
|
3936
|
-
(_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
|
|
3937
|
-
}, open: open }, dialogProps, { children: (_b = ((creatingRow &&
|
|
3938
|
-
(renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
|
|
3939
|
-
internalEditComponents,
|
|
3940
|
-
row,
|
|
3941
|
-
table,
|
|
3942
|
-
}))) ||
|
|
3943
|
-
(renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
|
|
3944
|
-
internalEditComponents,
|
|
3945
|
-
row,
|
|
3946
|
-
table,
|
|
3947
|
-
})))) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle__default["default"], { sx: { textAlign: 'center' }, children: localization.edit }), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack__default["default"], { sx: {
|
|
3948
|
-
gap: '32px',
|
|
3949
|
-
paddingTop: '16px',
|
|
3950
|
-
width: '100%',
|
|
3951
|
-
}, children: internalEditComponents }) }) }), jsxRuntime.jsx(DialogActions__default["default"], { sx: { p: '1.25rem' }, children: jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
|
|
3952
|
-
};
|
|
3953
|
-
|
|
3954
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
|
|
3955
|
-
const MRT_TableContainer = (_a) => {
|
|
3956
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
3957
|
-
const { getState, options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
|
|
3958
|
-
const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
|
|
3959
|
-
const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
|
3960
|
-
const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
|
|
3961
|
-
const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
|
|
3962
|
-
table,
|
|
3963
|
-
})), rest);
|
|
3964
|
-
useIsomorphicLayoutEffect(() => {
|
|
3965
|
-
var _a, _b, _c, _d;
|
|
3966
|
-
const topToolbarHeight = typeof document !== 'undefined'
|
|
3967
|
-
? ((_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0)
|
|
3968
|
-
: 0;
|
|
3969
|
-
const bottomToolbarHeight = typeof document !== 'undefined'
|
|
3970
|
-
? ((_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0)
|
|
3971
|
-
: 0;
|
|
3972
|
-
setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
|
|
3973
|
-
});
|
|
3974
|
-
const createModalOpen = createDisplayMode === 'modal' && creatingRow;
|
|
3975
|
-
const editModalOpen = editDisplayMode === 'modal' && editingRow;
|
|
3976
|
-
return (jsxRuntime.jsxs(TableContainer__default["default"], Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
|
|
3977
|
-
if (node) {
|
|
3978
|
-
tableContainerRef.current = node;
|
|
3979
|
-
if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
|
|
3980
|
-
//@ts-ignore
|
|
3981
|
-
tableContainerProps.ref.current = node;
|
|
3982
|
-
}
|
|
3983
|
-
}
|
|
3984
|
-
}, style: Object.assign({ maxHeight: isFullScreen
|
|
3985
|
-
? `calc(100vh - ${totalToolbarHeight}px)`
|
|
3986
|
-
: undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
|
|
3987
|
-
? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
|
|
3988
|
-
: undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsxRuntime.jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table })), enableCellActions && actionCell && jsxRuntime.jsx(MRT_CellActionMenu, { table: table })] })));
|
|
3989
|
-
};
|
|
3990
|
-
|
|
3991
|
-
const MRT_LinearProgressBar = (_a) => {
|
|
3992
|
-
var { isTopToolbar, table } = _a, rest = __rest(_a, ["isTopToolbar", "table"]);
|
|
3993
|
-
const { getState, options: { muiLinearProgressProps }, } = table;
|
|
3994
|
-
const { isSaving, showProgressBars } = getState();
|
|
3995
|
-
const linearProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiLinearProgressProps, {
|
|
3996
|
-
isTopToolbar,
|
|
3997
|
-
table,
|
|
3998
|
-
})), rest);
|
|
3999
|
-
return (jsxRuntime.jsx(Collapse__default["default"], { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
|
|
4000
|
-
bottom: isTopToolbar ? 0 : undefined,
|
|
4001
|
-
position: 'absolute',
|
|
4002
|
-
top: !isTopToolbar ? 0 : undefined,
|
|
4003
|
-
width: '100%',
|
|
4004
|
-
}, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
|
|
4005
|
-
};
|
|
4006
|
-
|
|
4007
|
-
const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
|
|
4008
|
-
const MRT_TablePagination = (_a) => {
|
|
4009
|
-
var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
|
|
4010
|
-
const theme = styles.useTheme();
|
|
4011
|
-
const isMobile = useMediaQuery__default["default"]('(max-width: 720px)');
|
|
4012
|
-
const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, id, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
|
|
4013
|
-
const { pagination: { pageIndex = 0, pageSize = 10 }, } = getState();
|
|
4014
|
-
const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
|
|
4015
|
-
table,
|
|
4016
|
-
})), rest);
|
|
4017
|
-
const totalRowCount = table.getRowCount();
|
|
4018
|
-
const numberOfPages = table.getPageCount();
|
|
4019
|
-
const showFirstLastPageButtons = numberOfPages > 2;
|
|
4020
|
-
const firstRowIndex = pageIndex * pageSize;
|
|
4021
|
-
const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
|
|
4022
|
-
const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps = {}, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, restPaginationProps = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
|
|
4023
|
-
const disableBack = pageIndex <= 0 || disabled;
|
|
4024
|
-
const disableNext = lastRowIndex >= totalRowCount || disabled;
|
|
4025
|
-
if (isMobile && (SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) !== false) {
|
|
4026
|
-
SelectProps.native = true;
|
|
4027
|
-
}
|
|
4028
|
-
const tooltipProps = getCommonTooltipProps();
|
|
4029
|
-
return (jsxRuntime.jsxs(Box__default["default"], { className: "MuiTablePagination-root", sx: {
|
|
4030
|
-
alignItems: 'center',
|
|
4031
|
-
display: 'flex',
|
|
4032
|
-
flexWrap: 'wrap',
|
|
4033
|
-
gap: '8px',
|
|
4034
|
-
justifyContent: { md: 'space-between', sm: 'center' },
|
|
4035
|
-
justifySelf: 'flex-end',
|
|
4036
|
-
mt: position === 'top' && enableToolbarInternalActions
|
|
4037
|
-
? '3rem'
|
|
4038
|
-
: undefined,
|
|
4039
|
-
position: 'relative',
|
|
4040
|
-
px: '8px',
|
|
4041
|
-
py: '12px',
|
|
4042
|
-
zIndex: 2,
|
|
4043
|
-
}, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: `mrt-rows-per-page-${id}`, sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
|
|
4044
|
-
'aria-label': localization.rowsPerPage,
|
|
4045
|
-
id: `mrt-rows-per-page-${id}`,
|
|
4046
|
-
}, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
|
|
4047
|
-
var _a;
|
|
4048
|
-
const value = typeof option !== 'number' ? option.value : option;
|
|
4049
|
-
const label = typeof option !== 'number' ? option.label : `${option}`;
|
|
4050
|
-
return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsxRuntime.jsx("option", { value: value, children: label }, value)) : (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: label }, value))));
|
|
4051
|
-
}) }))] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
|
|
4052
|
-
first: FirstPageIcon,
|
|
4053
|
-
last: LastPageIcon,
|
|
4054
|
-
next: ChevronRightIcon,
|
|
4055
|
-
previous: ChevronLeftIcon,
|
|
4056
|
-
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsxRuntime.jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsxRuntime.jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
|
|
4057
|
-
};
|
|
4058
|
-
|
|
4059
|
-
const MRT_ToolbarDropZone = (_a) => {
|
|
4060
|
-
var _b, _c;
|
|
4061
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4062
|
-
const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
|
|
4063
|
-
const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = getState();
|
|
4064
|
-
const handleDragEnter = (_event) => {
|
|
4065
|
-
setHoveredColumn({ id: 'drop-zone' });
|
|
4066
|
-
};
|
|
4067
|
-
const handleDragOver = (e) => {
|
|
4068
|
-
e.preventDefault();
|
|
4069
|
-
};
|
|
4070
|
-
react.useEffect(() => {
|
|
4071
|
-
var _a;
|
|
4072
|
-
if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
|
|
4073
|
-
setShowToolbarDropZone(!!enableGrouping &&
|
|
4074
|
-
!!draggingColumn &&
|
|
4075
|
-
draggingColumn.columnDef.enableGrouping !== false &&
|
|
4076
|
-
!grouping.includes(draggingColumn.id));
|
|
4077
|
-
}
|
|
4078
|
-
}, [enableGrouping, draggingColumn, grouping]);
|
|
4079
|
-
return (jsxRuntime.jsx(Fade__default["default"], { in: showToolbarDropZone, children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(Typography__default["default"], { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
|
|
4080
|
-
};
|
|
4081
|
-
|
|
4082
|
-
const MRT_BottomToolbar = (_a) => {
|
|
4083
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4084
|
-
const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
|
|
4085
|
-
const { isFullScreen } = getState();
|
|
4086
|
-
const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
|
|
4087
|
-
const toolbarProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiBottomToolbarProps, { table })), rest);
|
|
4088
|
-
const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
|
|
4089
|
-
return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (node) => {
|
|
4090
|
-
if (node) {
|
|
4091
|
-
bottomToolbarRef.current = node;
|
|
4092
|
-
if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
|
|
4093
|
-
// @ts-ignore
|
|
4094
|
-
toolbarProps.ref.current = node;
|
|
4095
|
-
}
|
|
4096
|
-
}
|
|
4097
|
-
}, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
4098
|
-
alignItems: 'center',
|
|
4099
|
-
boxSizing: 'border-box',
|
|
4100
|
-
display: 'flex',
|
|
4101
|
-
justifyContent: 'space-between',
|
|
4102
|
-
p: '0.5rem',
|
|
4103
|
-
width: '100%',
|
|
4104
|
-
}, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsx(Box__default["default"], { sx: {
|
|
4105
|
-
display: 'flex',
|
|
4106
|
-
justifyContent: 'flex-end',
|
|
4107
|
-
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
4108
|
-
right: 0,
|
|
4109
|
-
top: 0,
|
|
4110
|
-
}, children: enablePagination &&
|
|
4111
|
-
['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
|
|
4112
|
-
};
|
|
4113
|
-
|
|
4114
|
-
const MRT_ColumnPinningButtons = (_a) => {
|
|
4115
|
-
var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
|
|
4116
|
-
const { options: { icons: { PushPinIcon }, localization, }, } = table;
|
|
4117
|
-
const handlePinColumn = (pinDirection) => {
|
|
4118
|
-
column.pin(pinDirection);
|
|
4119
|
-
};
|
|
4120
|
-
return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ minWidth: '70px', textAlign: 'center' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: column.getIsPinned() ? (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.unpin, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small", children: jsxRuntime.jsx(PushPinIcon, {}) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.pinToLeft, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
|
|
4121
|
-
transform: 'rotate(90deg)',
|
|
4122
|
-
} }) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.pinToRight, children: jsxRuntime.jsx(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small", children: jsxRuntime.jsx(PushPinIcon, { style: {
|
|
4123
|
-
transform: 'rotate(-90deg)',
|
|
4124
|
-
} }) }) })] })) })));
|
|
4125
|
-
};
|
|
4126
|
-
|
|
4127
|
-
const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
4128
|
-
var _b;
|
|
4129
|
-
var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
|
|
4130
|
-
const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
|
|
4131
|
-
const { columnOrder } = getState();
|
|
4132
|
-
const { columnDef } = column;
|
|
4133
|
-
const { columnDefType } = columnDef;
|
|
4134
|
-
const switchChecked = column.getIsVisible();
|
|
4135
|
-
const handleToggleColumnHidden = (column) => {
|
|
4136
|
-
var _a, _b;
|
|
4137
|
-
if (columnDefType === 'group') {
|
|
4138
|
-
(_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
|
|
4139
|
-
childColumn.toggleVisibility(!switchChecked);
|
|
4140
|
-
});
|
|
4141
|
-
}
|
|
4142
|
-
else {
|
|
4143
|
-
column.toggleVisibility();
|
|
4144
|
-
}
|
|
4145
|
-
};
|
|
4146
|
-
const menuItemRef = react.useRef(null);
|
|
4147
|
-
const [isDragging, setIsDragging] = react.useState(false);
|
|
4148
|
-
const handleDragStart = (e) => {
|
|
4149
|
-
setIsDragging(true);
|
|
4150
|
-
try {
|
|
4151
|
-
e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
|
|
4152
|
-
}
|
|
4153
|
-
catch (e) {
|
|
4154
|
-
console.error(e);
|
|
4155
|
-
}
|
|
4156
|
-
};
|
|
4157
|
-
const handleDragEnd = (_e) => {
|
|
4158
|
-
setIsDragging(false);
|
|
4159
|
-
setHoveredColumn(null);
|
|
4160
|
-
if (hoveredColumn) {
|
|
4161
|
-
setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
|
|
4162
|
-
}
|
|
4163
|
-
};
|
|
4164
|
-
const handleDragEnter = (_e) => {
|
|
4165
|
-
if (!isDragging && columnDef.enableColumnOrdering !== false) {
|
|
4166
|
-
setHoveredColumn(column);
|
|
4167
|
-
}
|
|
4168
|
-
};
|
|
4169
|
-
if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
|
|
4170
|
-
return null;
|
|
4171
|
-
}
|
|
4172
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
|
|
4173
|
-
? `2px dashed ${theme.palette.grey[500]}`
|
|
4174
|
-
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
|
4175
|
-
? `2px dashed ${draggingBorderColor}`
|
|
4176
|
-
: 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
4177
|
-
display: 'flex',
|
|
4178
|
-
flexWrap: 'nowrap',
|
|
4179
|
-
gap: '8px',
|
|
4180
|
-
}, children: [columnDefType !== 'group' &&
|
|
4181
|
-
enableColumnOrdering &&
|
|
4182
|
-
!isNestedColumns &&
|
|
4183
|
-
(columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '28px' } }))), enableColumnPinning &&
|
|
4184
|
-
(column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel__default["default"], { checked: switchChecked, componentsProps: {
|
|
4185
|
-
typography: {
|
|
4186
|
-
sx: {
|
|
4187
|
-
mb: 0,
|
|
4188
|
-
opacity: columnDefType !== 'display' ? 1 : 0.5,
|
|
4189
|
-
},
|
|
4190
|
-
},
|
|
4191
|
-
}, control: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsxRuntime.jsx(Switch__default["default"], {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
|
|
4192
|
-
};
|
|
4193
|
-
|
|
4194
|
-
const MRT_ShowHideColumnsMenu = (_a) => {
|
|
4195
|
-
var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
|
|
4196
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
|
|
4197
|
-
const { columnOrder, columnPinning, density } = getState();
|
|
4198
|
-
const handleToggleAllColumns = (value) => {
|
|
4199
|
-
getAllLeafColumns()
|
|
4200
|
-
.filter((col) => col.columnDef.enableHiding !== false)
|
|
4201
|
-
.forEach((col) => col.toggleVisibility(value));
|
|
4202
|
-
};
|
|
4203
|
-
const allColumns = react.useMemo(() => {
|
|
4204
|
-
const columns = getAllColumns();
|
|
4205
|
-
if (columnOrder.length > 0 &&
|
|
4206
|
-
!columns.some((col) => col.columnDef.columnDefType === 'group')) {
|
|
4207
|
-
return [
|
|
4208
|
-
...getLeftLeafColumns(),
|
|
4209
|
-
...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
|
|
4210
|
-
...getRightLeafColumns(),
|
|
4211
|
-
].filter(Boolean);
|
|
4212
|
-
}
|
|
4213
|
-
return columns;
|
|
4214
|
-
}, [
|
|
4215
|
-
columnOrder,
|
|
4216
|
-
columnPinning,
|
|
4217
|
-
getAllColumns(),
|
|
4218
|
-
getCenterLeafColumns(),
|
|
4219
|
-
getLeftLeafColumns(),
|
|
4220
|
-
getRightLeafColumns(),
|
|
4221
|
-
]);
|
|
4222
|
-
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
|
|
4223
|
-
const [hoveredColumn, setHoveredColumn] = react.useState(null);
|
|
4224
|
-
return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
|
|
4225
|
-
dense: density === 'compact',
|
|
4226
|
-
sx: {
|
|
4227
|
-
backgroundColor: menuBackgroundColor,
|
|
4228
|
-
},
|
|
4229
|
-
}, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
4230
|
-
display: 'flex',
|
|
4231
|
-
justifyContent: 'space-between',
|
|
4232
|
-
p: '0.5rem',
|
|
4233
|
-
pt: 0,
|
|
4234
|
-
}, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
|
|
4235
|
-
};
|
|
4236
|
-
|
|
4237
|
-
const MRT_ShowHideColumnsButton = (_a) => {
|
|
4238
|
-
var _b;
|
|
4239
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4240
|
-
const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
|
|
4241
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
4242
|
-
const handleClick = (event) => {
|
|
4243
|
-
setAnchorEl(event.currentTarget);
|
|
4244
|
-
};
|
|
4245
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsxRuntime.jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
|
|
4246
|
-
};
|
|
4247
|
-
|
|
4248
|
-
const MRT_ToggleDensePaddingButton = (_a) => {
|
|
4249
|
-
var _b;
|
|
4250
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4251
|
-
const { getState, options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization, }, setDensity, } = table;
|
|
4252
|
-
const { density } = getState();
|
|
4253
|
-
const handleToggleDensePadding = () => {
|
|
4254
|
-
const nextDensity = density === 'comfortable'
|
|
4255
|
-
? 'compact'
|
|
4256
|
-
: density === 'compact'
|
|
4257
|
-
? 'spacious'
|
|
4258
|
-
: 'comfortable';
|
|
4259
|
-
setDensity(nextDensity);
|
|
4260
|
-
};
|
|
4261
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsxRuntime.jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsxRuntime.jsx(DensityMediumIcon, {})) : (jsxRuntime.jsx(DensityLargeIcon, {})) })) }));
|
|
4262
|
-
};
|
|
4263
|
-
|
|
4264
|
-
const MRT_ToggleFiltersButton = (_a) => {
|
|
4265
|
-
var _b;
|
|
4266
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4267
|
-
const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowColumnFilters, } = table;
|
|
4268
|
-
const { showColumnFilters } = getState();
|
|
4269
|
-
const handleToggleShowFilters = () => {
|
|
4270
|
-
setShowColumnFilters(!showColumnFilters);
|
|
4271
|
-
};
|
|
4272
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsxRuntime.jsx(FilterListOffIcon, {}) : jsxRuntime.jsx(FilterListIcon, {}) })) }));
|
|
4273
|
-
};
|
|
4274
|
-
|
|
4275
|
-
const MRT_ToggleFullScreenButton = (_a) => {
|
|
4276
|
-
var _b;
|
|
4277
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4278
|
-
const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
|
|
4279
|
-
const { isFullScreen } = getState();
|
|
4280
|
-
const [tooltipOpened, setTooltipOpened] = react.useState(false);
|
|
4281
|
-
const handleToggleFullScreen = () => {
|
|
4282
|
-
setTooltipOpened(false);
|
|
4283
|
-
setIsFullScreen(!isFullScreen);
|
|
4284
|
-
};
|
|
4285
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleFullScreen, onBlur: () => setTooltipOpened(false), onClick: handleToggleFullScreen, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) }));
|
|
4286
|
-
};
|
|
4287
|
-
|
|
4288
|
-
const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
4289
|
-
var _b, _c;
|
|
4290
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4291
|
-
const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
|
|
4292
|
-
const { globalFilter, showGlobalFilter } = getState();
|
|
4293
|
-
const handleToggleSearch = () => {
|
|
4294
|
-
setShowGlobalFilter(!showGlobalFilter);
|
|
4295
|
-
queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
4296
|
-
};
|
|
4297
|
-
return (jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsxRuntime.jsx(SearchOffIcon, {}) : jsxRuntime.jsx(SearchIcon, {}) })) }));
|
|
4298
|
-
};
|
|
4299
|
-
|
|
4300
|
-
const MRT_ToolbarInternalButtons = (_a) => {
|
|
4301
|
-
var _b;
|
|
4302
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4303
|
-
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
|
|
4304
|
-
return (jsxRuntime.jsx(Box__default["default"], Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
|
|
4305
|
-
table,
|
|
4306
|
-
})) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableFilters &&
|
|
4307
|
-
enableGlobalFilter &&
|
|
4308
|
-
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsxRuntime.jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
|
|
4309
|
-
enableColumnFilters &&
|
|
4310
|
-
columnFilterDisplayMode !== 'popover' && (jsxRuntime.jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsxRuntime.jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsxRuntime.jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsxRuntime.jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
|
|
4311
|
-
};
|
|
4312
|
-
|
|
4313
|
-
const MRT_GlobalFilterTextField = (_a) => {
|
|
4314
|
-
var _b;
|
|
4315
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4316
|
-
const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
|
|
4317
|
-
const { globalFilter, showGlobalFilter } = getState();
|
|
4318
|
-
const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiSearchTextFieldProps, {
|
|
4319
|
-
table,
|
|
4320
|
-
})), rest);
|
|
4321
|
-
const isMounted = react.useRef(false);
|
|
4322
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
4323
|
-
const [searchValue, setSearchValue] = react.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
|
|
4324
|
-
const handleChangeDebounced = react.useCallback(utils.debounce((event) => {
|
|
4325
|
-
var _a;
|
|
4326
|
-
setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
|
|
4327
|
-
}, manualFiltering ? 500 : 250), []);
|
|
4328
|
-
const handleChange = (event) => {
|
|
4329
|
-
setSearchValue(event.target.value);
|
|
4330
|
-
handleChangeDebounced(event);
|
|
4331
|
-
};
|
|
4332
|
-
const handleGlobalFilterMenuOpen = (event) => {
|
|
4333
|
-
setAnchorEl(event.currentTarget);
|
|
4334
|
-
};
|
|
4335
|
-
const handleClear = () => {
|
|
4336
|
-
setSearchValue('');
|
|
4337
|
-
setGlobalFilter(undefined);
|
|
4338
|
-
};
|
|
4339
|
-
react.useEffect(() => {
|
|
4340
|
-
if (isMounted.current) {
|
|
4341
|
-
if (globalFilter === undefined) {
|
|
4342
|
-
handleClear();
|
|
4343
|
-
}
|
|
4344
|
-
else {
|
|
4345
|
-
setSearchValue(globalFilter);
|
|
4346
|
-
}
|
|
4347
|
-
}
|
|
4348
|
-
isMounted.current = true;
|
|
4349
|
-
}, [globalFilter]);
|
|
4350
|
-
return (jsxRuntime.jsxs(Collapse__default["default"], { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsxRuntime.jsx(TextField__default["default"], Object.assign({ inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", children: jsxRuntime.jsx(Tooltip__default["default"], { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "start", children: jsxRuntime.jsx(Tooltip__default["default"], { title: localization.changeSearchMode, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(SearchIcon, {}) }) }) })) : (jsxRuntime.jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
|
|
4351
|
-
var _a;
|
|
4352
|
-
return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
|
|
4353
|
-
} }), inputRef: (inputRef) => {
|
|
4354
|
-
searchInputRef.current = inputRef;
|
|
4355
|
-
if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
|
|
4356
|
-
textFieldProps.inputRef = inputRef;
|
|
4357
|
-
}
|
|
4358
|
-
} })), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
|
|
4359
|
-
};
|
|
4360
|
-
|
|
4361
|
-
const MRT_TopToolbar = ({ table, }) => {
|
|
4362
|
-
var _a;
|
|
4363
|
-
const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
|
|
4364
|
-
const { isFullScreen, showGlobalFilter } = getState();
|
|
4365
|
-
const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
|
|
4366
|
-
const isTablet = useMediaQuery__default["default"]('(max-width:1024px)');
|
|
4367
|
-
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
|
|
4368
|
-
const stackAlertBanner = isMobile ||
|
|
4369
|
-
!!renderTopToolbarCustomActions ||
|
|
4370
|
-
(showGlobalFilter && isTablet);
|
|
4371
|
-
const globalFilterProps = {
|
|
4372
|
-
sx: !isTablet
|
|
4373
|
-
? {
|
|
4374
|
-
zIndex: 2,
|
|
4375
|
-
}
|
|
4376
|
-
: undefined,
|
|
4377
|
-
table,
|
|
4378
|
-
};
|
|
4379
|
-
return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (ref) => {
|
|
4380
|
-
topToolbarRef.current = ref;
|
|
4381
|
-
if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
|
|
4382
|
-
// @ts-ignore
|
|
4383
|
-
toolbarProps.ref.current = ref;
|
|
4384
|
-
}
|
|
4385
|
-
}, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
4386
|
-
alignItems: 'flex-start',
|
|
4387
|
-
boxSizing: 'border-box',
|
|
4388
|
-
display: 'flex',
|
|
4389
|
-
gap: '0.5rem',
|
|
4390
|
-
justifyContent: 'space-between',
|
|
4391
|
-
p: '0.5rem',
|
|
4392
|
-
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
4393
|
-
right: 0,
|
|
4394
|
-
top: 0,
|
|
4395
|
-
width: '100%',
|
|
4396
|
-
}, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], { sx: {
|
|
4397
|
-
alignItems: 'center',
|
|
4398
|
-
display: 'flex',
|
|
4399
|
-
flexWrap: 'wrap-reverse',
|
|
4400
|
-
gap: '0.5rem',
|
|
4401
|
-
justifyContent: 'flex-end',
|
|
4402
|
-
}, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
|
|
4403
|
-
positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))))] }), enablePagination &&
|
|
4404
|
-
['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "top", table: table })), jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
|
|
4405
|
-
};
|
|
4406
|
-
|
|
4407
|
-
const MRT_TablePaper = (_a) => {
|
|
4408
|
-
var _b, _c;
|
|
4409
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
|
4410
|
-
const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
|
4411
|
-
const { isFullScreen } = getState();
|
|
4412
|
-
const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
|
|
4413
|
-
const theme = styles.useTheme();
|
|
4414
|
-
return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
|
|
4415
|
-
tablePaperRef.current = ref;
|
|
4416
|
-
if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
|
|
4417
|
-
//@ts-ignore
|
|
4418
|
-
paperProps.ref.current = ref;
|
|
4419
|
-
}
|
|
4420
|
-
}, style: Object.assign(Object.assign({}, (isFullScreen
|
|
4421
|
-
? {
|
|
4422
|
-
bottom: 0,
|
|
4423
|
-
height: '100dvh',
|
|
4424
|
-
left: 0,
|
|
4425
|
-
margin: 0,
|
|
4426
|
-
maxHeight: '100dvh',
|
|
4427
|
-
maxWidth: '100dvw',
|
|
4428
|
-
padding: 0,
|
|
4429
|
-
position: 'fixed',
|
|
4430
|
-
right: 0,
|
|
4431
|
-
top: 0,
|
|
4432
|
-
width: '100dvw',
|
|
4433
|
-
zIndex: theme.zIndex.modal,
|
|
4434
|
-
}
|
|
4435
|
-
: {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
|
|
4436
|
-
((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|
|
4437
|
-
((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
|
|
4438
|
-
};
|
|
4439
|
-
|
|
4440
|
-
const isTableInstanceProp = (props) => props.table !== undefined;
|
|
4441
|
-
const MaterialReactTable = (props) => {
|
|
4442
|
-
let table;
|
|
4443
|
-
if (isTableInstanceProp(props)) {
|
|
4444
|
-
table = props.table;
|
|
4445
|
-
}
|
|
4446
|
-
else {
|
|
4447
|
-
table = useMaterialReactTable(props);
|
|
4448
|
-
}
|
|
4449
|
-
return jsxRuntime.jsx(MRT_TablePaper, { table: table });
|
|
4450
|
-
};
|
|
4451
|
-
|
|
4452
|
-
exports.MRT_ActionMenuItem = MRT_ActionMenuItem;
|
|
4453
|
-
exports.MRT_AggregationFns = MRT_AggregationFns;
|
|
4454
|
-
exports.MRT_BottomToolbar = MRT_BottomToolbar;
|
|
4455
|
-
exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
|
|
4456
|
-
exports.MRT_ColumnPinningButtons = MRT_ColumnPinningButtons;
|
|
4457
|
-
exports.MRT_CopyButton = MRT_CopyButton;
|
|
4458
|
-
exports.MRT_DefaultColumn = MRT_DefaultColumn;
|
|
4459
|
-
exports.MRT_DefaultDisplayColumn = MRT_DefaultDisplayColumn;
|
|
4460
|
-
exports.MRT_EditActionButtons = MRT_EditActionButtons;
|
|
4461
|
-
exports.MRT_EditCellTextField = MRT_EditCellTextField;
|
|
4462
|
-
exports.MRT_EditRowModal = MRT_EditRowModal;
|
|
4463
|
-
exports.MRT_ExpandAllButton = MRT_ExpandAllButton;
|
|
4464
|
-
exports.MRT_ExpandButton = MRT_ExpandButton;
|
|
4465
|
-
exports.MRT_FilterCheckbox = MRT_FilterCheckbox;
|
|
4466
|
-
exports.MRT_FilterFns = MRT_FilterFns;
|
|
4467
|
-
exports.MRT_FilterOptionMenu = MRT_FilterOptionMenu;
|
|
4468
|
-
exports.MRT_FilterRangeFields = MRT_FilterRangeFields;
|
|
4469
|
-
exports.MRT_FilterRangeSlider = MRT_FilterRangeSlider;
|
|
4470
|
-
exports.MRT_FilterTextField = MRT_FilterTextField;
|
|
4471
|
-
exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
|
|
4472
|
-
exports.MRT_GrabHandleButton = MRT_GrabHandleButton;
|
|
4473
|
-
exports.MRT_LinearProgressBar = MRT_LinearProgressBar;
|
|
4474
|
-
exports.MRT_RowActionMenu = MRT_RowActionMenu;
|
|
4475
|
-
exports.MRT_RowPinButton = MRT_RowPinButton;
|
|
4476
|
-
exports.MRT_SelectCheckbox = MRT_SelectCheckbox;
|
|
4477
|
-
exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
|
|
4478
|
-
exports.MRT_ShowHideColumnsMenu = MRT_ShowHideColumnsMenu;
|
|
4479
|
-
exports.MRT_ShowHideColumnsMenuItems = MRT_ShowHideColumnsMenuItems;
|
|
4480
|
-
exports.MRT_SortingFns = MRT_SortingFns;
|
|
4481
|
-
exports.MRT_Table = MRT_Table;
|
|
4482
|
-
exports.MRT_TableBody = MRT_TableBody;
|
|
4483
|
-
exports.MRT_TableBodyCell = MRT_TableBodyCell;
|
|
4484
|
-
exports.MRT_TableBodyCellValue = MRT_TableBodyCellValue;
|
|
4485
|
-
exports.MRT_TableBodyRow = MRT_TableBodyRow;
|
|
4486
|
-
exports.MRT_TableBodyRowGrabHandle = MRT_TableBodyRowGrabHandle;
|
|
4487
|
-
exports.MRT_TableBodyRowPinButton = MRT_TableBodyRowPinButton;
|
|
4488
|
-
exports.MRT_TableContainer = MRT_TableContainer;
|
|
4489
|
-
exports.MRT_TableDetailPanel = MRT_TableDetailPanel;
|
|
4490
|
-
exports.MRT_TableFooter = MRT_TableFooter;
|
|
4491
|
-
exports.MRT_TableFooterCell = MRT_TableFooterCell;
|
|
4492
|
-
exports.MRT_TableFooterRow = MRT_TableFooterRow;
|
|
4493
|
-
exports.MRT_TableHead = MRT_TableHead;
|
|
4494
|
-
exports.MRT_TableHeadCell = MRT_TableHeadCell;
|
|
4495
|
-
exports.MRT_TableHeadCellColumnActionsButton = MRT_TableHeadCellColumnActionsButton;
|
|
4496
|
-
exports.MRT_TableHeadCellFilterContainer = MRT_TableHeadCellFilterContainer;
|
|
4497
|
-
exports.MRT_TableHeadCellFilterLabel = MRT_TableHeadCellFilterLabel;
|
|
4498
|
-
exports.MRT_TableHeadCellGrabHandle = MRT_TableHeadCellGrabHandle;
|
|
4499
|
-
exports.MRT_TableHeadCellResizeHandle = MRT_TableHeadCellResizeHandle;
|
|
4500
|
-
exports.MRT_TableHeadCellSortLabel = MRT_TableHeadCellSortLabel;
|
|
4501
|
-
exports.MRT_TableHeadRow = MRT_TableHeadRow;
|
|
4502
|
-
exports.MRT_TableLoadingOverlay = MRT_TableLoadingOverlay;
|
|
4503
|
-
exports.MRT_TablePagination = MRT_TablePagination;
|
|
4504
|
-
exports.MRT_TablePaper = MRT_TablePaper;
|
|
4505
|
-
exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
|
|
4506
|
-
exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
|
|
4507
|
-
exports.MRT_ToggleFullScreenButton = MRT_ToggleFullScreenButton;
|
|
4508
|
-
exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
|
|
4509
|
-
exports.MRT_ToggleRowActionMenuButton = MRT_ToggleRowActionMenuButton;
|
|
4510
|
-
exports.MRT_ToolbarAlertBanner = MRT_ToolbarAlertBanner;
|
|
4511
|
-
exports.MRT_ToolbarDropZone = MRT_ToolbarDropZone;
|
|
4512
|
-
exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
|
|
4513
|
-
exports.MRT_TopToolbar = MRT_TopToolbar;
|
|
4514
|
-
exports.MaterialReactTable = MaterialReactTable;
|
|
4515
|
-
exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
|
|
4516
|
-
exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
|
|
4517
|
-
exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
|
|
4518
|
-
exports.cellKeyboardShortcuts = cellKeyboardShortcuts;
|
|
4519
|
-
exports.createMRTColumnHelper = createMRTColumnHelper;
|
|
4520
|
-
exports.createRow = createRow;
|
|
4521
|
-
exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
|
|
4522
|
-
exports.flexRender = flexRender;
|
|
4523
|
-
exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
|
|
4524
|
-
exports.getCanRankRows = getCanRankRows;
|
|
4525
|
-
exports.getColumnFilterInfo = getColumnFilterInfo;
|
|
4526
|
-
exports.getColumnId = getColumnId;
|
|
4527
|
-
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
|
4528
|
-
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
|
4529
|
-
exports.getIsRankingRows = getIsRankingRows;
|
|
4530
|
-
exports.getIsRowSelected = getIsRowSelected;
|
|
4531
|
-
exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
|
|
4532
|
-
exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
|
|
4533
|
-
exports.getMRT_Rows = getMRT_Rows;
|
|
4534
|
-
exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
|
|
4535
|
-
exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
|
|
4536
|
-
exports.isCellEditable = isCellEditable;
|
|
4537
|
-
exports.mrtFilterOptions = mrtFilterOptions;
|
|
4538
|
-
exports.openEditingCell = openEditingCell;
|
|
4539
|
-
exports.prepareColumns = prepareColumns;
|
|
4540
|
-
exports.rankGlobalFuzzy = rankGlobalFuzzy;
|
|
4541
|
-
exports.reorderColumn = reorderColumn;
|
|
4542
|
-
exports.showRowActionsColumn = showRowActionsColumn;
|
|
4543
|
-
exports.showRowDragColumn = showRowDragColumn;
|
|
4544
|
-
exports.showRowExpandColumn = showRowExpandColumn;
|
|
4545
|
-
exports.showRowNumbersColumn = showRowNumbersColumn;
|
|
4546
|
-
exports.showRowPinningColumn = showRowPinningColumn;
|
|
4547
|
-
exports.showRowSelectionColumn = showRowSelectionColumn;
|
|
4548
|
-
exports.showRowSpacerColumn = showRowSpacerColumn;
|
|
4549
|
-
exports.useDropdownOptions = useDropdownOptions;
|
|
4550
|
-
exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
|
|
4551
|
-
exports.useMRT_Effects = useMRT_Effects;
|
|
4552
|
-
exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
|
|
4553
|
-
exports.useMRT_Rows = useMRT_Rows;
|
|
4554
|
-
exports.useMRT_TableInstance = useMRT_TableInstance;
|
|
4555
|
-
exports.useMRT_TableOptions = useMRT_TableOptions;
|
|
4556
|
-
exports.useMaterialReactTable = useMaterialReactTable;
|
|
4557
|
-
//# sourceMappingURL=index.js.map
|