Skip to content

Reimplement drag fill #3766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Apr 24, 2025
Merged

Reimplement drag fill #3766

merged 14 commits into from
Apr 24, 2025

Conversation

amanmahajan7
Copy link
Contributor

@amanmahajan7 amanmahajan7 commented Apr 21, 2025

Fixes #3215

This PR fixes a few issues with drag fill

  • Currently we rely on the mouseenter event to find the dragged over row which does not work if the pointer is outside the grid. The new logic uses mouse coordinates and findRowIdx.
  • Dragging does not autoscroll. I have added scrollIntoView to fix it
  • Moved to pointer events to fix dragging in touch screen devices.

FF has a bug which results in cell selection change on drag
https://bugzilla.mozilla.org/show_bug.cgi?id=1961462

@amanmahajan7 amanmahajan7 self-assigned this Apr 21, 2025
@@ -391,7 +392,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
/**
* refs
*/
const latestDraggedOverRowIdx = useRef(draggedOverRowIdx);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No longer needed as we are using react event handlers

Comment on lines +748 to +752
const offset =
scrollTop -
headerAndTopSummaryRowsHeight +
event.clientY -
gridEl.getBoundingClientRect().top;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a better way?

@@ -1056,7 +1124,6 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
gridRowStart,
selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably add another div and get rid of draggedOverCellIdx

package.json Outdated
@@ -68,8 +68,8 @@
"@typescript-eslint/eslint-plugin": "^8.29.0",
"@typescript-eslint/parser": "^8.29.0",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/browser": "^3.1.1",
"@vitest/coverage-v8": "^3.1.1",
"@vitest/browser": "3.1.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resizable tests fail in the latest version

@amanmahajan7 amanmahajan7 marked this pull request as ready for review April 21, 2025 17:26
@amanmahajan7 amanmahajan7 requested a review from nstepien as a code owner April 21, 2025 17:26
Copy link

codecov bot commented Apr 21, 2025

Codecov Report

Attention: Patch coverage is 98.11321% with 2 lines in your changes missing coverage. Please review.

Project coverage is 98.67%. Comparing base (483999f) to head (00ff51e).
Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/DataGrid.tsx 98.03% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3766      +/-   ##
==========================================
- Coverage   98.82%   98.67%   -0.16%     
==========================================
  Files          47       46       -1     
  Lines        3499     3468      -31     
  Branches      766      762       -4     
==========================================
- Hits         3458     3422      -36     
- Misses         41       46       +5     
Files with missing lines Coverage Δ
src/Row.tsx 100.00% <100.00%> (ø)
src/TreeDataGrid.tsx 95.96% <ø> (-0.03%) ⬇️
src/style/cell.ts 100.00% <100.00%> (ø)
src/types.ts 100.00% <ø> (ø)
src/DataGrid.tsx 99.59% <98.03%> (-0.19%) ⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

nstepien
nstepien previously approved these changes Apr 24, 2025
Co-authored-by: Nicolas Stepien <[email protected]>
@amanmahajan7 amanmahajan7 enabled auto-merge (squash) April 24, 2025 13:02
@amanmahajan7 amanmahajan7 merged commit fafe4da into main Apr 24, 2025
1 check passed
@amanmahajan7 amanmahajan7 deleted the am-drag-fill branch April 24, 2025 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cell Drag auto scroll not working
2 participants