@rc-component/trigger 1.15.3 → 1.15.4

package/es/hooks/useAlign.js

@@ -106,17 +106,31 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
   // ========================= Align =========================
   var onAlign = useEvent(function () {
     if (popupEle && target && open) {
+      var _popupElement$parentE, _popupElement$parentE2;
       var popupElement = popupEle;
+      var doc = popupElement.ownerDocument;
+      var win = getWin(popupElement);
+      var _win$getComputedStyle = win.getComputedStyle(popupElement),
+        width = _win$getComputedStyle.width,
+        height = _win$getComputedStyle.height,
+        popupPosition = _win$getComputedStyle.position;
       var originLeft = popupElement.style.left;
       var originTop = popupElement.style.top;
       var originRight = popupElement.style.right;
       var originBottom = popupElement.style.bottom;
-      var doc = popupElement.ownerDocument;
-      var win = getWin(popupElement);
 
       // Placement
       var placementInfo = _objectSpread(_objectSpread({}, builtinPlacements[placement]), popupAlign);
 
+      // placeholder element
+      var placeholderElement = doc.createElement('div');
+      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
+      placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
+      placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
+      placeholderElement.style.position = popupPosition;
+      placeholderElement.style.height = "".concat(popupElement.offsetHeight, "px");
+      placeholderElement.style.width = "".concat(popupElement.offsetWidth, "px");
+
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
@@ -142,9 +156,6 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         };
       }
       var popupRect = popupElement.getBoundingClientRect();
-      var _win$getComputedStyle = win.getComputedStyle(popupElement),
-        width = _win$getComputedStyle.width,
-        height = _win$getComputedStyle.height;
       var _doc$documentElement = doc.documentElement,
         clientWidth = _doc$documentElement.clientWidth,
         clientHeight = _doc$documentElement.clientHeight,
@@ -197,6 +208,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
+      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
 
       // Calculate scale
       var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);

package/lib/hooks/useAlign.js

@@ -114,17 +114,31 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   // ========================= Align =========================
   var onAlign = (0, _useEvent.default)(function () {
     if (popupEle && target && open) {
+      var _popupElement$parentE, _popupElement$parentE2;
       var popupElement = popupEle;
+      var doc = popupElement.ownerDocument;
+      var win = (0, _util.getWin)(popupElement);
+      var _win$getComputedStyle = win.getComputedStyle(popupElement),
+        width = _win$getComputedStyle.width,
+        height = _win$getComputedStyle.height,
+        popupPosition = _win$getComputedStyle.position;
       var originLeft = popupElement.style.left;
       var originTop = popupElement.style.top;
       var originRight = popupElement.style.right;
       var originBottom = popupElement.style.bottom;
-      var doc = popupElement.ownerDocument;
-      var win = (0, _util.getWin)(popupElement);
 
       // Placement
       var placementInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, builtinPlacements[placement]), popupAlign);
 
+      // placeholder element
+      var placeholderElement = doc.createElement('div');
+      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
+      placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
+      placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
+      placeholderElement.style.position = popupPosition;
+      placeholderElement.style.height = "".concat(popupElement.offsetHeight, "px");
+      placeholderElement.style.width = "".concat(popupElement.offsetWidth, "px");
+
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
@@ -150,9 +164,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         };
       }
       var popupRect = popupElement.getBoundingClientRect();
-      var _win$getComputedStyle = win.getComputedStyle(popupElement),
-        width = _win$getComputedStyle.width,
-        height = _win$getComputedStyle.height;
       var _doc$documentElement = doc.documentElement,
         clientWidth = _doc$documentElement.clientWidth,
         clientHeight = _doc$documentElement.clientHeight,
@@ -205,6 +216,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
+      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
 
       // Calculate scale
       var _scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);

package/package.json

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