Use newest pattern

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({
         </div>
       </div>
     )
-  },
-})
+  }
+}
+
+const {node, number, string} = PropTypes
+
+ResizeContainer.propTypes = {
+  children: node.isRequired,
+  containerClass: string.isRequired,
+  minTopHeight: number,
+  minBottomHeight: number,
+}
 
 export default ResizeContainer