From 5a714a31f29b4b464e4bcd8cefdcaadc1002b8bf Mon Sep 17 00:00:00 2001
From: Justin Reynolds <justinreynolds@gmail.com>
Date: Thu, 28 Sep 2017 12:28:26 -0700
Subject: [PATCH] feat(core): Make HoverablePopover flip sides if there is not
 room to render on the provided side

---
 .../src/presentation/HoverablePopover.tsx     | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/scripts/modules/core/src/presentation/HoverablePopover.tsx b/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
index 1954ce4c7a4..646e4ab3bac 100644
--- a/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
+++ b/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
@@ -34,8 +34,8 @@ export interface IHoverablePopoverProps {
 }
 
 export interface IHoverablePopoverState {
+  placementOverride?: Placement;
   popoverIsOpen: boolean;
-  target?: any;
   PopoverRenderer?: React.ComponentClass<PopoverProps> | React.StatelessComponent<PopoverProps>;
 }
 
@@ -49,6 +49,8 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     delayHide: 300,
   };
 
+  private target: Element;
+
   private mouseEvents$: Subject<React.SyntheticEvent<any>>;
   private showHide$: Observable<boolean>;
   private showHideSubscription: Subscription;
@@ -141,8 +143,34 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     this.mouseEvents$.next(e);
   }
 
-  private refCallback(ref: any): void {
-    this.setState({ target: ref });
+  private refCallback(ref: Element): void {
+    this.target = ref;
+  }
+
+  private rendererRefCallback(ref: React.Component): void {
+    if (ref) {
+      const { clientWidth, clientHeight } = ReactDOM.findDOMNode(ref);
+      const bounds = this.target.getBoundingClientRect();
+      const bottomSpace = window.innerHeight - bounds.bottom;
+      const rightSpace = window.innerWidth - bounds.right;
+
+      let placementOverride: Placement;
+      switch (this.props.placement) {
+        case 'top':
+          placementOverride = clientHeight > bounds.top && bounds.top < bottomSpace ? 'bottom' : undefined;
+          break;
+        case 'bottom':
+          placementOverride = clientHeight > bottomSpace && bottomSpace < bounds.top ? 'top' : undefined;
+          break;
+        case 'left':
+          placementOverride = clientWidth > bounds.left && bounds.left < rightSpace ? 'right' : undefined;
+          break;
+        case 'right':
+          placementOverride = clientWidth > rightSpace && rightSpace < bounds.left ? 'left' : undefined;
+          break;
+      }
+      this.setState({ placementOverride });
+    }
   }
 
   public render() {
@@ -152,8 +180,9 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     return (
       <g onMouseEnter={this.handleMouseEvent} onMouseLeave={this.handleMouseEvent} ref={this.refCallback}>
         {this.props.children}
-        <Overlay show={this.state.popoverIsOpen} placement={this.props.placement} target={this.state.target} container={this.props.container}>
+        <Overlay show={this.state.popoverIsOpen} placement={this.state.placementOverride || this.props.placement} target={this.target as any} container={this.props.container}>
           <PopoverRenderer
+            ref={this.rendererRefCallback}
             onMouseOver={this.handleMouseEvent}
             onMouseLeave={this.handleMouseEvent}
             id={this.props.id}