Update collapsed panel size when collapseSize changes

[viveleroi]

We use a set pixel value for the collapsedSize of a panel. We convert the pixel size we want into a percentage, given the library needs percentages. One drawback from this is that when the window size changes, our navCollapseSize percentage does too - except only the initial collapse size is used.

It would be ideal if the library could detect changes to the collapseSize value and if the panel is collapsed, update the current size to match.

Or, add a setSize method to the Panel API so that I can set the size of this specific panel.

We have a navigation "drawer" component that is used in many different places in our and because we can't have it in a single shared root component, the Panel is defined here and not actually at the same level as the PanelGroup. So I believe the only way I can currently fix this is to move the size calculation logic to the panel group level but that's not going to work because the group isn't guaranteed to have this specific panel - it's up to the route. I'd have to split logic up.

const navMinSize = round(300 / width, 2) * 100
const navCollapseSize = round(36 / width, 2) * 100

<Panel
  className='flex'
  collapsedSize={navCollapseSize}
  collapsible
  defaultSize={navMinSize}
  id={`${side}Drawer`}
  maxSize={60}
  minSize={navMinSize}
  order={side === 'left' ? 1 : 3}
  ref={ref}
  onCollapse={() => {
    setIsCollapsed(true)
  }}
  onExpand={() => {
    setIsCollapsed(false)
  }}>
...
</Panel>

[bvaughn]

Or, add a setSize method to the Panel API so that I can set the size of this specific panel.

This already exists (resize). You can check out the other imperative methods here: https://react-resizable-panels.vercel.app/examples/imperative-panel-api

[bvaughn]

It may be worth clarifying that I intentionally decided not to support pixel sizes. If the library has bugs, I'll try to fix them, but if it's something that only happens due to trying to add pixel size constraints on top of the system, then I think that falls outside of the scope of what I can reasonably maintain as a side project (especially given that I don't need/use pixel constraints).

[viveleroi]

Oh I missed there was a resize method, I was looking for a setSize given there's a getSize. Also the onCollapse signature on the docs page is out of date.

[bvaughn]

Oh I missed there was a resize method, I was looking for a setSize given there's a getSize.

The API is called resize.

It sounds like maybe this is a bug that should be fixed though, regardless of pixels vs percentage, so I'll leave it open.

Also the onCollapse signature on the docs page is out of date.

I don't think this is mentioned on the docs. I see you meant the README. I thought you meant the website.

That's also unrelated to the issue we're discussing though, so let's preferably keep this focused to one thing. (It's hard to track otherwise.)

Preferably just send a PR for docs mistakes ;)

[bvaughn]

I believe 0a410c8 should fix what I would consider an edge case bug with non-pixel usage (but one you'll need for pixel stuff to work). Hope it helps!

[bvaughn]

Released in react-resizable-panels@1.0.9

---

❤️ → ☕ givebrian.coffee

[viveleroi]

Thanks, this seems to work. I don't have to call resize anymore. Although one issue I noticed is that when you resize the window it randomly loses the collapsed state. I thought I had a way to call collapse() again based on my duplicate state boolean but that doesn't fix it. It happens no matter how you resize so it's not like the area becomes larger than the collapseSize threshold or anything. Something is causing collapsed state to be lost in the library and it auto-expands.

[viveleroi]

Should I file a new issue for the collapse state bug?

[bvaughn]

If you're able to submit a bug report with a full repro, I'll take a look.