Trouble Resizing Both Panes in react-split-pane

Question

I have a horizontally split pane for one of my projects in React.js. I'm using react-split-pane to handle the resize logic. Each pane contains a table wrapped in a few other components.

The issue I'm having is getting the bottom pane to adjust its size to the leftover space within SplitPane. For example, if the total height of the container is 1000px and the top pane gets resized to 300px, I need the bottom pane to be 700px. I was able to resize the bottom pane to the same size of the top pane. How can I get the bottom pane to resize to the leftover space of the total container?

I have a simplified recreation of the problem in a Sandbox here

The second problem I'm having is that when I do resize with this new logic in place, it looks very choppy and lags quite a bit. You can't tell in the Sandbox, but in the actual project, it gets pretty bad. Is there a better way to solve this problem that makes the resizing more fluid? If so, how can I achieve this?

Thanks!

Answer 1

Is this what you are trying to achieve? Sandbox

I just added some logic in your toggleBtmHeight function to find out what the height of the bottom pane should be after resizing. When you resize the pane, the onChange callback passes you the height of the primary (top) pane. You need to use maxHeight - topPaneHeight = bottomPaneHeight to figure out what the height of the bottom pane should be:

toggleBtmHeight(topPaneHeight) {
  const maxHeight = 1000;
  const padding = 225;
  const btmPaneHeight = maxHeight - topPaneHeight - padding;
  this.setState({ btmHeight: btmPaneHeight + "px" });
}

As far as how to handle the choppiness, it's hard to say without seeing it in the full context of your app, but I would guess that when you update state it's re-rendering a bunch of components causing the lag. I would look into adding shouldComponentUpdate to your components to help manage when they should actually be re-rendered.