-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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
Discussion: Virtual list api #1225
Comments
Edge case - virtual So in short - some times you have to render a <VirtualDroppable
droppableId="droppable"
renderDraggingItem={provided => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
>
Drag Me
</div>
)}
>
{({droppableProvided, VirtalDraggingItem} => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
innerRef={droppableProvided.innerRef}
extraChildren={VirtalDraggingItem} // not a real API
>
{Row}
</List>
)}
</VirtualDroppable>
); That would be more or less any VirtualList library compatible, as long as removes decision from DND side. There is also another approach - replicate item.
This is a relatively fast operation, but it would not so easy to mirror all possible changes in runtime to the clone, potentially "freezing" it. Which could be not a bad thing. |
rbd could clone the item itself... |
Right now a |
I believe you should always render a clone in a virtual list, it would save you from a couple of headaches related to items disappearing. And the user should also be able to use the snapshot, to be able add a class or some other special thing to the item that is being dragged. What do you mean by control? |
The lifecyle of the snapshot and other things gets a bit complicated when moving to a clone |
Whiteboarding the event listener problem with @kangweichan |
// new export: VirtualDroppable
<VirtualDroppable
droppableId="droppable"
draggingItemClone={(provided: DraggableProvided, snapshot: DraggableStateSnapshot, source: DraggableLocation) => (
<div {...provided.draggableProps} {...provided.dragHandleProps}>
Dragging over {snapshot.draggingOver}
</div>
)}
>
{({provided: DroppableProvided} => (
// 3rd party virtual list solution
<VirtualList
height={150}
itemCount={1000}
itemSize={35}
width={300}
innerRef={provided.innerRef}
>
{YourDraggableItem}
{/* provided.placeholder is not required */}
</List>
)}
</VirtualDroppable>
); |
@alexreardon β Wow. Myself and @jpsear are so excited to try this! Really awesome progress. Please let me know if / when you would like some testers, we'd be happy to help. |
I have created a Github project to track the details of this https://github.com/atlassian/react-beautiful-dnd/projects/1 |
@tjramage i will let you know when I get closer. I hope to do a number of beta releases |
@alexreardon, awesome! Thanks for making your progress so transparent with the Github project, it's really great to see π |
@alexreardon Thank you thank you for making progress on this. The organization, discourse, and transparency of how this project is run...its inspiring. Also the use of emojis is π₯ |
How to detect virtual lists?I am deciding whether to try and auto-detect if a list is a virtual list or whether to use a
the
|
What thing would break if the list is not virtual? Because that means that a list without many items (no need for scroll, or only just a bit of scroll but all items are rendered) is broken upon render. I'm putting my bets on |
Ahh that's good to know, thanks @alexreardon. It would definitely make the virtual list API a million times more useful for me, and a few others, by the sounds of it. Wish I could buy you a beer! |
Hello, I am fairly new to this library but it is very useful and beautiful, I have a column which has more than 2k cards and I want to use this can you please point me the document where I can get some info about it. I was not able to find |
@UmangThapliyal are you using version See more details here: #1317 |
Yes I was trying out |
Will this increase performance for @atlaskit/tree? |
Latest alpha: |
Does it support autosizer and items having different sizes |
Untested, but should be fine π€ |
Thanks will check it out |
<Droppable
droppableId="droppable"
mode="VIRTUAL"
whenDraggingClone={(
provided: DraggableProvided,
snapshot: DraggableStateSnapshot,
source: DraggableLocation,
) => React.Node}
>
</Droppable |
Oh thanks I was trying with this only but reading the above comment I got the doubt thanks will try it. |
Docs have not been written for this part yet |
Yeah, I was trying the example from |
@alexreardon How long will the official version be released? I can't wait to use this great feature |
@alexreardon look forward to your reply |
I am trudging through some issues that have been raised in testing. No firm eta at this point. I hope to have a new alpha out soon |
@alexreardon can you help to understand how exactly dnd is working with virtualization? I am using I wanna know what is the thought process to make support dnd with virtualization? Thanks in advance. |
I hope to do a talk about the how later. It has been a large journey |
@alexreardon I have already gone through Thanks, I will wait for how doc. |
Hi, is there any API about the Persistent |
I'm not sure what this means |
Just this |
Using Persistent is fine. Not every major virtual list library out there supports that feature so I didn't lean on it |
@alexreardon You mentioned in this issue #216 that you will support clone mode. And I think RBDβs core is drag and dropπ€£, most dnd libraries support this ability |
We'll track dragging a copy in #216 |
This shipped in #1487 ! |
We are planning on shipping virtual list support #68. However, I am not sure what the api should look like.
Let's get into it
One big difference from an API perspective of supporting virtual lists is that the dragging item (
<Draggable />
) can be removed during a drag. Currently, this is not the case. So in order to support virtual lists we need to support the ability to render a clone as the dragging item.Droppable
renders a clone?Right now I am thinking of having a
renderDraggingItem
prop on theDroppable
(orVirtualDroppable
) which would be responsible for rendering the clone.Then I think, should we always render the dragging item as a clone? I think not as things are working quite well right now, but it is something to consider.
Persistent?
We could get away from needing a clone if we could mark an item in a virtual list as persistent after a drag starts so the react component is never unmounted.
Droppable
placeholderThis would not be needed for a home list as the full list size would not collapse when an item is removed. A foreign list might need an insertion to make room... Oh dear
The text was updated successfully, but these errors were encountered: