fix(AnalyticalTable): fix wrong column order on consecutive column reorder events (#233)

Author: vbersch

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -1,10 +1,13 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
+import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 
 const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
 };
 
-export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResized, onColumnsOrderChanged) => {
+export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResized) => {
+  const { onColumnsReordered } = props;
+
   const [dragOver, setDragOver] = useState('');
 
   const handleDragStart = useCallback(
@@ -42,9 +45,13 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, isBeingResize
       tempCols.splice(droppedColIdx, 0, tempCols.splice(draggedColIdx, 1)[0]);
       setColumnOrder(tempCols);
 
-      const newOrderedColumns = [...props.columns];
-      newOrderedColumns.splice(droppedColIdx, 0, newOrderedColumns.splice(draggedColIdx, 1)[0]);
-      onColumnsOrderChanged(e.currentTarget, props.columns[draggedColIdx], newOrderedColumns);
+      const columnsNewOrder = tempCols.map((tempColId) => props.columns.find((col) => getColumnId(col) === tempColId));
+      onColumnsReordered(
+        Event.of(null, e, {
+          columnsNewOrder,
+          column: props.columns[draggedColIdx]
+        })
+      );
     },
     [columnOrder]
   );

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

@@ -137,7 +137,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     selectedRowKey,
     LoadingComponent,
     onRowExpandChange,
-    onColumnsReordered,
     noDataText,
     NoDataComponent,
     visibleRows,
@@ -253,25 +252,12 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     [tableState.groupBy, onGroup]
   );
 
-  const onColumnsOrderChanged = useCallback(
-    (target, column, columnsNewOrder) => {
-      onColumnsReordered(
-        Event.of(null, target, {
-          columnsNewOrder,
-          column
-        })
-      );
-    },
-    [tableState.columnOrder, onColumnsReordered]
-  );
-
   const [headerRef, tableWidth] = useWindowResize();
   const [dragOver, handleDragEnter, handleDragStart, handleDragOver, handleOnDrop, handleOnDragEnd] = useDragAndDrop(
     props,
     setColumnOrder,
     tableState.columnOrder,
-    isBeingResized,
-    onColumnsOrderChanged
+    isBeingResized
   );
 
   return (