Update dragHandle to display at the intersection of column and row (a…

…dazzle#3355)

* Hide drag handle if all the cells in a column are readonly

* Update dragHandle to display at the intersection of column and row

* Fix frozen column

* Cleanup

* `marginInlineStart` is only needed on unfrozen columns

* dedupe

* Use idx

* Use placeself and negative margins

* Remove unused function

* Handle colSpan on the last column

src/DataGrid.tsx

@@ -838,7 +838,8 @@ function DataGrid<R, SR, K extends Key>(
       return;
     }
 
-    const column = columns[selectedPosition.idx];
+    const { idx, rowIdx } = selectedPosition;
+    const column = columns[idx];
     if (column.renderEditCell == null || column.editable === false) {
       return;
     }
@@ -847,10 +848,12 @@ function DataGrid<R, SR, K extends Key>(
 
     return (
       <DragHandle
-        gridRowStart={headerAndTopSummaryRowsCount + selectedPosition.rowIdx + 1}
+        gridRowStart={headerAndTopSummaryRowsCount + rowIdx + 1}
         rows={rows}
         column={column}
         columnWidth={columnWidth}
+        maxColIdx={maxColIdx}
+        isLastRow={rowIdx === maxRowIdx}
         selectedPosition={selectedPosition}
         isCellEditable={isCellEditable}
         latestDraggedOverRowIdx={latestDraggedOverRowIdx}

src/DragHandle.tsx

@@ -36,6 +36,8 @@ interface Props<R, SR> extends Pick<DataGridProps<R, SR>, 'rows' | 'onRowsChange
   gridRowStart: number;
   column: CalculatedColumn<R, SR>;
   columnWidth: number | string;
+  maxColIdx: number;
+  isLastRow: boolean;
   selectedPosition: SelectCellState;
   latestDraggedOverRowIdx: React.MutableRefObject<number | undefined>;
   isCellEditable: (position: Position) => boolean;
@@ -50,6 +52,8 @@ export default function DragHandle<R, SR>({
   rows,
   column,
   columnWidth,
+  maxColIdx,
+  isLastRow,
   selectedPosition,
   latestDraggedOverRowIdx,
   isCellEditable,
@@ -118,19 +122,26 @@ export default function DragHandle<R, SR>({
     }
   }
 
-  const colSpan = column.colSpan?.({ type: 'ROW', row: rows[rowIdx] }) ?? 1;
-  const style = getCellStyle(column, colSpan);
+  function getStyle(): React.CSSProperties {
+    const colSpan = column.colSpan?.({ type: 'ROW', row: rows[rowIdx] }) ?? 1;
+    const { insetInlineStart, ...style } = getCellStyle(column, colSpan);
+    const marginEnd = 'calc(var(--rdg-drag-handle-size) * -0.5 + 1px)';
+    const isLastColumn = column.idx + colSpan - 1 === maxColIdx;
+
+    return {
+      ...style,
+      gridRowStart,
+      marginInlineEnd: isLastColumn ? undefined : marginEnd,
+      marginBlockEnd: isLastRow ? undefined : marginEnd,
+      insetInlineStart: insetInlineStart
+        ? `calc(${insetInlineStart} + ${columnWidth}px + var(--rdg-drag-handle-size) * -0.5 - 1px)`
+        : undefined
+    };
+  }
 
   return (
     <div
-      style={{
-        ...style,
-        gridRowStart,
-        insetInlineStart:
-          style.insetInlineStart && typeof columnWidth === 'number'
-            ? `calc(${style.insetInlineStart} + ${columnWidth}px - var(--rdg-drag-handle-size))`
-            : undefined
-      }}
+      style={getStyle()}
       className={clsx(cellDragHandleClassname, column.frozen && cellDragHandleFrozenClassname)}
       onClick={onClick}
       onMouseDown={handleMouseDown}