[Example]: Conditional and Collapsible Panels

[digoburigo]

I'm trying to use these both features together and I think it's not behaving the way I thought would be.

For example, when both left and right panels are showing and collapsed and then I hide one of them, the other panel it's going to expand instead of being collapsed.

Is this the expected behavior? Or how do I change this to keep the collapsed panels collapsed?

Reproduction: https://stackblitz.com/edit/stackblitz-starters-rftqoi?file=src%2FApp.tsx

[bvaughn]

Sorry but I'm not sure what you're describing.

[digoburigo]

In the reproduction example, if both panels are showing and collapsed, if I hide the left panel, the right panel it's going to expand instead of being collapsed. Is this the expected behavior?

[bvaughn]

In the reproduction example, if both panels are showing and collapsed, if I hide the left panel, the right panel

If both panels are collapsed, then how can you hide the only remaining panel? This is what I don't understand about the original description.

[digoburigo]

I have the state of both left and right panels collapsed and showing, like in the image below:

When I hide the left panel, for example, instead of the right panel remain collapsed and the middle occupy all the space, the opposite occurs, the right panel uncollapse like in the image below:

My point is that I think the middle panel would fill in the space and the right panel would remain collapsed. Is this more clear?

The same occurs for hiding the right panel. The left panel uncollapses.

[bvaughn]

Ah, I see where the disconnect is now. When you say you "collapse" the panel, you're actually removing it entirely (conditional rendering).

The group shows the right panel in that case because this library stores layouts differently for different combinations of panels. (This is discussed in depth in on issue #260, particularly this comment https://github.com/bvaughn/react-resizable-panels/issues/260#issuecomment-1890179697) tl;dr layouts must be stored separately because of validation edge cases

I think you could accomplish the effect you're looking for by changing the panel's constraints, so that it stays mounted but becomes hidden, e.g.

<Panel
  className={styles.Panel}
  id="left"
  minSize={showLeftPanel ? 10 : 0}
  maxSize={showLeftPanel ? undefined : 0}
  order={1}
  collapsible={true}
  collapsedSize={showLeftPanel ? 10 : 0}
>
  <div className={styles.Centered}>left</div>
</Panel>

I think this approach should work for you. Hope this helps!

---

❤️ → ☕ givebrian.coffee

[digoburigo]

Tried this on the reproduction and seems to not work

[bvaughn]

I can't really help with screenshots, mate. There's nothing to debug.

I think at this point, it would be easiest for me if you sent a Replay of what you're seeing so I can look at it exactly. Barring that, send an updated Code Sandbox or something.

[digoburigo]

So If I understand correctly the state of the panels in saved in relation of the conditionals panels. If I have a x collapsed panel when a y panel is rendered and the same x uncollapsed panel when the same y is not rendered, the x panel it's going to be toggled between collapsed and uncollapsed, instead of remaining in his last state?

[bvaughn]

If you have a group with two (or more) possible layouts, the default layout as well as the saved layout are initialized and stored separately for each combination of panels. (This is necessary for reasons I tried to explain in #260.)

If you want the layout to appear to stay the same between different panel combinations, then either you need to (a) use the imperative API to set it yourself after conditionally rendering a different set of panels or (b) use an approach like I mentioned above to hide a panel without conditionally rendering it.

[digoburigo]

Ok. I got it now.

I will test with the imperative API to achieve what I want.

Thanks for the time to explain how the state works and thanks for this amazing library.

[bvaughn]

You're welcome 😄 Good luck!