search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.55k stars 51 forks source link

Collapse draggable item #54

Open raunofreiberg opened 4 years ago

raunofreiberg commented 4 years ago

Hey,

Thanks for the great library! I have a use case that doesn't seem to be possible.

On drag, I would like to collapse the item along with it's hidden clone. This is quite useful for long lists where items can be pretty large in height. Collapsing them helps navigate through this list.

I tried doing something like:

height: isDragged ? "50px" : "100px",

on the component in renderItem but only the ghost item seems to change height, but not the hidden one?

Here's an example: https://codesandbox.io/s/sad-einstein-u7feh?file=/src/App.js:1160-1212

Thanks!

raunofreiberg commented 4 years ago

I can collapse the draggable item by doing:

height: isDragged || props.style.visibility === 'hidden' ? "50px" : "100px",

But this still requires me to drag over the initial height of it:

Kapture 2020-10-07 at 12 00 14

raunofreiberg commented 4 years ago

@tajo any ideas here?

tajo commented 4 years ago

Utilizing beforeDrag could get you closer: https://codesandbox.io/s/romantic-cookies-7odri?file=/src/App.js

However, onChange is not called when the item position is not changed so the height doesn't reset. Maybe we could add afterDrag or having some better API for this use-case (explicit draggedHeight prop?). Although, it seems too rare of a use-case to just add a new API for this, so maybe more general afterDrag to fix my workaround would be the best.

raunofreiberg commented 4 years ago

afterDrag would work for me! With some direction, I could open a PR, if you'd like?

tajo commented 4 years ago

@raunofreiberg Yea, go for it.