@rc-component/trigger 1.7.0 → 1.7.2

package/es/hooks/useAlign.js

@@ -5,10 +5,7 @@ import isVisible from "rc-util/es/Dom/isVisible";
 import useEvent from "rc-util/es/hooks/useEvent";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import * as React from 'react';
-import { collectScroller, getWin } from "../util";
-function toNum(num) {
-  return Number.isNaN(num) ? 1 : num;
-}
+import { collectScroller, getVisibleArea, getWin, toNum } from "../util";
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -141,26 +138,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         right: clientWidth,
         bottom: clientHeight
       };
-      (scrollerList || []).forEach(function (ele) {
-        if (ele instanceof HTMLBodyElement) {
-          return;
-        }
-        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 eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
-        var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
-        var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
-        var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
-        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);
-      });
+      visibleArea = getVisibleArea(visibleArea, scrollerList);
 
       // Reset back
       popupElement.style.left = originLeft;
@@ -212,14 +190,16 @@ 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);
 

package/es/util.d.ts

@@ -4,4 +4,22 @@ export declare function getAlignPopupClassName(builtinPlacements: BuildInPlaceme
 /** @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;
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
 export declare function collectScroller(ele: HTMLElement): HTMLElement[];
+export declare function toNum(num: number): number;
+export interface VisibleArea {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export declare function getVisibleArea(initArea: VisibleArea, scrollerList?: HTMLElement[]): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/es/util.js

@@ -1,3 +1,4 @@
+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] : [];
@@ -40,6 +41,12 @@ export function getMotion(prefixCls, motion, animation, transitionName) {
 export function getWin(ele) {
   return ele.ownerDocument.defaultView;
 }
+
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
 export function collectScroller(ele) {
   var scrollerList = [];
   var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
@@ -54,4 +61,38 @@ export function collectScroller(ele) {
     current = current.parentElement;
   }
   return scrollerList;
+}
+export function toNum(num) {
+  return Number.isNaN(num) ? 1 : num;
+}
+export function getVisibleArea(initArea, scrollerList) {
+  var visibleArea = _objectSpread({}, initArea);
+  (scrollerList || []).forEach(function (ele) {
+    if (ele instanceof HTMLBodyElement) {
+      return;
+    }
+
+    // Skip if static position which will not affect visible area
+    var _getWin$getComputedSt2 = getWin(ele).getComputedStyle(ele),
+      position = _getWin$getComputedSt2.position;
+    if (position === 'static') {
+      return;
+    }
+    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 eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+    var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+    var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
+    var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
+    visibleArea.left = Math.max(visibleArea.left, eleRect.x);
+    visibleArea.top = Math.max(visibleArea.top, eleRect.y);
+    visibleArea.right = Math.min(visibleArea.right, eleRight);
+    visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+  });
+  return visibleArea;
 }

package/lib/hooks/useAlign.js

@@ -14,9 +14,6 @@ var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var React = _interopRequireWildcard(require("react"));
 var _util = require("../util");
-function toNum(num) {
-  return Number.isNaN(num) ? 1 : num;
-}
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -149,34 +146,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         right: clientWidth,
         bottom: clientHeight
       };
-      (scrollerList || []).forEach(function (ele) {
-        if (ele instanceof HTMLBodyElement) {
-          return;
-        }
-        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 eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
-        var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
-        var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
-        var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
-        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);
-      });
+      visibleArea = (0, _util.getVisibleArea)(visibleArea, scrollerList);
 
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
 
       // Calculate scale
-      var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
-      var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
+      var _scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
+      var _scaleY = (0, _util.toNum)(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
       // No need to align since it's not visible in view
       if (_scaleX === 0 || _scaleY === 0 || (0, _findDOMNode.isDOM)(target) && !(0, _isVisible.default)(target)) {
@@ -220,14 +198,16 @@ 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);
 

package/lib/util.d.ts

@@ -4,4 +4,22 @@ export declare function getAlignPopupClassName(builtinPlacements: BuildInPlaceme
 /** @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;
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
 export declare function collectScroller(ele: HTMLElement): HTMLElement[];
+export declare function toNum(num: number): number;
+export interface VisibleArea {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export declare function getVisibleArea(initArea: VisibleArea, scrollerList?: HTMLElement[]): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/lib/util.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.collectScroller = collectScroller;
 exports.getAlignPopupClassName = getAlignPopupClassName;
 exports.getMotion = getMotion;
+exports.getVisibleArea = getVisibleArea;
 exports.getWin = getWin;
+exports.toNum = toNum;
+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] : [];
@@ -49,6 +53,12 @@ function getMotion(prefixCls, motion, animation, transitionName) {
 function getWin(ele) {
   return ele.ownerDocument.defaultView;
 }
+
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
 function collectScroller(ele) {
   var scrollerList = [];
   var current = ele === null || ele === void 0 ? void 0 : ele.parentElement;
@@ -63,4 +73,38 @@ function collectScroller(ele) {
     current = current.parentElement;
   }
   return scrollerList;
+}
+function toNum(num) {
+  return Number.isNaN(num) ? 1 : num;
+}
+function getVisibleArea(initArea, scrollerList) {
+  var visibleArea = (0, _objectSpread2.default)({}, initArea);
+  (scrollerList || []).forEach(function (ele) {
+    if (ele instanceof HTMLBodyElement) {
+      return;
+    }
+
+    // Skip if static position which will not affect visible area
+    var _getWin$getComputedSt2 = getWin(ele).getComputedStyle(ele),
+      position = _getWin$getComputedSt2.position;
+    if (position === 'static') {
+      return;
+    }
+    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 eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
+    var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
+    var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
+    var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
+    visibleArea.left = Math.max(visibleArea.left, eleRect.x);
+    visibleArea.top = Math.max(visibleArea.top, eleRect.y);
+    visibleArea.right = Math.min(visibleArea.right, eleRight);
+    visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+  });
+  return visibleArea;
 }

package/package.json

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