feat(AnalyticalTable): Reordern columns with drag and drop (#229)

Author: andybessm

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

@@ -1,6 +1,7 @@
 import { mountThemedComponent } from '@shared/tests/utils';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 
 const columns = [
   {
@@ -146,6 +147,7 @@ describe('AnalyticalTable', () => {
       .instance();
     // @ts-ignore
     component.onclick({});
+    console.log(component);
 
     // test desc function inside the popover element
     component = wrapper
@@ -172,9 +174,19 @@ describe('AnalyticalTable', () => {
         minRows={5}
         selectable={true}
         subRowsKey="subRows"
+        isTreeTable={true}
       />
     );
 
+    let colInst = wrapper
+      .find({ role: 'columnheader' })
+      .at(0)
+      .instance();
+
+    // @ts-ignore
+    expect(colInst.draggable).toBeDefined();
+    // @ts-ignore
+    expect(colInst.draggable).toBeFalsy();
     expect(wrapper.render()).toMatchSnapshot();
   });
 
@@ -209,4 +221,33 @@ describe('AnalyticalTable', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  test('test drag and drop of a draggable column', () => {
+    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 inst = componentDrag.instance();
+    // @ts-ignore
+    let dragColumnId = inst.id;
+
+    // @ts-ignore
+    expect(inst.draggable).toBeDefined();
+    // @ts-ignore
+    expect(inst.draggable).toBeTruthy();
+    // @ts-ignore
+    componentDrag.simulate('drag');
+
+    // get second column of the table and simulate dropping on it
+    let dataTransfer = {};
+    // @ts-ignore
+    dataTransfer.getData = () => {
+      return dragColumnId;
+    };
+    let componentDrop = wrapper.find({ role: 'columnheader' }).at(1);
+    // @ts-ignore
+    componentDrop.simulate('drop', { dataTransfer: dataTransfer });
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

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

@@ -8,6 +8,7 @@ const Resizer = (props) => {
   const startX = useRef(0);
   const resizerRef: RefObject<HTMLDivElement> = useRef();
   const onColumnSizeChanged = props['onColumnSizeChanged'];
+  const onColumnBeingResized = props['onColumnBeingResized'];
 
   const onResize = useCallback(
     (e) => {
@@ -30,8 +31,9 @@ const Resizer = (props) => {
       document.removeEventListener('mouseleave', onEndResize);
 
       delete resizerRef.current.parentElement.style.userSelect;
+      onColumnBeingResized({ value: false });
     },
-    [onResize, resizerRef]
+    [onResize, resizerRef, onColumnBeingResized]
   );
 
   const onStartResize = useCallback(
@@ -44,8 +46,9 @@ const Resizer = (props) => {
       document.addEventListener('mousemove', onResize);
       document.addEventListener('mouseup', onEndResize);
       document.addEventListener('mouseleave', onEndResize);
+      onColumnBeingResized({ value: true });
     },
-    [onResize, onEndResize, parentWidth, startX, resizerRef]
+    [onResize, onEndResize, parentWidth, startX, resizerRef, onColumnBeingResized]
   );
 
   return (

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

@@ -1,8 +1,8 @@
 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, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
-import { createUseStyles } from 'react-jss';
+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';
@@ -13,6 +13,7 @@ import '@ui5/webcomponents/dist/icons/sort-descending';
 import '@ui5/webcomponents/dist/icons/sort-ascending';
 
 export interface ColumnHeaderProps {
+  id: string;
   defaultSortDesc: boolean;
   onFilteredChange: (event: Event) => void;
   children: ReactNode | ReactNodeArray;
@@ -26,6 +27,14 @@ export interface ColumnHeaderProps {
   isLastColumn?: boolean;
   onSort?: (e: Event) => void;
   onGroupBy?: (e: Event) => void;
+  onDragStart: DragEventHandler<HTMLDivElement>;
+  onDragOver: DragEventHandler<HTMLDivElement>;
+  onDrop: DragEventHandler<HTMLDivElement>;
+  onDragEnter: DragEventHandler<HTMLDivElement>;
+  onDragEnd: DragEventHandler<HTMLDivElement>;
+  dragOver: boolean;
+  isResizing: boolean;
+  isDraggable: boolean;
 }
 
 const styles = ({ parameters }: JSSTheme) => ({
@@ -64,6 +73,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
   const classes = useStyles(props);
 
   const {
+    id,
     children,
     column,
     className,
@@ -73,7 +83,14 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
     filterable,
     isLastColumn,
     onSort,
-    onGroupBy
+    onGroupBy,
+    onDragEnter,
+    onDragOver,
+    onDragStart,
+    onDrop,
+    onDragEnd,
+    isDraggable,
+    dragOver
   } = props;
 
   const openBy = useMemo(() => {
@@ -106,6 +123,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
   }, [classes, column.filterValue, column.isSorted, column.isGrouped, column.isSortedDesc, children]);
 
   const isResizable = !isLastColumn && column.canResize;
+  const theme = useTheme() as JSSTheme;
   const innerStyle: CSSProperties = useMemo(() => {
     const modifiedStyles = {
       ...style,
@@ -118,13 +136,27 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
     if (isResizable) {
       modifiedStyles.maxWidth = `calc(100% - 16px)`;
     }
+    if (dragOver) {
+      modifiedStyles.borderLeft = '3px solid ' + theme.parameters.sapSelectedColor;
+    }
     return modifiedStyles as CSSProperties;
   }, [style, isResizable]);
 
   if (!column) return null;
 
   return (
-    <div className={className} style={style} role="columnheader">
+    <div
+      id={id}
+      className={className}
+      style={style}
+      role="columnheader"
+      draggable={isDraggable}
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+    >
       {groupable || sortable || filterable ? (
         <ColumnHeaderModal
           openBy={openBy}