Respond to window resize

[davidmason]

Respond to window resize

[BernardoFBBraga]

I managed to get it working in a different approach, without touching the source

        componentDidMount () {
            window.addEventListener('resize', this.updateSize)
        }

        componentWillUnmount () {
            window.removeEventListener('resize', this.updateSize)
        }

        componentDidUpdate () {
            if (this.state.windowResize) this.setState({windowResize: false})
        }

        updateSize = () => this.setState({windowResize: true})

        onChange = () => {
            const draggedSize = _.get(this.splitpane.current, 'state.draggedSize')

            if (draggedSize && this.splitpane.current.splitPane.clientHeight) {
                const percentage = draggedSize / this.splitpane.current.splitPane.clientHeight

                this.setState({panelSize: `${percentage * 100}%`})
            }
        }

and on the render function there's something like

<SplitPane
    ref={this.splitpane}
    split="horizontal"
    minSize={50}
    maxSize={-50}
    defaultSize={this.state.panelSize}
    size={this.state.windowResize ? this.state.panelSize : undefined}
    onChange={this.onChange}
>

Rationale is this: when the window updates, I set the boolean so on the render function the splitpane is updated with the size prop. In the next render, the componentDidUpdate function sets the boolean to false, meaning the drag is back online

[davidmason]

I think the container size would be best.

I have managed to get something working with this, but I had to reach in and mess with some of the internals from the parent component - super fragile but it works. I did these things:

• onDragFinished: look up this.refs.mySplitPane.state.draggedSize and save as a percentage of my height (e.g. percentageSize = draggedSize / window.innerHeight might give 0.33)
• listen to window resize events to tweak the size to the percentage size (var pixelHeight = window.innerHeight * percentageSize)
• update the size with this.refs.mySplitPane.setState({ draggedSize: pixelHeight }) since I could not find any other way to override the size after a drag resize
• this.forceUpdate() to force a rerender

so what I did would be a lot easier if I had a callback that triggered whenever the container size changed, and gave me the current element size, previous container size and next container size and let me return the size I want it to use. The default implementation would just return the current element size:

function onContainerSizeChange (elementPixelSize, previousContainerSize, currentContainerSize) {
  // default could just be this:
  // return elementPixelSize

  // my case would just be this:
  return elementPixelSize * (currentContainerSize / previousContainerSize)
}

[Nantris]

True, it's mostly helpful in that case, but it is helpful as a pure CSS solution that gives your body and wrapper a defined height so height: 100% has some use inside of them when needed.

[damassi]

Thanks @BernardoFBBraga, with some slight modifications that worked great 👍

My slightly less dynamic version:

 onChange = () => {
    const draggedSize = this.splitpane.state.pane1Size

    if (draggedSize && this.splitpane.pane1.clientWidth) {
      const percentage = draggedSize / window.innerWidth
      const panelSize = `${percentage * 100}%`
      this.setState({ panelSize })
    }
  }

[zerkms]

If one really needs that, I think the better alternative would be to introduce another attribute flex (as the similarly named from a css flexbox model) which would conflict with the defaultSize (so that it was only valid to specify either).

It is also not clear whether to rely on the window size, or the current document size or the current element container size. I tend to think the latter is the most acceptable one.

Thoughts?

[Nantris]

I haven't reached a 100% working solution yet, but setting the panes to:
window.innerHeight / 2

and setting widths of divs to 100% and heights to 100vh has me pretty close.

Just learned about vh. They are like magic: http://stackoverflow.com/a/16837667/6025788

[zerkms]

vh might only be useful when your pane occupies the whole width of the height (or both), in other cases it would not work.

[Nantris]

[yotamberk]

Is there a plan to do this natively in this component?