material-react-table 0.4.5 → 0.4.8
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/README.md +3 -2
- package/dist/MaterialReactTable.d.ts +71 -25
- package/dist/body/MRT_TableBodyCell.d.ts +2 -2
- package/dist/body/MRT_TableBodyRow.d.ts +2 -2
- package/dist/body/MRT_TableDetailPanel.d.ts +2 -2
- package/dist/buttons/MRT_EditActionButtons.d.ts +2 -2
- package/dist/buttons/MRT_ExpandButton.d.ts +2 -2
- package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts +2 -2
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +2 -2
- package/dist/footer/MRT_TableFooterCell.d.ts +2 -2
- package/dist/footer/MRT_TableFooterRow.d.ts +2 -2
- package/dist/head/MRT_TableHeadCell.d.ts +2 -2
- package/dist/head/MRT_TableHeadRow.d.ts +2 -2
- package/dist/icons.d.ts +25 -0
- package/dist/inputs/MRT_EditCellTextField.d.ts +2 -2
- package/dist/inputs/MRT_FilterTextField.d.ts +2 -2
- package/dist/inputs/MRT_SelectCheckbox.d.ts +2 -2
- package/dist/{utils/localization.d.ts → localization.d.ts} +1 -1
- package/dist/material-react-table.cjs.development.js +197 -155
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +198 -156
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
- package/dist/menus/MRT_RowActionMenu.d.ts +2 -2
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +2 -2
- package/dist/useMRT.d.ts +10 -6
- package/package.json +1 -1
- package/src/@types/react-table-config.d.ts +18 -121
- package/src/MaterialReactTable.tsx +188 -25
- package/src/body/MRT_TableBody.tsx +2 -1
- package/src/body/MRT_TableBodyCell.tsx +2 -2
- package/src/body/MRT_TableBodyRow.tsx +11 -9
- package/src/body/MRT_TableDetailPanel.tsx +9 -16
- package/src/buttons/MRT_EditActionButtons.tsx +7 -8
- package/src/buttons/MRT_ExpandAllButton.tsx +17 -18
- package/src/buttons/MRT_ExpandButton.tsx +20 -21
- package/src/buttons/MRT_FullScreenToggleButton.tsx +9 -6
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +11 -7
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +8 -6
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +8 -5
- package/src/buttons/MRT_ToggleFiltersButton.tsx +8 -5
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +8 -9
- package/src/buttons/MRT_ToggleSearchButton.tsx +8 -5
- package/src/footer/MRT_TableFooter.tsx +2 -1
- package/src/footer/MRT_TableFooterCell.tsx +2 -2
- package/src/footer/MRT_TableFooterRow.tsx +3 -3
- package/src/head/MRT_TableHead.tsx +2 -1
- package/src/head/MRT_TableHeadCell.tsx +7 -7
- package/src/head/MRT_TableHeadCellActions.tsx +1 -1
- package/src/head/MRT_TableHeadRow.tsx +3 -3
- package/src/icons.tsx +72 -0
- package/src/index.tsx +2 -0
- package/src/inputs/MRT_EditCellTextField.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +15 -15
- package/src/inputs/MRT_SearchTextField.tsx +4 -5
- package/src/inputs/MRT_SelectCheckbox.tsx +7 -7
- package/src/{utils/localization.ts → localization.ts} +1 -1
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -14
- package/src/menus/MRT_RowActionMenu.tsx +4 -4
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +3 -2
- package/src/table/MRT_TableContainer.tsx +19 -1
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +3 -3
- package/src/useMRT.tsx +24 -17
|
@@ -8,27 +8,28 @@ var React = require('react');
|
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
9
|
var reactTable = require('react-table');
|
|
10
10
|
var material = require('@mui/material');
|
|
11
|
-
var
|
|
12
|
-
var FilterIcon = _interopDefault(require('@mui/icons-material/FilterList'));
|
|
13
|
-
var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
|
|
11
|
+
var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
|
|
14
12
|
var ClearAllIcon = _interopDefault(require('@mui/icons-material/ClearAll'));
|
|
15
|
-
var
|
|
16
|
-
var
|
|
13
|
+
var CloseIcon = _interopDefault(require('@mui/icons-material/Close'));
|
|
14
|
+
var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
|
|
15
|
+
var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
|
|
16
|
+
var DoubleArrowDownIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
|
|
17
17
|
var DynamicFeedIcon = _interopDefault(require('@mui/icons-material/DynamicFeed'));
|
|
18
|
-
var MuiArrowRightIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
|
|
19
|
-
var MuiExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
|
|
20
|
-
var MoreHorizIcon = _interopDefault(require('@mui/icons-material/MoreHoriz'));
|
|
21
18
|
var EditIcon = _interopDefault(require('@mui/icons-material/Edit'));
|
|
19
|
+
var ExpandLessIcon = _interopDefault(require('@mui/icons-material/ExpandLess'));
|
|
20
|
+
var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
|
|
21
|
+
var FilterListIcon = _interopDefault(require('@mui/icons-material/FilterList'));
|
|
22
|
+
var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
|
|
23
|
+
var FullscreenExitIcon = _interopDefault(require('@mui/icons-material/FullscreenExit'));
|
|
24
|
+
var FullscreenIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
|
|
25
|
+
var MoreHorizIcon = _interopDefault(require('@mui/icons-material/MoreHoriz'));
|
|
26
|
+
var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
|
|
22
27
|
var SaveIcon = _interopDefault(require('@mui/icons-material/Save'));
|
|
23
|
-
var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
|
|
24
28
|
var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
|
|
25
|
-
var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
|
|
26
|
-
var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
|
|
27
|
-
var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
|
|
28
|
-
var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
|
|
29
29
|
var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
|
|
30
|
-
var
|
|
31
|
-
var
|
|
30
|
+
var SortIcon = _interopDefault(require('@mui/icons-material/Sort'));
|
|
31
|
+
var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
|
|
32
|
+
var VisibilityOffIcon = _interopDefault(require('@mui/icons-material/VisibilityOff'));
|
|
32
33
|
|
|
33
34
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
34
35
|
try {
|
|
@@ -104,17 +105,19 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
|
104
105
|
}();
|
|
105
106
|
|
|
106
107
|
var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
107
|
-
var _props$
|
|
108
|
+
var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4;
|
|
108
109
|
|
|
109
110
|
var hooks = [reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
|
|
110
111
|
if (props.enableColumnResizing) hooks.unshift(reactTable.useResizeColumns, reactTable.useFlexLayout);
|
|
111
112
|
var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
|
|
112
|
-
var anyRowsCanExpand = React.useMemo(
|
|
113
|
+
var anyRowsCanExpand = React.useMemo( // @ts-ignore
|
|
114
|
+
function () {
|
|
113
115
|
return tableInstance.rows.some(function (row) {
|
|
114
116
|
return row.canExpand;
|
|
115
117
|
});
|
|
116
118
|
}, [tableInstance.rows]);
|
|
117
|
-
var anyRowsExpanded = React.useMemo(
|
|
119
|
+
var anyRowsExpanded = React.useMemo( // @ts-ignore
|
|
120
|
+
function () {
|
|
118
121
|
return tableInstance.rows.some(function (row) {
|
|
119
122
|
return row.isExpanded;
|
|
120
123
|
});
|
|
@@ -124,19 +127,19 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
124
127
|
currentEditingRow = _useState[0],
|
|
125
128
|
setCurrentEditingRow = _useState[1];
|
|
126
129
|
|
|
127
|
-
var _useState2 = React.useState((_props$
|
|
130
|
+
var _useState2 = React.useState((_props$initialState$d = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.densePadding) != null ? _props$initialState$d : false),
|
|
128
131
|
densePadding = _useState2[0],
|
|
129
132
|
setDensePadding = _useState2[1];
|
|
130
133
|
|
|
131
|
-
var _useState3 = React.useState((_props$
|
|
134
|
+
var _useState3 = React.useState((_props$initialState$f = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.fullScreen) != null ? _props$initialState$f : false),
|
|
132
135
|
fullScreen = _useState3[0],
|
|
133
136
|
setFullScreen = _useState3[1];
|
|
134
137
|
|
|
135
|
-
var _useState4 = React.useState((_props$
|
|
138
|
+
var _useState4 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
|
|
136
139
|
showFilters = _useState4[0],
|
|
137
140
|
setShowFilters = _useState4[1];
|
|
138
141
|
|
|
139
|
-
var _useState5 = React.useState((_props$
|
|
142
|
+
var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearchTextField) != null ? _props$initialState$s2 : false),
|
|
140
143
|
showSearch = _useState5[0],
|
|
141
144
|
setShowSearch = _useState5[1];
|
|
142
145
|
|
|
@@ -160,17 +163,20 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
160
163
|
}, props.children);
|
|
161
164
|
};
|
|
162
165
|
var useMRT = function useMRT() {
|
|
163
|
-
return (
|
|
166
|
+
return (// @ts-ignore
|
|
164
167
|
React.useContext(MaterialReactTableContext)
|
|
165
168
|
);
|
|
166
169
|
};
|
|
167
170
|
|
|
168
171
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
169
|
-
var _localization$filterT, _localization$filterT2, _localization$filterT3
|
|
172
|
+
var _localization$filterT, _localization$filterT2, _localization$filterT3;
|
|
170
173
|
|
|
171
174
|
var column = _ref.column;
|
|
172
175
|
|
|
173
176
|
var _useMRT = useMRT(),
|
|
177
|
+
_useMRT$icons = _useMRT.icons,
|
|
178
|
+
FilterListIcon = _useMRT$icons.FilterListIcon,
|
|
179
|
+
CloseIcon = _useMRT$icons.CloseIcon,
|
|
174
180
|
localization = _useMRT.localization;
|
|
175
181
|
|
|
176
182
|
var _useState = React.useState(''),
|
|
@@ -201,7 +207,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
201
207
|
}
|
|
202
208
|
},
|
|
203
209
|
margin: "dense",
|
|
204
|
-
placeholder:
|
|
210
|
+
placeholder: (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
|
|
205
211
|
onChange: function onChange(e) {
|
|
206
212
|
setFilterValue(e.target.value);
|
|
207
213
|
handleChange(e.target.value);
|
|
@@ -214,17 +220,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
214
220
|
InputProps: {
|
|
215
221
|
startAdornment: React__default.createElement(material.Tooltip, {
|
|
216
222
|
arrow: true,
|
|
217
|
-
title: (_localization$filterT2 = localization
|
|
223
|
+
title: (_localization$filterT2 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT2.replace('{column}', String(column.Header))
|
|
218
224
|
}, React__default.createElement(material.InputAdornment, {
|
|
219
225
|
position: "start"
|
|
220
|
-
}, React__default.createElement(
|
|
226
|
+
}, React__default.createElement(FilterListIcon, null))),
|
|
221
227
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
222
228
|
position: "end"
|
|
223
229
|
}, React__default.createElement(material.Tooltip, {
|
|
224
230
|
arrow: true,
|
|
225
|
-
title: (_localization$
|
|
231
|
+
title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
|
|
226
232
|
}, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
|
|
227
|
-
"aria-label": localization
|
|
233
|
+
"aria-label": localization.filterTextFieldClearButtonTitle,
|
|
228
234
|
disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
|
|
229
235
|
onClick: handleClear,
|
|
230
236
|
size: "small"
|
|
@@ -252,7 +258,13 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
252
258
|
disableSortBy = _useMRT.disableSortBy,
|
|
253
259
|
enableColumnGrouping = _useMRT.enableColumnGrouping,
|
|
254
260
|
localization = _useMRT.localization,
|
|
255
|
-
setShowFilters = _useMRT.setShowFilters
|
|
261
|
+
setShowFilters = _useMRT.setShowFilters,
|
|
262
|
+
_useMRT$icons = _useMRT.icons,
|
|
263
|
+
FilterListIcon = _useMRT$icons.FilterListIcon,
|
|
264
|
+
SortIcon = _useMRT$icons.SortIcon,
|
|
265
|
+
ClearAllIcon = _useMRT$icons.ClearAllIcon,
|
|
266
|
+
DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
|
|
267
|
+
VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon;
|
|
256
268
|
|
|
257
269
|
var handleClearSort = function handleClearSort() {
|
|
258
270
|
column.clearSortBy();
|
|
@@ -300,11 +312,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
300
312
|
key: 1,
|
|
301
313
|
disabled: !column.isSorted,
|
|
302
314
|
onClick: handleClearSort
|
|
303
|
-
}, React__default.createElement(ClearAllIcon, null), " ", localization
|
|
315
|
+
}, React__default.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React__default.createElement(MenuItem, {
|
|
304
316
|
key: 2,
|
|
305
317
|
disabled: column.isSorted && !column.isSortedDesc,
|
|
306
318
|
onClick: handleSortAsc
|
|
307
|
-
}, React__default.createElement(SortIcon, null), ' ',
|
|
319
|
+
}, React__default.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(MenuItem, {
|
|
308
320
|
key: 3,
|
|
309
321
|
disabled: column.isSorted && column.isSortedDesc,
|
|
310
322
|
onClick: handleSortDesc
|
|
@@ -312,22 +324,22 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
312
324
|
style: {
|
|
313
325
|
transform: 'rotate(180deg) scaleX(-1)'
|
|
314
326
|
}
|
|
315
|
-
}), ' ',
|
|
327
|
+
}), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React__default.createElement(material.Divider, {
|
|
316
328
|
key: 0
|
|
317
329
|
}), React__default.createElement(MenuItem, {
|
|
318
330
|
key: 1,
|
|
319
331
|
onClick: handleFilterByColumn
|
|
320
|
-
}, React__default.createElement(
|
|
332
|
+
}, React__default.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
|
|
321
333
|
key: 1
|
|
322
334
|
}), React__default.createElement(MenuItem, {
|
|
323
335
|
key: 2,
|
|
324
336
|
onClick: handleGroupByColumn
|
|
325
|
-
}, React__default.createElement(DynamicFeedIcon, null), ' ',
|
|
337
|
+
}, React__default.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React__default.createElement(material.Divider, {
|
|
326
338
|
key: 0
|
|
327
339
|
}), React__default.createElement(MenuItem, {
|
|
328
340
|
key: 1,
|
|
329
341
|
onClick: handleHideColumn
|
|
330
|
-
}, React__default.createElement(VisibilityOffIcon, null), ' ',
|
|
342
|
+
}, React__default.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
|
|
331
343
|
};
|
|
332
344
|
|
|
333
345
|
var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
|
|
@@ -341,12 +353,11 @@ var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
|
|
|
341
353
|
}
|
|
342
354
|
});
|
|
343
355
|
var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
|
|
344
|
-
var _localization$columnA;
|
|
345
|
-
|
|
346
356
|
var column = _ref.column;
|
|
347
357
|
|
|
348
358
|
var _useMRT = useMRT(),
|
|
349
|
-
localization = _useMRT.localization
|
|
359
|
+
localization = _useMRT.localization,
|
|
360
|
+
MoreVertIcon = _useMRT.icons.MoreVertIcon;
|
|
350
361
|
|
|
351
362
|
var _useState = React.useState(null),
|
|
352
363
|
anchorEl = _useState[0],
|
|
@@ -362,9 +373,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
362
373
|
arrow: true,
|
|
363
374
|
enterDelay: 1000,
|
|
364
375
|
enterNextDelay: 1000,
|
|
365
|
-
title:
|
|
376
|
+
title: localization.columnActionMenuButtonTitle
|
|
366
377
|
}, React__default.createElement(IconButton, {
|
|
367
|
-
"aria-label": localization
|
|
378
|
+
"aria-label": localization.columnActionMenuButtonTitle,
|
|
368
379
|
onClick: handleClick,
|
|
369
380
|
size: "small"
|
|
370
381
|
}, React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
|
@@ -412,7 +423,7 @@ var Divider = /*#__PURE__*/material.styled(material.Divider)({
|
|
|
412
423
|
maxHeight: '2rem'
|
|
413
424
|
});
|
|
414
425
|
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
|
|
415
|
-
var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps, _localization$columnA, _localization$columnA2
|
|
426
|
+
var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps, _localization$columnA, _localization$columnA2;
|
|
416
427
|
|
|
417
428
|
var column = _ref2.column;
|
|
418
429
|
|
|
@@ -434,7 +445,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
|
|
|
434
445
|
style: _extends({}, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {}, (_mcTableHeadCellProps = mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style) != null ? _mcTableHeadCellProps : {})
|
|
435
446
|
});
|
|
436
447
|
|
|
437
|
-
var sortTooltip = column.isSorted ? column.isSortedDesc ?
|
|
448
|
+
var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.columnActionMenuItemClearSort : (_localization$columnA = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA.replace('{column}', column.Header) : (_localization$columnA2 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA2.replace('{column}', column.Header);
|
|
438
449
|
return React__default.createElement(MRT_StyledTableHeadCell, Object.assign({
|
|
439
450
|
align: isParentHeader ? 'center' : 'left',
|
|
440
451
|
densePadding: densePadding,
|
|
@@ -481,8 +492,6 @@ var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
|
481
492
|
});
|
|
482
493
|
|
|
483
494
|
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
484
|
-
var _localization$selectA, _localization$selectC, _localization$selectA2, _localization$selectC2;
|
|
485
|
-
|
|
486
495
|
var row = _ref.row,
|
|
487
496
|
selectAll = _ref.selectAll;
|
|
488
497
|
|
|
@@ -495,8 +504,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
495
504
|
|
|
496
505
|
var onSelectChange = function onSelectChange(event) {
|
|
497
506
|
if (selectAll) {
|
|
507
|
+
var _tableInstance$getTog;
|
|
508
|
+
|
|
509
|
+
tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
|
|
498
510
|
onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.selectedFlatRows);
|
|
499
|
-
tableInstance.toggleAllRowsSelected(event.target.checked);
|
|
500
511
|
} else if (row) {
|
|
501
512
|
var _row$getToggleRowSele;
|
|
502
513
|
|
|
@@ -512,10 +523,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
512
523
|
arrow: true,
|
|
513
524
|
enterDelay: 1000,
|
|
514
525
|
enterNextDelay: 1000,
|
|
515
|
-
title: selectAll ?
|
|
526
|
+
title: selectAll ? localization.selectAllCheckboxTitle : localization.selectCheckboxTitle
|
|
516
527
|
}, React__default.createElement(material.Checkbox, Object.assign({
|
|
517
528
|
inputProps: {
|
|
518
|
-
'aria-label': selectAll ?
|
|
529
|
+
'aria-label': selectAll ? localization.selectAllCheckboxTitle : localization.selectCheckboxTitle
|
|
519
530
|
},
|
|
520
531
|
onChange: onSelectChange
|
|
521
532
|
}, checkboxProps, {
|
|
@@ -523,33 +534,25 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
523
534
|
}))));
|
|
524
535
|
};
|
|
525
536
|
|
|
526
|
-
var ArrowRightIcon = /*#__PURE__*/material.styled(MuiArrowRightIcon, {
|
|
527
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
528
|
-
return prop !== 'rotation';
|
|
529
|
-
}
|
|
530
|
-
})(function (_ref) {
|
|
531
|
-
var rotation = _ref.rotation;
|
|
532
|
-
return {
|
|
533
|
-
transform: "rotate(" + rotation + "deg)",
|
|
534
|
-
transition: 'transform 0.2s'
|
|
535
|
-
};
|
|
536
|
-
});
|
|
537
537
|
var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
538
538
|
var _useMRT = useMRT(),
|
|
539
539
|
tableInstance = _useMRT.tableInstance,
|
|
540
540
|
localization = _useMRT.localization,
|
|
541
541
|
anyRowsExpanded = _useMRT.anyRowsExpanded,
|
|
542
|
-
densePadding = _useMRT.densePadding
|
|
542
|
+
densePadding = _useMRT.densePadding,
|
|
543
|
+
DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon;
|
|
543
544
|
|
|
544
545
|
return React__default.createElement(MRT_TableButtonCell, Object.assign({
|
|
545
546
|
size: "small",
|
|
546
547
|
densePadding: densePadding
|
|
547
548
|
}, tableInstance.getToggleAllRowsExpandedProps()), React__default.createElement(material.IconButton, {
|
|
548
|
-
"aria-label": localization
|
|
549
|
-
title: localization
|
|
550
|
-
}, React__default.createElement(
|
|
551
|
-
|
|
552
|
-
|
|
549
|
+
"aria-label": localization.expandAllButtonTitle,
|
|
550
|
+
title: localization.expandAllButtonTitle
|
|
551
|
+
}, React__default.createElement(DoubleArrowDownIcon, {
|
|
552
|
+
style: {
|
|
553
|
+
transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
|
|
554
|
+
transition: 'transform 0.2s'
|
|
555
|
+
}
|
|
553
556
|
})));
|
|
554
557
|
};
|
|
555
558
|
|
|
@@ -582,7 +585,7 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
|
|
|
582
585
|
style: {
|
|
583
586
|
textAlign: 'center'
|
|
584
587
|
}
|
|
585
|
-
}, localization
|
|
588
|
+
}, localization.actionsHeadColumnTitle);
|
|
586
589
|
};
|
|
587
590
|
|
|
588
591
|
var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
@@ -741,32 +744,25 @@ var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
|
741
744
|
};
|
|
742
745
|
});
|
|
743
746
|
var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
|
|
744
|
-
var _mTableBodyRowProps$s
|
|
747
|
+
var _mTableBodyRowProps$s;
|
|
745
748
|
|
|
746
749
|
var row = _ref2.row;
|
|
747
750
|
|
|
748
751
|
var _useMRT = useMRT(),
|
|
749
|
-
tableInstance = _useMRT.tableInstance,
|
|
750
|
-
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
751
|
-
muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
|
|
752
752
|
muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
|
|
753
|
-
|
|
753
|
+
muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
|
|
754
|
+
onDetailPanelClick = _useMRT.onDetailPanelClick,
|
|
755
|
+
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
756
|
+
tableInstance = _useMRT.tableInstance;
|
|
754
757
|
|
|
755
758
|
var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
|
|
756
759
|
|
|
757
|
-
var tableRowProps = _extends({}, mTableBodyRowProps, row.
|
|
758
|
-
style: _extends({}, row.
|
|
759
|
-
});
|
|
760
|
-
|
|
761
|
-
var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
|
|
762
|
-
|
|
763
|
-
var tableCellProps = _extends({}, mTableDetailPanelProps, {
|
|
764
|
-
style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
|
|
760
|
+
var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
|
|
761
|
+
style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
|
|
765
762
|
});
|
|
766
763
|
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
}, tableRowProps), React__default.createElement(TableCell, Object.assign({
|
|
764
|
+
var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
|
|
765
|
+
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(TableCell, Object.assign({
|
|
770
766
|
colSpan: tableInstance.visibleColumns.length + 10,
|
|
771
767
|
isExpanded: row.isExpanded,
|
|
772
768
|
onClick: function onClick(event) {
|
|
@@ -788,23 +784,13 @@ var TableCell$1 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
|
|
|
788
784
|
textAlign: 'left'
|
|
789
785
|
};
|
|
790
786
|
});
|
|
791
|
-
var
|
|
792
|
-
|
|
793
|
-
return prop !== 'rotation';
|
|
794
|
-
}
|
|
795
|
-
})(function (_ref2) {
|
|
796
|
-
var rotation = _ref2.rotation;
|
|
797
|
-
return {
|
|
798
|
-
transform: "rotate(" + rotation + "deg)",
|
|
799
|
-
transition: 'transform 0.2s'
|
|
800
|
-
};
|
|
801
|
-
});
|
|
802
|
-
var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
|
|
803
|
-
var row = _ref3.row;
|
|
787
|
+
var MRT_ExpandButton = function MRT_ExpandButton(_ref2) {
|
|
788
|
+
var row = _ref2.row;
|
|
804
789
|
|
|
805
790
|
var _useMRT = useMRT(),
|
|
806
|
-
localization = _useMRT.localization,
|
|
807
791
|
densePadding = _useMRT.densePadding,
|
|
792
|
+
ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
|
|
793
|
+
localization = _useMRT.localization,
|
|
808
794
|
renderDetailPanel = _useMRT.renderDetailPanel;
|
|
809
795
|
|
|
810
796
|
return React__default.createElement(TableCell$1, {
|
|
@@ -812,12 +798,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
|
|
|
812
798
|
densePadding: densePadding,
|
|
813
799
|
depth: row.depth
|
|
814
800
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
815
|
-
"aria-label": localization
|
|
801
|
+
"aria-label": localization.expandButtonTitle,
|
|
816
802
|
disabled: !row.canExpand && !renderDetailPanel,
|
|
817
|
-
title: localization
|
|
803
|
+
title: localization.expandButtonTitle
|
|
818
804
|
}, row.getToggleRowExpandedProps()), React__default.createElement(ExpandMoreIcon, {
|
|
819
|
-
|
|
820
|
-
|
|
805
|
+
style: {
|
|
806
|
+
transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
|
|
807
|
+
transition: 'transform 0.2s'
|
|
808
|
+
}
|
|
821
809
|
})));
|
|
822
810
|
};
|
|
823
811
|
|
|
@@ -834,6 +822,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
|
834
822
|
setAnchorEl = _ref.setAnchorEl;
|
|
835
823
|
|
|
836
824
|
var _useMRT = useMRT(),
|
|
825
|
+
EditIcon = _useMRT.icons.EditIcon,
|
|
837
826
|
enableRowEditing = _useMRT.enableRowEditing,
|
|
838
827
|
localization = _useMRT.localization,
|
|
839
828
|
renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
|
|
@@ -847,7 +836,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
|
847
836
|
}
|
|
848
837
|
}, enableRowEditing && React__default.createElement(MenuItem$1, {
|
|
849
838
|
onClick: handleEdit
|
|
850
|
-
}, React__default.createElement(EditIcon, null), " ", localization
|
|
839
|
+
}, React__default.createElement(EditIcon, null), " ", localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
|
|
851
840
|
return setAnchorEl(null);
|
|
852
841
|
})) != null ? _renderRowActionMenuI : null);
|
|
853
842
|
};
|
|
@@ -1617,11 +1606,12 @@ var EditActionButtonWrappers = /*#__PURE__*/material.styled('div')({
|
|
|
1617
1606
|
gap: '0.75rem'
|
|
1618
1607
|
});
|
|
1619
1608
|
var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
1620
|
-
var _localization$rowActi, _localization$rowActi2;
|
|
1621
|
-
|
|
1622
1609
|
var row = _ref.row;
|
|
1623
1610
|
|
|
1624
1611
|
var _useMRT = useMRT(),
|
|
1612
|
+
_useMRT$icons = _useMRT.icons,
|
|
1613
|
+
CancelIcon = _useMRT$icons.CancelIcon,
|
|
1614
|
+
SaveIcon = _useMRT$icons.SaveIcon,
|
|
1625
1615
|
localization = _useMRT.localization,
|
|
1626
1616
|
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1627
1617
|
onRowEditSubmit = _useMRT.onRowEditSubmit,
|
|
@@ -1659,15 +1649,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
|
1659
1649
|
|
|
1660
1650
|
return React__default.createElement(EditActionButtonWrappers, null, React__default.createElement(material.Tooltip, {
|
|
1661
1651
|
arrow: true,
|
|
1662
|
-
title:
|
|
1652
|
+
title: localization.rowActionButtonCancel
|
|
1663
1653
|
}, React__default.createElement(material.IconButton, {
|
|
1664
|
-
"aria-label": localization
|
|
1654
|
+
"aria-label": localization.rowActionButtonCancel,
|
|
1665
1655
|
onClick: handleCancel
|
|
1666
1656
|
}, React__default.createElement(CancelIcon, null))), React__default.createElement(material.Tooltip, {
|
|
1667
1657
|
arrow: true,
|
|
1668
|
-
title:
|
|
1658
|
+
title: localization.rowActionButtonSave
|
|
1669
1659
|
}, React__default.createElement(material.IconButton, {
|
|
1670
|
-
"aria-label": localization
|
|
1660
|
+
"aria-label": localization.rowActionButtonSave,
|
|
1671
1661
|
color: "info",
|
|
1672
1662
|
onClick: handleSave
|
|
1673
1663
|
}, React__default.createElement(SaveIcon, null))));
|
|
@@ -1684,18 +1674,19 @@ var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
|
|
|
1684
1674
|
}
|
|
1685
1675
|
});
|
|
1686
1676
|
var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
|
|
1687
|
-
var _localization$rowActi;
|
|
1688
|
-
|
|
1689
1677
|
var row = _ref.row;
|
|
1690
1678
|
|
|
1691
1679
|
var _useMRT = useMRT(),
|
|
1692
1680
|
currentEditingRow = _useMRT.currentEditingRow,
|
|
1693
1681
|
densePadding = _useMRT.densePadding,
|
|
1682
|
+
enableRowEditing = _useMRT.enableRowEditing,
|
|
1683
|
+
_useMRT$icons = _useMRT.icons,
|
|
1684
|
+
EditIcon = _useMRT$icons.EditIcon,
|
|
1685
|
+
MoreHorizIcon = _useMRT$icons.MoreHorizIcon,
|
|
1694
1686
|
localization = _useMRT.localization,
|
|
1695
1687
|
renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
|
|
1696
|
-
enableRowEditing = _useMRT.enableRowEditing,
|
|
1697
|
-
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1698
1688
|
renderRowActions = _useMRT.renderRowActions,
|
|
1689
|
+
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1699
1690
|
tableInstance = _useMRT.tableInstance;
|
|
1700
1691
|
|
|
1701
1692
|
var _useState = React.useState(null),
|
|
@@ -1720,12 +1711,12 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
|
|
|
1720
1711
|
}) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
|
|
1721
1712
|
placement: "right",
|
|
1722
1713
|
arrow: true,
|
|
1723
|
-
title:
|
|
1714
|
+
title: localization.rowActionMenuItemEdit
|
|
1724
1715
|
}, React__default.createElement(IconButton$1, {
|
|
1725
1716
|
onClick: handleEdit
|
|
1726
1717
|
}, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton$1, {
|
|
1727
|
-
"aria-label": localization
|
|
1728
|
-
title: localization
|
|
1718
|
+
"aria-label": localization.rowActionMenuButtonTitle,
|
|
1719
|
+
title: localization.rowActionMenuButtonTitle,
|
|
1729
1720
|
onClick: handleOpenRowActionMenu,
|
|
1730
1721
|
size: "small"
|
|
1731
1722
|
}, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
|
|
@@ -1932,6 +1923,9 @@ var TextField = /*#__PURE__*/material.styled(material.TextField)({
|
|
|
1932
1923
|
});
|
|
1933
1924
|
var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
1934
1925
|
var _useMRT = useMRT(),
|
|
1926
|
+
_useMRT$icons = _useMRT.icons,
|
|
1927
|
+
SearchIcon = _useMRT$icons.SearchIcon,
|
|
1928
|
+
CloseIcon = _useMRT$icons.CloseIcon,
|
|
1935
1929
|
showSearch = _useMRT.showSearch,
|
|
1936
1930
|
localization = _useMRT.localization,
|
|
1937
1931
|
muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
|
|
@@ -1959,7 +1953,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1959
1953
|
orientation: "horizontal"
|
|
1960
1954
|
}, React__default.createElement(TextField, Object.assign({
|
|
1961
1955
|
id: "global-search-text-field",
|
|
1962
|
-
placeholder: localization
|
|
1956
|
+
placeholder: localization.searchTextFieldPlaceholder,
|
|
1963
1957
|
onChange: function onChange(event) {
|
|
1964
1958
|
setSearchValue(event.target.value);
|
|
1965
1959
|
handleChange(event);
|
|
@@ -1975,11 +1969,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1975
1969
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
1976
1970
|
position: "end"
|
|
1977
1971
|
}, React__default.createElement(material.IconButton, {
|
|
1978
|
-
"aria-label": localization
|
|
1972
|
+
"aria-label": localization.searchTextFieldClearButtonTitle,
|
|
1979
1973
|
disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
|
|
1980
1974
|
onClick: handleClear,
|
|
1981
1975
|
size: "small",
|
|
1982
|
-
title: localization
|
|
1976
|
+
title: localization.searchTextFieldClearButtonTitle
|
|
1983
1977
|
}, React__default.createElement(CloseIcon, {
|
|
1984
1978
|
fontSize: "small"
|
|
1985
1979
|
})))
|
|
@@ -1988,25 +1982,26 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1988
1982
|
};
|
|
1989
1983
|
|
|
1990
1984
|
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
|
1991
|
-
var _localization$toggleF;
|
|
1992
|
-
|
|
1993
1985
|
var rest = _extends({}, _ref);
|
|
1994
1986
|
|
|
1995
1987
|
var _useMRT = useMRT(),
|
|
1996
1988
|
localization = _useMRT.localization,
|
|
1997
1989
|
setShowFilters = _useMRT.setShowFilters,
|
|
1998
|
-
showFilters = _useMRT.showFilters
|
|
1990
|
+
showFilters = _useMRT.showFilters,
|
|
1991
|
+
_useMRT$icons = _useMRT.icons,
|
|
1992
|
+
FilterListIcon = _useMRT$icons.FilterListIcon,
|
|
1993
|
+
FilterListOffIcon = _useMRT$icons.FilterListOffIcon;
|
|
1999
1994
|
|
|
2000
1995
|
return React__default.createElement(material.Tooltip, {
|
|
2001
1996
|
arrow: true,
|
|
2002
|
-
title:
|
|
1997
|
+
title: localization.toggleFilterButtonTitle
|
|
2003
1998
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
2004
|
-
"aria-label": localization
|
|
1999
|
+
"aria-label": localization.toggleFilterButtonTitle,
|
|
2005
2000
|
onClick: function onClick() {
|
|
2006
2001
|
return setShowFilters(!showFilters);
|
|
2007
2002
|
},
|
|
2008
2003
|
size: "small"
|
|
2009
|
-
}, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(
|
|
2004
|
+
}, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
|
|
2010
2005
|
};
|
|
2011
2006
|
|
|
2012
2007
|
var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
@@ -2056,13 +2051,12 @@ var MenuButtons = /*#__PURE__*/material.styled('div')({
|
|
|
2056
2051
|
padding: '0 0.5rem 0.5rem 0.5rem'
|
|
2057
2052
|
});
|
|
2058
2053
|
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
2059
|
-
var _localization$showHid;
|
|
2060
|
-
|
|
2061
2054
|
var rest = _extends({}, _ref);
|
|
2062
2055
|
|
|
2063
2056
|
var _useMRT = useMRT(),
|
|
2064
2057
|
tableInstance = _useMRT.tableInstance,
|
|
2065
|
-
localization = _useMRT.localization
|
|
2058
|
+
localization = _useMRT.localization,
|
|
2059
|
+
ViewColumnIcon = _useMRT.icons.ViewColumnIcon;
|
|
2066
2060
|
|
|
2067
2061
|
var _useState = React.useState(null),
|
|
2068
2062
|
anchorEl = _useState[0],
|
|
@@ -2074,9 +2068,9 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
|
2074
2068
|
|
|
2075
2069
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
|
2076
2070
|
arrow: true,
|
|
2077
|
-
title:
|
|
2071
|
+
title: localization.showHideColumnsButtonTitle
|
|
2078
2072
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
2079
|
-
"aria-label": localization
|
|
2073
|
+
"aria-label": localization.showHideColumnsButtonTitle,
|
|
2080
2074
|
onClick: handleClick,
|
|
2081
2075
|
size: "small"
|
|
2082
2076
|
}, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(material.Menu, {
|
|
@@ -2090,12 +2084,12 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
|
2090
2084
|
onClick: function onClick() {
|
|
2091
2085
|
return tableInstance.toggleHideAllColumns(true);
|
|
2092
2086
|
}
|
|
2093
|
-
}, localization
|
|
2087
|
+
}, localization.columnShowHideMenuHideAll), React__default.createElement(material.Button, {
|
|
2094
2088
|
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
2095
2089
|
onClick: function onClick() {
|
|
2096
2090
|
return tableInstance.toggleHideAllColumns(false);
|
|
2097
2091
|
}
|
|
2098
|
-
}, localization
|
|
2092
|
+
}, localization.columnShowHideMenuShowAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
|
|
2099
2093
|
return React__default.createElement(MRT_ShowHideColumnsMenu, {
|
|
2100
2094
|
key: index + "-" + column.id,
|
|
2101
2095
|
column: column
|
|
@@ -2104,20 +2098,21 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
|
2104
2098
|
};
|
|
2105
2099
|
|
|
2106
2100
|
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
|
2107
|
-
var _localization$toggleD;
|
|
2108
|
-
|
|
2109
2101
|
var rest = _extends({}, _ref);
|
|
2110
2102
|
|
|
2111
2103
|
var _useMRT = useMRT(),
|
|
2112
2104
|
densePadding = _useMRT.densePadding,
|
|
2113
2105
|
setDensePadding = _useMRT.setDensePadding,
|
|
2114
|
-
localization = _useMRT.localization
|
|
2106
|
+
localization = _useMRT.localization,
|
|
2107
|
+
_useMRT$icons = _useMRT.icons,
|
|
2108
|
+
DensityMediumIcon = _useMRT$icons.DensityMediumIcon,
|
|
2109
|
+
DensitySmallIcon = _useMRT$icons.DensitySmallIcon;
|
|
2115
2110
|
|
|
2116
2111
|
return React__default.createElement(material.Tooltip, {
|
|
2117
2112
|
arrow: true,
|
|
2118
|
-
title:
|
|
2113
|
+
title: localization.toggleDensePaddingSwitchTitle
|
|
2119
2114
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
2120
|
-
"aria-label": localization
|
|
2115
|
+
"aria-label": localization.toggleDensePaddingSwitchTitle,
|
|
2121
2116
|
onClick: function onClick() {
|
|
2122
2117
|
return setDensePadding(!densePadding);
|
|
2123
2118
|
},
|
|
@@ -2126,15 +2121,16 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
|
|
2126
2121
|
};
|
|
2127
2122
|
|
|
2128
2123
|
var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
|
|
2129
|
-
var _localization$toggleS;
|
|
2130
|
-
|
|
2131
2124
|
var rest = _extends({}, _ref);
|
|
2132
2125
|
|
|
2133
2126
|
var _useMRT = useMRT(),
|
|
2127
|
+
_useMRT$icons = _useMRT.icons,
|
|
2128
|
+
SearchIcon = _useMRT$icons.SearchIcon,
|
|
2129
|
+
SearchOffIcon = _useMRT$icons.SearchOffIcon,
|
|
2134
2130
|
localization = _useMRT.localization,
|
|
2131
|
+
muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
|
|
2135
2132
|
setShowSearch = _useMRT.setShowSearch,
|
|
2136
|
-
showSearch = _useMRT.showSearch
|
|
2137
|
-
muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps;
|
|
2133
|
+
showSearch = _useMRT.showSearch;
|
|
2138
2134
|
|
|
2139
2135
|
var handleToggleSearch = function handleToggleSearch() {
|
|
2140
2136
|
setShowSearch(!showSearch);
|
|
@@ -2147,7 +2143,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
|
|
|
2147
2143
|
|
|
2148
2144
|
return React__default.createElement(material.Tooltip, {
|
|
2149
2145
|
arrow: true,
|
|
2150
|
-
title:
|
|
2146
|
+
title: localization.toggleSearchButtonTitle
|
|
2151
2147
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
2152
2148
|
size: "small",
|
|
2153
2149
|
onClick: handleToggleSearch
|
|
@@ -2155,25 +2151,26 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
|
|
|
2155
2151
|
};
|
|
2156
2152
|
|
|
2157
2153
|
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
|
2158
|
-
var _localization$toggleF;
|
|
2159
|
-
|
|
2160
2154
|
var rest = _extends({}, _ref);
|
|
2161
2155
|
|
|
2162
2156
|
var _useMRT = useMRT(),
|
|
2157
|
+
fullScreen = _useMRT.fullScreen,
|
|
2158
|
+
_useMRT$icons = _useMRT.icons,
|
|
2159
|
+
FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
|
|
2160
|
+
FullscreenIcon = _useMRT$icons.FullscreenIcon,
|
|
2163
2161
|
localization = _useMRT.localization,
|
|
2164
|
-
setFullScreen = _useMRT.setFullScreen
|
|
2165
|
-
fullScreen = _useMRT.fullScreen;
|
|
2162
|
+
setFullScreen = _useMRT.setFullScreen;
|
|
2166
2163
|
|
|
2167
2164
|
return React__default.createElement(material.Tooltip, {
|
|
2168
2165
|
arrow: true,
|
|
2169
|
-
title:
|
|
2166
|
+
title: localization.toggleFullScreenButtonTitle
|
|
2170
2167
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
2171
|
-
"aria-label": localization
|
|
2168
|
+
"aria-label": localization.toggleFilterButtonTitle,
|
|
2172
2169
|
onClick: function onClick() {
|
|
2173
2170
|
return setFullScreen(!fullScreen);
|
|
2174
2171
|
},
|
|
2175
2172
|
size: "small"
|
|
2176
|
-
}, rest), fullScreen ? React__default.createElement(
|
|
2173
|
+
}, rest), fullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
|
|
2177
2174
|
};
|
|
2178
2175
|
|
|
2179
2176
|
var ToolbarButtonsContainer = /*#__PURE__*/material.styled('div')({
|
|
@@ -2273,13 +2270,13 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
|
|
|
2273
2270
|
|
|
2274
2271
|
var isMobile = material.useMediaQuery('(max-width:720px)');
|
|
2275
2272
|
var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
|
|
2276
|
-
var selectMessage = tableInstance.selectedFlatRows.length > 0 ?
|
|
2277
|
-
var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React__default.createElement("span", null, localization
|
|
2273
|
+
var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
|
|
2274
|
+
var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React__default.createElement("span", null, localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
|
|
2278
2275
|
var _tableInstance$allCol;
|
|
2279
2276
|
|
|
2280
2277
|
return React__default.createElement(React.Fragment, {
|
|
2281
2278
|
key: index + "-" + columnId
|
|
2282
|
-
}, index > 0 ? localization
|
|
2279
|
+
}, index > 0 ? localization.toolbarAlertGroupedThenByMessage : '', React__default.createElement(material.Chip, {
|
|
2283
2280
|
color: "secondary",
|
|
2284
2281
|
label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
|
|
2285
2282
|
return column.id === columnId;
|
|
@@ -2431,6 +2428,25 @@ var MRT_TableContainer = function MRT_TableContainer() {
|
|
|
2431
2428
|
muiTableContainerProps = _useMRT.muiTableContainerProps,
|
|
2432
2429
|
tableInstance = _useMRT.tableInstance;
|
|
2433
2430
|
|
|
2431
|
+
var originalBodyOverflowStyle = React.useRef();
|
|
2432
|
+
React.useEffect(function () {
|
|
2433
|
+
if (typeof window !== 'undefined') {
|
|
2434
|
+
var _document, _document$body, _document$body$style;
|
|
2435
|
+
|
|
2436
|
+
originalBodyOverflowStyle.current = (_document = document) == null ? void 0 : (_document$body = _document.body) == null ? void 0 : (_document$body$style = _document$body.style) == null ? void 0 : _document$body$style.overflow;
|
|
2437
|
+
}
|
|
2438
|
+
}, []);
|
|
2439
|
+
React.useEffect(function () {
|
|
2440
|
+
if (typeof window !== 'undefined') {
|
|
2441
|
+
if (fullScreen) {
|
|
2442
|
+
document.body.style.overflow = 'hidden';
|
|
2443
|
+
} else {
|
|
2444
|
+
var _originalBodyOverflow;
|
|
2445
|
+
|
|
2446
|
+
document.body.style.overflow = (_originalBodyOverflow = originalBodyOverflowStyle.current) != null ? _originalBodyOverflow : 'auto';
|
|
2447
|
+
}
|
|
2448
|
+
}
|
|
2449
|
+
}, [fullScreen]);
|
|
2434
2450
|
var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
|
|
2435
2451
|
return React__default.createElement(TableContainer, Object.assign({
|
|
2436
2452
|
component: material.Paper,
|
|
@@ -2441,7 +2457,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
|
|
|
2441
2457
|
})), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
|
|
2442
2458
|
};
|
|
2443
2459
|
|
|
2444
|
-
var
|
|
2460
|
+
var MRT_DefaultLocalization_EN = {
|
|
2445
2461
|
actionsHeadColumnTitle: 'Actions',
|
|
2446
2462
|
columnActionMenuButtonTitle: 'Column Actions',
|
|
2447
2463
|
columnActionMenuItemClearSort: 'Clear sort',
|
|
@@ -2475,15 +2491,40 @@ var defaultLocalization = {
|
|
|
2475
2491
|
toolbarAlertGroupedThenByMessage: ', then by '
|
|
2476
2492
|
};
|
|
2477
2493
|
|
|
2478
|
-
var
|
|
2494
|
+
var MRT_Default_Icons = {
|
|
2495
|
+
CancelIcon: CancelIcon,
|
|
2496
|
+
ClearAllIcon: ClearAllIcon,
|
|
2497
|
+
CloseIcon: CloseIcon,
|
|
2498
|
+
DensityMediumIcon: DensityMediumIcon,
|
|
2499
|
+
DensitySmallIcon: DensitySmallIcon,
|
|
2500
|
+
DoubleArrowDownIcon: DoubleArrowDownIcon,
|
|
2501
|
+
DynamicFeedIcon: DynamicFeedIcon,
|
|
2502
|
+
EditIcon: EditIcon,
|
|
2503
|
+
ExpandLessIcon: ExpandLessIcon,
|
|
2504
|
+
ExpandMoreIcon: ExpandMoreIcon,
|
|
2505
|
+
FilterListIcon: FilterListIcon,
|
|
2506
|
+
FilterListOffIcon: FilterListOffIcon,
|
|
2507
|
+
FullscreenExitIcon: FullscreenExitIcon,
|
|
2508
|
+
FullscreenIcon: FullscreenIcon,
|
|
2509
|
+
MoreHorizIcon: MoreHorizIcon,
|
|
2510
|
+
MoreVertIcon: MoreVertIcon,
|
|
2511
|
+
SaveIcon: SaveIcon,
|
|
2512
|
+
SearchIcon: SearchIcon,
|
|
2513
|
+
SearchOffIcon: SearchOffIcon,
|
|
2514
|
+
SortIcon: SortIcon,
|
|
2515
|
+
ViewColumnIcon: ViewColumnIcon,
|
|
2516
|
+
VisibilityOffIcon: VisibilityOffIcon
|
|
2517
|
+
};
|
|
2518
|
+
|
|
2519
|
+
var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
2479
2520
|
var MaterialReactTable = (function (_ref) {
|
|
2480
2521
|
var _ref$defaultColumn = _ref.defaultColumn,
|
|
2481
2522
|
defaultColumn = _ref$defaultColumn === void 0 ? {
|
|
2482
2523
|
minWidth: 50,
|
|
2483
2524
|
maxWidth: 1000
|
|
2484
2525
|
} : _ref$defaultColumn,
|
|
2485
|
-
|
|
2486
|
-
localization = _ref
|
|
2526
|
+
icons = _ref.icons,
|
|
2527
|
+
localization = _ref.localization,
|
|
2487
2528
|
_ref$positionActionsC = _ref.positionActionsColumn,
|
|
2488
2529
|
positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
|
|
2489
2530
|
_ref$positionPaginati = _ref.positionPagination,
|
|
@@ -2496,7 +2537,8 @@ var MaterialReactTable = (function (_ref) {
|
|
|
2496
2537
|
|
|
2497
2538
|
return React__default.createElement(MaterialReactTableProvider, Object.assign({
|
|
2498
2539
|
defaultColumn: defaultColumn,
|
|
2499
|
-
|
|
2540
|
+
icons: _extends({}, MRT_Default_Icons, icons),
|
|
2541
|
+
localization: _extends({}, MRT_DefaultLocalization_EN, localization),
|
|
2500
2542
|
positionActionsColumn: positionActionsColumn,
|
|
2501
2543
|
positionPagination: positionPagination,
|
|
2502
2544
|
positionToolbarActions: positionToolbarActions,
|