[Example]: Conditional and Collapsible Panels about react-resizable-panels HOT 11 CLOSED

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

from react-resizable-panels.

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?

from react-resizable-panels.

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.

from react-resizable-panels.

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.

from react-resizable-panels.

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 #260 (comment)) 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

from react-resizable-panels.

Tried this on the reproduction and seems to not work

from react-resizable-panels.

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.

from react-resizable-panels.

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?

from react-resizable-panels.

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.

from react-resizable-panels.

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.

from react-resizable-panels.

You're welcome 😄 Good luck!

from react-resizable-panels.