@rc-component/trigger 1.2.0 → 1.3.0

package/es/hooks/useAlign.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import useEvent from "rc-util/es/hooks/useEvent";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import * as React from 'react';
-import { getWin } from "../util";
+import { collectScroller, getWin } from "../util";
 function toNum(num) {
   return Number.isNaN(num) ? 1 : num;
 }
@@ -68,6 +68,14 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
     offsetInfo = _React$useState2[0],
     setOffsetInfo = _React$useState2[1];
   var alignCountRef = React.useRef(0);
+  var scrollerList = React.useMemo(function () {
+    if (!popupEle) {
+      return [];
+    }
+    return collectScroller(popupEle);
+  }, [popupEle]);
+
+  // ========================= Align =========================
   var onAlign = useEvent(function () {
     if (popupEle && target && open) {
       var popupElement = popupEle;
@@ -108,6 +116,31 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
+      // Get bounding of visible area
+      var visibleArea = {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      (scrollerList || []).forEach(function (ele) {
+        var eleRect = ele.getBoundingClientRect();
+        var eleOutHeight = ele.offsetHeight,
+          eleInnerHeight = ele.clientHeight,
+          eleOutWidth = ele.offsetWidth,
+          eleInnerWidth = ele.clientWidth;
+        var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+        var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
+        var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+        var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+        var eleRight = eleRect.x + eleRect.width - scrollWidth;
+        var eleBottom = eleRect.y + eleRect.height - scrollHeight;
+        visibleArea.left = Math.max(visibleArea.left, eleRect.left);
+        visibleArea.top = Math.max(visibleArea.top, eleRect.top);
+        visibleArea.right = Math.min(visibleArea.right, eleRight);
+        visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+      });
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
@@ -171,13 +204,13 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var needAdjustY = adjustY === true || adjustY >= 0;
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > clientHeight) {
+      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
         nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < 0) {
+      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
         nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
@@ -189,13 +222,13 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
 
       // >>>>> Flip
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > clientWidth) {
+      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
         nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < 0) {
+      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
         nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
@@ -204,36 +237,36 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
-        if (nextPopupX < 0) {
-          nextOffsetX -= nextPopupX;
-          if (targetRect.x + targetRect.width < numShiftX) {
-            nextOffsetX += targetRect.x + targetRect.width - numShiftX;
+        if (nextPopupX < visibleArea.left) {
+          nextOffsetX -= nextPopupX - visibleArea.left;
+          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
           }
         }
 
         // Right
-        if (nextPopupRight > clientWidth) {
-          nextOffsetX -= nextPopupRight - clientWidth;
-          if (targetRect.x > clientWidth - numShiftX) {
-            nextOffsetX += targetRect.x - clientWidth + numShiftX;
+        if (nextPopupRight > visibleArea.right) {
+          nextOffsetX -= nextPopupRight - visibleArea.right;
+          if (targetRect.x > visibleArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.right + numShiftX;
           }
         }
       }
       var numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
-        if (nextPopupY < 0) {
-          nextOffsetY -= nextPopupY;
-          if (targetRect.y + targetRect.height < numShiftY) {
-            nextOffsetY += targetRect.y + targetRect.height - numShiftY;
+        if (nextPopupY < visibleArea.top) {
+          nextOffsetY -= nextPopupY - visibleArea.top;
+          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
           }
         }
 
         // Bottom
-        if (nextPopupBottom > clientHeight) {
-          nextOffsetY -= nextPopupBottom - clientHeight;
-          if (targetRect.y > clientHeight - numShiftY) {
-            nextOffsetY += targetRect.y - clientHeight + numShiftY;
+        if (nextPopupBottom > visibleArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleArea.bottom;
+          if (targetRect.y > visibleArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.bottom + numShiftY;
           }
         }
       }

package/es/hooks/useWatch.js

@@ -1,21 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
-import { getWin } from "../util";
-function collectScroller(ele) {
-  var scrollerList = [];
-  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
-  while (current) {
-    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
-      overflowX = _getWin$getComputedSt.overflowX,
-      overflowY = _getWin$getComputedSt.overflowY;
-    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
-      scrollerList.push(current);
-    }
-    current = current.parentElement;
-  }
-  return scrollerList;
-}
+import { collectScroller, getWin } from "../util";
 export default function useWatch(open, target, popup, onAlign) {
   useLayoutEffect(function () {
     if (open && target && popup) {

package/es/util.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
 /** @deprecated We should not use this if we can refactor all deps */
 export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
 export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
+export declare function collectScroller(ele: HTMLElement): HTMLElement[];

package/es/util.js

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 function isPointsEq() {
   var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -8,10 +7,6 @@ function isPointsEq() {
   }
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
-export function getAlignFromPlacement(builtinPlacements, placementStr, align) {
-  var baseAlign = builtinPlacements[placementStr] || {};
-  return _objectSpread(_objectSpread({}, baseAlign), align);
-}
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   var points = align.points;
   var placements = Object.keys(builtinPlacements);
@@ -44,4 +39,19 @@ export function getMotion(prefixCls, motion, animation, transitionName) {
 }
 export function getWin(ele) {
   return ele.ownerDocument.defaultView;
+}
+export function collectScroller(ele) {
+  var scrollerList = [];
+  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
+  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  while (current) {
+    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
+      overflowX = _getWin$getComputedSt.overflowX,
+      overflowY = _getWin$getComputedSt.overflowY;
+    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
+      scrollerList.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollerList;
 }

package/lib/hooks/useAlign.js

@@ -76,6 +76,14 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
     offsetInfo = _React$useState2[0],
     setOffsetInfo = _React$useState2[1];
   var alignCountRef = React.useRef(0);
+  var scrollerList = React.useMemo(function () {
+    if (!popupEle) {
+      return [];
+    }
+    return (0, _util.collectScroller)(popupEle);
+  }, [popupEle]);
+
+  // ========================= Align =========================
   var onAlign = (0, _useEvent.default)(function () {
     if (popupEle && target && open) {
       var popupElement = popupEle;
@@ -116,6 +124,31 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
+      // Get bounding of visible area
+      var visibleArea = {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      (scrollerList || []).forEach(function (ele) {
+        var eleRect = ele.getBoundingClientRect();
+        var eleOutHeight = ele.offsetHeight,
+          eleInnerHeight = ele.clientHeight,
+          eleOutWidth = ele.offsetWidth,
+          eleInnerWidth = ele.clientWidth;
+        var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+        var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
+        var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+        var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+        var eleRight = eleRect.x + eleRect.width - scrollWidth;
+        var eleBottom = eleRect.y + eleRect.height - scrollHeight;
+        visibleArea.left = Math.max(visibleArea.left, eleRect.left);
+        visibleArea.top = Math.max(visibleArea.top, eleRect.top);
+        visibleArea.right = Math.min(visibleArea.right, eleRight);
+        visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+      });
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
@@ -179,13 +212,13 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var needAdjustY = adjustY === true || adjustY >= 0;
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > clientHeight) {
+      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
         nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < 0) {
+      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
         nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
       }
@@ -197,13 +230,13 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
       // >>>>> Flip
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > clientWidth) {
+      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
         nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < 0) {
+      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
         nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
       }
@@ -212,36 +245,36 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
-        if (nextPopupX < 0) {
-          nextOffsetX -= nextPopupX;
-          if (targetRect.x + targetRect.width < numShiftX) {
-            nextOffsetX += targetRect.x + targetRect.width - numShiftX;
+        if (nextPopupX < visibleArea.left) {
+          nextOffsetX -= nextPopupX - visibleArea.left;
+          if (targetRect.x + targetRect.width < visibleArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.left + targetRect.width - numShiftX;
           }
         }
 
         // Right
-        if (nextPopupRight > clientWidth) {
-          nextOffsetX -= nextPopupRight - clientWidth;
-          if (targetRect.x > clientWidth - numShiftX) {
-            nextOffsetX += targetRect.x - clientWidth + numShiftX;
+        if (nextPopupRight > visibleArea.right) {
+          nextOffsetX -= nextPopupRight - visibleArea.right;
+          if (targetRect.x > visibleArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleArea.right + numShiftX;
           }
         }
       }
       var numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
-        if (nextPopupY < 0) {
-          nextOffsetY -= nextPopupY;
-          if (targetRect.y + targetRect.height < numShiftY) {
-            nextOffsetY += targetRect.y + targetRect.height - numShiftY;
+        if (nextPopupY < visibleArea.top) {
+          nextOffsetY -= nextPopupY - visibleArea.top;
+          if (targetRect.y + targetRect.height < visibleArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.top + targetRect.height - numShiftY;
           }
         }
 
         // Bottom
-        if (nextPopupBottom > clientHeight) {
-          nextOffsetY -= nextPopupBottom - clientHeight;
-          if (targetRect.y > clientHeight - numShiftY) {
-            nextOffsetY += targetRect.y - clientHeight + numShiftY;
+        if (nextPopupBottom > visibleArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleArea.bottom;
+          if (targetRect.y > visibleArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleArea.bottom + numShiftY;
           }
         }
       }

package/lib/hooks/useWatch.js

@@ -8,28 +8,13 @@ exports.default = useWatch;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _util = require("../util");
-function collectScroller(ele) {
-  var scrollerList = [];
-  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
-  var scrollStyle = ['hidden', 'scroll', 'auto'];
-  while (current) {
-    var _getWin$getComputedSt = (0, _util.getWin)(current).getComputedStyle(current),
-      overflowX = _getWin$getComputedSt.overflowX,
-      overflowY = _getWin$getComputedSt.overflowY;
-    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
-      scrollerList.push(current);
-    }
-    current = current.parentElement;
-  }
-  return scrollerList;
-}
 function useWatch(open, target, popup, onAlign) {
   (0, _useLayoutEffect.default)(function () {
     if (open && target && popup) {
       var targetElement = target;
       var popupElement = popup;
-      var targetScrollList = collectScroller(targetElement);
-      var popupScrollList = collectScroller(popupElement);
+      var targetScrollList = (0, _util.collectScroller)(targetElement);
+      var popupScrollList = (0, _util.collectScroller)(popupElement);
       var win = (0, _util.getWin)(popupElement);
       var mergedList = new Set([win].concat((0, _toConsumableArray2.default)(targetScrollList), (0, _toConsumableArray2.default)(popupScrollList)));
       function notifyScroll() {

package/lib/util.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
 export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
 /** @deprecated We should not use this if we can refactor all deps */
 export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
 export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
+export declare function collectScroller(ele: HTMLElement): HTMLElement[];

package/lib/util.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAlignFromPlacement = getAlignFromPlacement;
+exports.collectScroller = collectScroller;
 exports.getAlignPopupClassName = getAlignPopupClassName;
 exports.getMotion = getMotion;
 exports.getWin = getWin;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 function isPointsEq() {
   var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -18,10 +16,6 @@ function isPointsEq() {
   }
   return a1[0] === a2[0] && a1[1] === a2[1];
 }
-function getAlignFromPlacement(builtinPlacements, placementStr, align) {
-  var baseAlign = builtinPlacements[placementStr] || {};
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseAlign), align);
-}
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   var points = align.points;
   var placements = Object.keys(builtinPlacements);
@@ -54,4 +48,19 @@ function getMotion(prefixCls, motion, animation, transitionName) {
 }
 function getWin(ele) {
   return ele.ownerDocument.defaultView;
+}
+function collectScroller(ele) {
+  var scrollerList = [];
+  var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
+  var scrollStyle = ['hidden', 'scroll', 'auto'];
+  while (current) {
+    var _getWin$getComputedSt = getWin(current).getComputedStyle(current),
+      overflowX = _getWin$getComputedSt.overflowX,
+      overflowY = _getWin$getComputedSt.overflowY;
+    if (scrollStyle.includes(overflowX) || scrollStyle.includes(overflowY)) {
+      scrollerList.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollerList;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -65,7 +65,7 @@
     "classnames": "^2.3.2",
     "rc-align": "^4.0.0",
     "rc-motion": "^2.0.0",
-    "rc-resize-observer": "^1.3.0",
+    "rc-resize-observer": "^1.3.1",
     "rc-util": "^5.27.1"
   },
   "peerDependencies": {