fixes #865 (#869)

client/modules/IDE/pages/IDEView.jsx

@@ -37,10 +37,13 @@ import Feedback from '../components/Feedback';
 class IDEView extends React.Component {
   constructor(props) {
     super(props);
-    this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
-    this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
     this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
     this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind(this);
+
+    this.state = {
+      consoleSize: props.ide.consoleIsExpanded ? 150 : 29,
+      sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20
+    };
   }
 
   componentDidMount() {
@@ -56,10 +59,6 @@ class IDEView extends React.Component {
       }
     }
 
-    this.consoleSize = this.props.ide.consoleIsExpanded ? 150 : 29;
-    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 160 : 20;
-    this.forceUpdate();
-
     this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     document.addEventListener('keydown', this.handleGlobalKeydown, false);
 
@@ -75,17 +74,17 @@ class IDEView extends React.Component {
     if (nextProps.location !== this.props.location) {
       this.props.setPreviousPath(this.props.location.pathname);
     }
-  }
 
-  componentWillUpdate(nextProps) {
     if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
-      this.consoleSize = nextProps.ide.consoleIsExpanded ? 150 : 29;
+      this.setState({ consoleSize: nextProps.ide.consoleIsExpanded ? 150 : 29 });
     }
 
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 160 : 20;
+      this.setState({ sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20 });
+    }
   }
 
+  componentWillUpdate(nextProps) {
     if (nextProps.params.project_id && !this.props.params.project_id) {
       if (nextProps.params.project_id !== nextProps.project.id) {
         this.props.getProject(nextProps.params.project_id);
@@ -127,30 +126,12 @@ class IDEView extends React.Component {
     document.removeEventListener('keydown', this.handleGlobalKeydown, false);
     clearTimeout(this.autosaveInterval);
     this.autosaveInterval = null;
-    this.consoleSize = undefined;
-    this.sidebarSize = undefined;
   }
 
   isUserOwner() {
     return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
   }
 
-  _handleConsolePaneOnDragFinished() {
-    this.consoleSize = this.consolePane.state.draggedSize;
-    this.consolePane.setState({
-      resized: false,
-      draggedSize: undefined,
-    });
-  }
-
-  _handleSidebarPaneOnDragFinished() {
-    this.sidebarSize = this.sidebarPane.state.draggedSize;
-    this.sidebarPane.setState({
-      resized: false,
-      draggedSize: undefined
-    });
-  }
-
   handleGlobalKeydown(e) {
     // 83 === s
     if (e.keyCode === 83 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
@@ -245,8 +226,8 @@ class IDEView extends React.Component {
         <div className="editor-preview-container">
           <SplitPane
             split="vertical"
-            defaultSize={this.sidebarSize}
-            ref={(element) => { this.sidebarPane = element; }}
+            size={this.state.sidebarSize}
+            onChange={size => this.setState({ sidebarSize: size })}
             onDragFinished={this._handleSidebarPaneOnDragFinished}
             allowResize={this.props.ide.sidebarIsExpanded}
             minSize={20}
@@ -275,10 +256,9 @@ class IDEView extends React.Component {
               <SplitPane
                 split="horizontal"
                 primary="second"
-                defaultSize={this.consoleSize}
+                size={this.state.consoleSize}
                 minSize={29}
-                ref={(element) => { this.consolePane = element; }}
-                onDragFinished={this._handleConsolePaneOnDragFinished}
+                onChange={size => this.setState({ consoleSize: size })}
                 allowResize={this.props.ide.consoleIsExpanded}
                 className="editor-preview-subpanel"
               >

package.json

@@ -134,7 +134,7 @@
     "react-inlinesvg": "^0.7.5",
     "react-redux": "^5.1.1",
     "react-router": "^3.2.1",
-    "react-split-pane": "^0.1.76",
+    "react-split-pane": "^0.1.85",
     "react-tabs": "^2.3.0",
     "redux": "^3.7.2",
     "redux-devtools": "^3.4.2",