Use renderRow to implement row dragging (#3965)

* Use `renderRow` to implement row dragging

* new line

* Fix newline

Author: amanmahajan7

…ite/components/DraggableCellRenderer.tsx …site/components/DraggableRowRenderer.tsxwebsite/components/DraggableCellRenderer.tsx renamed to website/components/DraggableRowRenderer.tsx website/components/DraggableCellRenderer.tsx renamed to website/components/DraggableRowRenderer.tsx

@@ -2,28 +2,26 @@ import { useState } from 'react';
 import { css } from 'ecij';
 import clsx from 'clsx';
 
-import { Cell, type CellRendererProps } from '../../src';
+import { Row, type RenderRowProps } from '../../src';
 
 const rowDraggingClassname = css`
   opacity: 0.5;
 `;
 
 const rowOverClassname = css`
-  .rdg-row:has(&) {
-    background-color: #ececec;
-  }
+  background-color: #ececec;
 `;
 
-interface DraggableCellRenderProps<R, SR> extends CellRendererProps<R, SR> {
+interface DraggableRowRenderProps<R, SR> extends RenderRowProps<R, SR> {
   onRowReorder: (sourceIndex: number, targetIndex: number) => void;
 }
 
-export function DraggableCellRenderer<R, SR>({
+export function DraggableRowRenderer<R, SR>({
   rowIdx,
   className,
   onRowReorder,
   ...props
-}: DraggableCellRenderProps<R, SR>) {
+}: DraggableRowRenderProps<R, SR>) {
   const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
 
@@ -34,8 +32,6 @@ export function DraggableCellRenderer<R, SR>({
 
   function onDragStart(event: React.DragEvent<HTMLDivElement>) {
     setIsDragging(true);
-    // TODO: use a custom drag image to show a preview of the row being dragged
-    event.dataTransfer.setDragImage(event.currentTarget.parentElement!.firstElementChild!, 40, 17);
     event.dataTransfer.setData('text/plain', String(rowIdx));
     event.dataTransfer.dropEffect = 'move';
   }
@@ -70,7 +66,7 @@ export function DraggableCellRenderer<R, SR>({
   }
 
   return (
-    <Cell
+    <Row
       draggable
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}

website/components/index.ts

@@ -1,3 +1,3 @@
 export * from './CellExpanderFormatter';
 export * from './ChildRowDeleteButton';
-export * from './DraggableCellRenderer';
+export * from './DraggableRowRenderer';

website/routes/RowsReordering.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 
-import { DataGrid, renderTextEditor, type CellRendererProps, type Column } from '../../src';
-import { DraggableCellRenderer } from '../components';
+import { DataGrid, renderTextEditor, type Column, type RenderRowProps } from '../../src';
+import { DraggableRowRenderer } from '../components';
 import { startViewTransition } from '../utils';
 import { useDirection } from '../directionContext';
 
@@ -62,7 +62,7 @@ function RowsReordering() {
   const direction = useDirection();
   const [rows, setRows] = useState(createRows);
 
-  const renderCell = useCallback((key: React.Key, props: CellRendererProps<Row, unknown>) => {
+  const renderRow = useCallback((key: React.Key, props: RenderRowProps<Row>) => {
     function onRowReorder(fromIndex: number, toIndex: number) {
       function reorderRows() {
         setRows((rows) => {
@@ -76,7 +76,7 @@ function RowsReordering() {
       startViewTransition(reorderRows);
     }
 
-    return <DraggableCellRenderer key={key} {...props} onRowReorder={onRowReorder} />;
+    return <DraggableRowRenderer<Row, unknown> key={key} {...props} onRowReorder={onRowReorder} />;
   }, []);
 
   return (
@@ -85,7 +85,7 @@ function RowsReordering() {
       columns={columns}
       rows={rows}
       onRowsChange={setRows}
-      renderers={{ renderCell }}
+      renderers={{ renderRow }}
       direction={direction}
     />
   );