fix(AnalyticalTable): correctly indent root level tree rows (#1948)

Author: Lukas742

packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

@@ -14,7 +14,7 @@ const isBrowserIe = isIE();
 const getPadding = (level) => {
   switch (level) {
     case 0:
-      return 0;
+      return '0px';
     case 1:
       return isBrowserIe ? '1rem' : CssSizeVariables.sapWcrAnalyticalTableTreePaddingLevel1;
     case 2:
@@ -29,7 +29,14 @@ const getPadding = (level) => {
 };
 
 export const Expandable = (props) => {
-  const { cell, row, column, columns, webComponentsReactProperties } = props;
+  const {
+    cell,
+    row,
+    column,
+    columns,
+    webComponentsReactProperties,
+    state: { isRtl }
+  } = props;
 
   const tableColumns = columns.filter(
     ({ id }) =>
@@ -39,15 +46,15 @@ export const Expandable = (props) => {
   );
 
   const columnIndex = tableColumns.findIndex((col) => col.id === column.id);
-
+  const paddingRtl = isRtl ? 'paddingRight' : 'paddingLeft';
   let paddingLeft;
   if (row.canExpand) {
     paddingLeft = columnIndex === 0 ? getPadding(row.depth) : 0;
   } else {
     paddingLeft = columnIndex === 0 ? `calc(${getPadding(row.depth)} + 2rem)` : 0;
   }
   const style: CSSProperties = {
-    paddingLeft
+    [paddingRtl]: paddingLeft
   };
   const rowProps = row.getToggleRowExpandedProps();
 

packages/main/src/components/AnalyticalTable/demo/generateData.ts

@@ -30,33 +30,6 @@ const range = (len) => {
   return arr;
 };
 
-const newEntry = () => {
-  return {
-    name: getRandomName(),
-    age: getRandomNumber(18, 65),
-    friend: {
-      name: getRandomName(),
-      age: getRandomNumber(18, 65)
-    },
-    status: [ValueState.None, ValueState.Information, ValueState.Success, ValueState.Warning, ValueState.Error][
-      Math.floor(Math.random() * 4)
-    ]
-  };
-};
-
-const makeTreeEntry = (...lens) => {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth];
-    return range(len).map((d) => {
-      return {
-        ...newEntry(),
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
-      };
-    });
-  };
-  return makeDataLevel();
-};
-
 const makeEntry = () => ({
   name: getRandomName(),
   longColumn: 'Really really long column content... don´t crop please',
@@ -70,6 +43,22 @@ const makeEntry = () => ({
   ]
 });
 
+const makeTreeEntry = (...lens) => {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth];
+    return range(len).map((d, index) => {
+      if (index === 0) {
+        return makeEntry();
+      }
+      return {
+        ...makeEntry(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
+      };
+    });
+  };
+  return makeDataLevel();
+};
+
 const generateData = (numEntries, isTree = false) => {
   if (isTree) {
     return makeTreeEntry(numEntries, 4, 4, 4);