From 82c7afbeecf5a0c455075868cd23585fce95cf68 Mon Sep 17 00:00:00 2001
From: Lescenco Andrei Bogdan <lescee@gmail.com>
Date: Fri, 23 Feb 2018 13:31:18 +0100
Subject: [PATCH] Reset splits either side of a divider to an even ratio on
 double click of the divider #2687 (#2692)

* auto resize panes when dbl click on separator is triggered

* use const instead of let
---
 lib/components/split-pane.js | 39 ++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/lib/components/split-pane.js b/lib/components/split-pane.js
index 7b0016c1..b53e5917 100644
--- a/lib/components/split-pane.js
+++ b/lib/components/split-pane.js
@@ -1,11 +1,13 @@
 /* eslint-disable quote-props */
 import React from 'react';
 import {PureComponent} from '../base-components';
+import _ from 'lodash';
 
 export default class SplitPane extends PureComponent {
   constructor(props) {
     super(props);
     this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleAutoResize = this.handleAutoResize.bind(this);
     this.onDrag = this.onDrag.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.state = {dragging: false};
@@ -18,6 +20,28 @@ export default class SplitPane extends PureComponent {
     }
   }
 
+  setupPanes(ev) {
+    this.panes = Array.from(ev.target.parentNode.childNodes);
+    this.paneIndex = this.panes.indexOf(ev.target);
+    this.paneIndex -= Math.ceil(this.paneIndex / 2);
+  }
+
+  handleAutoResize(ev) {
+    ev.preventDefault();
+
+    this.setupPanes(ev);
+
+    const sizes_ = this.getSizes();
+    sizes_[this.paneIndex] = 0;
+    sizes_[this.paneIndex + 1] = 0;
+
+    const availableWidth = 1 - _.sum(sizes_);
+    sizes_[this.paneIndex] = availableWidth / 2;
+    sizes_[this.paneIndex + 1] = availableWidth / 2;
+
+    this.props.onResize(sizes_);
+  }
+
   handleDragStart(ev) {
     ev.preventDefault();
     this.setState({dragging: true});
@@ -37,14 +61,12 @@ export default class SplitPane extends PureComponent {
 
     this.dragTarget = ev.target;
     this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
-    this.panes = Array.from(ev.target.parentNode.childNodes);
     this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1];
-    this.paneIndex = this.panes.indexOf(ev.target);
-    this.paneIndex -= Math.ceil(this.paneIndex / 2);
+    this.setupPanes(ev);
   }
 
-  onDrag(ev) {
-    let {sizes} = this.props;
+  getSizes() {
+    const {sizes} = this.props;
     let sizes_;
 
     if (sizes) {
@@ -53,9 +75,13 @@ export default class SplitPane extends PureComponent {
       const total = this.props.children.length;
       const count = new Array(total).fill(1 / total);
 
-      sizes = count;
       sizes_ = count;
     }
+    return sizes_;
+  }
+
+  onDrag(ev) {
+    const sizes_ = this.getSizes();
 
     const i = this.paneIndex;
     const pos = ev[this.d3];
@@ -106,6 +132,7 @@ export default class SplitPane extends PureComponent {
               <div
                 key="divider"
                 onMouseDown={this.handleDragStart}
+                onDoubleClick={this.handleAutoResize}
                 style={{backgroundColor: borderColor}}
                 className={css('divider', `divider_${direction}`)}
               />