Nesting Flippers

[mayorandrew]

I've got an interesting use case for this library, where I nest two flippers in order to have multiple independent flipKeys instead of just one global.

I have a Message component which can be opened or closed. It contains a Flipper and a Flipped.
Inside a Message there are multiple MessageItem components, each of which can also be opened or closed. Therefore I put a second Flipper and a Flipped inside the MessageItem component.

But the MessageItem animation does not work correctly. The inverse transform is applied after rerender, but the item does not animate back to the normal state.

If I remove the second Flipper and propagate the MessageItem state up to the Message, everything works fine.

I've made this codesandbox to show the issue: https://codesandbox.io/s/react-flip-toolkit-wrong-width-fmktp
There are code blocks commented as case 1 (two Flippers) and case 2 (one Flipper) in the demo. You can comment them out in order to switch between cases.

I think nesting Flippers opens more composability possibilities than having just one Flipper per subtree.

Investigation

In hopes of a quick fix I forked you repo and added new branch nested-flipper in which I've added the new demo NestedFlipper similar to the codesandbox above.

I did some quick debugging and nailed the issue down to the following call:

  const topLevelChildren: TopLevelChildren = filterFlipDescendants({
    flipDataDict,
    flippedIds,
    scopedSelector
  })

which returns empty array, so the animations are not applied.

I suppose that somewhere there is an assumption that Flipped could not be parent of Flipper, so the filterFlipDescendants does not correctly extract the downmost Flipped as the topLevelChild of second Flipper.

I've tried to look into that function but got stuck with the selectors logic for now.
So I've decided to open this issue and possibly get some feedback before I'll have an opportunity to dig deeper,

[aholachek]

Hi, thanks for pinpointing this problem. The code you found,"filterFlipDescendants", is some (probably overly complex) code for enabling nested staggers, and it causes the problem by not selecting direct children correctly.

I have a beta release that should fix it, testing it on your example (which i will add to the repo as well): it seems to fix the problem: https://codesandbox.io/s/react-flip-toolkit-wrong-width-696xu

I'll try to make a patch release soon.

[mayorandrew]

Wow, that is azaming!
I've looked at the new version and it does indeed work great.
And old demos seem to not be broken, which is a good sign.
Thank you very much for fixing that quickly 🛠

[DimitryDushkin]

Hey @mayorandrew On what version did you manage to fix your nested Flipper problem?

[mayorandrew]

Hi @DimitryDushkin, this problem in this issue is fixed in version 6.6.4

[DimitryDushkin]

Thanks! Turned out my problem was in constantly re-mounting Flipper component, so nested thing didn't work.