@rc-component/trigger 1.4.2 → 1.5.1

package/es/hooks/useAlign.js

@@ -122,6 +122,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         scrollLeft = _doc$documentElement.scrollLeft;
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
+      var targetHeight = targetRect.height;
+      var targetWidth = targetRect.width;
 
       // Get bounding of visible area
       var visibleArea = placementInfo.htmlRegion === 'scroll' ?
@@ -224,16 +226,25 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var nextPopupY = popupRect.y + nextOffsetY;
       var nextPopupBottom = nextPopupY + popupHeight;
       var needAdjustY = supportAdjust(adjustY);
+      var sameTB = popupPoints[0] === targetPoints[0];
 
       // Bottom to Top
       if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
-        nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        if (sameTB) {
+          nextOffsetY -= popupHeight - targetHeight;
+        } else {
+          nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
       if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
-        nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        if (sameTB) {
+          nextOffsetY += popupHeight - targetHeight;
+        } else {
+          nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
@@ -243,15 +254,25 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
+      var sameLR = popupPoints[1] === targetPoints[1];
+
       // Right to Left
       if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
-        nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        if (sameLR) {
+          nextOffsetX -= popupWidth - targetWidth;
+        } else {
+          nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
       if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
-        nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        if (sameLR) {
+          nextOffsetX += popupWidth - targetWidth;
+        } else {
+          nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
@@ -261,8 +282,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         // Left
         if (nextPopupX < visibleArea.left) {
           nextOffsetX -= nextPopupX - visibleArea.left;
-          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
-            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
+          if (targetRect.x + targetWidth < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetWidth - numShiftX;
           }
         }
 
@@ -279,8 +300,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         // Top
         if (nextPopupY < visibleArea.top) {
           nextOffsetY -= nextPopupY - visibleArea.top;
-          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
-            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
+          if (targetRect.y + targetHeight < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetHeight - numShiftY;
           }
         }
 
@@ -299,9 +320,9 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var popupTop = popupRect.y + nextOffsetY;
       var popupBottom = popupTop + popupHeight;
       var targetLeft = targetRect.x;
-      var targetRight = targetLeft + targetRect.width;
+      var targetRight = targetLeft + targetWidth;
       var targetTop = targetRect.y;
-      var targetBottom = targetTop + targetRect.height;
+      var targetBottom = targetTop + targetHeight;
       var maxLeft = Math.max(popupLeft, targetLeft);
       var minRight = Math.min(popupRight, targetRight);
       var xCenter = (maxLeft + minRight) / 2;

package/es/index.js

@@ -399,7 +399,13 @@ export function generateTrigger() {
     var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
 
     // Render
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+      disabled: !mergedOpen,
+      ref: setTargetRef,
+      onResize: onTargetResize
+    }, /*#__PURE__*/React.createElement(TriggerWrapper, {
+      getTriggerDOMNode: getTriggerDOMNode
+    }, triggerNode)), /*#__PURE__*/React.createElement(TriggerContext.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(Popup, {
       portal: PortalComponent,
@@ -450,13 +456,7 @@ export function generateTrigger() {
       stretch: stretch,
       targetWidth: targetWidth / scaleX,
       targetHeight: targetHeight / scaleY
-    })), /*#__PURE__*/React.createElement(ResizeObserver, {
-      disabled: !mergedOpen,
-      ref: setTargetRef,
-      onResize: onTargetResize
-    }, /*#__PURE__*/React.createElement(TriggerWrapper, {
-      getTriggerDOMNode: getTriggerDOMNode
-    }, triggerNode)));
+    })));
   });
   if (process.env.NODE_ENV !== 'production') {
     Trigger.displayName = 'Trigger';

package/lib/hooks/useAlign.js

@@ -130,6 +130,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         scrollLeft = _doc$documentElement.scrollLeft;
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
+      var targetHeight = targetRect.height;
+      var targetWidth = targetRect.width;
 
       // Get bounding of visible area
       var visibleArea = placementInfo.htmlRegion === 'scroll' ?
@@ -232,16 +234,25 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var nextPopupY = popupRect.y + nextOffsetY;
       var nextPopupBottom = nextPopupY + popupHeight;
       var needAdjustY = supportAdjust(adjustY);
+      var sameTB = popupPoints[0] === targetPoints[0];
 
       // Bottom to Top
       if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
-        nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        if (sameTB) {
+          nextOffsetY -= popupHeight - targetHeight;
+        } else {
+          nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
       if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
-        nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        if (sameTB) {
+          nextOffsetY += popupHeight - targetHeight;
+        } else {
+          nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
@@ -251,15 +262,25 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
+      var sameLR = popupPoints[1] === targetPoints[1];
+
       // Right to Left
       if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
-        nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        if (sameLR) {
+          nextOffsetX -= popupWidth - targetWidth;
+        } else {
+          nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
       if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
-        nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        if (sameLR) {
+          nextOffsetX += popupWidth - targetWidth;
+        } else {
+          nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        }
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
@@ -269,8 +290,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         // Left
         if (nextPopupX < visibleArea.left) {
           nextOffsetX -= nextPopupX - visibleArea.left;
-          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
-            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
+          if (targetRect.x + targetWidth < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetWidth - numShiftX;
           }
         }
 
@@ -287,8 +308,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         // Top
         if (nextPopupY < visibleArea.top) {
           nextOffsetY -= nextPopupY - visibleArea.top;
-          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
-            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
+          if (targetRect.y + targetHeight < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetHeight - numShiftY;
           }
         }
 
@@ -307,9 +328,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var popupTop = popupRect.y + nextOffsetY;
       var popupBottom = popupTop + popupHeight;
       var targetLeft = targetRect.x;
-      var targetRight = targetLeft + targetRect.width;
+      var targetRight = targetLeft + targetWidth;
       var targetTop = targetRect.y;
-      var targetBottom = targetTop + targetRect.height;
+      var targetBottom = targetTop + targetHeight;
       var maxLeft = Math.max(popupLeft, targetLeft);
       var minRight = Math.min(popupRight, targetRight);
       var xCenter = (maxLeft + minRight) / 2;

package/lib/index.js

@@ -408,7 +408,13 @@ function generateTrigger() {
     var triggerNode = /*#__PURE__*/React.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedChildrenProps), passedProps));
 
     // Render
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_context.default.Provider, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+      disabled: !mergedOpen,
+      ref: setTargetRef,
+      onResize: onTargetResize
+    }, /*#__PURE__*/React.createElement(_TriggerWrapper.default, {
+      getTriggerDOMNode: getTriggerDOMNode
+    }, triggerNode)), /*#__PURE__*/React.createElement(_context.default.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(_Popup.default, {
       portal: PortalComponent,
@@ -459,13 +465,7 @@ function generateTrigger() {
       stretch: stretch,
       targetWidth: targetWidth / scaleX,
       targetHeight: targetHeight / scaleY
-    })), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
-      disabled: !mergedOpen,
-      ref: setTargetRef,
-      onResize: onTargetResize
-    }, /*#__PURE__*/React.createElement(_TriggerWrapper.default, {
-      getTriggerDOMNode: getTriggerDOMNode
-    }, triggerNode)));
+    })));
   });
   if (process.env.NODE_ENV !== 'production') {
     Trigger.displayName = 'Trigger';

package/package.json

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