fix(AnalyticalTable): fix subRows selection in tree table mode (#610)

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts

@@ -1,22 +1,6 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
-import { useCallback } from 'react';
-
-const prepareRow = (row, { instance }) => {
-  row.selectSingleRow = (event, selectionCellClick = false) => {
-    instance.selectSingleRow(row, event, selectionCellClick);
-  };
-};
-
-const getRowProps = (rowProps, { row }) => {
-  return [
-    rowProps,
-    {
-      onClick: row.selectSingleRow
-    }
-  ];
-};
 
 const tagNamesWhichShouldNotSelectARow = new Set([
   'UI5-INPUT',
@@ -33,70 +17,68 @@ const tagNamesWhichShouldNotSelectARow = new Set([
   'UI5-TOGGLEBUTTON'
 ]);
 
-const useInstance = (instance) => {
-  const { webComponentsReactProperties, dispatch, toggleRowSelected, selectedFlatRows } = instance;
-  const { isTreeTable, selectionMode, onRowSelected, selectionBehavior } = webComponentsReactProperties;
+const getRowProps = (rowProps, { row, instance }) => {
+  const { webComponentsReactProperties, toggleRowSelected, selectedFlatRows } = instance;
+  if (webComponentsReactProperties.selectionMode === TableSelectionMode.NONE) {
+    return rowProps;
+  }
+  return [
+    rowProps,
+    {
+      onClick: (e, selectionCellClick = false) => {
+        if (
+          e.target?.dataset?.name !== 'internal_selection_column' &&
+          !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) &&
+          tagNamesWhichShouldNotSelectARow.has(e.target.tagName)
+        ) {
+          return;
+        }
 
-  const selectSingleRow = useCallback(
-    (row, e, selectionCellClick = false) => {
-      if (
-        e.target?.dataset?.name !== 'internal_selection_column' &&
-        !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) &&
-        tagNamesWhichShouldNotSelectARow.has(e.target.tagName)
-      ) {
-        return;
-      }
+        // dont select empty rows
+        const isEmptyRow = row.original?.emptyRow;
+        if (isEmptyRow) {
+          return;
+        }
 
-      const isEmptyRow = row.original?.emptyRow;
-      if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow) {
-        if (row.isGrouped || (TableSelectionBehavior.ROW_SELECTOR === selectionBehavior && !selectionCellClick)) {
+        // dont select grouped rows
+        if (row.isGrouped) {
           return;
         }
-        if (isTreeTable) {
-          if (selectionMode === TableSelectionMode.MULTI_SELECT) {
-            dispatch({
-              type: 'SET_SELECTED_ROWS',
-              selectedIds: Object.assign({}, ...selectedFlatRows.map((item) => ({ [item.id]: true })), {
-                [row.id]: !row.isSelected
-              })
-            });
-          } else {
-            dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: { [row.id]: !row.isSelected } });
+
+        const { selectionBehavior, selectionMode, onRowSelected } = webComponentsReactProperties;
+
+        // dont continue if the row was clicked and selection mode is row selector only
+        if (selectionBehavior === TableSelectionBehavior.ROW_SELECTOR && !selectionCellClick) {
+          return;
+        }
+
+        if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
+          for (const row of selectedFlatRows) {
+            toggleRowSelected(row.id, false);
           }
-        } else {
-          row.toggleRowSelected();
         }
+        instance.toggleRowSelected(row.id);
+
+        // fire event
         if (typeof onRowSelected === 'function') {
           const payload = {
             row,
-            isSelected: !row.isSelected
+            isSelected: !row.isSelected,
+            selectedFlatRows: !row.isSelected ? [row.id] : []
           };
-          const payloadWithFlatRows = {
-            ...payload,
-            selectedFlatRows: !row.isSelected
+          if (selectionMode === TableSelectionMode.MULTI_SELECT) {
+            payload.selectedFlatRows = !row.isSelected
               ? [...selectedFlatRows, row]
-              : selectedFlatRows.filter((prevRow) => prevRow.id !== row.id)
-          };
-          onRowSelected(
-            enrichEventWithDetails(e, TableSelectionMode.MULTI_SELECT === selectionMode ? payloadWithFlatRows : payload)
-          );
-        }
-        if (selectionMode === TableSelectionMode.SINGLE_SELECT && !isTreeTable) {
-          selectedFlatRows.forEach(({ id }) => {
-            toggleRowSelected(id, false);
-          });
+              : selectedFlatRows.filter((prevRow) => prevRow.id !== row.id);
+          }
+          onRowSelected(enrichEventWithDetails(e, payload));
         }
       }
-    },
-    [selectionMode, isTreeTable, dispatch, selectedFlatRows, onRowSelected, toggleRowSelected]
-  );
-
-  Object.assign(instance, { selectSingleRow });
+    }
+  ];
 };
 
 export const useSingleRowStateSelection = (hooks) => {
-  hooks.useInstance.push(useInstance);
-  hooks.prepareRow.push(prepareRow);
   hooks.getRowProps.push(getRowProps);
 };
 useSingleRowStateSelection.pluginName = 'useSingleRowStateSelection';

packages/main/src/components/AnalyticalTable/index.tsx

@@ -193,7 +193,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     setColumnOrder,
     dispatch,
     totalColumnsWidth,
-    selectedFlatRows
+    toggleRowSelected,
+    toggleAllRowsSelected
   } = useTable(
     {
       columns,
@@ -204,7 +205,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       stateReducer,
       disableFilters: !filterable,
       disableSortBy: !sortable,
-      disableGroupBy: !groupable,
+      disableGroupBy: isTreeTable ? true : !groupable,
+      selectSubRows: false,
       webComponentsReactProperties: {
         tableRef,
         selectionMode,
@@ -266,8 +268,11 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   }, [groupBy, dispatch]);
 
   useEffect(() => {
-    dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: selectedRowIds });
-  }, [selectedRowIds, dispatch]);
+    toggleAllRowsSelected(false);
+    for (const row in selectedRowIds) {
+      toggleRowSelected(row, selectedRowIds[row]);
+    }
+  }, [toggleRowSelected, toggleAllRowsSelected, selectedRowIds]);
 
   const calcRowHeight = parseInt(
     getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--sapWcrAnalyticalTableRowHeight') || '44'

packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts

@@ -8,11 +8,6 @@ export const stateReducer = (newState, action) => {
         return newState;
       }
       return { ...newState, groupBy: payload };
-    case 'SET_SELECTED_ROWS':
-      if (deepCompare(newState.selectedRowIds, action.selectedIds)) {
-        return newState;
-      }
-      return { ...newState, selectedRowIds: action.selectedIds };
     case 'TABLE_RESIZE':
       return { ...newState, tableClientWidth: payload.tableClientWidth };
     case 'TABLE_SCROLLING_ENABLED':