Set div css flex-basis， PanelResizeHandle Slow

[Link-Kou]

Whether it can be supported or not can be accelerated by adjusting the number of steps.

[bvaughn]

I don't know what you're reporting here. If it's a bug or a performance issue, you'll need to share a repro (like Code Sandbox or something) not just a picture.

[Link-Kou]

Please have a look

https://codesandbox.io/embed/red-http-3gotpk?fontsize=14&hidenavigation=1&theme=dark

@bvaughn

[bvaughn]

Sorry. It's still not clear to me why you want to do this. Flex basis and grow are meant to be managed by this library. Overriding those styles will cause problems.

[Link-Kou]

@bvaughn
Normally, the page is proportional.
In fact, the layout needs to be based on the actual size.
For example: left and right layout. I want the largest 300px and the smallest 200px on the left. There is no restriction on the right.

[bvaughn]

So this essentially boils down to your wanting support for min/max sizes in pixels? That's something I've consciously chosen not to support with this library. (See #114, #46, #47, #78)

I'm going to copy-paste my response form one of those other issues showing how you could tackle your own pixel constraints (if you want to do that) but I don't think you should use flex-basis for that.

---

Here is a way you could basically implement this in your application code:

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();
    };
  }, []);

---

Here my reasoning for not wanting to add it to the NPM package directly:

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