fix(AnalyticalTable): Don't modify read-only classList (#339)

* fix(AnalyticalTable): Don't modify read-only classList

* Simplify Table Body Classes

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -38,7 +38,9 @@ const styles = ({ parameters }: JSSTheme) => ({
   tbody: {
     position: 'relative',
     zIndex: 0,
-    backgroundColor: parameters.sapUiListBackground
+    backgroundColor: parameters.sapUiListBackground,
+    overflowX: 'hidden !important',
+    overflowY: 'auto !important'
   },
   alternateRowColor: {
     backgroundColor: parameters.sapUiListHeaderBackground
@@ -97,10 +99,6 @@ const styles = ({ parameters }: JSSTheme) => ({
     whiteSpace: 'nowrap',
     alignItems: 'center'
   },
-  virtualTableBody: {
-    overflowX: 'hidden !important',
-    overflowY: 'auto !important'
-  },
   noDataContainer: {
     display: 'flex',
     justifyContent: 'center',

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -279,11 +279,10 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -751,11 +750,10 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -1834,11 +1832,10 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
         style="position: relative; height: 220px; width: 636px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -2362,11 +2359,10 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 300px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 300px; width: 100%;"
         >
           <div
@@ -3123,11 +3119,10 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -3599,11 +3594,10 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -4075,11 +4069,10 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -4547,11 +4540,10 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody-"
           style="height: 220px; width: 100%;"
         >
           <div
@@ -5019,11 +5011,10 @@ exports[`AnalyticalTable without selection Column 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable--virtualTableBody-"
+        class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
-          class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
           style="height: 220px; width: 100%;"
         >
           <div

packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx

@@ -1,7 +1,8 @@
 import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
 import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
 import { VirtualTableRow } from './VirtualTableRow';
 
@@ -24,24 +25,7 @@ export const VirtualTableBody = (props) => {
     selectedFlatRows
   } = props;
 
-  const innerDivRef = useRef(null);
-
-  useEffect(() => {
-    if (innerDivRef.current) {
-      innerDivRef.current.classList = '';
-      innerDivRef.current.classList.add(classes.tbody);
-      if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
-        innerDivRef.current.classList.add(classes.selectable);
-      }
-    }
-  }, [
-    innerDivRef.current,
-    selectionMode,
-    classes.tbody,
-    classes.selectable,
-    alternateRowColor,
-    classes.alternateRowColor
-  ]);
+  const innerDivRef = useRef<HTMLElement>();
 
   const itemCount = Math.max(minRows, rows.length);
   const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
@@ -74,9 +58,14 @@ export const VirtualTableBody = (props) => {
     [prepareRow]
   );
 
+  const classNames = StyleClassHelper.of(classes.tbody);
+  if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
+    classNames.put(classes.selectable);
+  }
+
   return (
     <FixedSizeList
-      className={classes.virtualTableBody}
+      className={classNames.valueOf()}
       ref={reactWindowRef}
       height={tableBodyHeight}
       width={totalColumnsWidth}