@rc-component/trigger 1.6.3 → 1.7.1

package/es/hooks/useAlign.js

@@ -212,18 +212,20 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
 
       // ============== Intersection ===============
       // Get area by position. Used for check if flip area is better
-      function getIntersectionVisibleArea(x, y) {
-        var r = x + popupWidth;
-        var b = y + popupHeight;
-        var visibleX = Math.max(x, visibleArea.left);
-        var visibleY = Math.max(y, visibleArea.top);
+      function getIntersectionVisibleArea(offsetX, offsetY) {
+        var l = popupRect.x + offsetX;
+        var t = popupRect.y + offsetY;
+        var r = l + popupWidth;
+        var b = t + popupHeight;
+        var visibleL = Math.max(l, visibleArea.left);
+        var visibleT = Math.max(t, visibleArea.top);
         var visibleR = Math.min(r, visibleArea.right);
         var visibleB = Math.min(b, visibleArea.bottom);
-        return (visibleR - visibleX) * (visibleB - visibleY);
+        return (visibleR - visibleL) * (visibleB - visibleT);
       }
       var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
 
-      // ================ Overflow =================
+      // ========================== Overflow ===========================
       var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
       var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
       var targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
@@ -240,9 +242,20 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         return val >= 0;
       };
 
+      // Prepare position
+      var nextPopupY;
+      var nextPopupBottom;
+      var nextPopupX;
+      var nextPopupRight;
+      function syncNextPopupPosition() {
+        nextPopupY = popupRect.y + nextOffsetY;
+        nextPopupBottom = nextPopupY + popupHeight;
+        nextPopupX = popupRect.x + nextOffsetX;
+        nextPopupRight = nextPopupX + popupWidth;
+      }
+      syncNextPopupPosition();
+
       // >>>>>>>>>> Top & Bottom
-      var nextPopupY = popupRect.y + nextOffsetY;
-      var nextPopupBottom = nextPopupY + popupHeight;
       var needAdjustY = supportAdjust(adjustY);
       var sameTB = popupPoints[0] === targetPoints[0];
 
@@ -275,8 +288,6 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       }
 
       // >>>>>>>>>> Left & Right
-      var nextPopupX = popupRect.x + nextOffsetX;
-      var nextPopupRight = nextPopupX + popupWidth;
       var needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
@@ -310,7 +321,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         }
       }
 
-      // >>>>> Shift
+      // ============================ Shift ============================
+      syncNextPopupPosition();
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
@@ -348,6 +360,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         }
       }
 
+      // ============================ Arrow ============================
       // Arrow center align
       var popupLeft = popupRect.x + nextOffsetX;
       var popupRight = popupLeft + popupWidth;

package/lib/hooks/useAlign.js

@@ -220,18 +220,20 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // ============== Intersection ===============
       // Get area by position. Used for check if flip area is better
-      function getIntersectionVisibleArea(x, y) {
-        var r = x + popupWidth;
-        var b = y + popupHeight;
-        var visibleX = Math.max(x, visibleArea.left);
-        var visibleY = Math.max(y, visibleArea.top);
+      function getIntersectionVisibleArea(offsetX, offsetY) {
+        var l = popupRect.x + offsetX;
+        var t = popupRect.y + offsetY;
+        var r = l + popupWidth;
+        var b = t + popupHeight;
+        var visibleL = Math.max(l, visibleArea.left);
+        var visibleT = Math.max(t, visibleArea.top);
         var visibleR = Math.min(r, visibleArea.right);
         var visibleB = Math.min(b, visibleArea.bottom);
-        return (visibleR - visibleX) * (visibleB - visibleY);
+        return (visibleR - visibleL) * (visibleB - visibleT);
       }
       var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
 
-      // ================ Overflow =================
+      // ========================== Overflow ===========================
       var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
       var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
       var targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
@@ -248,9 +250,20 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         return val >= 0;
       };
 
+      // Prepare position
+      var nextPopupY;
+      var nextPopupBottom;
+      var nextPopupX;
+      var nextPopupRight;
+      function syncNextPopupPosition() {
+        nextPopupY = popupRect.y + nextOffsetY;
+        nextPopupBottom = nextPopupY + popupHeight;
+        nextPopupX = popupRect.x + nextOffsetX;
+        nextPopupRight = nextPopupX + popupWidth;
+      }
+      syncNextPopupPosition();
+
       // >>>>>>>>>> Top & Bottom
-      var nextPopupY = popupRect.y + nextOffsetY;
-      var nextPopupBottom = nextPopupY + popupHeight;
       var needAdjustY = supportAdjust(adjustY);
       var sameTB = popupPoints[0] === targetPoints[0];
 
@@ -283,8 +296,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
 
       // >>>>>>>>>> Left & Right
-      var nextPopupX = popupRect.x + nextOffsetX;
-      var nextPopupRight = nextPopupX + popupWidth;
       var needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
@@ -318,7 +329,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         }
       }
 
-      // >>>>> Shift
+      // ============================ Shift ============================
+      syncNextPopupPosition();
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
@@ -356,6 +368,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         }
       }
 
+      // ============================ Arrow ============================
       // Arrow center align
       var popupLeft = popupRect.x + nextOffsetX;
       var popupRight = popupLeft + popupWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.6.3",
+  "version": "1.7.1",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"