resizable.jsx

import './Resizable.scss';

import * as React from 'react';
import { clamp } from 'lodash';

export class Resizable extends React.Component {
    state = {
        width: this.props.defaultWidth
    }

    onDrag = (event) => {
        const { minWidth, maxWidth } = this.props;
        const mouseX = event.nativeEvent.clientX;

        if (mouseX === 0) {
            return;
        }

        const width = clamp(mouseX, minWidth, maxWidth)

        this.setState({ width });
    }

    render() {
        const { width } = this.state;

        return (
            <div className="resizable__container" style={{ width }}>
                <div
                    className="resizable__dragarea"
                    onDrag={this.onDrag}
                />
                {this.props.children}
            </div>
        );
    }
}

Resizable.propTypes = {
    children: React.PropTypes.element.isRequired,
    defaultWidth: React.PropTypes.number,
    minWidth: React.PropTypes.number,
    maxWidth: React.PropTypes.number,
    visible: React.PropTypes.bool
};

Resizable.defaultProps = {
    defaultWidth: 200,
    minWidth: 150,
    maxWidth: 300,
    visible: true
}