diff --git a/website/components/DraggableCellRenderer.tsx b/website/components/DraggableRowRenderer.tsx similarity index 82% rename from website/components/DraggableCellRenderer.tsx rename to website/components/DraggableRowRenderer.tsx index 80f68a735d..fe0a58908e 100644 --- a/website/components/DraggableCellRenderer.tsx +++ b/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 extends CellRendererProps { +interface DraggableRowRenderProps extends RenderRowProps { onRowReorder: (sourceIndex: number, targetIndex: number) => void; } -export function DraggableCellRenderer({ +export function DraggableRowRenderer({ rowIdx, className, onRowReorder, ...props -}: DraggableCellRenderProps) { +}: DraggableRowRenderProps) { const [isDragging, setIsDragging] = useState(false); const [isOver, setIsOver] = useState(false); @@ -34,8 +32,6 @@ export function DraggableCellRenderer({ function onDragStart(event: React.DragEvent) { 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({ } return ( - ) => { + const renderRow = useCallback((key: React.Key, props: RenderRowProps) => { function onRowReorder(fromIndex: number, toIndex: number) { function reorderRows() { setRows((rows) => { @@ -76,7 +76,7 @@ function RowsReordering() { startViewTransition(reorderRows); } - return ; + return key={key} {...props} onRowReorder={onRowReorder} />; }, []); return ( @@ -85,7 +85,7 @@ function RowsReordering() { columns={columns} rows={rows} onRowsChange={setRows} - renderers={{ renderCell }} + renderers={{ renderRow }} direction={direction} /> );