Fix horizontal split and term resize

lib/components/split-pane.js

@@ -82,6 +82,7 @@ export default class SplitPane extends Component {
   template(css) {
     const children = this.props.children;
     const {direction, borderColor} = this.props;
+    const sizeProperty = direction === 'horizontal' ? 'height' : 'flexBasis'
     let {sizes} = this.props;
     if (!sizes) {
       // workaround for the fact that if we don't specify
@@ -93,6 +94,8 @@ export default class SplitPane extends Component {
       {
         React.Children.map(children, (child, i) => {
           const style = {
+            // flexBasis doesn't work for the first horizontal pane, height need to be specified
+            [sizeProperty]: (sizes[i] * 100) + '%',
             flexBasis: (sizes[i] * 100) + '%',
             flexGrow: 0
           };

lib/components/term-group.js

@@ -15,6 +15,8 @@ class TermGroup_ extends Component {
     super(props, context);
     this.bound = new WeakMap();
     this.termRefs = {}
+    this.sizeChanged = false;
+    this.onTermRef = this.onTermRef.bind(this);
   }
 
   bind(fn, thisObj, uid) {
@@ -45,6 +47,11 @@ class TermGroup_ extends Component {
     </SplitPane>);
   }
 
+  onTermRef(uid, term) {
+    this.term = term;
+    this.props.ref_(uid, term)
+  }
+
   renderTerm(uid) {
     const session = this.props.sessions[uid];
     const termRef = this.props.terms[uid];
@@ -79,32 +86,22 @@ class TermGroup_ extends Component {
     // which is inefficient. Should maybe do something similar
     // to this.bind.
     return (<Term
-      ref_={term => {
-        if (term) {
-          this.termRefs[uid] = term
-        } else {
-          delete this.termRefs[uid]
-        }
-        this.props.ref_(uid, term)
-      }}
+      ref_={this.onTermRef}
       key={uid}
       {...props}
       />);
   }
 
   componentWillReceiveProps (nextProps) {
-    if (this.props.termGroup.sizes != nextProps.termGroup.sizes) {
-      // whenever we change the ratio, we want to force a resize
-      // on all the splits. technically, we could have done this
-      // at the reducer level, which would be a better place for
-      // it, but this is not too inelegant considering that terms
-      // are already reporting their own size when, for example,
-      // the window gets resized
-      for (const uid in this.termRefs) {
-        const term = this.termRefs[uid]
-        term.measureResize();
-      }
+
+    if (this.props.termGroup.sizes != nextProps.termGroup.sizes || nextProps.sizeChanged) {
+      this.term && this.term.measureResize();
+      // Indicate to children that their size has changed even if their ratio hasn't
+      this.sizeChanged = true;
+    } else {
+      this.sizeChanged = false;
     }
+
   }
 
   template() {
@@ -115,7 +112,8 @@ class TermGroup_ extends Component {
 
     const groups = childGroups.map(child => {
       const props = getTermGroupProps(child.uid, this.props.parentProps, Object.assign({}, this.props, {
-        termGroup: child
+        termGroup: child,
+        sizeChanged: this.sizeChanged
       }));
 
       return (<DecoratedTermGroup

lib/components/term.js

@@ -17,12 +17,14 @@ export default class Term extends Component {
 
   constructor(props) {
     super(props);
-    props.ref_(this);
+    props.ref_(props.uid, this);
     this.termRef = null
     this.termWrapperRef = null
     this.termRect = null
     this.onOpen = this.onOpen.bind(this)
     this.onWindowResize = this.onWindowResize.bind(this)
+    this.onTermRef = this.onTermRef.bind(this)
+    this.onTermWrapperRef = this.onTermWrapperRef.bind(this)
   }
 
   componentDidMount() {
@@ -187,9 +189,17 @@ export default class Term extends Component {
     }
   }
 
+  onTermWrapperRef(component) {
+    this.termWrapperRef = component;
+  }
+
+  onTermRef(component) {
+    this.termRef = component;
+  }
+
   componentWillUnmount() {
-    terms[this.props.uid] = this;
-    this.props.ref_(null);
+    terms[this.props.uid] = null;
+    this.props.ref_(this.props.uid, null);
 
     // to clean up the terminal, we remove the listeners
     // instead of invoking `destroy`, since it will make the 
@@ -209,15 +219,11 @@ export default class Term extends Component {
       >
       { this.props.customChildrenBefore }
       <div
-        ref={component => {
-          this.termWrapperRef = component;
-        }}
+        ref={this.onTermWrapperRef}
         className={css('fit', 'wrapper')}
       >
         <div
-          ref={component => {
-            this.termRef = component;
-          }}
+          ref={this.onTermRef}
           className={css('term')}
           />
       </div>