Merge pull request #5 from ciena-blueplanet/fix-first-layout-popover

Fixed first best layout of popover
ciena-blueplanet · Apr 16, 2019 · c363679 · c363679
2 parents d9224b2 + f709cc6
commit c363679
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/build/index.js b/build/index.js
@@ -149,7 +149,7 @@ var Popover = function (_React$Component) {
     };
 
     _this.state = {
-      standing: "above",
+      standing: "",
       exited: !_this.props.isOpen, // for animation-dependent rendering, should popover close/open?
       exiting: false, // for tracking in-progress animations
       toggle: _this.props.isOpen || false // for business logic tracking, should popover close/open?
@@ -223,9 +223,21 @@ var Popover = function (_React$Component) {
         way at any time for any arbitrary trigger. There may be value in investigating the
         http://overconstrained.io community for its general layout system via the
         constraint-solver Cassowary. */
-      };if (this.zone) this.size[this.zone.flow === "row" ? "h" : "w"] += this.props.tipSize;
-      var zone = _layout2.default.pickZone(pickerSettings, this.frameBounds, this.targetBounds, this.size);
-      if (this.zone) this.size[this.zone.flow === "row" ? "h" : "w"] -= this.props.tipSize;
+
+      };var zone = void 0;
+      var desiredPlace = this.props.preferPlace || this.props.place;
+      if (this.zone) {
+        this.size[this.zone.flow === "row" ? "h" : "w"] += this.props.tipSize;
+        if (!desiredPlace) {
+          zone = this.zone;
+        }
+      } else {
+        zone = _layout2.default.pickZone(pickerSettings, this.frameBounds, this.targetBounds, this.size);
+      }
+
+      if (this.zone) {
+        this.size[this.zone.flow === "row" ? "h" : "w"] -= this.props.tipSize;
+      }
 
       var tb = this.targetBounds;
       this.zone = zone;
@@ -384,6 +396,7 @@ var Popover = function (_React$Component) {
       log("exit!");
       this.animateExit();
       this.untrackPopover();
+      this.zone = null;
     }
   }, {
     key: "animateExitStop",
@@ -609,7 +622,7 @@ var Popover = function (_React$Component) {
           Tip = _props.Tip;
       var standing = this.state.standing;
 
-
+      standing = standing || "below";
       var popoverProps = {
         className: "Popover Popover-" + standing + " " + className,
         style: _extends({}, coreStyle, style)

diff --git a/source/index.js b/source/index.js
@@ -82,7 +82,7 @@ class Popover extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      standing: "above",
+      standing: "",
       exited: !this.props.isOpen, // for animation-dependent rendering, should popover close/open?
       exiting: false, // for tracking in-progress animations
       toggle: this.props.isOpen || false, // for business logic tracking, should popover close/open?
@@ -147,16 +147,26 @@ class Popover extends React.Component {
     way at any time for any arbitrary trigger. There may be value in investigating the
     http://overconstrained.io community for its general layout system via the
     constraint-solver Cassowary. */
-    if (this.zone)
+
+    let zone
+    const desiredPlace = this.props.preferPlace || this.props.place
+    if (this.zone) {
       this.size[this.zone.flow === "row" ? "h" : "w"] += this.props.tipSize
-    const zone = Layout.pickZone(
-      pickerSettings,
-      this.frameBounds,
-      this.targetBounds,
-      this.size,
-    )
-    if (this.zone)
+      if (!desiredPlace) {
+        zone = this.zone
+      }
+    } else {
+      zone = Layout.pickZone(
+        pickerSettings,
+        this.frameBounds,
+        this.targetBounds,
+        this.size,
+      )
+    }
+
+    if (this.zone) {
       this.size[this.zone.flow === "row" ? "h" : "w"] -= this.props.tipSize
+    }
 
     const tb = this.targetBounds
     this.zone = zone
@@ -322,6 +332,7 @@ class Popover extends React.Component {
     log("exit!")
     this.animateExit()
     this.untrackPopover()
+    this.zone = null
   }
   animateExitStop() {
     clearTimeout(this.exitingAnimationTimer1)
@@ -572,8 +583,8 @@ class Popover extends React.Component {
   }
   render() {
     const { className = "", style = {}, tipSize, Tip } = this.props
-    const { standing } = this.state
-
+    let { standing } = this.state
+    standing = standing || "below"
     const popoverProps = {
       className: `Popover Popover-${standing} ${className}`,
       style: { ...coreStyle, ...style },