Added "resize" prop to allow containers to force a grid resize

[aweber1]

Added a simple resize prop to width provider to allow containers to trigger a grid resize. Probably not super elegant, but functional.

Addresses #81

[STRML]

Hmm. This is hacky and not particularly great to use. I'd rather have consumers:

1. Grab a ref and call onWindowResize() manually, or
2. Fire a window resize event.

Alternatively, a WidthProvider based on https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js would be great.

[gurkerl83]

+1

[gurkerl83]

Hi, we have create the following width-provider, allowing you to trigger grid resize within containers such as react-split-pane. Unfortunately, you loose window resizing but this can be easily enabled by merging the default width provider functionality...

react-measure-it

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom'
import MeasureIt from 'react-measure-it'
function getWidth (element) {
    let currentWidth = ReactDOM.findDOMNode(element).parentNode.getBoundingClientRect().width;
    console.log('Width:' + currentWidth);
    return currentWidth;
}

function getHeight (element) {
    let currentHeight = ReactDOM.findDOMNode(element).parentNode.getBoundingClientRect().height;
    console.log('Height:' + currentHeight);
    return currentHeight;
}

const WidthProvider = (ComposedComponent) => class extends Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        this.setState({
            width: this.props.containerWidth,
            //height: this.props.containerHeight
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            width: nextProps.containerWidth,
            //height: nextProps.containerHeight
        });
    }

    render() {
        return (
            <ComposedComponent {...this.props} {...this.state} />
        );
    }

}

WidthProvider.propTypes = {
    containerWidth: PropTypes.number.isRequired,
    //containerHeight: PropTypes.number.isRequired
}

export default (ComposedComponent) => MeasureIt({
    getWidth: getWidth,
    //getHeight: getHeight
})(WidthProvider(ComposedComponent));

react-sizeme

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom'
import SizeMe from 'react-sizeme';
const WidthProvider = (ComposedComponent) => class extends Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        this.setState({
            width: this.props.size.width,
            //height: this.props.size.height,
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            width: nextProps.size.width,
            //height: nextProps.size.height
        });
    }

    render() {
        return (
            <ComposedComponent {...this.props} {...this.state} />
        );
    }

}

export default (ComposedComponent) => SizeMe({
    monitorWidth: true,
    //monitorHeight: true
})(WidthProvider(ComposedComponent));

//react-grid-layout instrumentation

var WidthProvider = require('../../../lib/sizeme/WidthProvider-es6');
WidthProvider = WidthProvider.default;

var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

Thanks,

[LSYUN]

@STRML Excuse me, is it possible to call onWindowResize() manually without firing window resize event while I use WidthProvider like this:

      import RGL, {WidthProvider} from "react-grid-layout";
      const ReactGridLayout = WidthProvider(RGL);

       <div style={{width: this.state.width, height: '100%'}}>
            <ReactGridLayout
                {...this.props}
                layout={this.state.layout}
                onLayoutChange={this.onLayoutChange}
                style={{width: this.state.width, height: '100%',}}>
                {this.generateDOM()}
            </ReactGridLayout>
        </div>

[k290]

Hi, we have create the following width-provider, allowing you to trigger grid resize within containers such as react-split-pane. Unfortunately, you loose window resizing but this can be easily enabled by merging the default width provider functionality...

We used the reactsizeme one that you posted and it worked for us on window resize as well.

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this PR will be closed in 7 days

[hornta]

@STRML I don't think the stale bot works. This PR should be closed by now.