@rc-component/trigger 1.5.0 → 1.5.2

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

@@ -8,7 +8,6 @@ import ResizeObserver from 'rc-resize-observer';
 import useEvent from "rc-util/es/hooks/useEvent";
 import useId from "rc-util/es/hooks/useId";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
-import useMergedState from "rc-util/es/hooks/useMergedState";
 import * as React from 'react';
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
@@ -121,12 +120,23 @@ export function generateTrigger() {
     var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _useMergedState = useMergedState(defaultPopupVisible || false, {
-        value: popupVisible
-      }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      mergedOpen = _useMergedState2[0],
-      setMergedOpen = _useMergedState2[1];
+    var _React$useState5 = React.useState(defaultPopupVisible || false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      internalOpen = _React$useState6[0],
+      setInternalOpen = _React$useState6[1];
+
+    // Render still use props as first priority
+    var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
+
+    // We use effect sync here in case `popupVisible` back to `undefined`
+    var setMergedOpen = useEvent(function (nextOpen) {
+      if (popupVisible === undefined) {
+        setInternalOpen(nextOpen);
+      }
+    });
+    useLayoutEffect(function () {
+      setInternalOpen(popupVisible || false);
+    }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     var internalTriggerOpen = useEvent(function (nextOpen) {
@@ -157,10 +167,10 @@ export function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      inMotion = _React$useState6[0],
-      setInMotion = _React$useState6[1];
+    var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      inMotion = _React$useState8[0],
+      setInMotion = _React$useState8[1];
     var mountRef = React.useRef(true);
     useLayoutEffect(function () {
       if (!mountRef.current || mergedOpen) {
@@ -168,16 +178,16 @@ export function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState7 = React.useState(null),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      motionPrepareResolve = _React$useState8[0],
-      setMotionPrepareResolve = _React$useState8[1];
+    var _React$useState9 = React.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      motionPrepareResolve = _React$useState10[0],
+      setMotionPrepareResolve = _React$useState10[1];
 
     // =========================== Align ============================
-    var _React$useState9 = React.useState([0, 0]),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      mousePos = _React$useState10[0],
-      setMousePos = _React$useState10[1];
+    var _React$useState11 = React.useState([0, 0]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      mousePos = _React$useState12[0],
+      setMousePos = _React$useState12[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -242,14 +252,14 @@ export function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      targetWidth = _React$useState12[0],
-      setTargetWidth = _React$useState12[1];
     var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      targetHeight = _React$useState14[0],
-      setTargetHeight = _React$useState14[1];
+      targetWidth = _React$useState14[0],
+      setTargetWidth = _React$useState14[1];
+    var _React$useState15 = React.useState(0),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      targetHeight = _React$useState16[0],
+      setTargetHeight = _React$useState16[1];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {

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

@@ -16,7 +16,6 @@ var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
@@ -130,12 +129,23 @@ function generateTrigger() {
     var mergeMaskMotion = (0, _util.getMotion)(prefixCls, maskMotion, maskAnimation, maskTransitionName);
 
     // ============================ Open ============================
-    var _useMergedState = (0, _useMergedState3.default)(defaultPopupVisible || false, {
-        value: popupVisible
-      }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      mergedOpen = _useMergedState2[0],
-      setMergedOpen = _useMergedState2[1];
+    var _React$useState5 = React.useState(defaultPopupVisible || false),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      internalOpen = _React$useState6[0],
+      setInternalOpen = _React$useState6[1];
+
+    // Render still use props as first priority
+    var mergedOpen = popupVisible !== null && popupVisible !== void 0 ? popupVisible : internalOpen;
+
+    // We use effect sync here in case `popupVisible` back to `undefined`
+    var setMergedOpen = (0, _useEvent.default)(function (nextOpen) {
+      if (popupVisible === undefined) {
+        setInternalOpen(nextOpen);
+      }
+    });
+    (0, _useLayoutEffect.default)(function () {
+      setInternalOpen(popupVisible || false);
+    }, [popupVisible]);
     var openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     var internalTriggerOpen = (0, _useEvent.default)(function (nextOpen) {
@@ -166,10 +176,10 @@ function generateTrigger() {
     }, []);
 
     // ========================== Motion ============================
-    var _React$useState5 = React.useState(false),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      inMotion = _React$useState6[0],
-      setInMotion = _React$useState6[1];
+    var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      inMotion = _React$useState8[0],
+      setInMotion = _React$useState8[1];
     var mountRef = React.useRef(true);
     (0, _useLayoutEffect.default)(function () {
       if (!mountRef.current || mergedOpen) {
@@ -177,16 +187,16 @@ function generateTrigger() {
       }
       mountRef.current = true;
     }, [mergedOpen]);
-    var _React$useState7 = React.useState(null),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      motionPrepareResolve = _React$useState8[0],
-      setMotionPrepareResolve = _React$useState8[1];
+    var _React$useState9 = React.useState(null),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      motionPrepareResolve = _React$useState10[0],
+      setMotionPrepareResolve = _React$useState10[1];
 
     // =========================== Align ============================
-    var _React$useState9 = React.useState([0, 0]),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      mousePos = _React$useState10[0],
-      setMousePos = _React$useState10[1];
+    var _React$useState11 = React.useState([0, 0]),
+      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+      mousePos = _React$useState12[0],
+      setMousePos = _React$useState12[1];
     var setMousePosByEvent = function setMousePosByEvent(event) {
       setMousePos([event.clientX, event.clientY]);
     };
@@ -251,14 +261,14 @@ function generateTrigger() {
     }, [motionPrepareResolve]);
 
     // ========================== Stretch ===========================
-    var _React$useState11 = React.useState(0),
-      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      targetWidth = _React$useState12[0],
-      setTargetWidth = _React$useState12[1];
     var _React$useState13 = React.useState(0),
       _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-      targetHeight = _React$useState14[0],
-      setTargetHeight = _React$useState14[1];
+      targetWidth = _React$useState14[0],
+      setTargetWidth = _React$useState14[1];
+    var _React$useState15 = React.useState(0),
+      _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
+      targetHeight = _React$useState16[0],
+      setTargetHeight = _React$useState16[1];
     var onTargetResize = function onTargetResize(_, ele) {
       triggerAlign();
       if (stretch) {

package/package.json

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