refactor(AnalyticalTable): update react-table and replace grid with absolute layout (#238)

BREAKING CHANGE: Update `react-table` to `7.0.0-rc.5`

Author: MarcusNotheis

package.json

@@ -64,7 +64,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-canvas-mock": "^2.2.0",
-    "jest-environment-jsdom-fifteen": "^1.0.0",
+    "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-enzyme": "^7.1.2",
     "jss-snapshot-serializer": "^1.0.0",
     "lerna": "^3.19.0",

packages/main/package.json

@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.20",
+    "react-table": "7.0.0-rc.5",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },

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

@@ -226,10 +226,10 @@ describe('AnalyticalTable', () => {
     const wrapper = mountThemedComponent(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
 
     // get first column of the table and simulate dragging of it
-    let componentDrag = wrapper.find({ role: 'columnheader' }).at(0);
+    let componentDrag = wrapper.find('div[role="columnheader"] div[draggable]').at(0);
     let inst = componentDrag.instance();
     // @ts-ignore
-    let dragColumnId = inst.id;
+    let dragColumnId = inst.dataset.columnId;
 
     // @ts-ignore
     expect(inst.draggable).toBeDefined();
@@ -244,7 +244,7 @@ describe('AnalyticalTable', () => {
     dataTransfer.getData = () => {
       return dragColumnId;
     };
-    let componentDrop = wrapper.find({ role: 'columnheader' }).at(1);
+    let componentDrop = wrapper.find('div[role="columnheader"] div[draggable]').at(1);
     // @ts-ignore
     componentDrop.simulate('drop', { dataTransfer: dataTransfer });
 

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

@@ -15,7 +15,6 @@ const styles = ({ parameters }: JSSTheme) => ({
   tableHeaderRow: {
     boxShadow: 'none !important',
     height: '2.75rem',
-    display: 'grid',
     zIndex: 1,
     position: 'relative'
   },
@@ -58,7 +57,6 @@ const styles = ({ parameters }: JSSTheme) => ({
     }
   },
   tr: {
-    display: 'grid',
     zIndex: 0,
     backgroundColor: parameters.sapUiListBackground,
     color: parameters.sapUiListTextColor

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

@@ -1,16 +1,15 @@
+import '@ui5/webcomponents-icons/dist/icons/filter';
+import '@ui5/webcomponents-icons/dist/icons/group-2';
+import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
+import '@ui5/webcomponents-icons/dist/icons/sort-descending';
 import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
 import { createUseStyles, useTheme } from 'react-jss';
 import { JSSTheme } from '../../../interfaces/JSSTheme';
-import { Resizer } from './Resizer';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
-import '@ui5/webcomponents-icons/dist/icons/filter';
-import '@ui5/webcomponents-icons/dist/icons/group-2';
-import '@ui5/webcomponents-icons/dist/icons/sort-descending';
-import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
 
 export interface ColumnHeaderProps {
   id: string;
@@ -64,6 +63,16 @@ const styles = ({ parameters }: JSSTheme) => ({
     '& :last-child': {
       marginLeft: '0.25rem'
     }
+  },
+  resizer: {
+    display: 'inline-block',
+    width: '16px',
+    height: '100%',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    transform: 'translateX(50%)',
+    zIndex: 1
   }
 });
 
@@ -106,7 +115,16 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
     const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
 
     return (
-      <div className={classNames.valueOf()}>
+      <div
+        className={classNames.valueOf()}
+        draggable={isDraggable}
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragStart={onDragStart}
+        onDrop={onDrop}
+        onDragEnd={onDragEnd}
+        data-column-id={id}
+      >
         <span
           title={typeof children === 'string' ? children : null}
           style={{ textOverflow: 'ellipsis', overflowX: 'hidden', whiteSpace: 'nowrap' }}
@@ -120,13 +138,26 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
         </div>
       </div>
     );
-  }, [classes, column.filterValue, column.isSorted, column.isGrouped, column.isSortedDesc, children]);
+  }, [
+    classes,
+    column.filterValue,
+    column.isSorted,
+    column.isGrouped,
+    column.isSortedDesc,
+    children,
+    isDraggable,
+    onDragEnter,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    onDragEnd,
+    id
+  ]);
 
   const isResizable = !isLastColumn && column.canResize;
   const theme = useTheme() as JSSTheme;
   const innerStyle: CSSProperties = useMemo(() => {
-    const modifiedStyles = {
-      ...style,
+    const modifiedStyles: CSSProperties = {
       width: '100%',
       fontWeight: 'normal',
       cursor: 'pointer',
@@ -137,26 +168,15 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
       modifiedStyles.maxWidth = `calc(100% - 16px)`;
     }
     if (dragOver) {
-      modifiedStyles.borderLeft = '3px solid ' + theme.parameters.sapSelectedColor;
+      modifiedStyles.borderLeft = `3px solid ${theme.parameters.sapSelectedColor}`;
     }
-    return modifiedStyles as CSSProperties;
-  }, [style, isResizable]);
+    return modifiedStyles;
+  }, [isResizable, dragOver]);
 
   if (!column) return null;
 
   return (
-    <div
-      id={id}
-      className={className}
-      style={style}
-      role="columnheader"
-      draggable={isDraggable}
-      onDragEnter={onDragEnter}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-      onDrop={onDrop}
-      onDragEnd={onDragEnd}
-    >
+    <div id={id} className={className} style={style} role="columnheader">
       {groupable || sortable || filterable ? (
         <ColumnHeaderModal
           openBy={openBy}
@@ -171,7 +191,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
       ) : (
         <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
       )}
-      {isResizable && <Resizer {...props} />}
+      <div {...column.getResizerProps()} className={classes.resizer} />
     </div>
   );
 };