@laerdal/life-react-components 1.3.2-dev.8 → 1.4.1-dev.2

package/dist/Table/Table.js

@@ -1,5 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -14,41 +20,41 @@ import * as React from 'react';
  * Import custom components.
  */
 
-import { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';
-import { SystemIcons as icons } from '../icons/index';
-import { DropdownFilter } from '../Dropdown/index';
-import { IconButton, Button } from '../Button/index';
 import { Size } from '../types';
 /**
  * Import custom styles.
  */
 
-import { COLORS } from '../styles';
-import { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';
+import { StyledTable, StyledTableSpinner, TableWrapper } from './TableStyles';
 /**
  * Import custom types.
  */
 
 import { LoadingIndicator } from '../LoadingIndicator';
+import TableHeader from './TableHeaders';
+import TableFooter from './TableFooter';
+import TableBody from './TableBody';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
-var Table = function Table(_ref) {
-  var rowClick = _ref.rowClick,
-      linkClick = _ref.linkClick,
-      iconClick = _ref.iconClick,
-      previousPageClick = _ref.previousPageClick,
-      nextPageClick = _ref.nextPageClick,
-      rowsPerPageChange = _ref.rowsPerPageChange,
-      triggerSortingChange = _ref.triggerSortingChange,
-      title = _ref.title,
-      columns = _ref.columns,
-      rows = _ref.rows,
-      remotePagination = _ref.remotePagination,
-      pagination = _ref.pagination,
-      showLoadingIndicator = _ref.showLoadingIndicator;
-
-  // States used within the component
+var Table = function Table(props) {
+  var onPreviousPageClick = props.onPreviousPageClick,
+      onNextPageClick = props.onNextPageClick,
+      onRowsPerPageChange = props.onRowsPerPageChange,
+      onTriggerSortingChange = props.onTriggerSortingChange,
+      columns = props.columns,
+      rows = props.rows,
+      remoteOperations = props.remoteOperations,
+      pagination = props.pagination,
+      showLoadingIndicator = props.showLoadingIndicator,
+      selectable = props.selectable,
+      multiSelect = props.multiSelect,
+      keyExpr = props.keyExpr,
+      accordion = props.accordion,
+      _props$collapsed = props.collapsed,
+      collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
+      collapsedRows = props.collapsedRows; // States used within the component
+
   var _React$useState = React.useState(10),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowsPerPage = _React$useState2[0],
@@ -93,14 +99,47 @@ var Table = function Table(_ref) {
       _React$useState18 = _slicedToArray(_React$useState17, 2),
       total = _React$useState18[0],
       setTotal = _React$useState18[1];
+
+  var _React$useState19 = React.useState(true),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      isCollapsed = _React$useState20[0],
+      setIsCollapsed = _React$useState20[1];
+
+  var _React$useState21 = React.useState('none'),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      selectAllState = _React$useState22[0],
+      setSelectAllState = _React$useState22[1];
+
+  var _React$useState23 = React.useState(multiSelect ? [] : undefined),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      selected = _React$useState24[0],
+      setSelected = _React$useState24[1];
+
+  React.useEffect(function () {
+    setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+  }, [props.selectedRows, multiSelect]);
+  /**
+   * update select all checkbox state
+   */
+
+  React.useEffect(function () {
+    if (multiSelect) {
+      var currentList = currentPageRows.map(function (row) {
+        return keyExpr ? row[keyExpr] : row;
+      });
+      var count = selected.filter(function (item) {
+        return currentList.includes(item);
+      }).length;
+      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
+    }
+  }, [currentPageRows, multiSelect, selected, keyExpr]);
   /**
    * Takes care of local pagination.
    * Works only in case remote pagination is not defined or is set to false.
    */
 
-
   React.useEffect(function () {
-    if (!remotePagination) {
+    if (!remoteOperations) {
       // Let's retrieve temporary filtered rows and update globally filtered rows
       var tmpFilteredRows = filterAndSortRows();
       setFilteredRows(tmpFilteredRows);
@@ -114,14 +153,14 @@ var Table = function Table(_ref) {
 
       setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
     }
-  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);
+  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
   /**
    * Takes care of remote pagination.
    * Works only in case remote pagination is set to true.
    */
 
   React.useEffect(function () {
-    if (remotePagination) {
+    if (remoteOperations) {
       setCurrentPageRows(rows); // Let's assign pagination values
 
       setFrom(pagination === null || pagination === void 0 ? void 0 : pagination.from);
@@ -130,7 +169,19 @@ var Table = function Table(_ref) {
       setCurrentPage(pagination === null || pagination === void 0 ? void 0 : pagination.currentPage);
       setRowsPerPage(pagination === null || pagination === void 0 ? void 0 : pagination.rowsPerPage);
     }
-  }, [remotePagination, pagination, rows]);
+  }, [remoteOperations, pagination, rows]);
+  /**
+   * Sets number of rows to display when accordion.
+   */
+
+  React.useEffect(function () {
+    if (!accordion) return;
+    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
+  }, [rows, accordion, collapsedRows, isCollapsed]);
+  React.useEffect(function () {
+    if (!accordion) return;
+    setIsCollapsed(!!collapsed);
+  }, [accordion, collapsed]);
   /**
    * Filters out a rows by specific column filters and sorts them if any sorting is set.
    * @returns Filtered and sorted rows.
@@ -214,8 +265,8 @@ var Table = function Table(_ref) {
             setSortedColumn(column.key);
             setSortedDirection('desc'); // Let's trigger remote sorting trigger function
 
-            if (remotePagination && triggerSortingChange) {
-              triggerSortingChange(column.key, 'desc');
+            if (remoteOperations && onTriggerSortingChange) {
+              onTriggerSortingChange(column.key, 'desc');
             }
           } else {
             tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
@@ -223,8 +274,8 @@ var Table = function Table(_ref) {
             setSortedColumn(column.key);
             setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-            if (remotePagination && triggerSortingChange) {
-              triggerSortingChange(column.key, 'asc');
+            if (remoteOperations && onTriggerSortingChange) {
+              onTriggerSortingChange(column.key, 'asc');
             }
           }
         } else {
@@ -234,8 +285,8 @@ var Table = function Table(_ref) {
           setSortedColumn(column.key);
           setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-          if (remotePagination && triggerSortingChange) {
-            triggerSortingChange(column.key, 'asc');
+          if (remoteOperations && onTriggerSortingChange) {
+            onTriggerSortingChange(column.key, 'asc');
           }
         }
       } else if (tmpColumn.sortingDirection !== undefined) {
@@ -252,10 +303,10 @@ var Table = function Table(_ref) {
 
 
   var previousPage = function previousPage() {
-    if (remotePagination) {
+    if (remoteOperations) {
       // Let's inform parent component about page change
-      if (previousPageClick) {
-        previousPageClick();
+      if (onPreviousPageClick) {
+        onPreviousPageClick();
       }
     } else {
       // Let's change the page within the component
@@ -268,10 +319,10 @@ var Table = function Table(_ref) {
 
 
   var nextPage = function nextPage() {
-    if (remotePagination) {
+    if (remoteOperations) {
       // Let's inform parent component about page change
-      if (nextPageClick) {
-        nextPageClick();
+      if (onNextPageClick) {
+        onNextPageClick();
       }
     } else {
       // Let's change the page within the component
@@ -286,10 +337,10 @@ var Table = function Table(_ref) {
 
   var changeRowsPerPage = function changeRowsPerPage(value) {
     // Let's check if we are using remote pagination
-    if (remotePagination) {
+    if (remoteOperations) {
       // Inform parent component about rows per page change
-      if (rowsPerPageChange) {
-        rowsPerPageChange(parseInt(value));
+      if (onRowsPerPageChange) {
+        onRowsPerPageChange(value);
       }
     } else {
       // Let's reset current page to 1
@@ -297,74 +348,7 @@ var Table = function Table(_ref) {
     } // Let's set rows per page
 
 
-    setRowsPerPage(parseInt(value));
-  };
-  /**
-   * Renders the table header.
-   */
-
-
-  var renderHeader = function renderHeader() {
-    return /*#__PURE__*/_jsxs("thead", {
-      children: [title && /*#__PURE__*/_jsx("tr", {
-        "data-testid": "TestTableHeaderRow",
-        children: /*#__PURE__*/_jsx(TableHeaderRowCol, {
-          colSpan: columns.length,
-          children: /*#__PURE__*/_jsxs("div", {
-            children: [title, /*#__PURE__*/_jsx(MoreVertical, {
-              size: "18px",
-              color: COLORS.neutral_600
-            })]
-          })
-        })
-      }), /*#__PURE__*/_jsx("tr", {
-        "data-testid": "TestTableColumnHeaderRow",
-        children: columns.map(function (column) {
-          return /*#__PURE__*/_jsxs(TableColumnHeaderCol, {
-            onClick: function onClick() {
-              return sortTableColumn(column);
-            },
-            style: {
-              width: column.width
-            },
-            className: "".concat(column.sortable ? 'sortable' : '', " ").concat(!title ? 'no-border' : '', " ").concat(column.justify ? "justify-".concat(column.justify) : ''),
-            children: [column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/_jsx(ArrowLineUp, {
-              size: "20px"
-            }) : column.sortingDirection === 'desc' ? /*#__PURE__*/_jsx(ArrowLineDown, {
-              size: "20px"
-            }) : '']
-          }, column.key);
-        })
-      })]
-    });
-  };
-  /**
-   * Function which is called when a mouse click happens on a link to pass data to the parent component.
-   * @param row - Row in which the link is located.
-   * @param key - Key of the column for which the link is set.
-   * @param event - Click event handler.
-   */
-
-
-  var onLinkClick = function onLinkClick(row, key, event) {
-    if (linkClick) {
-      event.stopPropagation();
-      linkClick(row, key);
-    }
-  };
-  /**
-   * Function which is called when a mouse click happens on an icon to pass data to the parent component.
-   * @param row - Row in which the icon is located.
-   * @param key - Key of the column for which the icon is set.
-   * @param event - Click event handler.
-   */
-
-
-  var onIconClick = function onIconClick(row, key, event) {
-    if (iconClick) {
-      event.stopPropagation();
-      iconClick(row, key);
-    }
+    setRowsPerPage(value);
   };
   /**
    * Function which is called when a mouse click happens on a row to pass data to the parent component.
@@ -375,133 +359,57 @@ var Table = function Table(_ref) {
   var onRowClick = function onRowClick(row) {
     var _window, _window$getSelection;
 
-    var selectedText = (_window = window) === null || _window === void 0 ? void 0 : (_window$getSelection = _window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString(); // Let's trigger row click only if we haven't selected any text and action exists
+    var selectedText = (_window = window) === null || _window === void 0 ? void 0 : (_window$getSelection = _window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
 
-    if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && rowClick) {
-      rowClick(row);
-    }
-  };
-  /**
-   * Renders the table body.
-   */
+    if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && selectable) {
+      var value = keyExpr ? row[keyExpr] : row;
+      var currentSelection = value;
 
+      if (!!multiSelect) {
+        var existing = selected === null || selected === void 0 ? void 0 : selected.indexOf(value);
 
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/_jsx("tbody", {
-      children: currentPageRows.length > 0 ? currentPageRows.map(function (row, index) {
-        return /*#__PURE__*/_jsx(TableDataRow, {
-          onClick: function onClick() {
-            return onRowClick(row);
-          },
-          "data-testid": "TestTableDataRow",
-          children: columns.map(function (column) {
-            return /*#__PURE__*/_jsx(TableDataCol, {
-              style: column.colorFn ? {
-                color: column.colorFn(row, column.key),
-                maxWidth: column.width
-              } : {
-                maxWidth: column.width
-              },
-              className: "".concat(column.shortenText && "truncate-text", " ").concat(column.justify ? "justify-".concat(column.justify) : '', " "),
-              title: column.shortenText && row[column.key],
-              children: column.isLink && row[column.key] ? /*#__PURE__*/_jsx(Button, {
-                size: Size.Small,
-                variant: "tertiary",
-                onClick: function onClick(event) {
-                  return onLinkClick(row, column.key, event);
-                },
-                style: column.colorFn && {
-                  color: column.colorFn(row, column.key)
-                },
-                children: row[column.key]
-              }) : column.isIcon && column.icon ? /*#__PURE__*/_jsx(IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                useTransparentBackground: true,
-                action: function action(event) {
-                  return onIconClick(row, column.key, event);
-                },
-                children: icons[column.icon]({
-                  size: '24',
-                  className: 'icon'
-                })
-              }) : column.customContent ? column.customContent(row, column.key) : row[column.key]
-            }, "row_".concat(index, "_").concat(column.key));
-          })
-        }, "row_".concat(index));
-      }) : /*#__PURE__*/_jsx(TableDataRow, {
-        className: "no-rows",
-        "data-testid": "TestTableNoDataRow",
-        children: /*#__PURE__*/_jsx(TableDataCol, {
-          colSpan: columns.length,
-          className: "center",
-          children: "There are no rows to display"
-        })
-      })
-    });
+        if (existing > -1) {
+          currentSelection = _toConsumableArray(selected);
+          currentSelection.splice(existing, 1);
+        } else {
+          currentSelection = [].concat(_toConsumableArray(selected), [currentSelection]);
+        }
+      }
+
+      setSelected(currentSelection);
+      props.onSelectionChange && props.onSelectionChange(currentSelection);
+    }
   };
   /**
-   * Renders the table footer.
+   * Function which is called when user clicks checkbox to select or deselect all rows.
    */
 
 
-  var renderFooter = function renderFooter() {
-    // Define local values used within the footer
-    var rowsPerPageValues = ['10', '20', '50', '100'];
-    return /*#__PURE__*/_jsx("tfoot", {
-      children: /*#__PURE__*/_jsx("tr", {
-        children: /*#__PURE__*/_jsx(TableFooterCol, {
-          colSpan: columns.length,
-          "data-testid": "TestTableFooterRow",
-          children: /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("span", {
-              children: "Rows per page: "
-            }), /*#__PURE__*/_jsx(DropdownFilter, {
-              id: "rows-per-page",
-              list: rowsPerPageValues.map(function (x) {
-                return {
-                  label: x
-                };
-              }),
-              disableSorting: true,
-              onSelect: function onSelect(value) {
-                return changeRowsPerPage(value);
-              },
-              initalValue: rowsPerPage.toString(),
-              isButton: true
-            }), /*#__PURE__*/_jsxs("span", {
-              className: "current-page-info",
-              children: [total === 0 ? 0 : from, "-", to, " of ", total]
-            }), /*#__PURE__*/_jsxs("div", {
-              className: "controls",
-              children: [/*#__PURE__*/_jsx(IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                action: function action() {
-                  return previousPage();
-                },
-                disabled: from === 1,
-                children: /*#__PURE__*/_jsx(ChevronLeft, {
-                  size: "24",
-                  color: COLORS.neutral_600
-                })
-              }), /*#__PURE__*/_jsx(IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                action: function action() {
-                  return nextPage();
-                },
-                disabled: to === total,
-                children: /*#__PURE__*/_jsx(ChevronRight, {
-                  size: "24",
-                  color: COLORS.neutral_600
-                })
-              })]
-            })]
-          })
-        })
-      })
+  var onSelectAllClick = function onSelectAllClick() {
+    var currentList = currentPageRows.map(function (row) {
+      return keyExpr ? row[keyExpr] : row;
     });
+
+    switch (selectAllState) {
+      case 'all':
+        setSelected(_toConsumableArray(selected).filter(function (item) {
+          return !currentList.includes(item);
+        }));
+        setSelectAllState('none');
+        break;
+
+      case 'none':
+        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList)));
+        setSelectAllState('all');
+        break;
+
+      case 'some':
+        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList.filter(function (item) {
+          return !selected.includes(item);
+        }))));
+        setSelectAllState('all');
+        break;
+    }
   };
   /**
    * Return Table component.
@@ -509,12 +417,31 @@ var Table = function Table(_ref) {
 
 
   return /*#__PURE__*/_jsxs(TableWrapper, {
-    children: [/*#__PURE__*/_jsxs(TableContainer, {
+    children: [/*#__PURE__*/_jsxs(StyledTable, {
       cellPadding: "0",
       cellSpacing: "0",
       "data-testid": "TestTable",
-      children: [renderHeader(), renderBody(), renderFooter()]
-    }), showLoadingIndicator && /*#__PURE__*/_jsx(TableLoadingIndicator, {
+      className: 'table',
+      children: [/*#__PURE__*/_jsx(TableHeader, _objectSpread(_objectSpread({}, props), {}, {
+        sortByColumn: sortTableColumn,
+        onSelectAllClick: onSelectAllClick,
+        selectAllState: selectAllState
+      })), /*#__PURE__*/_jsx(TableBody, _objectSpread(_objectSpread({}, props), {}, {
+        currentPageRows: currentPageRows,
+        selected: selected,
+        onRowClick: onRowClick
+      })), /*#__PURE__*/_jsx(TableFooter, _objectSpread(_objectSpread({}, props), {}, {
+        onRowsPerPageChange: changeRowsPerPage,
+        rowsPerPage: rowsPerPage,
+        setIsCollapsed: setIsCollapsed,
+        isCollapsed: isCollapsed,
+        from: from,
+        to: to,
+        total: total,
+        nextPage: nextPage,
+        prevPage: previousPage
+      }))]
+    }), showLoadingIndicator && /*#__PURE__*/_jsx(StyledTableSpinner, {
       children: /*#__PURE__*/_jsx(LoadingIndicator, {
         size: Size.Medium,
         color: "#ffffff"