@semcore/data-table 17.0.0-prerelease.30 → 17.0.0-prerelease.34

package/lib/es6/components/DataTable/DataTable.js

@@ -27,6 +27,7 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
   "_gridTemplateRows": "__gridTemplateRows_wo0cb_gg_",
   "--gridTemplateRows": "--gridTemplateRows_wo0cb"
 });
+import { SelectableRows } from '../../store/SelectableRows';
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 const scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_j4820_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_{overflow:visible;overflow:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_{overflow:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_.__loading_j4820_gg_{overflow:hidden}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__headerHeight_j4820_gg_{scroll-padding-top:var(--headerHeight_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__leftScrollPadding_j4820_gg_{scroll-padding-left:var(--leftScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__rightScrollPadding_j4820_gg_{scroll-padding-right:var(--rightScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_:after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::after{z-index:20}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__leftOffset_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__rightOffset_j4820_gg_::after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::before{display:none}", /*__inner_css_end__*/"j4820_gg_"),
 /*__reshadow_css_end__*/
@@ -93,7 +94,7 @@ class DataTableRoot extends Component {
     });
     _defineProperty(this, "selectAllMessageTimer", 0);
     _defineProperty(this, "headerNodesMap", new Map());
-    _defineProperty(this, "isPressedShift", false);
+    _defineProperty(this, "selectedRowsContainer", void 0);
     _defineProperty(this, "lastSelectedRowKey", void 0);
     _defineProperty(this, "state", {
       scrollTop: 0,
@@ -139,14 +140,20 @@ class DataTableRoot extends Component {
         this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
+    _defineProperty(this, "handleSelectAllRows", (selectedRows, event) => {
+      if (!('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      this.asProps.onSelectedRowsChange(selectedRows, event);
+    });
     _defineProperty(this, "handleSelectRow", (isSelected, selectedRowIndex, row, event) => {
       const {
-        selectedRows,
+        selectedRows
+      } = this.asProps;
+      if (!selectedRows || !('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      const {
         onSelectedRowsChange
       } = this.asProps;
-      if (!selectedRows || !onSelectedRowsChange) return;
       const selectedRowsSet = new Set(selectedRows);
-      if (this.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
+      if (this.selectedRowsContainer.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
         let select = false;
         const firstColumnKey = this.columns[0].name;
         const isMerged = this.flatRows.some(item => item[firstColumnKey] instanceof MergedRowsCell);
@@ -357,13 +364,13 @@ class DataTableRoot extends Component {
           }
         case 'Shift':
           {
-            this.isPressedShift = true;
+            this.selectedRowsContainer.isPressedShift = true;
           }
       }
     });
     _defineProperty(this, "handleKeyUp", e => {
       if (e.key === 'Shift') {
-        this.isPressedShift = false;
+        this.selectedRowsContainer.isPressedShift = false;
       }
     });
     _defineProperty(this, "handleScroll", trottle(e => {
@@ -544,6 +551,11 @@ class DataTableRoot extends Component {
     this.calculatedRows = this.getRows();
     this.flatRows = this.calculatedRows.flat();
     this.tmpData = props.data;
+    if (Array.isArray(props.selectedRows) || !props.selectedRows) {
+      this.selectedRowsContainer = new SelectableRows();
+    } else {
+      this.selectedRowsContainer = props.selectedRows;
+    }
   }
   componentDidMount() {
     const {
@@ -577,7 +589,7 @@ class DataTableRoot extends Component {
         this.calculateVerticalShadow();
       }
     }
-    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined) {
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && Array.isArray(selectedRows)) {
       const selectedRowsSet = new Set(selectedRows);
       const allChecked = [];
       const allUnchecked = [];
@@ -594,6 +606,9 @@ class DataTableRoot extends Component {
         this.setSelectAllMessage(false);
       }
     }
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && !Array.isArray(selectedRows)) {
+      this.selectedRowsContainer = selectedRows;
+    }
   }
   componentWillUnmount() {
     if (canUseDOM()) {
@@ -663,7 +678,6 @@ class DataTableRoot extends Component {
       getI18nText,
       uid,
       headerProps,
-      onSelectedRowsChange,
       selectedRows,
       sideIndents,
       variant
@@ -695,7 +709,7 @@ class DataTableRoot extends Component {
       totalRows: this.totalRows,
       selectedRows,
       flatRows: this.getFlatRows(),
-      onChangeSelectAll: onSelectedRowsChange,
+      onChangeSelectAll: Array.isArray(selectedRows) ? this.handleSelectAllRows : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       shadowVertical,
@@ -765,7 +779,7 @@ class DataTableRoot extends Component {
       renderEmptyData,
       sideIndents,
       selectedRows,
-      onSelectRow: this.handleSelectRow,
+      onSelectRow: Array.isArray(selectedRows) ? this.handleSelectRow : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       rawData,
@@ -827,7 +841,7 @@ class DataTableRoot extends Component {
     const width = w ?? (this.columns.some(c => c.gtcWidth === 'auto' || c.gtcWidth === '1fr') ? '100%' : undefined);
     let gridTemplateRows = undefined;
     if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
-      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto)`;
+      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto))`;
     }
     return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
       "leftOffset": offsetLeftSum,
@@ -1019,12 +1033,14 @@ class DataTableRoot extends Component {
     const {
       data,
       uid,
-      uniqueRowKey
+      uniqueRowKey,
+      selectedRows
     } = this.props;
     if (this.tmpData === data) {
       return this.calculatedRows;
     }
     this.tmpData = data;
+    const availableRowKeys = [];
     const rows = [];
     const columnNames = columns.map(column => column.name);
     let rowIndex = 0;
@@ -1096,6 +1112,10 @@ class DataTableRoot extends Component {
           dtRow[value] = '';
         });
       }
+      if (!excludeColumns) {
+        // we should add only the main row in mergedRows or default rows
+        availableRowKeys.push(dtRow[UNIQ_ROW_KEY]);
+      }
       return dtRow;
     };
     data.forEach(row => {
@@ -1152,6 +1172,9 @@ class DataTableRoot extends Component {
       }
     });
     this.calculatedRows = rows;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      selectedRows.setAvailableKeys(availableRowKeys);
+    }
     return rows;
   }
   calculateGridTemplateColumn(c) {