Add dbclick to full size

ui/src/shared/components/ResizeDivision.tsx

@@ -11,7 +11,8 @@ interface Props {
   draggable: boolean
   orientation: string
   render: () => ReactElement<any>
-  onHandleStartDrag: (id: string, e: MouseEvent<HTMLElement>) => any
+  onHandleStartDrag: (id: string, e: MouseEvent<HTMLElement>) => void
+  onDoubleClick: (id: string) => void
 }
 
 class Division extends PureComponent<Props> {
@@ -24,7 +25,11 @@ class Division extends PureComponent<Props> {
     return (
       <>
         <div className="threesizer--division" style={this.style}>
-          <div className="threesizer--handle" onMouseDown={this.dragCallback}>
+          <div
+            className={`threesizer--handle ${this.disabled}`}
+            onMouseDown={this.dragCallback}
+            onDoubleClick={this.handleDoubleClick}
+          >
             {name}
           </div>
           {render()}
@@ -33,12 +38,26 @@ class Division extends PureComponent<Props> {
     )
   }
 
+  private get disabled(): string {
+    const {draggable} = this.props
+    if (draggable) {
+      return ''
+    }
+
+    return 'disabled'
+  }
+
   private get style() {
     return {
       height: `calc((100% - 90px) * ${this.props.size} + 30px)`,
     }
   }
 
+  private handleDoubleClick = () => {
+    const {id, onDoubleClick} = this.props
+    return onDoubleClick(id)
+  }
+
   private dragCallback = e => {
     const {draggable, id} = this.props
     if (!draggable) {

ui/src/shared/components/Threesizer.tsx

@@ -123,6 +123,7 @@ class Threesizer extends Component<Props, State> {
             minPixels={d.minPixels}
             orientation={orientation}
             activeHandleID={activeHandleID}
+            onDoubleClick={this.handleDoubleClick}
             onHandleStartDrag={this.handleStartDrag}
             render={this.props.divisions[i].render}
           />
@@ -155,13 +156,24 @@ class Threesizer extends Component<Props, State> {
     }))
   }
 
+  private handleDoubleClick = (id: string): void => {
+    const divisions = this.state.divisions.map(d => {
+      if (d.id !== id) {
+        return {...d, size: 0}
+      }
+
+      return {...d, size: 1}
+    })
+
+    this.setState({divisions})
+  }
+
   private handleStartDrag = (activeHandleID, e: MouseEvent<HTMLElement>) => {
     const dragEvent = this.mousePosWithinContainer(e)
     this.setState({activeHandleID, dragEvent})
   }
 
   private handleStopDrag = () => {
-    console.log('handleStopDrag')
     this.setState({activeHandleID: '', dragEvent: initialDragEvent})
   }
 
@@ -209,42 +221,6 @@ class Threesizer extends Component<Props, State> {
     return Math.abs(delta / height)
   }
 
-  private minPercentX = (xMinPixels: number): number => {
-    if (!this.containerRef) {
-      return 0
-    }
-    const {width} = this.containerRef.getBoundingClientRect()
-
-    return xMinPixels / width
-  }
-
-  private minPercentY = (yMinPixels: number): number => {
-    if (!this.containerRef) {
-      return 0
-    }
-
-    const {height} = this.containerRef.getBoundingClientRect()
-    return yMinPixels / height
-  }
-
-  private get maximumHeightPercent(): number {
-    if (!this.containerRef) {
-      return 1
-    }
-
-    const {divisions} = this.state
-    const {height} = this.containerRef.getBoundingClientRect()
-
-    const totalMinPixels = divisions.reduce(
-      (acc, div) => acc + div.minPixels,
-      0
-    )
-
-    const maximumPixels = height - totalMinPixels
-
-    return this.minPercentY(maximumPixels)
-  }
-
   private handleDrag = (e: MouseEvent<HTMLElement>) => {
     const {activeHandleID} = this.state
     if (!activeHandleID) {
@@ -255,16 +231,6 @@ class Threesizer extends Component<Props, State> {
     this.setState({dragEvent})
   }
 
-  private taller = (size: number): number => {
-    const newSize = size + this.percentChangeY
-    return newSize > 1 ? 1 : newSize
-  }
-
-  private shorter = (size: number): number => {
-    const newSize = size - this.percentChangeY
-    return newSize < 0 ? 0 : newSize
-  }
-
   private get move() {
     const {activeHandleID} = this.state
 
@@ -376,6 +342,16 @@ class Threesizer extends Component<Props, State> {
 
     this.setState({divisions})
   }
+
+  private taller = (size: number): number => {
+    const newSize = size + this.percentChangeY
+    return newSize > 1 ? 1 : newSize
+  }
+
+  private shorter = (size: number): number => {
+    const newSize = size - this.percentChangeY
+    return newSize < 0 ? 0 : newSize
+  }
 }
 
 export default Threesizer