Prevent repeated classList changes in Table column header (#2249)

iTwin · Sep 18, 2024 · 63ea540 · 63ea540
1 parent a96ab35
commit 63ea540
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
@@ -15,6 +15,9 @@ import type {
 } from '../../../react-table/react-table.js';
 import { styles } from '../../../styles.js';
 
+const leftClassName = styles['iui-table-reorder-column-left'];
+const rightClassName = styles['iui-table-reorder-column-right'];
+
 const REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
   columnDragEnd: 'columnDragEnd',
@@ -56,12 +59,15 @@ const defaultGetDragAndDropProps =
       position?: 'left' | 'right',
     ) => {
       const columnElement = event.currentTarget as HTMLElement;
-      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
-      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
       if (position === 'left') {
-        columnElement.classList.add(styles['iui-table-reorder-column-left']);
+        columnElement.classList.remove(rightClassName);
+        columnElement.classList.add(leftClassName);
       } else if (position === 'right') {
-        columnElement.classList.add(styles['iui-table-reorder-column-right']);
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.add(rightClassName);
+      } else {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.remove(rightClassName);
       }
     };