Handle specific drag

ui/src/shared/components/ResizeContainer.tsx

@@ -7,7 +7,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {MIN_DIVISIONS, ORIENTATION_HORIZONTAL} from 'src/shared/constants/'
 
 interface State {
-  isDragging: boolean
+  activeHandleID: string
   divisions: DivisionState[]
 }
 
@@ -40,13 +40,13 @@ class Resizer extends Component<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
-      isDragging: false,
+      activeHandleID: null,
       divisions: this.initialDivisions,
     }
   }
 
   public render() {
-    const {isDragging, divisions} = this.state
+    const {activeHandleID, divisions} = this.state
     const {containerClass, orientation} = this.props
 
     if (divisions.length < MIN_DIVISIONS) {
@@ -59,7 +59,7 @@ class Resizer extends Component<Props, State> {
     return (
       <div
         className={classnames(`resize--container ${containerClass}`, {
-          'resize--dragging': isDragging,
+          'resize--dragging': activeHandleID,
         })}
         onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleStopDrag}
@@ -76,7 +76,7 @@ class Resizer extends Component<Props, State> {
             render={d.render}
             orientation={orientation}
             draggable={i > 0}
-            isDragging={isDragging}
+            activeHandleID={activeHandleID}
             onHandleStartDrag={this.handleStartDrag}
           />
         ))}
@@ -97,20 +97,20 @@ class Resizer extends Component<Props, State> {
     }))
   }
 
-  private handleStartDrag = () => {
-    this.setState({isDragging: true})
+  private handleStartDrag = activeHandleID => {
+    this.setState({activeHandleID})
   }
 
   private handleStopDrag = () => {
-    this.setState({isDragging: false})
+    this.setState({activeHandleID: ''})
   }
 
   private handleMouseLeave = () => {
-    this.setState({isDragging: false})
+    this.setState({activeHandleID: ''})
   }
 
   private handleDrag = () => {
-    if (!this.state.isDragging) {
+    if (!this.state.activeHandleID) {
       return
     }
 

ui/src/shared/components/ResizeDivision.tsx

@@ -8,19 +8,25 @@ import {
   HUNDRED,
 } from 'src/shared/constants/'
 
+const NOOP = () => {}
+
 interface Props {
   id: string
   name?: string
   size: number
   offset: number
-  isDragging: boolean
+  activeHandleID: string
   draggable: boolean
   orientation: string
   render: () => ReactElement<any>
-  onHandleStartDrag: () => void
+  onHandleStartDrag: (activeHandleID: string) => void
 }
 
 class Division extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    name: '',
+  }
+
   public render() {
     const {render} = this.props
 
@@ -33,27 +39,30 @@ class Division extends PureComponent<Props> {
   }
 
   private get dragHandle() {
-    const {
-      name,
-      isDragging,
-      orientation,
-      onHandleStartDrag,
-      draggable,
-    } = this.props
+    const {name, activeHandleID, orientation, id, draggable} = this.props
 
-    if (name) {
-      return <div className="resizer--title">{name}</div>
+    if (!name && !draggable) {
+      return null
     }
 
-    if (draggable) {
-      return (
-        <ResizeHandle
-          onHandleStartDrag={onHandleStartDrag}
-          orientation={orientation}
-          isDragging={isDragging}
-        />
-      )
+    return (
+      <ResizeHandle
+        id={id}
+        name={name}
+        orientation={orientation}
+        activeHandleID={activeHandleID}
+        onHandleStartDrag={this.dragCallback}
+      />
+    )
+  }
+
+  private get dragCallback() {
+    const {draggable} = this.props
+    if (!draggable) {
+      return NOOP
     }
+
+    return this.props.onHandleStartDrag
   }
 
   private get style() {

ui/src/shared/components/ResizeHandle.tsx

@@ -7,26 +7,43 @@ import {
 } from 'src/shared/constants/'
 
 interface Props {
-  onHandleStartDrag: () => void
-  isDragging: boolean
+  name: string
+  id: string
+  onHandleStartDrag: (activeHandleID: string) => void
+  activeHandleID: string
   orientation: string
 }
 
 class ResizeHandle extends PureComponent<Props> {
   public render() {
-    const {onHandleStartDrag, isDragging, orientation} = this.props
-
     return (
-      <div
-        className={classnames('resizer--handle', {
-          dragging: isDragging,
-          vertical: orientation === ORIENTATION_VERTICAL,
-          horizontal: orientation === ORIENTATION_HORIZONTAL,
-        })}
-        onMouseDown={onHandleStartDrag}
-      />
+      <div className={this.className} onMouseDown={this.handleMouseDown}>
+        {this.props.name}
+      </div>
     )
   }
+
+  private get className(): string {
+    const {name, orientation} = this.props
+
+    return classnames({
+      'resizer--handle': !name,
+      'resizer--title': name,
+      dragging: this.isActive,
+      vertical: orientation === ORIENTATION_VERTICAL,
+      horizontal: orientation === ORIENTATION_HORIZONTAL,
+    })
+  }
+
+  private get isActive(): boolean {
+    const {id, activeHandleID} = this.props
+
+    return id === activeHandleID
+  }
+
+  private handleMouseDown = (): void => {
+    this.props.onHandleStartDrag(this.props.id)
+  }
 }
 
 export default ResizeHandle

ui/src/style/components/resizer.scss

@@ -184,4 +184,15 @@ $resizer-color-kapacitor: $c-rainforest;
   font-weight: 600;
   color: $g13-mist;
   @include no-user-select();
+
+  &:hover {
+    cursor: ns-resize;
+    background-color: $g4-onyx;
+  }
+
+  &.dragging {
+    cursor: ns-resize;
+    color: $c-laser;
+    background-color: $g5-pepper;
+  }
 }