@laerdal/life-react-components 1.3.2-dev.1.full → 1.3.2-dev.11
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 +238 -0
- package/dist/esm/Accordion/ContentAccordion.js.map +1 -0
- package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js +137 -0
- package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +1 -0
- package/dist/esm/Accordion/index.js +1 -0
- package/dist/esm/Accordion/index.js.map +1 -1
- package/dist/esm/AuthPage/AuthPage.js +1 -1
- package/dist/esm/AuthPage/AuthPage.js.map +1 -1
- package/dist/esm/AuthPage/Information.js +1 -1
- package/dist/esm/AuthPage/Information.js.map +1 -1
- package/dist/esm/Banners/Banner.js +16 -16
- package/dist/esm/Banners/Banner.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/ChipDropdownInput.js +2 -2
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +4 -0
- package/dist/esm/Dropdown/CommonStyling.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 +113 -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 +60 -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 +130 -117
- 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/esm/Tabs/TabLink.js +1 -0
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/styles/typography.js +66 -66
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/js/Accordion/ContentAccordion.d.ts +18 -0
- package/dist/js/Accordion/ContentAccordion.js +151 -0
- package/dist/js/Accordion/ContentAccordion.js.map +1 -0
- package/dist/js/Accordion/__tests__/ContetnAccordion.test.js +151 -0
- package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +1 -0
- package/dist/js/Accordion/index.d.ts +1 -0
- package/dist/js/Accordion/index.js +8 -0
- package/dist/js/Accordion/index.js.map +1 -1
- package/dist/js/AuthPage/AuthPage.js +1 -1
- package/dist/js/AuthPage/AuthPage.js.map +1 -1
- package/dist/js/AuthPage/Information.d.ts +1 -1
- package/dist/js/AuthPage/Information.js +1 -1
- package/dist/js/AuthPage/Information.js.map +1 -1
- package/dist/js/Banners/Banner.js +16 -19
- package/dist/js/Banners/Banner.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/ChipDropdownInput.js +3 -1
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.js +1 -1
- package/dist/js/Dropdown/CommonStyling.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 +143 -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 +13 -0
- package/dist/js/Table/TableFooter.js +82 -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 +17 -7
- package/dist/js/Table/TableStyles.js +58 -16
- 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/js/Tabs/TabLink.js +1 -1
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/styles/typography.d.ts +6 -6
- package/dist/js/styles/typography.js +66 -66
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/umd/Accordion/ContentAccordion.js +266 -0
- package/dist/umd/Accordion/ContentAccordion.js.map +1 -0
- package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js +165 -0
- package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +1 -0
- package/dist/umd/Accordion/index.js +10 -4
- package/dist/umd/Accordion/index.js.map +1 -1
- package/dist/umd/AuthPage/AuthPage.js +1 -1
- package/dist/umd/AuthPage/AuthPage.js.map +1 -1
- package/dist/umd/AuthPage/Information.js +1 -1
- package/dist/umd/AuthPage/Information.js.map +1 -1
- package/dist/umd/Banners/Banner.js +16 -16
- package/dist/umd/Banners/Banner.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/ChipDropdownInput.js +2 -2
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +4 -0
- package/dist/umd/Dropdown/CommonStyling.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 +139 -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 +82 -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 +134 -122
- 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/dist/umd/Tabs/TabLink.js +1 -0
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/styles/typography.js +66 -66
- package/dist/umd/styles/typography.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,37 @@ 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
|
+
} = props; // States used within the component
|
|
25
41
|
|
|
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
42
|
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
|
43
43
|
const [filteredRows, setFilteredRows] = React.useState([]);
|
|
44
44
|
const [currentPageRows, setCurrentPageRows] = React.useState([]);
|
|
@@ -48,13 +48,29 @@ const Table = ({
|
|
|
48
48
|
const [from, setFrom] = React.useState();
|
|
49
49
|
const [to, setTo] = React.useState();
|
|
50
50
|
const [total, setTotal] = React.useState();
|
|
51
|
+
const [selectAllState, setSelectAllState] = React.useState('none');
|
|
52
|
+
const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
setSelected(props.selectedRows || (multiSelect ? [] : undefined));
|
|
55
|
+
}, [props.selectedRows, multiSelect]);
|
|
56
|
+
/**
|
|
57
|
+
* update select all checkbox state
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
React.useEffect(() => {
|
|
61
|
+
if (multiSelect) {
|
|
62
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
63
|
+
const count = selected.filter(item => currentList.includes(item)).length;
|
|
64
|
+
setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
|
|
65
|
+
}
|
|
66
|
+
}, [currentPageRows, multiSelect, selected, keyExpr]);
|
|
51
67
|
/**
|
|
52
68
|
* Takes care of local pagination.
|
|
53
69
|
* Works only in case remote pagination is not defined or is set to false.
|
|
54
70
|
*/
|
|
55
71
|
|
|
56
72
|
React.useEffect(() => {
|
|
57
|
-
if (!
|
|
73
|
+
if (!remoteOperations) {
|
|
58
74
|
// Let's retrieve temporary filtered rows and update globally filtered rows
|
|
59
75
|
const tmpFilteredRows = filterAndSortRows();
|
|
60
76
|
setFilteredRows(tmpFilteredRows);
|
|
@@ -68,14 +84,14 @@ const Table = ({
|
|
|
68
84
|
|
|
69
85
|
setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
|
|
70
86
|
}
|
|
71
|
-
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection,
|
|
87
|
+
}, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
|
|
72
88
|
/**
|
|
73
89
|
* Takes care of remote pagination.
|
|
74
90
|
* Works only in case remote pagination is set to true.
|
|
75
91
|
*/
|
|
76
92
|
|
|
77
93
|
React.useEffect(() => {
|
|
78
|
-
if (
|
|
94
|
+
if (remoteOperations) {
|
|
79
95
|
setCurrentPageRows(rows); // Let's assign pagination values
|
|
80
96
|
|
|
81
97
|
setFrom(pagination?.from);
|
|
@@ -84,7 +100,7 @@ const Table = ({
|
|
|
84
100
|
setCurrentPage(pagination?.currentPage);
|
|
85
101
|
setRowsPerPage(pagination?.rowsPerPage);
|
|
86
102
|
}
|
|
87
|
-
}, [
|
|
103
|
+
}, [remoteOperations, pagination, rows]);
|
|
88
104
|
/**
|
|
89
105
|
* Filters out a rows by specific column filters and sorts them if any sorting is set.
|
|
90
106
|
* @returns Filtered and sorted rows.
|
|
@@ -153,8 +169,8 @@ const Table = ({
|
|
|
153
169
|
setSortedColumn(column.key);
|
|
154
170
|
setSortedDirection('desc'); // Let's trigger remote sorting trigger function
|
|
155
171
|
|
|
156
|
-
if (
|
|
157
|
-
|
|
172
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
173
|
+
onTriggerSortingChange(column.key, 'desc');
|
|
158
174
|
}
|
|
159
175
|
} else {
|
|
160
176
|
tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
|
|
@@ -162,8 +178,8 @@ const Table = ({
|
|
|
162
178
|
setSortedColumn(column.key);
|
|
163
179
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
164
180
|
|
|
165
|
-
if (
|
|
166
|
-
|
|
181
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
182
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
167
183
|
}
|
|
168
184
|
}
|
|
169
185
|
} else {
|
|
@@ -173,8 +189,8 @@ const Table = ({
|
|
|
173
189
|
setSortedColumn(column.key);
|
|
174
190
|
setSortedDirection('asc'); // Let's trigger remote sorting trigger function
|
|
175
191
|
|
|
176
|
-
if (
|
|
177
|
-
|
|
192
|
+
if (remoteOperations && onTriggerSortingChange) {
|
|
193
|
+
onTriggerSortingChange(column.key, 'asc');
|
|
178
194
|
}
|
|
179
195
|
}
|
|
180
196
|
} else if (tmpColumn.sortingDirection !== undefined) {
|
|
@@ -191,10 +207,10 @@ const Table = ({
|
|
|
191
207
|
|
|
192
208
|
|
|
193
209
|
const previousPage = () => {
|
|
194
|
-
if (
|
|
210
|
+
if (remoteOperations) {
|
|
195
211
|
// Let's inform parent component about page change
|
|
196
|
-
if (
|
|
197
|
-
|
|
212
|
+
if (onPreviousPageClick) {
|
|
213
|
+
onPreviousPageClick();
|
|
198
214
|
}
|
|
199
215
|
} else {
|
|
200
216
|
// Let's change the page within the component
|
|
@@ -207,10 +223,10 @@ const Table = ({
|
|
|
207
223
|
|
|
208
224
|
|
|
209
225
|
const nextPage = () => {
|
|
210
|
-
if (
|
|
226
|
+
if (remoteOperations) {
|
|
211
227
|
// Let's inform parent component about page change
|
|
212
|
-
if (
|
|
213
|
-
|
|
228
|
+
if (onNextPageClick) {
|
|
229
|
+
onNextPageClick();
|
|
214
230
|
}
|
|
215
231
|
} else {
|
|
216
232
|
// Let's change the page within the component
|
|
@@ -225,10 +241,10 @@ const Table = ({
|
|
|
225
241
|
|
|
226
242
|
const changeRowsPerPage = value => {
|
|
227
243
|
// Let's check if we are using remote pagination
|
|
228
|
-
if (
|
|
244
|
+
if (remoteOperations) {
|
|
229
245
|
// Inform parent component about rows per page change
|
|
230
|
-
if (
|
|
231
|
-
|
|
246
|
+
if (onRowsPerPageChange) {
|
|
247
|
+
onRowsPerPageChange(value);
|
|
232
248
|
}
|
|
233
249
|
} else {
|
|
234
250
|
// Let's reset current page to 1
|
|
@@ -236,172 +252,88 @@ const Table = ({
|
|
|
236
252
|
} // Let's set rows per page
|
|
237
253
|
|
|
238
254
|
|
|
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
|
-
}) : ''))));
|
|
255
|
+
setRowsPerPage(value);
|
|
268
256
|
};
|
|
269
257
|
/**
|
|
270
|
-
* Function which is called when a mouse click happens on a
|
|
258
|
+
* Function which is called when a mouse click happens on a row to pass data to the parent component.
|
|
271
259
|
* @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
260
|
*/
|
|
275
261
|
|
|
276
262
|
|
|
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
|
-
|
|
263
|
+
const onRowClick = row => {
|
|
264
|
+
const selectedText = window?.getSelection()?.toString();
|
|
290
265
|
|
|
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
|
-
*/
|
|
266
|
+
if (selectedText?.length === 0 && selectable) {
|
|
267
|
+
const value = keyExpr ? row[keyExpr] : row;
|
|
268
|
+
let currentSelection = value;
|
|
301
269
|
|
|
270
|
+
if (!!multiSelect) {
|
|
271
|
+
const existing = selected?.indexOf(value);
|
|
302
272
|
|
|
303
|
-
|
|
304
|
-
|
|
273
|
+
if (existing > -1) {
|
|
274
|
+
currentSelection = [...selected];
|
|
275
|
+
currentSelection.splice(existing, 1);
|
|
276
|
+
} else {
|
|
277
|
+
currentSelection = [...selected, currentSelection];
|
|
278
|
+
}
|
|
279
|
+
}
|
|
305
280
|
|
|
306
|
-
|
|
307
|
-
|
|
281
|
+
setSelected(currentSelection);
|
|
282
|
+
props.onSelectionChange && props.onSelectionChange(currentSelection);
|
|
308
283
|
}
|
|
309
284
|
};
|
|
310
285
|
/**
|
|
311
|
-
*
|
|
286
|
+
* Function which is called when user clicks checkbox to select or deselect all rows.
|
|
312
287
|
*/
|
|
313
288
|
|
|
314
289
|
|
|
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
|
-
*/
|
|
290
|
+
const onSelectAllClick = () => {
|
|
291
|
+
const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
|
|
356
292
|
|
|
293
|
+
switch (selectAllState) {
|
|
294
|
+
case 'all':
|
|
295
|
+
setSelected([...selected].filter(item => !currentList.includes(item)));
|
|
296
|
+
setSelectAllState('none');
|
|
297
|
+
break;
|
|
357
298
|
|
|
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
|
-
})))))));
|
|
299
|
+
case 'none':
|
|
300
|
+
setSelected([...selected, ...currentList]);
|
|
301
|
+
setSelectAllState('all');
|
|
302
|
+
break;
|
|
303
|
+
|
|
304
|
+
case 'some':
|
|
305
|
+
setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
|
|
306
|
+
setSelectAllState('all');
|
|
307
|
+
break;
|
|
308
|
+
}
|
|
394
309
|
};
|
|
395
310
|
/**
|
|
396
311
|
* Return Table component.
|
|
397
312
|
*/
|
|
398
313
|
|
|
399
314
|
|
|
400
|
-
return /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(
|
|
315
|
+
return /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(StyledTable, {
|
|
401
316
|
cellPadding: "0",
|
|
402
317
|
cellSpacing: "0",
|
|
403
|
-
"data-testid": "TestTable"
|
|
404
|
-
|
|
318
|
+
"data-testid": "TestTable",
|
|
319
|
+
className: 'table'
|
|
320
|
+
}, /*#__PURE__*/React.createElement(TableHeader, _extends({}, props, {
|
|
321
|
+
sortByColumn: sortTableColumn,
|
|
322
|
+
onSelectAllClick: onSelectAllClick,
|
|
323
|
+
selectAllState: selectAllState
|
|
324
|
+
})), /*#__PURE__*/React.createElement(TableBody, _extends({}, props, {
|
|
325
|
+
currentPageRows: currentPageRows,
|
|
326
|
+
selected: selected,
|
|
327
|
+
onRowClick: onRowClick
|
|
328
|
+
})), /*#__PURE__*/React.createElement(TableFooter, _extends({}, props, {
|
|
329
|
+
onRowsPerPageChange: changeRowsPerPage,
|
|
330
|
+
rowsPerPage: rowsPerPage,
|
|
331
|
+
from: from,
|
|
332
|
+
to: to,
|
|
333
|
+
total: total,
|
|
334
|
+
nextPage: nextPage,
|
|
335
|
+
prevPage: previousPage
|
|
336
|
+
}))), showLoadingIndicator && /*#__PURE__*/React.createElement(StyledTableSpinner, null, /*#__PURE__*/React.createElement(LoadingIndicator, {
|
|
405
337
|
size: Size.Medium,
|
|
406
338
|
color: "#ffffff"
|
|
407
339
|
})));
|
|
@@ -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","rowsPerPage","setRowsPerPage","useState","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","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 } = 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 <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 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"}
|