react-flip-toolkit no longer works with visualised lists

[robwheatley]

Hi there,

I've created a drag and drop list using react-sortly (I didn't use beautiful DnD because it doesn't support nested lists). But react-sortly doesn't do move animations, so I've used react-flip-toolkit for that (as do react-sortly's examples).

I've managed to integrate Virtuoso into react-sortly, so I now have a nice speedy list, but my animations go away. I can't work out why, but I assume that it's something to do with flip-toolkit losing what it's tracking due to the virtualisation.

I'm wondering if there is a simple 'fix' for this? I'm passing my items into Virtuoso with itemContent, but perhaps there is a better way, or some other parameters I could use to help.

I've forked the beautiful DnD example you put together recently and hacked (very roughly) a simple example of what I mean.

https://codesandbox.io/s/hu9n5

There are 2 buttons at the top.

• 'Sort' will just swap the item at index 1 with the item at index 3 so that you can see an animation in progress.
• 'Mode' turns virtualisation on and off, so you can see that with it off, things work fine, but with it on, the animations stop.

Am I missing something here?

[petyosi]

@robwheatley I am not aware of react-sortly, what I can see for sure is that the DOM structure of the two modes is very different - notice that you can customize the item container using the components prop.

Since the virtualization part works but the animations don't, you can also ask for help from the react-sortly author. Hope this helps.

[robwheatley]

Hi @petyosi I don't think the issue is really with react-sortly. I just mentioned that as something I managed to do rather than using beautiful DnD. To get it to work, I had to re-write a bit of react-sortly code.

It's more of an interaction between flip-toolkit and Virtuoso. In the codesandpit I made, I'm not using sortly. react-toolkit seemed pretty robust when it came to how you construct the DOM, but as soon as I introduced Virtuoso, it stopped working and I'm not sure why. Something to do with how Virtuoso renders I guess. I was hoping that there was something I could do with the way I use Virtuoso to get around the problem.

[laggingreflex]

Running into this too. The issue is since FlipToolkit requires each item of the list wrapped in a <Flipped>:

<Flipper>
  <Flipped> ... </Flipped>
  <Flipped> ... </Flipped>
   ...
</Flipper>

But since Virtuoso also creates its own wrapper around each item:

<Flipper>
  <Virtuoso> <Flipped> ... </Flipped> </Virtuoso>
  <Virtuoso> <Flipped> ... </Flipped> </Virtuoso>
   ...
</Flipper>

Which obviously breaks the link between Flipper & Flipped.

If maybe <Virtuoso> & <Flipped> can be merged this could work.

Is components.Item the right API to customize to make this happen? I can't seem to get it to work. I've tried:

<Virtuoso
  components: {{
    Item: ({ children, ...restProps }) => {
      return <Flipped
        {...restProps}
      > {children} </Flipped>
    }
  }}
/>

But that didn't work. Also for some reason this makes it only render 1 item...

[fifv]

I met the same problem, I think the problem is that Virtuoso takes another render other than the one where flipKey changed. react-flip-toolkit's animation happens when Flipper's flipKey and Flipped's position changed in the same render.

In Virtuoso, when some state changed, then flipKey and the data passed to Virtuoso changed. But Virtuoso doesn't render items just in this render, so nothing happend. In the next render, items actually rendered with new data, but in this render flipKey won't change since it's changed in the last render.