Set drag column image (#3783)

* Set drag column image

* Few fixes

* Add `draggedColumnKey` state

* Update src/HeaderCell.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* newline

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

Author: amanmahajan7

src/HeaderCell.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -43,17 +43,29 @@ export const resizeHandleClassname = css`
 const cellDraggableClassname = 'rdg-cell-draggable';
 
 const cellDragging = css`
-  opacity: 0.5;
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
 `;
 
 const cellDraggingClassname = `rdg-cell-dragging ${cellDragging}`;
 
 const cellOver = css`
-  background-color: var(--rdg-header-draggable-background-color);
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
 `;
 
 const cellOverClassname = `rdg-cell-drag-over ${cellOver}`;
 
+const dragImageClassname = css`
+  @layer rdg.HeaderCell {
+    border-radius: 4px;
+    width: fit-content;
+    outline: 2px solid hsl(207, 100%, 50%);
+  }
+`;
+
 type SharedHeaderRowProps<R, SR> = Pick<
   HeaderRowProps<R, SR, React.Key>,
   | 'sortColumns'
@@ -70,7 +82,8 @@ export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
   colSpan: number | undefined;
   rowIdx: number;
   isCellSelected: boolean;
-  dragDropKey: string;
+  draggedColumnKey: string | undefined;
+  setDraggedColumnKey: (draggedColumnKey: string | undefined) => void;
 }
 
 export default function HeaderCell<R, SR>({
@@ -85,10 +98,11 @@ export default function HeaderCell<R, SR>({
   onSortColumnsChange,
   selectCell,
   direction,
-  dragDropKey
+  draggedColumnKey,
+  setDraggedColumnKey
 }: HeaderCellProps<R, SR>) {
-  const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
+  const isDragging = draggedColumnKey === column.key;
   const rowSpan = getHeaderCellRowSpan(column, rowIdx);
   const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
   const sortIndex = sortColumns?.findIndex((sort) => sort.columnKey === column.key);
@@ -99,6 +113,7 @@ export default function HeaderCell<R, SR>({
   const ariaSort =
     sortDirection && !priority ? (sortDirection === 'ASC' ? 'ascending' : 'descending') : undefined;
   const { sortable, resizable, draggable } = column;
+  const dragImageId = useId();
 
   const className = getCellClassname(column, column.headerCellClass, {
     [cellSortableClassname]: sortable,
@@ -180,13 +195,18 @@ export default function HeaderCell<R, SR>({
   }
 
   function onDragStart(event: React.DragEvent<HTMLDivElement>) {
-    event.dataTransfer.setData(dragDropKey, column.key);
+    const dragImage = event.currentTarget.cloneNode(true) as HTMLDivElement;
+    dragImage.classList.add(dragImageClassname);
+    dragImage.id = dragImageId;
+    event.currentTarget.parentElement!.insertBefore(dragImage, event.currentTarget);
+    event.dataTransfer.setDragImage(dragImage, 0, 0);
     event.dataTransfer.dropEffect = 'move';
-    setIsDragging(true);
+    setDraggedColumnKey(column.key);
   }
 
   function onDragEnd() {
-    setIsDragging(false);
+    setDraggedColumnKey(undefined);
+    document.getElementById(dragImageId)?.remove();
   }
 
   function onDragOver(event: React.DragEvent<HTMLDivElement>) {
@@ -197,18 +217,9 @@ export default function HeaderCell<R, SR>({
 
   function onDrop(event: React.DragEvent<HTMLDivElement>) {
     setIsOver(false);
-    // The dragDropKey is derived from the useId() hook, which can sometimes generate keys with uppercase letters.
-    // When setting data using event.dataTransfer.setData(), the key is automatically converted to lowercase in some browsers.
-    // To ensure consistent comparison, we normalize the dragDropKey to lowercase before checking its presence in the event's dataTransfer types.
-    // https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface
-    if (event.dataTransfer.types.includes(dragDropKey.toLowerCase())) {
-      const sourceKey = event.dataTransfer.getData(dragDropKey.toLowerCase());
-      if (sourceKey !== column.key) {
-        // prevent the browser from redirecting in some cases
-        event.preventDefault();
-        onColumnsReorder?.(sourceKey, column.key);
-      }
-    }
+    // prevent the browser from redirecting in some cases
+    event.preventDefault();
+    onColumnsReorder?.(draggedColumnKey!, column.key);
   }
 
   function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
@@ -223,19 +234,23 @@ export default function HeaderCell<R, SR>({
     }
   }
 
-  let draggableProps: React.ComponentProps<'div'> | undefined;
+  let dragTargetProps: React.ComponentProps<'div'> | undefined;
+  let dropTargetProps: React.ComponentProps<'div'> | undefined;
   if (draggable) {
-    draggableProps = {
+    dragTargetProps = {
       draggable: true,
-      /* events fired on the draggable target */
       onDragStart,
-      onDragEnd,
-      /* events fired on the drop targets */
-      onDragOver,
-      onDragEnter,
-      onDragLeave,
-      onDrop
+      onDragEnd
     };
+
+    if (draggedColumnKey !== undefined && draggedColumnKey !== column.key) {
+      dropTargetProps = {
+        onDragOver,
+        onDragEnter,
+        onDragLeave,
+        onDrop
+      };
+    }
   }
 
   return (
@@ -256,7 +271,8 @@ export default function HeaderCell<R, SR>({
       onFocus={onFocus}
       onClick={onClick}
       onKeyDown={onKeyDown}
-      {...draggableProps}
+      {...dragTargetProps}
+      {...dropTargetProps}
     >
       {column.renderHeaderCell({
         column,

src/HeaderRow.tsx

@@ -1,4 +1,4 @@
-import { memo, useId } from 'react';
+import { memo, useState } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -60,7 +60,7 @@ function HeaderRow<R, SR, K extends React.Key>({
   selectCell,
   direction
 }: HeaderRowProps<R, SR, K>) {
-  const dragDropKey = useId();
+  const [draggedColumnKey, setDraggedColumnKey] = useState<string>();
 
   const cells = [];
   for (let index = 0; index < columns.length; index++) {
@@ -84,7 +84,8 @@ function HeaderRow<R, SR, K extends React.Key>({
         sortColumns={sortColumns}
         selectCell={selectCell}
         direction={direction}
-        dragDropKey={dragDropKey}
+        draggedColumnKey={draggedColumnKey}
+        setDraggedColumnKey={setDraggedColumnKey}
       />
     );
   }

src/style/core.ts

@@ -42,7 +42,7 @@ const root = css`
 
   @layer rdg.Root {
     ${lightTheme}
-    --rdg-selection-color: #66afe9;
+    --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
     --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
 

website/routes/ColumnsReordering.tsx

@@ -106,18 +106,27 @@ function ColumnsReordering() {
   }, [rows, sortColumns]);
 
   function onColumnsReorder(sourceKey: string, targetKey: string) {
-    setColumnsOrder((columnsOrder) => {
-      const sourceColumnOrderIndex = columnsOrder.findIndex(
-        (index) => columns[index].key === sourceKey
-      );
-      const targetColumnOrderIndex = columnsOrder.findIndex(
-        (index) => columns[index].key === targetKey
-      );
-      const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
-      const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
-      newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
-      return newColumnsOrder;
-    });
+    function reorderColumns() {
+      setColumnsOrder((columnsOrder) => {
+        const sourceColumnOrderIndex = columnsOrder.findIndex(
+          (index) => columns[index].key === sourceKey
+        );
+        const targetColumnOrderIndex = columnsOrder.findIndex(
+          (index) => columns[index].key === targetKey
+        );
+        const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
+        const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
+        newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
+        return newColumnsOrder;
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (document.startViewTransition) {
+      document.startViewTransition(reorderColumns);
+    } else {
+      reorderColumns();
+    }
   }
 
   function resetOrderAndWidths() {