From f94a6ffe26412c32d430e0a1e8871a47964deb4d Mon Sep 17 00:00:00 2001
From: vbersch <viktor.bersch@sap.com>
Date: Thu, 28 Nov 2019 14:23:16 +0100
Subject: [PATCH] fix(AnalyticalTable): fix wrong column order on consecutive
 column reorder events (#233)

---
 .../AnalyticalTable/hooks/useDragAndDrop.ts     | 17 ++++++++++++-----
 .../src/components/AnalyticalTable/index.tsx    | 16 +---------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
index 850c2929890..d9e123c61cd 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts
+++ b/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]
   );
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 36380a29fb3..1836598f689 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/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 (