diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 996094a80..0947f2cbc 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -1,47 +1,43 @@ -import React, {PropTypes} from 'react' -import ResizeHandle from 'shared/components/ResizeHandle' +import React, {Component, PropTypes} from 'react' import classnames from 'classnames' -const {node, number, string} = PropTypes +import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 const minimumTopHeight = 200 const minimumBottomHeight = 200 -const ResizeContainer = React.createClass({ - propTypes: { - children: node.isRequired, - containerClass: string.isRequired, - minTopHeight: number, - minBottomHeight: number, - }, - - getDefaultProps() { - return { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - } - }, - - getInitialState() { - return { +class ResizeContainer extends Component { + constructor(props) { + super(props) + this.state = { + isDragging: false, topHeight: '60%', bottomHeight: '40%', - isDragging: false, } - }, - handleStopDrag() { - this.setState({isDragging: false}) - }, + this.handleStartDrag = ::this.handleStartDrag + this.handleStopDrag = ::this.handleStopDrag + this.handleMouseLeave = ::this.handleMouseLeave + this.handleDrag = ::this.handleDrag + } + + static defaultProps = { + minTopHeight: minimumTopHeight, + minBottomHeight: minimumBottomHeight, + } handleStartDrag() { this.setState({isDragging: true}) - }, + } + + handleStopDrag() { + this.setState({isDragging: false}) + } handleMouseLeave() { this.setState({isDragging: false}) - }, + } handleDrag(e) { if (!this.state.isDragging) { @@ -85,7 +81,7 @@ const ResizeContainer = React.createClass({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, }) - }, + } renderHandle() { const {isDragging, topHeight} = this.state @@ -96,7 +92,7 @@ const ResizeContainer = React.createClass({ top={topHeight} /> ) - }, + } render() { const {topHeight, bottomHeight, isDragging} = this.state @@ -124,7 +120,16 @@ const ResizeContainer = React.createClass({ ) - }, -}) + } +} + +const {node, number, string} = PropTypes + +ResizeContainer.propTypes = { + children: node.isRequired, + containerClass: string.isRequired, + minTopHeight: number, + minBottomHeight: number, +} export default ResizeContainer