Skip to content

Set drag column image - #3783

Merged
amanmahajan7 merged 5 commits into
mainfrom
am-drag-image
May 16, 2025
Merged

amanmahajan7 merged 5 commits into
mainfrom
am-drag-image

Conversation

@amanmahajan7

@amanmahajan7 amanmahajan7 commented May 14, 2025

Copy link
Copy Markdown
Collaborator

image

@amanmahajan7 amanmahajan7 self-assigned this May 14, 2025
@codecov

codecov Bot commented May 14, 2025

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.80%. Comparing base (e0a2337) to head (a302635).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3783   +/-   ##
=======================================
  Coverage   98.79%   98.80%           
=======================================
  Files          46       46           
  Lines        3497     3507   +10     
  Branches      763      764    +1     
=======================================
+ Hits         3455     3465   +10     
  Misses         42       42           
Files with missing lines Coverage Δ
src/HeaderCell.tsx 97.61% <100.00%> (+0.08%) ⬆️
src/HeaderRow.tsx 100.00% <100.00%> (ø)
src/style/core.ts 100.00% <ø> (ø)
🚀 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.

Comment thread src/HeaderCell.tsx
const cellDragging = css`
opacity: 0.5;
@layer rdg.HeaderCell {
background-color: var(--rdg-header-draggable-background-color);

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Kept the same style as cell over for now. We cannot use opacity as we are using a custom drag image

Comment thread src/HeaderCell.tsx
const dragImage = event.currentTarget.cloneNode(true) as HTMLDivElement;
dragImage.classList.add(dragImageClassname);
dragImage.id = dragImageId;
event.currentTarget.parentElement!.insertBefore(dragImage, event.currentTarget);

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

This way the element is behind the column

Comment thread src/HeaderCell.tsx
onDragEnd
};

if (draggedColumnKey !== undefined && draggedColumnKey !== column.key) {

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Now we won't fire these events if external item is dragged over

Comment thread src/HeaderRow.tsx
direction
}: HeaderRowProps<R, SR, K>) {
const dragDropKey = useId();
const [draggedColumnKey, setDraggedColumnKey] = useState<string>();

@amanmahajan7 amanmahajan7 May 15, 2025

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

We can move this to the parent component and reorder columns internally as user is dragging. I will check

}

// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (document.startViewTransition) {

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

FF does not support this

@amanmahajan7
amanmahajan7 marked this pull request as ready for review May 15, 2025 19:38
@amanmahajan7
amanmahajan7 requested a review from nstepien as a code owner May 15, 2025 19:38
Comment thread src/HeaderCell.tsx Outdated
Comment thread src/HeaderRow.tsx
/>
);
}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Could keep this newline

amanmahajan7 and others added 2 commits May 16, 2025 08:08
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
@amanmahajan7
amanmahajan7 merged commit d2f40f7 into main May 16, 2025
@amanmahajan7
amanmahajan7 deleted the am-drag-image branch May 16, 2025 13:21
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.

2 participants