Add min/maxSize support for px values

[abrman]

If your UI is designed to be reasonably sized within specific dimensions, having access to limit size with pixel values is essential.

Currently implementing with CSS values only works in 2-column/2-row setup,

Thanks for working on this component for all of us! <3

[bvaughn]

I understand why that would be convenient in some cases but I don’t think it’s something I want to support- because it would require changing the public api in a non obvious way: This library doesn’t control its own outer dimensions, so it couldn’t prevent panels from expanding/contracting past a certain point as its own width/height changed.

You should be able to accomplish this using minSize/maxSize and a min/max external height/width though!

[bvaughn]

Copying from #48 (comment) in case others see this issue.

---

Here is an example of what I mean:
https://codesandbox.io/s/react-resizable-panels-forked-m5qf69?file=/src/App.js

  const MIN_SIZE_IN_PIXELS = 100;

  const [minSize, setMinSize] = useState(10);

  useLayoutEffect(() => {
    const panelGroup = document.querySelector('[data-panel-group-id="group"]');
    const resizeHandles = document.querySelectorAll(
      "[data-panel-resize-handle-id]"
    );
    const observer = new ResizeObserver(() => {
      let height = panelGroup.offsetHeight;

      resizeHandles.forEach((resizeHandle) => {
        height -= resizeHandle.offsetHeight;
      });

      // Minimum size in pixels is a percentage of the PanelGroup's height,
      // less the (fixed) height of the resize handles.
      setMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
    });
    observer.observe(panelGroup);
    resizeHandles.forEach((resizeHandle) => {
      observer.observe(resizeHandle);
    });

    return () => {
      observer.disconnect();
    };
  }, []);

[abrman]

...I don’t think it’s something I want to support- because it would require changing the public api in a non obvious way...

Just thought of: if changing the api in a non obvious way is the issue, how hard would it be to support the css rules min-width & max-width which it what I went for initially (<Panel style={{maxWidth}}/>). Currently in a multi-panel view this work except for the unintended consequence that a neighboring panel shrinks/grows after the constrained panel hits its limit. If you think you can figure it out - that'd be great! I will work with your example above however :) Thank you again.

[bvaughn]

<Panel style={{maxWidth}}/>

I think the problem with this is similar to the problem with external width/height props– either can change without PanelGroup/Panel re-rendering or being aware. (Example: an external stylesheet could define this style.)

So handling it fully would go from being something triggered only by pointer events to something that could be triggered by a lot of external things.

I don't think I want to try to support that level of complexity 😄

[bvaughn]

I think I have a possible solution for the pixel-based constraints; see #176

---

❤️ → ☕ givebrian.coffee