refactor(AnalyticalTable): declare row height via css variable (#430)

Author: MarcusNotheis

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

@@ -5,18 +5,18 @@ const styles = {
   tableContainer: {
     width: '100%',
     height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`,
-    minHeight: '3rem',
+    minHeight: '3rem'
   },
   table: {
     position: 'relative',
     width: '100%',
     maxWidth: '100%',
-    overflowX: 'auto',
+    overflowX: 'auto'
   },
   tableHeaderRow: {
     boxShadow: 'none !important',
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
-    position: 'relative',
+    position: 'relative'
   },
   th: {
     backgroundColor: ThemingParameters.sapList_HeaderBackground,
@@ -31,18 +31,18 @@ const styles = {
     textAlign: 'start',
     boxSizing: 'border-box',
     '&:first-child': {
-      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`,
-    },
+      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
+    }
   },
   tbody: {
     position: 'relative',
     zIndex: 0,
     backgroundColor: ThemingParameters.sapList_Background,
     overflowX: 'hidden !important',
-    overflowY: 'auto !important',
+    overflowY: 'auto !important'
   },
   alternateRowColor: {
-    backgroundColor: ThemingParameters.sapList_HeaderBackground,
+    backgroundColor: ThemingParameters.sapList_HeaderBackground
   },
   emptyRow: {},
   tr: {
@@ -52,38 +52,38 @@ const styles = {
     '&[data-is-selected]': {
       backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`,
       '& $tableCell': {
-        borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`,
-      },
+        borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`
+      }
     },
     '&[data-is-selected]:hover': {
-      backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`,
-    },
+      backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`
+    }
   },
   tableGroupHeader: {
     '&$tr': {
       backgroundColor: `${ThemingParameters.sapList_TableGroupHeaderBackground} !important`,
       border: `1px solid ${ThemingParameters.sapList_TableGroupHeaderBorderColor}`,
       color: ThemingParameters.sapList_TextColor,
       '& $tableCell': {
-        borderRight: 'none',
-      },
-    },
+        borderRight: 'none'
+      }
+    }
   },
   selectable: {
     '& $tr:hover:not($emptyRow)': {
       backgroundColor: ThemingParameters.sapList_Hover_Background,
       '&:not($selectionModeRowSelector)': {
-        cursor: 'pointer',
-      },
+        cursor: 'pointer'
+      }
     },
     '& $tr:active:not([data-is-selected]):not($tableGroupHeader):not($emptyRow):not($selectionModeRowSelector)': {
       backgroundColor: ThemingParameters.sapList_Active_Background,
       '& $tableCell': {
         borderRight: `1px solid ${ThemingParameters.sapList_Active_Background}`,
         color: `${ThemingParameters.sapList_Active_TextColor}`,
-        '--sapTextColor': ThemingParameters.sapList_Active_TextColor,
-      },
-    },
+        '--sapTextColor': ThemingParameters.sapList_Active_TextColor
+      }
+    }
   },
   selectionModeRowSelector: {},
   tableCell: {
@@ -97,7 +97,7 @@ const styles = {
     display: 'flex',
     padding: '0 0.5rem',
     '&:first-child': {
-      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
     },
     overflow: 'hidden',
     position: 'relative',
@@ -106,8 +106,8 @@ const styles = {
     alignItems: 'center',
     '&:focus': {
       outlineOffset: '-2px',
-      outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`,
-    },
+      outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`
+    }
   },
   noDataContainer: {
     display: 'flex',
@@ -121,13 +121,8 @@ const styles = {
     fontFamily: ThemingParameters.sapFontFamily,
     fontSize: ThemingParameters.sapFontSize,
     fontWeight: 'normal',
-    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
-  },
-  modifiedRowHeight: {
-    '& $tableCell': {
-      height: (props) => `${props.rowHeight}px`,
-    },
-  },
+    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
+  }
 };
 
 export default styles;

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

@@ -2242,7 +2242,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
 
 exports[`AnalyticalTable custom row height 1`] = `
 <div
-  style="visibility: hidden;"
+  style="--sapWcrAnalyticalTableRowHeight: 60px; visibility: hidden;"
 >
   <div
     style="min-height: 1.5rem; display: flex; align-items: center;"
@@ -2254,7 +2254,7 @@ exports[`AnalyticalTable custom row height 1`] = `
     </ui5-title>
   </div>
   <div
-    class="AnalyticalTable-tableContainer-0 AnalyticalTable-modifiedRowHeight-0 AnalyticalTable-modifiedRowHeight-d5-0"
+    class="AnalyticalTable-tableContainer-0"
   >
     <div
       aria-colcount="4"

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

@@ -16,7 +16,8 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useRef
+  useRef,
+  CSSProperties
 } from 'react';
 import {
   PluginHook,
@@ -164,7 +165,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     onLoadMore
   } = props;
 
-  const classes = useStyles({ rowHeight: props.rowHeight });
+  const classes = useStyles();
 
   const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref);
   const tableRef: RefObject<HTMLDivElement> = useRef();
@@ -240,22 +241,20 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     ...tableHooks
   );
 
-  const updateTableClientWidth = useCallback(() => {
-    requestAnimationFrame(() => {
-      if (tableRef.current) {
-        dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } });
-      }
-    });
-  }, []);
-
   useEffect(() => {
     // @ts-ignore
-    const tableWidthObserver = new ResizeObserver(updateTableClientWidth);
+    const tableWidthObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (tableRef.current) {
+          dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } });
+        }
+      });
+    });
     tableWidthObserver.observe(tableRef.current);
     return () => {
       tableWidthObserver.disconnect();
     };
-  }, [updateTableClientWidth]);
+  }, []);
 
   useEffect(() => {
     dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
@@ -267,10 +266,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
 
   const tableContainerClasses = StyleClassHelper.of(classes.tableContainer);
 
-  if (!!rowHeight) {
-    tableContainerClasses.put(classes.modifiedRowHeight);
-  }
-
   const calcRowHeight = parseInt(
     getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--sapWcrAnalyticalTableRowHeight') || '44'
   );
@@ -327,15 +322,24 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   ]);
 
   const inlineStyle = useMemo(() => {
-    if(tableState.tableClientWidth > 0) {
-      return style;
+    const tableStyles = {};
+    if (!!rowHeight) {
+      tableStyles['--sapWcrAnalyticalTableRowHeight'] = `${rowHeight}px`;
+    }
+
+    if (tableState.tableClientWidth > 0) {
+      return {
+        ...tableStyles,
+        style
+      } as CSSProperties;
     }
     return {
+      ...tableStyles,
       ...style,
       visibility: 'hidden' as 'hidden'
-    };
-  }, [tableState.tableClientWidth, style]);
-  
+    } as CSSProperties;
+  }, [tableState.tableClientWidth, style, rowHeight]);
+
   return (
     <div className={className} style={inlineStyle} title={tooltip} ref={analyticalTableRef} {...passThroughProps}>
       {title && <TitleBar>{title}</TitleBar>}

prettier.config.js

@@ -2,5 +2,6 @@ module.exports = {
   printWidth: 120,
   parser: 'typescript',
   singleQuote: true,
-  arrowParens: 'always'
+  arrowParens: 'always',
+  trailingComma: 'none'
 };