@laerdal/life-react-components 1.3.2-dev.9 → 1.4.1-dev.3
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/Accordion/ContentAccordion.js +102 -81
- package/dist/esm/Accordion/ContentAccordion.js.map +1 -1
- package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js +27 -27
- package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +1 -1
- package/dist/esm/Button/DualFunctionButton.js +4 -0
- package/dist/esm/Button/DualFunctionButton.js.map +1 -1
- 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/DropdownContent.js +6 -6
- package/dist/esm/Dropdown/DropdownContent.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/Modals/ModalDialog.js +14 -5
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalNote.js +1 -1
- package/dist/esm/Modals/ModalNote.js.map +1 -1
- package/dist/esm/Table/Table.js +131 -181
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody.js +135 -0
- package/dist/esm/Table/TableBody.js.map +1 -0
- package/dist/esm/Table/TableFooter.js +68 -0
- package/dist/esm/Table/TableFooter.js.map +1 -0
- package/dist/esm/Table/TableHeaders.js +55 -0
- package/dist/esm/Table/TableHeaders.js.map +1 -0
- package/dist/esm/Table/TableStyles.js +181 -110
- package/dist/esm/Table/TableStyles.js.map +1 -1
- package/dist/esm/Table/__tests__/Table.test.js +162 -21
- package/dist/esm/Table/__tests__/Table.test.js.map +1 -1
- package/dist/js/Accordion/ContentAccordion.d.ts +0 -9
- package/dist/js/Accordion/ContentAccordion.js +21 -42
- package/dist/js/Accordion/ContentAccordion.js.map +1 -1
- package/dist/js/Accordion/__tests__/ContetnAccordion.test.js +27 -33
- package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +1 -1
- package/dist/js/Button/DualFunctionButton.js +4 -0
- package/dist/js/Button/DualFunctionButton.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/DropdownContent.js +8 -8
- package/dist/js/Dropdown/DropdownContent.js.map +1 -1
- 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/Modals/ModalDialog.d.ts +2 -1
- package/dist/js/Modals/ModalDialog.js +14 -5
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalNote.d.ts +1 -1
- package/dist/js/Modals/ModalNote.js +1 -1
- package/dist/js/Modals/ModalNote.js.map +1 -1
- package/dist/js/Table/Table.js +166 -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 +167 -0
- package/dist/js/Table/TableBody.js.map +1 -0
- package/dist/js/Table/TableFooter.d.ts +15 -0
- package/dist/js/Table/TableFooter.js +95 -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 +77 -0
- package/dist/js/Table/TableHeaders.js.map +1 -0
- package/dist/js/Table/TableStyles.d.ts +19 -7
- package/dist/js/Table/TableStyles.js +66 -16
- package/dist/js/Table/TableStyles.js.map +1 -1
- package/dist/js/Table/TableTypes.d.ts +26 -16
- package/dist/js/Table/__tests__/Table.test.js +172 -30
- package/dist/js/Table/__tests__/Table.test.js.map +1 -1
- package/dist/umd/Accordion/ContentAccordion.js +103 -82
- package/dist/umd/Accordion/ContentAccordion.js.map +1 -1
- package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js +26 -26
- package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +1 -1
- package/dist/umd/Button/DualFunctionButton.js +4 -0
- package/dist/umd/Button/DualFunctionButton.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/DropdownContent.js +6 -6
- package/dist/umd/Dropdown/DropdownContent.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/Modals/ModalDialog.js +14 -5
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalNote.js +1 -1
- package/dist/umd/Modals/ModalNote.js.map +1 -1
- package/dist/umd/Table/Table.js +157 -188
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Table/TableBody.js +270 -0
- package/dist/umd/Table/TableBody.js.map +1 -0
- package/dist/umd/Table/TableFooter.js +89 -0
- package/dist/umd/Table/TableFooter.js.map +1 -0
- package/dist/umd/Table/TableHeaders.js +91 -0
- package/dist/umd/Table/TableHeaders.js.map +1 -0
- package/dist/umd/Table/TableStyles.js +185 -115
- package/dist/umd/Table/TableStyles.js.map +1 -1
- package/dist/umd/Table/__tests__/Table.test.js +164 -25
- package/dist/umd/Table/__tests__/Table.test.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/Table/Table.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Import React libraries.
|
|
3
5
|
*/
|
|
@@ -6,39 +8,40 @@ import * as React from 'react';
|
|
|
6
8
|
* Import custom components.
|
|
7
9
|
*/
|
|
8
10
|
|
|
9
|
-
import { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';
|
|
10
|
-
import { SystemIcons as icons } from '../icons/index';
|
|
11
|
-
import { DropdownFilter } from '../Dropdown/index';
|
|
12
|
-
import { IconButton, Button } from '../Button/index';
|
|
13
11
|
import { Size } from '../types';
|
|
14
12
|
/**
|
|
15
13
|
* Import custom styles.
|
|
16
14
|
*/
|
|
17
15
|
|
|
18
|
-
import {
|
|
19
|
-
import { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';
|
|
16
|
+
import { StyledTable, StyledTableSpinner, TableWrapper } from './TableStyles';
|
|
20
17
|
/**
|
|
21
18
|
* Import custom types.
|
|
22
19
|
*/
|
|
23
20
|
|
|
24
21
|
import { LoadingIndicator } from '../LoadingIndicator';
|
|
22
|
+
import TableHeader from './TableHeaders';
|
|
23
|
+
import TableFooter from './TableFooter';
|
|
24
|
+
import TableBody from './TableBody';
|
|
25
|
+
|
|
26
|
+
const Table = props => {
|
|
27
|
+
let {
|
|
28
|
+
onPreviousPageClick,
|
|
29
|
+
onNextPageClick,
|
|
30
|
+
onRowsPerPageChange,
|
|
31
|
+
onTriggerSortingChange,
|
|
32
|
+
columns,
|
|
33
|
+
rows,
|
|
34
|
+
remoteOperations,
|
|
35
|
+
pagination,
|
|
36
|
+
showLoadingIndicator,
|
|
37
|
+
selectable,
|
|
38
|
+
multiSelect,
|
|
39
|
+
keyExpr,
|
|
40
|
+
accordion,
|
|
41
|
+
collapsed = true,
|
|
42
|
+
collapsedRows
|
|
43
|
+
} = props; // States used within the component
|
|
25
44
|
|
|
26
|
-
const Table = ({
|
|
27
|
-
rowClick,
|
|
28
|
-
linkClick,
|
|
29
|
-
iconClick,
|
|
30
|
-
previousPageClick,
|
|
31
|
-
nextPageClick,
|
|
32
|
-
rowsPerPageChange,
|
|
33
|
-
triggerSortingChange,
|
|
34
|
-
title,
|
|
35
|
-
columns,
|
|
36
|
-
rows,
|
|
37
|
-
remotePagination,
|
|
38
|
-
pagination,
|
|
39
|
-
showLoadingIndicator
|
|
40
|
-
}) => {
|
|
41
|
-
// States used within the component
|
|
42
45
|
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
|
43
46
|
const [filteredRows, setFilteredRows] = React.useState([]);
|
|
44
47
|
const [currentPageRows, setCurrentPageRows] = React.useState([]);
|
|
@@ -48,13 +51,30 @@ const Table = ({
|
|
|
48
51
|
const [from, setFrom] = React.useState();
|
|
49
52
|
const [to, setTo] = React.useState();
|
|
50
53
|
const [total, setTotal] = React.useState();
|
|
54
|
+
const [isCollapsed, setIsCollapsed] = React.useState(true);
|
|
55
|
+
const [selectAllState, setSelectAllState] = React.useState('none');
|
|
56
|
+
const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
|
|
57
|
+
React.useEffect(() => {
|
|
58
|
+
setSelected(props.selectedRows || (multiSelect ? [] : undefined));
|
|
59
|
+
}, [props.selectedRows, multiSelect]);
|
|
60
|
+
/**
|
|
61
|
+
* update select all checkbox state
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
if (multiSelect) {
|
|
66
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
67
|
+
const count = selected.filter(item => currentList.includes(item)).length;
|
|
68
|
+
setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
|
|
69
|
+
}
|
|
70
|
+
}, [currentPageRows, multiSelect, selected, keyExpr]);
|
|
51
71
|
/**
|
|
52
72
|
* Takes care of local pagination.
|
|
53
73
|
* Works only in case remote pagination is not defined or is set to false.
|
|
54
74
|
*/
|
|
55
75
|
|
|
56
76
|
React.useEffect(() => {
|
|
57
|
-
if (!
|
|
77
|
+
if (!remoteOperations) {
|
|
58
78
|
// Let's retrieve temporary filtered rows and update globally filtered rows
|
|
59
79
|
const tmpFilteredRows = filterAndSortRows();
|
|
60
80
|
setFilteredRows(tmpFilteredRows);
|
|
@@ -68,14 +88,14 @@ const Table = ({
|
|
|
68
88
|
|
|
69
89
|
setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
|
|
70
90
|
}
|
|
71
|
-
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection,
|
|
91
|
+
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
|
|
72
92
|
/**
|
|
73
93
|
* Takes care of remote pagination.
|
|
74
94
|
* Works only in case remote pagination is set to true.
|
|
75
95
|
*/
|
|
76
96
|
|
|
77
97
|
React.useEffect(() => {
|
|
78
|
-
if (
|
|
98
|
+
if (remoteOperations) {
|
|
79
99
|
setCurrentPageRows(rows); // Let's assign pagination values
|
|
80
100
|
|
|
81
101
|
setFrom(pagination?.from);
|
|
@@ -84,7 +104,19 @@ const Table = ({
|
|
|
84
104
|
setCurrentPage(pagination?.currentPage);
|
|
85
105
|
setRowsPerPage(pagination?.rowsPerPage);
|
|
86
106
|
}
|
|
87
|
-
}, [
|
|
107
|
+
}, [remoteOperations, pagination, rows]);
|
|
108
|
+
/**
|
|
109
|
+
* Sets number of rows to display when accordion.
|
|
110
|
+
*/
|
|
111
|
+
|
|
112
|
+
React.useEffect(() => {
|
|
113
|
+
if (!accordion) return;
|
|
114
|
+
setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
|
|
115
|
+
}, [rows, accordion, collapsedRows, isCollapsed]);
|
|
116
|
+
React.useEffect(() => {
|
|
117
|
+
if (!accordion) return;
|
|
118
|
+
setIsCollapsed(!!collapsed);
|
|
119
|
+
}, [accordion, collapsed]);
|
|
88
120
|
/**
|
|
89
121
|
* Filters out a rows by specific column filters and sorts them if any sorting is set.
|
|
90
122
|
* @returns Filtered and sorted rows.
|
|
@@ -153,8 +185,8 @@ const Table = ({
|
|
|
153
185
|
setSortedColumn(column.key);
|
|
154
186
|
setSortedDirection('desc'); // Let's trigger remote sorting trigger function
|
|
155
187
|
|
|
156
|
-
if (
|
|
157
|
-
|
|
188
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
189
|
+
onTriggerSortingChange(column.key, 'desc');
|
|
158
190
|
}
|
|
159
191
|
} else {
|
|
160
192
|
tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
|
|
@@ -162,8 +194,8 @@ const Table = ({
|
|
|
162
194
|
setSortedColumn(column.key);
|
|
163
195
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
164
196
|
|
|
165
|
-
if (
|
|
166
|
-
|
|
197
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
198
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
167
199
|
}
|
|
168
200
|
}
|
|
169
201
|
} else {
|
|
@@ -173,8 +205,8 @@ const Table = ({
|
|
|
173
205
|
setSortedColumn(column.key);
|
|
174
206
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
175
207
|
|
|
176
|
-
if (
|
|
177
|
-
|
|
208
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
209
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
178
210
|
}
|
|
179
211
|
}
|
|
180
212
|
} else if (tmpColumn.sortingDirection !== undefined) {
|
|
@@ -191,10 +223,10 @@ const Table = ({
|
|
|
191
223
|
|
|
192
224
|
|
|
193
225
|
const previousPage = () => {
|
|
194
|
-
if (
|
|
226
|
+
if (remoteOperations) {
|
|
195
227
|
// Let's inform parent component about page change
|
|
196
|
-
if (
|
|
197
|
-
|
|
228
|
+
if (onPreviousPageClick) {
|
|
229
|
+
onPreviousPageClick();
|
|
198
230
|
}
|
|
199
231
|
} else {
|
|
200
232
|
// Let's change the page within the component
|
|
@@ -207,10 +239,10 @@ const Table = ({
|
|
|
207
239
|
|
|
208
240
|
|
|
209
241
|
const nextPage = () => {
|
|
210
|
-
if (
|
|
242
|
+
if (remoteOperations) {
|
|
211
243
|
// Let's inform parent component about page change
|
|
212
|
-
if (
|
|
213
|
-
|
|
244
|
+
if (onNextPageClick) {
|
|
245
|
+
onNextPageClick();
|
|
214
246
|
}
|
|
215
247
|
} else {
|
|
216
248
|
// Let's change the page within the component
|
|
@@ -225,10 +257,10 @@ const Table = ({
|
|
|
225
257
|
|
|
226
258
|
const changeRowsPerPage = value => {
|
|
227
259
|
// Let's check if we are using remote pagination
|
|
228
|
-
if (
|
|
260
|
+
if (remoteOperations) {
|
|
229
261
|
// Inform parent component about rows per page change
|
|
230
|
-
if (
|
|
231
|
-
|
|
262
|
+
if (onRowsPerPageChange) {
|
|
263
|
+
onRowsPerPageChange(value);
|
|
232
264
|
}
|
|
233
265
|
} else {
|
|
234
266
|
// Let's reset current page to 1
|
|
@@ -236,172 +268,90 @@ const Table = ({
|
|
|
236
268
|
} // Let's set rows per page
|
|
237
269
|
|
|
238
270
|
|
|
239
|
-
setRowsPerPage(
|
|
240
|
-
};
|
|
241
|
-
/**
|
|
242
|
-
* Renders the table header.
|
|
243
|
-
*/
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
const renderHeader = () => {
|
|
247
|
-
return /*#__PURE__*/React.createElement("thead", null, title && /*#__PURE__*/React.createElement("tr", {
|
|
248
|
-
"data-testid": "TestTableHeaderRow"
|
|
249
|
-
}, /*#__PURE__*/React.createElement(TableHeaderRowCol, {
|
|
250
|
-
colSpan: columns.length
|
|
251
|
-
}, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(MoreVertical, {
|
|
252
|
-
size: "18px",
|
|
253
|
-
color: COLORS.neutral_600
|
|
254
|
-
})))), /*#__PURE__*/React.createElement("tr", {
|
|
255
|
-
"data-testid": "TestTableColumnHeaderRow"
|
|
256
|
-
}, columns.map(column => /*#__PURE__*/React.createElement(TableColumnHeaderCol, {
|
|
257
|
-
onClick: () => sortTableColumn(column),
|
|
258
|
-
key: column.key,
|
|
259
|
-
style: {
|
|
260
|
-
width: column.width
|
|
261
|
-
},
|
|
262
|
-
className: `${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`
|
|
263
|
-
}, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(ArrowLineUp, {
|
|
264
|
-
size: "20px"
|
|
265
|
-
}) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(ArrowLineDown, {
|
|
266
|
-
size: "20px"
|
|
267
|
-
}) : ''))));
|
|
271
|
+
setRowsPerPage(value);
|
|
268
272
|
};
|
|
269
273
|
/**
|
|
270
|
-
* Function which is called when a mouse click happens on a
|
|
274
|
+
* Function which is called when a mouse click happens on a row to pass data to the parent component.
|
|
271
275
|
* @param row - Row in which the link is located.
|
|
272
|
-
* @param key - Key of the column for which the link is set.
|
|
273
|
-
* @param event - Click event handler.
|
|
274
276
|
*/
|
|
275
277
|
|
|
276
278
|
|
|
277
|
-
const
|
|
278
|
-
|
|
279
|
-
event.stopPropagation();
|
|
280
|
-
linkClick(row, key);
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
/**
|
|
284
|
-
* Function which is called when a mouse click happens on an icon to pass data to the parent component.
|
|
285
|
-
* @param row - Row in which the icon is located.
|
|
286
|
-
* @param key - Key of the column for which the icon is set.
|
|
287
|
-
* @param event - Click event handler.
|
|
288
|
-
*/
|
|
289
|
-
|
|
279
|
+
const onRowClick = row => {
|
|
280
|
+
const selectedText = window?.getSelection()?.toString();
|
|
290
281
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
iconClick(row, key);
|
|
295
|
-
}
|
|
296
|
-
};
|
|
297
|
-
/**
|
|
298
|
-
* Function which is called when a mouse click happens on a row to pass data to the parent component.
|
|
299
|
-
* @param row - Row in which the link is located.
|
|
300
|
-
*/
|
|
282
|
+
if (selectedText?.length === 0 && selectable) {
|
|
283
|
+
const value = keyExpr ? row[keyExpr] : row;
|
|
284
|
+
let currentSelection = value;
|
|
301
285
|
|
|
286
|
+
if (!!multiSelect) {
|
|
287
|
+
const existing = selected?.indexOf(value);
|
|
302
288
|
|
|
303
|
-
|
|
304
|
-
|
|
289
|
+
if (existing > -1) {
|
|
290
|
+
currentSelection = [...selected];
|
|
291
|
+
currentSelection.splice(existing, 1);
|
|
292
|
+
} else {
|
|
293
|
+
currentSelection = [...selected, currentSelection];
|
|
294
|
+
}
|
|
295
|
+
}
|
|
305
296
|
|
|
306
|
-
|
|
307
|
-
|
|
297
|
+
setSelected(currentSelection);
|
|
298
|
+
props.onSelectionChange && props.onSelectionChange(currentSelection);
|
|
308
299
|
}
|
|
309
300
|
};
|
|
310
301
|
/**
|
|
311
|
-
*
|
|
302
|
+
* Function which is called when user clicks checkbox to select or deselect all rows.
|
|
312
303
|
*/
|
|
313
304
|
|
|
314
305
|
|
|
315
|
-
const
|
|
316
|
-
|
|
317
|
-
key: `row_${index}`,
|
|
318
|
-
onClick: () => onRowClick(row),
|
|
319
|
-
"data-testid": "TestTableDataRow"
|
|
320
|
-
}, columns.map(column => /*#__PURE__*/React.createElement(TableDataCol, {
|
|
321
|
-
key: `row_${index}_${column.key}`,
|
|
322
|
-
style: column.colorFn ? {
|
|
323
|
-
color: column.colorFn(row, column.key),
|
|
324
|
-
maxWidth: column.width
|
|
325
|
-
} : {
|
|
326
|
-
maxWidth: column.width
|
|
327
|
-
},
|
|
328
|
-
className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
|
|
329
|
-
title: column.shortenText && row[column.key]
|
|
330
|
-
}, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(Button, {
|
|
331
|
-
size: Size.Small,
|
|
332
|
-
variant: "tertiary",
|
|
333
|
-
onClick: event => onLinkClick(row, column.key, event),
|
|
334
|
-
style: column.colorFn && {
|
|
335
|
-
color: column.colorFn(row, column.key)
|
|
336
|
-
}
|
|
337
|
-
}, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(IconButton, {
|
|
338
|
-
variant: "secondary",
|
|
339
|
-
shape: "circular",
|
|
340
|
-
useTransparentBackground: true,
|
|
341
|
-
action: event => onIconClick(row, column.key, event)
|
|
342
|
-
}, icons[column.icon]({
|
|
343
|
-
size: '24',
|
|
344
|
-
className: 'icon'
|
|
345
|
-
})) : column.customContent ? column.customContent(row, column.key) : row[column.key])))) : /*#__PURE__*/React.createElement(TableDataRow, {
|
|
346
|
-
className: "no-rows",
|
|
347
|
-
"data-testid": "TestTableNoDataRow"
|
|
348
|
-
}, /*#__PURE__*/React.createElement(TableDataCol, {
|
|
349
|
-
colSpan: columns.length,
|
|
350
|
-
className: "center"
|
|
351
|
-
}, "There are no rows to display")));
|
|
352
|
-
};
|
|
353
|
-
/**
|
|
354
|
-
* Renders the table footer.
|
|
355
|
-
*/
|
|
306
|
+
const onSelectAllClick = () => {
|
|
307
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
356
308
|
|
|
309
|
+
switch (selectAllState) {
|
|
310
|
+
case 'all':
|
|
311
|
+
setSelected([...selected].filter(item => !currentList.includes(item)));
|
|
312
|
+
setSelectAllState('none');
|
|
313
|
+
break;
|
|
357
314
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
})),
|
|
369
|
-
disableSorting: true,
|
|
370
|
-
onSelect: value => changeRowsPerPage(value),
|
|
371
|
-
initalValue: rowsPerPage.toString(),
|
|
372
|
-
isButton: true
|
|
373
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
374
|
-
className: "current-page-info"
|
|
375
|
-
}, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
|
|
376
|
-
className: "controls"
|
|
377
|
-
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
378
|
-
variant: "secondary",
|
|
379
|
-
shape: "circular",
|
|
380
|
-
action: () => previousPage(),
|
|
381
|
-
disabled: from === 1
|
|
382
|
-
}, /*#__PURE__*/React.createElement(ChevronLeft, {
|
|
383
|
-
size: "24",
|
|
384
|
-
color: COLORS.neutral_600
|
|
385
|
-
})), /*#__PURE__*/React.createElement(IconButton, {
|
|
386
|
-
variant: "secondary",
|
|
387
|
-
shape: "circular",
|
|
388
|
-
action: () => nextPage(),
|
|
389
|
-
disabled: to === total
|
|
390
|
-
}, /*#__PURE__*/React.createElement(ChevronRight, {
|
|
391
|
-
size: "24",
|
|
392
|
-
color: COLORS.neutral_600
|
|
393
|
-
})))))));
|
|
315
|
+
case 'none':
|
|
316
|
+
setSelected([...selected, ...currentList]);
|
|
317
|
+
setSelectAllState('all');
|
|
318
|
+
break;
|
|
319
|
+
|
|
320
|
+
case 'some':
|
|
321
|
+
setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
|
|
322
|
+
setSelectAllState('all');
|
|
323
|
+
break;
|
|
324
|
+
}
|
|
394
325
|
};
|
|
395
326
|
/**
|
|
396
327
|
* Return Table component.
|
|
397
328
|
*/
|
|
398
329
|
|
|
399
330
|
|
|
400
|
-
return /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(
|
|
331
|
+
return /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(StyledTable, {
|
|
401
332
|
cellPadding: "0",
|
|
402
333
|
cellSpacing: "0",
|
|
403
|
-
"data-testid": "TestTable"
|
|
404
|
-
|
|
334
|
+
"data-testid": "TestTable",
|
|
335
|
+
className: 'table'
|
|
336
|
+
}, /*#__PURE__*/React.createElement(TableHeader, _extends({}, props, {
|
|
337
|
+
sortByColumn: sortTableColumn,
|
|
338
|
+
onSelectAllClick: onSelectAllClick,
|
|
339
|
+
selectAllState: selectAllState
|
|
340
|
+
})), /*#__PURE__*/React.createElement(TableBody, _extends({}, props, {
|
|
341
|
+
currentPageRows: currentPageRows,
|
|
342
|
+
selected: selected,
|
|
343
|
+
onRowClick: onRowClick
|
|
344
|
+
})), /*#__PURE__*/React.createElement(TableFooter, _extends({}, props, {
|
|
345
|
+
onRowsPerPageChange: changeRowsPerPage,
|
|
346
|
+
rowsPerPage: rowsPerPage,
|
|
347
|
+
setIsCollapsed: setIsCollapsed,
|
|
348
|
+
isCollapsed: isCollapsed,
|
|
349
|
+
from: from,
|
|
350
|
+
to: to,
|
|
351
|
+
total: total,
|
|
352
|
+
nextPage: nextPage,
|
|
353
|
+
prevPage: previousPage
|
|
354
|
+
}))), showLoadingIndicator && /*#__PURE__*/React.createElement(StyledTableSpinner, null, /*#__PURE__*/React.createElement(LoadingIndicator, {
|
|
405
355
|
size: Size.Medium,
|
|
406
356
|
color: "#ffffff"
|
|
407
357
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["React","MoreVertical","ChevronRight","ChevronLeft","ArrowLineDown","ArrowLineUp","SystemIcons","icons","DropdownFilter","IconButton","Button","Size","COLORS","TableHeaderRowCol","TableColumnHeaderCol","TableContainer","TableDataCol","TableDataRow","TableFooterCol","TableWrapper","TableLoadingIndicator","LoadingIndicator","Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","rowsPerPage","setRowsPerPage","useState","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","Small","isIcon","icon","size","className","customContent","renderFooter","rowsPerPageValues","x","label","Medium"],"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":["React","Size","StyledTable","StyledTableSpinner","TableWrapper","LoadingIndicator","TableHeader","TableFooter","TableBody","Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","accordion","collapsed","collapsedRows","rowsPerPage","setRowsPerPage","useState","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","selected","setSelected","undefined","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","tmpFilteredRows","filterAndSortRows","rowsFrom","rowsTo","slice","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","tmpColumn","sortable","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Medium"],"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 {StyledTable, StyledTableSpinner, 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 accordion,\n collapsed = true,\n collapsedRows\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 [isCollapsed, setIsCollapsed] = React.useState(true);\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 * Sets number of rows to display when accordion.\n */\n React.useEffect(() => {\n if (!accordion) return;\n\n setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length );\n }, [rows, accordion, collapsedRows, isCollapsed])\n\n React.useEffect(() => {\n if (!accordion) return;\n\n setIsCollapsed(!!collapsed);\n }, [ accordion, collapsed])\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 <StyledTable 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 setIsCollapsed={setIsCollapsed}\n isCollapsed={isCollapsed}\n from={from}\n to={to}\n total={total}\n nextPage={nextPage}\n prevPage={previousPage}/>\n </StyledTable>\n {showLoadingIndicator && (\n <StyledTableSpinner>\n <LoadingIndicator size={Size.Medium} color=\"#ffffff\"/>\n </StyledTableSpinner>\n )}\n </TableWrapper>\n );\n};\n\nexport default Table;\n"],"file":"Table.js"}
|