Discussion: Virtual list api #1225

alexreardon · 2019-04-07T23:32:44Z

We are planning on shipping virtual list support #68. However, I am not sure what the api should look like.

👨‍🏫 Full disclosure: I am not a virtual list expert, so please feel free to correct any inaccuracies in my understanding

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.

import React from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";
import { Draggable, VirtualDroppable } from "react-beautiful-dnd";

// Note: this example won't work - it is just to see what an api could look like

const Row = ({ index, style }) => (
  <Draggable draggableId={index}>
    {provided => (
      <div
        {...provided.dragHandleProps}
        {...provided.draggableProps}
        style={{
          ...style,
          ...provided.draggableProps.style
        }}
        ref={provided.innerRef}
      >
        Row {index}
      </div>
    )}
  </Draggable>
);

const Example = () => (
  <VirtualDroppable
    droppableId="droppable"
    renderDraggingItem={provided => (
      <div
        {...provided.dragHandleProps}
        {...provided.draggableProps}
        ref={provided.innerRef}
      >
        Drag Me
      </div>
    )}
  >
    {droppableProvided => (
      <List
        height={150}
        itemCount={1000}
        itemSize={35}
        width={300}
        innerRef={droppableProvided.innerRef}
      >
        {Row}
        {/* no placeholder needed */}
      </List>
    )}
  </VirtualDroppable>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

`Droppable` renders a clone?

Right now I am thinking of having a renderDraggingItem prop on the Droppable (or VirtualDroppable) 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` placeholder

This 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:

theKashey · 2019-04-08T00:09:17Z

Edge case - virtual table. A "row" is a <tr><td>..</td></tr> and has to be rendered inside a parent table which could be create by a VirtualTable itself.

So in short - some times you have to render a clone inside a virtual List, and some Lists gives you the ability to "inject" something inside, that changes how renderDraggingItem works - it shall be just passed down to render props.

 <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.

get ref to the item node
create a clone of DOMTree by moved getComputedStyles' and getClientBoundaryRect+position:absolute`
now you can move/display this clone in any place.

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.

alexreardon · 2019-04-08T00:36:56Z

rbd could clone the item itself...
The main issue is letting the consumer control and use the snapshot.. 🤔

alexreardon · 2019-04-09T00:55:15Z

Right now a sensor is responsible for initiating a drag and movements during a drag. If we move to a clone strategy (which I think we will have to), then the sensor would only be responsible for starting a drag. Something else would need to manage the event listeners for a drag

DimitarNestorov · 2019-04-19T16:09:58Z

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?

alexreardon · 2019-04-23T00:06:58Z

The lifecyle of the snapshot and other things gets a bit complicated when moving to a clone

alexreardon · 2019-04-29T05:48:22Z

I am playing with this. It looks like there will be a lot of heavy lifting

alexreardon · 2019-05-01T00:49:52Z

Whiteboarding the event listener problem with @kangweichan

alexreardon · 2019-05-01T06:21:43Z

// 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>
);

tjramage · 2019-05-04T15:11:02Z

@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.

alexreardon · 2019-05-06T23:06:18Z

I have created a Github project to track the details of this

https://github.com/atlassian/react-beautiful-dnd/projects/1

alexreardon · 2019-05-06T23:06:40Z

@tjramage i will let you know when I get closer. I hope to do a number of beta releases

tjramage · 2019-05-07T08:53:17Z

@alexreardon, awesome! Thanks for making your progress so transparent with the Github project, it's really great to see 🙏

euge · 2019-05-08T20:10:38Z

@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 🔥

alexreardon · 2019-06-10T22:59:31Z

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 mode="virtual" prop on Droppable.

react-window, react-virtualised and react-tiny-virtual-list all use the same technique:

position:absolute on each list item with a top/left property to control it's initial poisition
once a scroll location is reached on the list then remove / add item as needed with new left/top

the `mode` approach has setup footguns

if mode="virtual" then we will need a consumer to use the cloning api. We can add a warning or error for this
if mode = "virtual" and the list is not a virtual list - then things will break.

Autodetection could be brittle

from an item: check if it has position: absolute. But what if the position: absolute is applied to a parent? Do we either say it cannot be a parent - or walk up the DOM tree.
What if a library uses a different technique for positioning items?

More drastic 🤫

I am exploring an attempt to treat align the behaviour of virtual lists and standard lists so that no mode / auto detection is required. I am spiking this today

DimitarNestorov · 2019-06-11T03:35:37Z

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 mode="virtual" with a big big big ⚠️⚠️⚠️WARNING⚠️⚠️⚠️ expressing any concerns in the docs. And a detector for dev mode if the list isn't virtual.

tjramage · 2019-06-25T08:19:36Z

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!

UmangThapliyal · 2019-07-12T12:11:03Z

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 stories/virtual.
Also If I use without virtual list it takes some second to lift the card will it be resolved by using virtual-list?

UmangThapliyal · 2019-07-15T07:17:41Z

Hello I tried the above provided code snippet and got the below error

kangweichan · 2019-07-15T23:20:22Z

@UmangThapliyal are you using version 12.0.0-alpha.2? The virtual list support API hasn't been officially released yet, but is currently in alpha version at the version string I mentioned above.

See more details here: #1317

UmangThapliyal · 2019-07-16T04:53:37Z

@UmangThapliyal are you using version 12.0.0-alpha.2? The virtual list support API hasn't been officially released yet, but is currently in alpha version at the version string I mentioned above.

See more details here: #1317

Yes I was trying out 12.0.0-alpha.2 and faced the issue

saaage · 2019-07-16T18:14:18Z

Will this increase performance for @atlaskit/tree?

alexreardon · 2019-07-22T01:16:35Z

Latest alpha: 12.0.0-alpha.7

UmangThapliyal · 2019-07-22T05:03:08Z

Latest alpha: 12.0.0-alpha.7

Does it support autosizer and items having different sizes

alexreardon · 2019-07-22T05:10:28Z

Untested, but should be fine 🤞

UmangThapliyal · 2019-07-22T05:11:50Z

Untested, but should be fine 🤞

Thanks will check it out
VirtualDroppable will work in 12.0.0-alpha.7?

alexreardon · 2019-07-22T05:17:25Z

VirtualDroppable is not a thing. Use this:

<Droppable 
  droppableId="droppable"
  mode="VIRTUAL"
  whenDraggingClone={(
  provided: DraggableProvided,
  snapshot: DraggableStateSnapshot,
  source: DraggableLocation,
 ) => React.Node}
>

</Droppable

UmangThapliyal · 2019-07-22T05:18:44Z

VirtualDroppable is not a thing. Use this:

<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.

alexreardon · 2019-07-22T05:19:08Z

Docs have not been written for this part yet

UmangThapliyal · 2019-07-22T05:20:18Z

Docs have not been written for this part yet

Yeah, I was trying the example from stories/virtual, will try it out more and will post back if have any doubts.
BTW kudos for such a great library it is really helpful

suanmei · 2019-07-23T07:46:08Z

@alexreardon How long will the official version be released? I can't wait to use this great feature

suanmei · 2019-08-26T06:40:35Z

@alexreardon look forward to your reply

alexreardon · 2019-08-27T03:21:08Z

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

pathikdevani · 2019-10-01T06:07:50Z

@alexreardon can you help to understand how exactly dnd is working with virtualization? I am using react-dnd & react-window in my project and trying to simulate the same.

I wanna know what is the thought process to make support dnd with virtualization?

Thanks in advance.

alexreardon · 2019-10-01T06:17:13Z

https://github.com/atlassian/react-beautiful-dnd/blob/dev/docs/patterns/virtual-lists.md

alexreardon · 2019-10-01T06:17:34Z

I hope to do a talk about the how later. It has been a large journey

pathikdevani · 2019-10-01T06:41:25Z

@alexreardon I have already gone through virtual-lists patterns doc. It's very useful as a user of rbd. I know how is a big ask. But if you write some doc on how , it will be very helpful and it will make independent logic, that will be beyod rbd.

Thanks, I will wait for how doc.

suanmei · 2019-10-08T08:32:17Z

Hi, is there any API about the Persistent

alexreardon · 2019-10-08T22:55:25Z

Hi, is there any API about the Persistent

I'm not sure what this means

suanmei · 2019-10-09T02:32:09Z

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.

Just this

alexreardon · 2019-10-21T21:57:15Z

Using Persistent is fine. Not every major virtual list library out there supports that feature so I didn't lean on it

suanmei · 2019-11-07T07:37:37Z

@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

alexreardon · 2019-11-07T21:21:29Z

We'll track dragging a copy in #216

alexreardon · 2019-11-07T21:21:44Z

This shipped in #1487 !

alexreardon added discussion 🗣❤️ help wanted 👋 labels Apr 9, 2019

alexreardon mentioned this issue Apr 9, 2019

Support dragging a copy (leave original in place) #216

Open

alexreardon changed the title ~~RFD: virtual list api~~ Discussion: virtual list api Apr 11, 2019

alexreardon pinned this issue Apr 15, 2019

This was referenced May 6, 2019

Programatic dragging #162

Closed

Programatic cancelling of a drag #9

Closed

alexreardon mentioned this issue May 17, 2019

Moving to React Portal after touchstart swallows future touch events facebook/react#13113

Closed

alexreardon mentioned this issue Jun 14, 2019

Rendering Virtualization Support #68

Closed

alexreardon changed the title ~~Discussion: virtual list api~~ Virtual list support Jun 14, 2019

alexreardon added new feature 🎨 and removed discussion 🗣❤️ help wanted 👋 labels Jun 14, 2019

alexreardon added this to the Up next milestone Jun 14, 2019

alexreardon mentioned this issue Jun 14, 2019

12.0 Release 🎁 #1317

Closed

alexreardon unpinned this issue Oct 10, 2019

alexreardon closed this as completed Nov 7, 2019

Discussion: Virtual list api #1225

Discussion: Virtual list api #1225

Comments

alexreardon commented Apr 7, 2019 • edited Loading

Let's get into it

Droppable renders a clone?

Persistent?

Droppable placeholder

theKashey commented Apr 8, 2019

alexreardon commented Apr 8, 2019

alexreardon commented Apr 9, 2019

DimitarNestorov commented Apr 19, 2019

alexreardon commented Apr 23, 2019

alexreardon commented Apr 29, 2019

alexreardon commented May 1, 2019

alexreardon commented May 1, 2019 • edited Loading

tjramage commented May 4, 2019

alexreardon commented May 6, 2019

alexreardon commented May 6, 2019

tjramage commented May 7, 2019

euge commented May 8, 2019 • edited Loading

alexreardon commented Jun 10, 2019 • edited Loading

How to detect virtual lists?

the mode approach has setup footguns

Autodetection could be brittle

More drastic 🤫

DimitarNestorov commented Jun 11, 2019 • edited Loading

tjramage commented Jun 25, 2019

UmangThapliyal commented Jul 12, 2019 • edited Loading

UmangThapliyal commented Jul 15, 2019

kangweichan commented Jul 15, 2019

UmangThapliyal commented Jul 16, 2019

saaage commented Jul 16, 2019

alexreardon commented Jul 22, 2019

UmangThapliyal commented Jul 22, 2019

alexreardon commented Jul 22, 2019

UmangThapliyal commented Jul 22, 2019

alexreardon commented Jul 22, 2019

UmangThapliyal commented Jul 22, 2019 • edited Loading

alexreardon commented Jul 22, 2019

UmangThapliyal commented Jul 22, 2019 • edited Loading

suanmei commented Jul 23, 2019

suanmei commented Aug 26, 2019

alexreardon commented Aug 27, 2019

pathikdevani commented Oct 1, 2019

alexreardon commented Oct 1, 2019

alexreardon commented Oct 1, 2019

pathikdevani commented Oct 1, 2019

suanmei commented Oct 8, 2019

alexreardon commented Oct 8, 2019 • edited Loading

suanmei commented Oct 9, 2019

alexreardon commented Oct 21, 2019

suanmei commented Nov 7, 2019 • edited Loading

alexreardon commented Nov 7, 2019

alexreardon commented Nov 7, 2019

alexreardon commented Apr 7, 2019 •

edited

Loading

`Droppable` renders a clone?

`Droppable` placeholder

alexreardon commented May 1, 2019 •

edited

Loading

euge commented May 8, 2019 •

edited

Loading

alexreardon commented Jun 10, 2019 •

edited

Loading

the `mode` approach has setup footguns

DimitarNestorov commented Jun 11, 2019 •

edited

Loading

UmangThapliyal commented Jul 12, 2019 •

edited

Loading

UmangThapliyal commented Jul 22, 2019 •

edited

Loading

UmangThapliyal commented Jul 22, 2019 •

edited

Loading

alexreardon commented Oct 8, 2019 •

edited

Loading

suanmei commented Nov 7, 2019 •

edited

Loading