feat(AnalyticalTable): Refactoring, add onRowExpandChange and placeho…

…lder loading (#207)

BREAKING CHANGE: Removed unused prop `cellHeight`, use `rowHeight` instead
BREAKING CHANGE: Removed unused prop `reactTableProps`
BREAKING CHANGE: Removed unused prop `getTableProps`
BREAKING CHANGE: Removed unused prop `getHeaderGroupsProps`
BREAKING CHANGE: Removed unused prop `getHeaderProps`
BREAKING CHANGE: Removed unused prop `getRowProps`
BREAKING CHANGE: Removed unused prop `getCellProps`

packages/main/package.json

@@ -22,6 +22,7 @@
     "@ui5/webcomponents": "1.0.0-rc.4",
     "@ui5/webcomponents-react-base": "0.6.0",
     "lodash.debounce": "^4.0.8",
+    "react-content-loader": "^4.3.2",
     "react-table": "7.0.0-beta.12",
     "react-toastify": "^5.0.1",
     "react-window": "^1.8.5",

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

@@ -177,4 +177,20 @@ describe('AnalyticalTable', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  test('Loading - Placeholder', () => {
+    const wrapper = mountThemedComponent(
+      <AnalyticalTable title="Table Title" data={[]} columns={columns} loading visibleRows={15} minRows={5} />
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('Loading - Loader', () => {
+    const wrapper = mountThemedComponent(
+      <AnalyticalTable title="Table Title" data={data} columns={columns} loading visibleRows={15} minRows={5} />
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

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

@@ -134,16 +134,7 @@ const styles = ({ parameters }: JSSTheme) => ({
     }
   },
 
-  propRowHeight: {
-    '&$tableContainer': {
-      height: (props) => `calc(100% - ${props.rowHeight}px)`
-    },
-    '& $tableHeaderRow': {
-      height: (theme) => (theme.contentDensity === 'Compact' ? '2rem' : '2.75rem')
-    },
-    '& $th': {
-      height: (theme) => (theme.contentDensity === 'Compact' ? '2rem' : '2.75rem')
-    },
+  modifiedRowHeight: {
     '& $tableCell': {
       height: (props) => `${props.rowHeight}px`
     }

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

@@ -4,7 +4,7 @@ import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import React, { CSSProperties, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { JSSTheme } from '../../../interfaces/JSSTheme';
-import { Resizer } from '../Resizer';
+import { Resizer } from './Resizer';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
 import '@ui5/webcomponents/dist/icons/filter';