@laerdal/life-react-components 1.3.2-dev.6.full → 1.3.2-dev.7
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/dist/esm/Button/Iconbutton.js +0 -1
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +5 -2
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/HyperLink/HyperLink.js +2 -1
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +23 -13
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/Table/Table.js +115 -181
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody.js +145 -0
- package/dist/esm/Table/TableBody.js.map +1 -0
- package/dist/esm/Table/TableFooter.js +67 -0
- package/dist/esm/Table/TableFooter.js.map +1 -0
- package/dist/esm/Table/TableHeaders.js +66 -0
- package/dist/esm/Table/TableHeaders.js.map +1 -0
- package/dist/esm/Table/TableStyles.js +175 -150
- package/dist/esm/Table/TableStyles.js.map +1 -1
- package/dist/esm/Table/__tests__/Table.test.js +0 -21
- package/dist/esm/Table/__tests__/Table.test.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +2 -2
- package/dist/js/Button/Iconbutton.js +0 -1
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.d.ts +1 -1
- package/dist/js/Dropdown/DropdownButton.js +5 -2
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/js/Dropdown/DropdownFilter.d.ts +1 -1
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/HyperLink/HyperLink.d.ts +1 -1
- package/dist/js/HyperLink/HyperLink.js +2 -2
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/InputFields/Checkbox.d.ts +3 -2
- package/dist/js/InputFields/Checkbox.js +13 -11
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/Table/Table.js +145 -209
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Table/TableBody.d.ts +9 -0
- package/dist/js/Table/TableBody.js +176 -0
- package/dist/js/Table/TableBody.js.map +1 -0
- package/dist/js/Table/TableFooter.d.ts +13 -0
- package/dist/js/Table/TableFooter.js +88 -0
- package/dist/js/Table/TableFooter.js.map +1 -0
- package/dist/js/Table/TableHeaders.d.ts +9 -0
- package/dist/js/Table/TableHeaders.js +87 -0
- package/dist/js/Table/TableHeaders.js.map +1 -0
- package/dist/js/Table/TableStyles.d.ts +0 -7
- package/dist/js/Table/TableStyles.js +5 -31
- package/dist/js/Table/TableStyles.js.map +1 -1
- package/dist/js/Table/TableTypes.d.ts +23 -16
- package/dist/js/Table/__tests__/Table.test.js +8 -30
- package/dist/js/Table/__tests__/Table.test.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +0 -1
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +5 -2
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/HyperLink/HyperLink.js +2 -1
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +23 -13
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/Table/Table.js +141 -188
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Table/TableBody.js +281 -0
- package/dist/umd/Table/TableBody.js.map +1 -0
- package/dist/umd/Table/TableFooter.js +90 -0
- package/dist/umd/Table/TableFooter.js.map +1 -0
- package/dist/umd/Table/TableHeaders.js +103 -0
- package/dist/umd/Table/TableHeaders.js.map +1 -0
- package/dist/umd/Table/TableStyles.js +179 -155
- package/dist/umd/Table/TableStyles.js.map +1 -1
- package/dist/umd/Table/__tests__/Table.test.js +0 -21
- package/dist/umd/Table/__tests__/Table.test.js.map +1 -1
- package/package.json +1 -1
package/dist/umd/Table/Table.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "react", "../
|
|
3
|
+
define(["exports", "react", "../types", "./TableStyles", "../LoadingIndicator", "./TableHeaders", "./TableFooter", "./TableBody"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("react"), require("../
|
|
5
|
+
factory(exports, require("react"), require("../types"), require("./TableStyles"), require("../LoadingIndicator"), require("./TableHeaders"), require("./TableFooter"), require("./TableBody"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.react, global.
|
|
10
|
+
factory(mod.exports, global.react, global.types, global.TableStyles, global.LoadingIndicator, global.TableHeaders, global.TableFooter, global.TableBody);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _react,
|
|
13
|
+
})(this, function (exports, _react, _types, _TableStyles, _LoadingIndicator, _TableHeaders, _TableFooter, _TableBody) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -19,6 +19,18 @@
|
|
|
19
19
|
|
|
20
20
|
var React = _interopRequireWildcard(_react);
|
|
21
21
|
|
|
22
|
+
var _TableHeaders2 = _interopRequireDefault(_TableHeaders);
|
|
23
|
+
|
|
24
|
+
var _TableFooter2 = _interopRequireDefault(_TableFooter);
|
|
25
|
+
|
|
26
|
+
var _TableBody2 = _interopRequireDefault(_TableBody);
|
|
27
|
+
|
|
28
|
+
function _interopRequireDefault(obj) {
|
|
29
|
+
return obj && obj.__esModule ? obj : {
|
|
30
|
+
default: obj
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
|
|
22
34
|
function _getRequireWildcardCache(nodeInterop) {
|
|
23
35
|
if (typeof WeakMap !== "function") return null;
|
|
24
36
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -69,37 +81,44 @@
|
|
|
69
81
|
return newObj;
|
|
70
82
|
}
|
|
71
83
|
|
|
84
|
+
function _extends() {
|
|
85
|
+
_extends = Object.assign || function (target) {
|
|
86
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
87
|
+
var source = arguments[i];
|
|
88
|
+
|
|
89
|
+
for (var key in source) {
|
|
90
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
91
|
+
target[key] = source[key];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return target;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
return _extends.apply(this, arguments);
|
|
100
|
+
}
|
|
72
101
|
/**
|
|
73
102
|
* Import React libraries.
|
|
74
103
|
*/
|
|
75
104
|
|
|
76
|
-
/**
|
|
77
|
-
* Import custom components.
|
|
78
|
-
*/
|
|
79
105
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
106
|
+
const Table = props => {
|
|
107
|
+
let {
|
|
108
|
+
onPreviousPageClick,
|
|
109
|
+
onNextPageClick,
|
|
110
|
+
onRowsPerPageChange,
|
|
111
|
+
onTriggerSortingChange,
|
|
112
|
+
columns,
|
|
113
|
+
rows,
|
|
114
|
+
remoteOperations,
|
|
115
|
+
pagination,
|
|
116
|
+
showLoadingIndicator,
|
|
117
|
+
selectable,
|
|
118
|
+
multiSelect,
|
|
119
|
+
keyExpr
|
|
120
|
+
} = props; // States used within the component
|
|
83
121
|
|
|
84
|
-
/**
|
|
85
|
-
* Import custom types.
|
|
86
|
-
*/
|
|
87
|
-
const Table = ({
|
|
88
|
-
rowClick,
|
|
89
|
-
linkClick,
|
|
90
|
-
iconClick,
|
|
91
|
-
previousPageClick,
|
|
92
|
-
nextPageClick,
|
|
93
|
-
rowsPerPageChange,
|
|
94
|
-
triggerSortingChange,
|
|
95
|
-
title,
|
|
96
|
-
columns,
|
|
97
|
-
rows,
|
|
98
|
-
remotePagination,
|
|
99
|
-
pagination,
|
|
100
|
-
showLoadingIndicator
|
|
101
|
-
}) => {
|
|
102
|
-
// States used within the component
|
|
103
122
|
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
|
104
123
|
const [filteredRows, setFilteredRows] = React.useState([]);
|
|
105
124
|
const [currentPageRows, setCurrentPageRows] = React.useState([]);
|
|
@@ -109,13 +128,29 @@
|
|
|
109
128
|
const [from, setFrom] = React.useState();
|
|
110
129
|
const [to, setTo] = React.useState();
|
|
111
130
|
const [total, setTotal] = React.useState();
|
|
131
|
+
const [selectAllState, setSelectAllState] = React.useState('none');
|
|
132
|
+
const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
|
|
133
|
+
React.useEffect(() => {
|
|
134
|
+
setSelected(props.selectedRows || (multiSelect ? [] : undefined));
|
|
135
|
+
}, [props.selectedRows, multiSelect]);
|
|
136
|
+
/**
|
|
137
|
+
* update select all checkbox state
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
React.useEffect(() => {
|
|
141
|
+
if (multiSelect) {
|
|
142
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
143
|
+
const count = selected.filter(item => currentList.includes(item)).length;
|
|
144
|
+
setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
|
|
145
|
+
}
|
|
146
|
+
}, [currentPageRows, multiSelect, selected, keyExpr]);
|
|
112
147
|
/**
|
|
113
148
|
* Takes care of local pagination.
|
|
114
149
|
* Works only in case remote pagination is not defined or is set to false.
|
|
115
150
|
*/
|
|
116
151
|
|
|
117
152
|
React.useEffect(() => {
|
|
118
|
-
if (!
|
|
153
|
+
if (!remoteOperations) {
|
|
119
154
|
// Let's retrieve temporary filtered rows and update globally filtered rows
|
|
120
155
|
const tmpFilteredRows = filterAndSortRows();
|
|
121
156
|
setFilteredRows(tmpFilteredRows);
|
|
@@ -129,14 +164,14 @@
|
|
|
129
164
|
|
|
130
165
|
setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
|
|
131
166
|
}
|
|
132
|
-
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection,
|
|
167
|
+
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
|
|
133
168
|
/**
|
|
134
169
|
* Takes care of remote pagination.
|
|
135
170
|
* Works only in case remote pagination is set to true.
|
|
136
171
|
*/
|
|
137
172
|
|
|
138
173
|
React.useEffect(() => {
|
|
139
|
-
if (
|
|
174
|
+
if (remoteOperations) {
|
|
140
175
|
setCurrentPageRows(rows); // Let's assign pagination values
|
|
141
176
|
|
|
142
177
|
setFrom(pagination?.from);
|
|
@@ -145,7 +180,7 @@
|
|
|
145
180
|
setCurrentPage(pagination?.currentPage);
|
|
146
181
|
setRowsPerPage(pagination?.rowsPerPage);
|
|
147
182
|
}
|
|
148
|
-
}, [
|
|
183
|
+
}, [remoteOperations, pagination, rows]);
|
|
149
184
|
/**
|
|
150
185
|
* Filters out a rows by specific column filters and sorts them if any sorting is set.
|
|
151
186
|
* @returns Filtered and sorted rows.
|
|
@@ -214,8 +249,8 @@
|
|
|
214
249
|
setSortedColumn(column.key);
|
|
215
250
|
setSortedDirection('desc'); // Let's trigger remote sorting trigger function
|
|
216
251
|
|
|
217
|
-
if (
|
|
218
|
-
|
|
252
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
253
|
+
onTriggerSortingChange(column.key, 'desc');
|
|
219
254
|
}
|
|
220
255
|
} else {
|
|
221
256
|
tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
|
|
@@ -223,8 +258,8 @@
|
|
|
223
258
|
setSortedColumn(column.key);
|
|
224
259
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
225
260
|
|
|
226
|
-
if (
|
|
227
|
-
|
|
261
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
262
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
228
263
|
}
|
|
229
264
|
}
|
|
230
265
|
} else {
|
|
@@ -234,8 +269,8 @@
|
|
|
234
269
|
setSortedColumn(column.key);
|
|
235
270
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
236
271
|
|
|
237
|
-
if (
|
|
238
|
-
|
|
272
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
273
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
239
274
|
}
|
|
240
275
|
}
|
|
241
276
|
} else if (tmpColumn.sortingDirection !== undefined) {
|
|
@@ -252,10 +287,10 @@
|
|
|
252
287
|
|
|
253
288
|
|
|
254
289
|
const previousPage = () => {
|
|
255
|
-
if (
|
|
290
|
+
if (remoteOperations) {
|
|
256
291
|
// Let's inform parent component about page change
|
|
257
|
-
if (
|
|
258
|
-
|
|
292
|
+
if (onPreviousPageClick) {
|
|
293
|
+
onPreviousPageClick();
|
|
259
294
|
}
|
|
260
295
|
} else {
|
|
261
296
|
// Let's change the page within the component
|
|
@@ -268,10 +303,10 @@
|
|
|
268
303
|
|
|
269
304
|
|
|
270
305
|
const nextPage = () => {
|
|
271
|
-
if (
|
|
306
|
+
if (remoteOperations) {
|
|
272
307
|
// Let's inform parent component about page change
|
|
273
|
-
if (
|
|
274
|
-
|
|
308
|
+
if (onNextPageClick) {
|
|
309
|
+
onNextPageClick();
|
|
275
310
|
}
|
|
276
311
|
} else {
|
|
277
312
|
// Let's change the page within the component
|
|
@@ -286,10 +321,10 @@
|
|
|
286
321
|
|
|
287
322
|
const changeRowsPerPage = value => {
|
|
288
323
|
// Let's check if we are using remote pagination
|
|
289
|
-
if (
|
|
324
|
+
if (remoteOperations) {
|
|
290
325
|
// Inform parent component about rows per page change
|
|
291
|
-
if (
|
|
292
|
-
|
|
326
|
+
if (onRowsPerPageChange) {
|
|
327
|
+
onRowsPerPageChange(value);
|
|
293
328
|
}
|
|
294
329
|
} else {
|
|
295
330
|
// Let's reset current page to 1
|
|
@@ -297,172 +332,90 @@
|
|
|
297
332
|
} // Let's set rows per page
|
|
298
333
|
|
|
299
334
|
|
|
300
|
-
setRowsPerPage(
|
|
301
|
-
};
|
|
302
|
-
/**
|
|
303
|
-
* Renders the table header.
|
|
304
|
-
*/
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
const renderHeader = () => {
|
|
308
|
-
return /*#__PURE__*/React.createElement("thead", null, title && /*#__PURE__*/React.createElement("tr", {
|
|
309
|
-
"data-testid": "TestTableHeaderRow"
|
|
310
|
-
}, /*#__PURE__*/React.createElement(_TableStyles.TableHeaderRowCol, {
|
|
311
|
-
colSpan: columns.length
|
|
312
|
-
}, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(_SystemIcons.MoreVertical, {
|
|
313
|
-
size: "18px",
|
|
314
|
-
color: _styles.COLORS.neutral_600
|
|
315
|
-
})))), /*#__PURE__*/React.createElement("tr", {
|
|
316
|
-
"data-testid": "TestTableColumnHeaderRow"
|
|
317
|
-
}, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableColumnHeaderCol, {
|
|
318
|
-
onClick: () => sortTableColumn(column),
|
|
319
|
-
key: column.key,
|
|
320
|
-
style: {
|
|
321
|
-
width: column.width
|
|
322
|
-
},
|
|
323
|
-
className: `${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`
|
|
324
|
-
}, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineUp, {
|
|
325
|
-
size: "20px"
|
|
326
|
-
}) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineDown, {
|
|
327
|
-
size: "20px"
|
|
328
|
-
}) : ''))));
|
|
335
|
+
setRowsPerPage(value);
|
|
329
336
|
};
|
|
330
337
|
/**
|
|
331
|
-
* Function which is called when a mouse click happens on a
|
|
338
|
+
* Function which is called when a mouse click happens on a row to pass data to the parent component.
|
|
332
339
|
* @param row - Row in which the link is located.
|
|
333
|
-
* @param key - Key of the column for which the link is set.
|
|
334
|
-
* @param event - Click event handler.
|
|
335
340
|
*/
|
|
336
341
|
|
|
337
342
|
|
|
338
|
-
const
|
|
339
|
-
|
|
340
|
-
event.stopPropagation();
|
|
341
|
-
linkClick(row, key);
|
|
342
|
-
}
|
|
343
|
-
};
|
|
344
|
-
/**
|
|
345
|
-
* Function which is called when a mouse click happens on an icon to pass data to the parent component.
|
|
346
|
-
* @param row - Row in which the icon is located.
|
|
347
|
-
* @param key - Key of the column for which the icon is set.
|
|
348
|
-
* @param event - Click event handler.
|
|
349
|
-
*/
|
|
343
|
+
const onRowClick = row => {
|
|
344
|
+
const selectedText = window?.getSelection()?.toString();
|
|
350
345
|
|
|
346
|
+
if (selectedText?.length === 0 && selectable) {
|
|
347
|
+
const value = keyExpr ? row[keyExpr] : row;
|
|
348
|
+
let currentSelection = value;
|
|
351
349
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
event.stopPropagation();
|
|
355
|
-
iconClick(row, key);
|
|
356
|
-
}
|
|
357
|
-
};
|
|
358
|
-
/**
|
|
359
|
-
* Function which is called when a mouse click happens on a row to pass data to the parent component.
|
|
360
|
-
* @param row - Row in which the link is located.
|
|
361
|
-
*/
|
|
350
|
+
if (!!multiSelect) {
|
|
351
|
+
const existing = selected?.indexOf(value);
|
|
362
352
|
|
|
353
|
+
if (existing > -1) {
|
|
354
|
+
currentSelection = [...selected];
|
|
355
|
+
currentSelection.splice(existing, 1);
|
|
356
|
+
} else {
|
|
357
|
+
currentSelection = [...selected, currentSelection];
|
|
358
|
+
}
|
|
359
|
+
}
|
|
363
360
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
if (selectedText?.length === 0 && rowClick) {
|
|
368
|
-
rowClick(row);
|
|
361
|
+
setSelected(currentSelection);
|
|
362
|
+
props.onSelectionChange && props.onSelectionChange(currentSelection);
|
|
369
363
|
}
|
|
370
364
|
};
|
|
371
365
|
/**
|
|
372
|
-
*
|
|
366
|
+
* Function which is called when user clicks checkbox to select or deselect all rows.
|
|
373
367
|
*/
|
|
374
368
|
|
|
375
369
|
|
|
376
|
-
const
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
color: column.colorFn(row, column.key),
|
|
385
|
-
maxWidth: column.width
|
|
386
|
-
} : {
|
|
387
|
-
maxWidth: column.width
|
|
388
|
-
},
|
|
389
|
-
className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
|
|
390
|
-
title: column.shortenText && row[column.key]
|
|
391
|
-
}, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(_index3.Button, {
|
|
392
|
-
size: _types.Size.Small,
|
|
393
|
-
variant: "tertiary",
|
|
394
|
-
onClick: event => onLinkClick(row, column.key, event),
|
|
395
|
-
style: column.colorFn && {
|
|
396
|
-
color: column.colorFn(row, column.key)
|
|
397
|
-
}
|
|
398
|
-
}, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
|
|
399
|
-
variant: "secondary",
|
|
400
|
-
shape: "circular",
|
|
401
|
-
useTransparentBackground: true,
|
|
402
|
-
action: event => onIconClick(row, column.key, event)
|
|
403
|
-
}, _index.SystemIcons[column.icon]({
|
|
404
|
-
size: '24',
|
|
405
|
-
className: 'icon'
|
|
406
|
-
})) : column.customContent ? column.customContent(row, column.key) : row[column.key])))) : /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
|
|
407
|
-
className: "no-rows",
|
|
408
|
-
"data-testid": "TestTableNoDataRow"
|
|
409
|
-
}, /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
|
|
410
|
-
colSpan: columns.length,
|
|
411
|
-
className: "center"
|
|
412
|
-
}, "There are no rows to display")));
|
|
413
|
-
};
|
|
414
|
-
/**
|
|
415
|
-
* Renders the table footer.
|
|
416
|
-
*/
|
|
370
|
+
const onSelectAllClick = () => {
|
|
371
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
372
|
+
|
|
373
|
+
switch (selectAllState) {
|
|
374
|
+
case 'all':
|
|
375
|
+
setSelected([...selected].filter(item => !currentList.includes(item)));
|
|
376
|
+
setSelectAllState('none');
|
|
377
|
+
break;
|
|
417
378
|
|
|
379
|
+
case 'none':
|
|
380
|
+
setSelected([...selected, ...currentList]);
|
|
381
|
+
setSelectAllState('all');
|
|
382
|
+
break;
|
|
418
383
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
"data-testid": "TestTableFooterRow"
|
|
425
|
-
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Rows per page: "), /*#__PURE__*/React.createElement(_index2.DropdownFilter, {
|
|
426
|
-
id: "rows-per-page",
|
|
427
|
-
list: rowsPerPageValues.map(x => ({
|
|
428
|
-
label: x
|
|
429
|
-
})),
|
|
430
|
-
disableSorting: true,
|
|
431
|
-
onSelect: value => changeRowsPerPage(value),
|
|
432
|
-
initalValue: rowsPerPage.toString(),
|
|
433
|
-
isButton: true
|
|
434
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
435
|
-
className: "current-page-info"
|
|
436
|
-
}, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
|
|
437
|
-
className: "controls"
|
|
438
|
-
}, /*#__PURE__*/React.createElement(_index3.IconButton, {
|
|
439
|
-
variant: "secondary",
|
|
440
|
-
shape: "circular",
|
|
441
|
-
action: () => previousPage(),
|
|
442
|
-
disabled: from === 1
|
|
443
|
-
}, /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
|
|
444
|
-
size: "24",
|
|
445
|
-
color: _styles.COLORS.neutral_600
|
|
446
|
-
})), /*#__PURE__*/React.createElement(_index3.IconButton, {
|
|
447
|
-
variant: "secondary",
|
|
448
|
-
shape: "circular",
|
|
449
|
-
action: () => nextPage(),
|
|
450
|
-
disabled: to === total
|
|
451
|
-
}, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
|
|
452
|
-
size: "24",
|
|
453
|
-
color: _styles.COLORS.neutral_600
|
|
454
|
-
})))))));
|
|
384
|
+
case 'some':
|
|
385
|
+
setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
|
|
386
|
+
setSelectAllState('all');
|
|
387
|
+
break;
|
|
388
|
+
}
|
|
455
389
|
};
|
|
456
390
|
/**
|
|
457
391
|
* Return Table component.
|
|
458
392
|
*/
|
|
459
393
|
|
|
460
394
|
|
|
461
|
-
return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(
|
|
395
|
+
return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement("table", {
|
|
462
396
|
cellPadding: "0",
|
|
463
397
|
cellSpacing: "0",
|
|
464
|
-
"data-testid": "TestTable"
|
|
465
|
-
|
|
398
|
+
"data-testid": "TestTable",
|
|
399
|
+
className: 'table'
|
|
400
|
+
}, /*#__PURE__*/React.createElement(_TableHeaders2.default, _extends({}, props, {
|
|
401
|
+
sortByColumn: sortTableColumn,
|
|
402
|
+
onSelectAllClick: onSelectAllClick,
|
|
403
|
+
selectAllState: selectAllState
|
|
404
|
+
})), /*#__PURE__*/React.createElement(_TableBody2.default, _extends({}, props, {
|
|
405
|
+
currentPageRows: currentPageRows,
|
|
406
|
+
selected: selected,
|
|
407
|
+
onRowClick: onRowClick
|
|
408
|
+
})), /*#__PURE__*/React.createElement(_TableFooter2.default, _extends({}, props, {
|
|
409
|
+
onRowsPerPageChange: changeRowsPerPage,
|
|
410
|
+
rowsPerPage: rowsPerPage,
|
|
411
|
+
from: from,
|
|
412
|
+
to: to,
|
|
413
|
+
total: total,
|
|
414
|
+
nextPage: nextPage,
|
|
415
|
+
prevPage: previousPage
|
|
416
|
+
}))), showLoadingIndicator && /*#__PURE__*/React.createElement("div", {
|
|
417
|
+
className: 'table-spinner'
|
|
418
|
+
}, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
|
|
466
419
|
size: _types.Size.Medium,
|
|
467
420
|
color: "#ffffff"
|
|
468
421
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","showLoadingIndicator","React","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","row","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remotePagination","triggerSortingChange","previousPage","previousPageClick","nextPage","nextPageClick","filteredRows","changeRowsPerPage","value","rowsPerPageChange","parseInt","renderHeader","title","length","COLORS","neutral_600","width","justify","onLinkClick","event","linkClick","onIconClick","iconClick","onRowClick","selectedText","window","rowClick","renderBody","currentPageRows","index","key","color","maxWidth","Size","size","className","renderFooter","rowsPerPageValues","x","label","rowsPerPage","total","from","to"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\nimport { Size } from '../types'\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n rowClick,\n linkClick,\n iconClick,\n previousPageClick,\n nextPageClick,\n rowsPerPageChange,\n triggerSortingChange,\n title,\n columns,\n rows,\n remotePagination,\n pagination,\n showLoadingIndicator,\n}: TableProps) => {\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sortedColumn, setSortedColumn] = React.useState<string>('');\n const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remotePagination) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remotePagination) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remotePagination, pagination, rows]);\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (columns.some((column) => column.sortingDirection)) {\n // Let's find the sorting column\n const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n // Update sorted column data\n setSortedDirection(sortingColumn.sortingDirection!);\n setSortedColumn(sortingColumn.key!);\n\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sortingColumn.key] > b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n // Let's remove any active sorting\n columns = columns.map((tmpColumn: TableColumn) => {\n // Let's apply new sorting\n // Let's check if it is the column for which we have to apply sorting\n if (column.key === tmpColumn.key && tmpColumn.sortable) {\n // Let's check if sorting is not defined\n // If so, let's toggle the sorting direction\n if (tmpColumn.sortingDirection !== undefined) {\n if (tmpColumn.sortingDirection === 'asc') {\n tmpColumn.sortingDirection = 'desc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('desc');\n\n // Let's trigger remote sorting trigger function\n if (remotePagination && triggerSortingChange) {\n triggerSortingChange(column.key, 'desc');\n }\n } else {\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remotePagination && triggerSortingChange) {\n triggerSortingChange(column.key, 'asc');\n }\n }\n } else {\n // Let's apply the initial sorting\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remotePagination && triggerSortingChange) {\n triggerSortingChange(column.key, 'asc');\n }\n }\n } else if (tmpColumn.sortingDirection !== undefined) {\n // Let's remove sorting\n tmpColumn.sortingDirection = undefined;\n }\n\n return tmpColumn;\n });\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remotePagination) {\n // Let's inform parent component about page change\n if (previousPageClick) {\n previousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remotePagination) {\n // Let's inform parent component about page change\n if (nextPageClick) {\n nextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: string) => {\n // Let's check if we are using remote pagination\n if (remotePagination) {\n // Inform parent component about rows per page change\n if (rowsPerPageChange) {\n rowsPerPageChange(parseInt(value));\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(parseInt(value));\n };\n\n /**\n * Renders the table header.\n */\n const renderHeader = () => {\n return (\n <thead>\n {title && (\n <tr data-testid=\"TestTableHeaderRow\">\n <TableHeaderRowCol colSpan={columns.length}>\n <div>\n {title}\n <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n </div>\n </TableHeaderRowCol>\n </tr>\n )}\n <tr data-testid=\"TestTableColumnHeaderRow\">\n {columns.map((column: TableColumn) => (\n <TableColumnHeaderCol\n onClick={() => sortTableColumn(column)}\n key={column.key}\n style={{ width: column.width }}\n className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n {column.name}\n\n {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n </TableColumnHeaderCol>\n ))}\n </tr>\n </thead>\n );\n };\n\n /**\n * Function which is called when a mouse click happens on a link to pass data to the parent component.\n * @param row - Row in which the link is located.\n * @param key - Key of the column for which the link is set.\n * @param event - Click event handler.\n */\n const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n if (linkClick) {\n event.stopPropagation();\n\n linkClick(row, key);\n }\n };\n\n /**\n * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n * @param row - Row in which the icon is located.\n * @param key - Key of the column for which the icon is set.\n * @param event - Click event handler.\n */\n const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n if (iconClick) {\n event.stopPropagation();\n\n iconClick(row, key);\n }\n };\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n // Let's trigger row click only if we haven't selected any text and action exists\n if (selectedText?.length === 0 && rowClick) {\n rowClick(row);\n }\n };\n\n /**\n * Renders the table body.\n */\n const renderBody = () => {\n return (\n <tbody>\n {currentPageRows.length > 0 ? (\n currentPageRows.map((row: any, index: number) => (\n <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n {columns.map((column: TableColumn) => (\n <TableDataCol\n key={`row_${index}_${column.key}`}\n style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n title={column.shortenText && row[column.key]}>\n {column.isLink && row[column.key] ? (\n <Button\n size={Size.Small}\n variant=\"tertiary\"\n onClick={(event) => onLinkClick(row, column.key, event)}\n style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n {row[column.key]}\n </Button>\n ) : column.isIcon && column.icon ? (\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n {icons[column.icon!]({ size: '24', className: 'icon' })}\n </IconButton>\n ) : column.customContent ? (\n column.customContent(row, column.key)\n ) : (\n row[column.key]\n )}\n </TableDataCol>\n ))}\n </TableDataRow>\n ))\n ) : (\n <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n <TableDataCol colSpan={columns.length} className=\"center\">\n There are no rows to display\n </TableDataCol>\n </TableDataRow>\n )}\n </tbody>\n );\n };\n\n /**\n * Renders the table footer.\n */\n const renderFooter = () => {\n // Define local values used within the footer\n const rowsPerPageValues = ['10', '20', '50', '100'];\n\n return (\n <tfoot>\n <tr>\n <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n <div>\n <span>Rows per page: </span>\n <DropdownFilter\n id=\"rows-per-page\"\n list={rowsPerPageValues.map(x => ({ label: x }))}\n disableSorting={true}\n onSelect={(value) => changeRowsPerPage(value)}\n initalValue={rowsPerPage.toString()}\n isButton={true}\n />\n <span className=\"current-page-info\">\n {total === 0 ? 0 : from}-{to} of {total}\n </span>\n <div className=\"controls\">\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n </IconButton>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n </IconButton>\n </div>\n </div>\n </TableFooterCol>\n </tr>\n </tfoot>\n );\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n {renderHeader()}\n {renderBody()}\n {renderFooter()}\n </TableContainer>\n {showLoadingIndicator && (\n <TableLoadingIndicator>\n <LoadingIndicator size={Size.Medium} color=\"#ffffff\"></LoadingIndicator>\n </TableLoadingIndicator>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","props","keyExpr","React","multiSelect","setSelected","currentList","currentPageRows","row","count","selected","item","setSelectAllState","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remoteOperations","onTriggerSortingChange","previousPage","onPreviousPageClick","nextPage","onNextPageClick","filteredRows","changeRowsPerPage","value","onRowsPerPageChange","onRowClick","selectedText","window","currentSelection","existing","onSelectAllClick","selectAllState","showLoadingIndicator","Size"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n let {\n onPreviousPageClick,\n onNextPageClick,\n onRowsPerPageChange,\n onTriggerSortingChange,\n columns,\n rows,\n remoteOperations,\n pagination,\n showLoadingIndicator,\n selectable,\n multiSelect,\n keyExpr\n } = props;\n\n // States used within the component\n const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n const [currentPage, setCurrentPage] = React.useState<number>(1);\n const [sortedColumn, setSortedColumn] = React.useState<string>('');\n const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n const [from, setFrom] = React.useState<number>();\n const [to, setTo] = React.useState<number>();\n const [total, setTotal] = React.useState<number>();\n\n const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n React.useEffect(() => {\n setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n }, [props.selectedRows, multiSelect])\n\n /**\n * update select all checkbox state\n */\n React.useEffect(() => {\n if (multiSelect) {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n }\n }, [currentPageRows, multiSelect, selected, keyExpr])\n\n\n /**\n * Takes care of local pagination.\n * Works only in case remote pagination is not defined or is set to false.\n */\n React.useEffect(() => {\n if (!remoteOperations) {\n // Let's retrieve temporary filtered rows and update globally filtered rows\n const tmpFilteredRows = filterAndSortRows();\n setFilteredRows(tmpFilteredRows);\n setTotal(tmpFilteredRows.length);\n\n // Assign rows from and rows to\n const rowsFrom = (currentPage - 1) * rowsPerPage;\n const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n // Set from and to values\n setFrom(rowsFrom + 1);\n setTo(rowsTo);\n\n // Filter out the rows\n setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n }\n }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);\n\n /**\n * Takes care of remote pagination.\n * Works only in case remote pagination is set to true.\n */\n React.useEffect(() => {\n if (remoteOperations) {\n setCurrentPageRows(rows);\n\n // Let's assign pagination values\n setFrom(pagination?.from);\n setTo(pagination?.to);\n setTotal(pagination?.total);\n setCurrentPage(pagination?.currentPage!);\n setRowsPerPage(pagination?.rowsPerPage!);\n }\n }, [remoteOperations, pagination, rows]);\n\n /**\n * Filters out a rows by specific column filters and sorts them if any sorting is set.\n * @returns Filtered and sorted rows.\n */\n const filterAndSortRows = (): any[] => {\n let tmpFilteredRows = rows.filter((row) => {\n // Let's start with matched filter criteria\n let matchFilterCriteria = true;\n\n // Let's go through columns\n for (const column of columns) {\n // Let's check if filter value is specified for the column\n // And if it doesn't match the current row column value\n // Then let's update match filter criteria to failed\n if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n matchFilterCriteria = false;\n }\n }\n\n // Let's return row only in case match filter criteria succeeds\n if (matchFilterCriteria) {\n return row;\n }\n });\n\n // Let's apply sorting if needed\n if (columns.some((column) => column.sortingDirection)) {\n // Let's find the sorting column\n const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n // Update sorted column data\n setSortedDirection(sortingColumn.sortingDirection!);\n setSortedColumn(sortingColumn.key!);\n\n // Let's sort the rows\n tmpFilteredRows.sort((a, b) => {\n if (a[sortingColumn.key] > b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n } else {\n return 0;\n }\n });\n }\n\n // Let's return filtered rows\n return tmpFilteredRows;\n };\n\n /**\n * Applies a specific sorting to a column.\n * If no sorting exists, then applies ascending initially\n * @param column - Column to which sorting should be applied.\n */\n const sortTableColumn = (column: TableColumn): void => {\n // Let's remove any active sorting\n columns = columns.map((tmpColumn: TableColumn) => {\n // Let's apply new sorting\n // Let's check if it is the column for which we have to apply sorting\n if (column.key === tmpColumn.key && tmpColumn.sortable) {\n // Let's check if sorting is not defined\n // If so, let's toggle the sorting direction\n if (tmpColumn.sortingDirection !== undefined) {\n if (tmpColumn.sortingDirection === 'asc') {\n tmpColumn.sortingDirection = 'desc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('desc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'desc');\n }\n } else {\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else {\n // Let's apply the initial sorting\n tmpColumn.sortingDirection = 'asc';\n\n // Update sorted column and direction\n setSortedColumn(column.key);\n setSortedDirection('asc');\n\n // Let's trigger remote sorting trigger function\n if (remoteOperations && onTriggerSortingChange) {\n onTriggerSortingChange(column.key, 'asc');\n }\n }\n } else if (tmpColumn.sortingDirection !== undefined) {\n // Let's remove sorting\n tmpColumn.sortingDirection = undefined;\n }\n\n return tmpColumn;\n });\n };\n\n /**\n * Navigates user back to the previous page and updates the current table page.\n */\n const previousPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onPreviousPageClick) {\n onPreviousPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n }\n };\n\n /**\n * Navigates user to the next page and updates the current table page.\n */\n const nextPage = () => {\n if (remoteOperations) {\n // Let's inform parent component about page change\n if (onNextPageClick) {\n onNextPageClick();\n }\n } else {\n // Let's change the page within the component\n setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n }\n };\n\n /**\n * Updates the rows per page value and refreshes the table content accordingly.\n * @param value - Newly selected rows per page value.\n */\n const changeRowsPerPage = (value: number) => {\n // Let's check if we are using remote pagination\n if (remoteOperations) {\n // Inform parent component about rows per page change\n if (onRowsPerPageChange) {\n onRowsPerPageChange(value);\n }\n } else {\n // Let's reset current page to 1\n setCurrentPage(1);\n }\n\n // Let's set rows per page\n setRowsPerPage(value);\n };\n\n\n /**\n * Function which is called when a mouse click happens on a row to pass data to the parent component.\n * @param row - Row in which the link is located.\n */\n const onRowClick = (row: any): void => {\n const selectedText = window?.getSelection()?.toString();\n\n if (selectedText?.length === 0 && selectable) {\n const value = keyExpr ? row[keyExpr] : row;\n let currentSelection = value;\n if (!!multiSelect) {\n const existing = selected?.indexOf(value);\n if (existing > -1) {\n currentSelection = [...selected];\n currentSelection.splice(existing, 1);\n } else {\n currentSelection = [...selected, currentSelection];\n }\n }\n\n setSelected(currentSelection)\n props.onSelectionChange && props.onSelectionChange(currentSelection);\n }\n };\n\n /**\n * Function which is called when user clicks checkbox to select or deselect all rows.\n */\n const onSelectAllClick = () => {\n const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n switch (selectAllState) {\n case 'all':\n setSelected([...selected].filter(item => !currentList.includes(item)));\n setSelectAllState('none');\n break;\n case 'none':\n setSelected([...selected, ...currentList]);\n setSelectAllState('all');\n break;\n case 'some':\n setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n setSelectAllState('all');\n break;\n }\n };\n\n /**\n * Return Table component.\n */\n return (\n <TableWrapper>\n <table cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={'table'}>\n <TableHeader {...props}\n sortByColumn={sortTableColumn}\n onSelectAllClick={onSelectAllClick}\n selectAllState={selectAllState}/>\n <TableBody {...props}\n currentPageRows={currentPageRows}\n selected={selected}\n onRowClick={onRowClick}/>\n <TableFooter {...props}\n onRowsPerPageChange={changeRowsPerPage}\n rowsPerPage={rowsPerPage}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n </table>\n {showLoadingIndicator && (\n <div className={'table-spinner'}>\n <LoadingIndicator size={Size.Medium} color=\"#ffffff\"/>\n </div>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|