Skip to content

Commit

Permalink
[DataGrid] Row reordering fix for different row height (#7006)
Browse files Browse the repository at this point in the history
  • Loading branch information
yaredtsy authored Jun 15, 2023
1 parent ecd64a4 commit 33411d8
Showing 1 changed file with 41 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,23 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';

type OwnerState = { classes: DataGridProProcessedProps['classes'] };

enum Direction {
UP,
DOWN,
}

interface ReorderStateProps {
previousTargetId: GridRowId | null;
dragDirection: Direction | null;
}

let previousMousePosition: { x: number; y: number } | null = null;

let previousReorderState: ReorderStateProps = {
previousTargetId: null,
dragDirection: null,
};

const useUtilityClasses = (ownerState: OwnerState) => {
const { classes } = ownerState;

Expand Down Expand Up @@ -103,10 +120,32 @@ export const useGridRowReorder = (
// For more information check here https://github.com/mui/mui-x/issues/2680.
event.stopPropagation();

const mouseMovementDiff = previousMousePosition
? previousMousePosition.y - event.clientY
: event.clientY;

if (params.id !== dragRowId) {
const targetRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
apiRef.current.setRowIndex(dragRowId, targetRowIndex);

const dragDirection = mouseMovementDiff > 0 ? Direction.DOWN : Direction.UP;
const currentReorderState: ReorderStateProps = {
dragDirection,
previousTargetId: params.id,
};
const isStateChanged =
currentReorderState.dragDirection !== previousReorderState.dragDirection ||
currentReorderState.previousTargetId !== previousReorderState.previousTargetId;

if (
previousReorderState.dragDirection === null ||
(Math.abs(mouseMovementDiff) >= 1 && isStateChanged)
) {
apiRef.current.setRowIndex(dragRowId, targetRowIndex);
previousReorderState = currentReorderState;
}
}

previousMousePosition = { x: event.clientX, y: event.clientY };
},
[apiRef, logger, dragRowId],
);
Expand All @@ -127,6 +166,7 @@ export const useGridRowReorder = (

clearTimeout(removeDnDStylesTimeout.current);
dragRowNode.current = null;
previousReorderState.dragDirection = null;

// Check if the row was dropped outside the grid.
if (event.dataTransfer.dropEffect === 'none') {
Expand Down

0 comments on commit 33411d8

Please sign in to comment.