re-add state

src/components/shared/Popover.js

@@ -30,20 +30,23 @@ export type Coords = {
   orientation: Orientation
 };
 
-type State = {};
+type State = { coords: Coords };
 
 class Popover extends Component<Props, State> {
   $popover: ?HTMLDivElement;
   $tooltip: ?HTMLDivElement;
-  coords: Coords = {
-    left: 0,
-    top: 0,
-    orientation: "down",
-    targetMid: { x: 0, y: 0 }
+  state = {
+    coords: {
+      left: 0,
+      top: 0,
+      orientation: "down",
+      targetMid: { x: 0, y: 0 }
+    }
   };
 
   static defaultProps = {
     onMouseLeave: () => {},
+    onPopoverCoords: () => {},
     type: "popover"
   };
 
@@ -53,10 +56,10 @@ class Popover extends Component<Props, State> {
       type == "popover" ? this.getPopoverCoords() : this.getTooltipCoords();
 
     if (coords) {
-      this.coords = coords;
+      this.setState({ coords });
     }
 
-    this.props.onPopoverCoords(this.coords);
+    this.props.onPopoverCoords(this.state.coords);
   }
 
   calculateLeft(
@@ -204,7 +207,7 @@ class Popover extends Component<Props, State> {
 
   getChildren() {
     const { children } = this.props;
-    const { orientation } = this.coords;
+    const { orientation } = this.state.coords;
     const gap = <div className="gap" key="gap" />;
     return orientation === "up" ? [children, gap] : [gap, children];
   }
@@ -223,7 +226,7 @@ class Popover extends Component<Props, State> {
   }
 
   renderPopover() {
-    const { top, left, orientation, targetMid } = this.coords;
+    const { top, left, orientation, targetMid } = this.state.coords;
     const arrow = this.getPopoverArrow(orientation, targetMid.x, targetMid.y);
 
     return (
@@ -243,7 +246,7 @@ class Popover extends Component<Props, State> {
 
   renderTooltip() {
     const { onMouseLeave } = this.props;
-    const { top, left } = this.coords;
+    const { top, left } = this.state.coords;
 
     return (
       <div

src/components/shared/tests/__snapshots__/Popover.spec.js.snap

@@ -8,6 +8,7 @@ exports[`Popover mount popover 1`] = `
     }
   }
   onMouseLeave={[MockFunction]}
+  onPopoverCoords={[Function]}
   targetPosition={
     Object {
       "bottom": 0,
@@ -67,6 +68,7 @@ exports[`Popover mount tooltip 1`] = `
     }
   }
   onMouseLeave={[MockFunction]}
+  onPopoverCoords={[Function]}
   targetPosition={
     Object {
       "bottom": 0,
@@ -113,13 +115,13 @@ exports[`Popover render (tooltip) 1`] = `
     }
   }
 >
-  <h1>
-    Toolie!
-  </h1>
   <div
     className="gap"
     key="gap"
   />
+  <h1>
+    Toolie!
+  </h1>
 </div>
 `;
 
@@ -131,6 +133,7 @@ exports[`Popover render 1`] = `
     }
   }
   onMouseLeave={[MockFunction]}
+  onPopoverCoords={[Function]}
   targetPosition={
     Object {
       "bottom": 0,