3

I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.

The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.

Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Ramiro Rivera
  • 33
  • 4
  • Hey Ramiro! Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention. If you could share your implementation with me as a Plnkr (or similar) I would be happy to take a look and make any suggestions though. – bvaughn Jan 20 '17 at 00:05
  • @brianvaughn Thanks a lot Brian!! Here is the better i could do [plunk](https://plnkr.co/edit/SSzHqu8Ta18Oef80Eyzd?p=preview). Im sorry in advanced for the disaster you'are going to be seeing xD It's quite possible i missed something when i downsized it from the original project, though i hope not. Once again, thanks for making the time for this! – Ramiro Rivera Jan 20 '17 at 15:18
  • No problem. Here's a quick-and-dirty example of one way you may add animation: https://plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D – bvaughn Jan 21 '17 at 16:30
  • wow! thanks for taking the time to pull that off, it definitely gives me some ideas. – Ramiro Rivera Jan 25 '17 at 18:00
  • Maybe you could add that as an answer so i can accept it? – Ramiro Rivera Jan 25 '17 at 18:00

1 Answers1

2

Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.

Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D

bvaughn
  • 13,300
  • 45
  • 46