@rc-component/trigger 1.3.5 → 1.4.0

package/es/hooks/useAlign.js

@@ -84,6 +84,9 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var doc = popupElement.ownerDocument;
       var win = getWin(popupElement);
 
+      // Placement
+      var placementInfo = builtinPlacements[placement] || popupAlign || {};
+
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
@@ -112,12 +115,23 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         height = _win$getComputedStyle.height;
       var _doc$documentElement = doc.documentElement,
         clientWidth = _doc$documentElement.clientWidth,
-        clientHeight = _doc$documentElement.clientHeight;
+        clientHeight = _doc$documentElement.clientHeight,
+        scrollWidth = _doc$documentElement.scrollWidth,
+        scrollHeight = _doc$documentElement.scrollHeight,
+        scrollTop = _doc$documentElement.scrollTop,
+        scrollLeft = _doc$documentElement.scrollLeft;
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
       // Get bounding of visible area
-      var visibleArea = {
+      var visibleArea = placementInfo.htmlRegion === 'scroll' ?
+      // Scroll region should take scrollLeft & scrollTop into account
+      {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
+      } : {
         left: 0,
         top: 0,
         right: clientWidth,
@@ -131,10 +145,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           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;
+        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);
@@ -149,9 +163,6 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
       var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
-      // Placement
-      var placementInfo = popupAlign || builtinPlacements[placement] || {};
-
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;

package/es/index.js

@@ -201,9 +201,12 @@ export function generateTrigger() {
     useLayoutEffect(function () {
       triggerAlign();
     }, [mousePos]);
+
+    // When no builtinPlacements and popupAlign changed
     useLayoutEffect(function () {
-      if (!mergedOpen) return;
-      triggerAlign();
+      if (mergedOpen && !(builtinPlacements !== null && builtinPlacements !== void 0 && builtinPlacements[popupPlacement])) {
+        triggerAlign();
+      }
     }, [JSON.stringify(popupAlign)]);
     var alignedClassName = React.useMemo(function () {
       var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);

package/es/interface.d.ts

@@ -33,6 +33,12 @@ export interface AlignType {
     };
     /** Auto adjust arrow position */
     autoArrow?: boolean;
+    /**
+     * Config visible region check of html node. Default `visible`:
+     *  - `visible`: The visible region of user browser window. Use `clientHeight` for check.
+     *  - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
+     */
+    htmlRegion?: 'visible' | 'scroll';
     /**
      * Whether use css right instead of left to position
      */

package/lib/hooks/useAlign.js

@@ -92,6 +92,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var doc = popupElement.ownerDocument;
       var win = (0, _util.getWin)(popupElement);
 
+      // Placement
+      var placementInfo = builtinPlacements[placement] || popupAlign || {};
+
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
@@ -120,12 +123,23 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         height = _win$getComputedStyle.height;
       var _doc$documentElement = doc.documentElement,
         clientWidth = _doc$documentElement.clientWidth,
-        clientHeight = _doc$documentElement.clientHeight;
+        clientHeight = _doc$documentElement.clientHeight,
+        scrollWidth = _doc$documentElement.scrollWidth,
+        scrollHeight = _doc$documentElement.scrollHeight,
+        scrollTop = _doc$documentElement.scrollTop,
+        scrollLeft = _doc$documentElement.scrollLeft;
       var popupHeight = popupRect.height;
       var popupWidth = popupRect.width;
 
       // Get bounding of visible area
-      var visibleArea = {
+      var visibleArea = placementInfo.htmlRegion === 'scroll' ?
+      // Scroll region should take scrollLeft & scrollTop into account
+      {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
+      } : {
         left: 0,
         top: 0,
         right: clientWidth,
@@ -139,10 +153,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           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;
+        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);
@@ -157,9 +171,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
       var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
-      // Placement
-      var placementInfo = popupAlign || builtinPlacements[placement] || {};
-
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;

package/lib/index.js

@@ -210,9 +210,12 @@ function generateTrigger() {
     (0, _useLayoutEffect.default)(function () {
       triggerAlign();
     }, [mousePos]);
+
+    // When no builtinPlacements and popupAlign changed
     (0, _useLayoutEffect.default)(function () {
-      if (!mergedOpen) return;
-      triggerAlign();
+      if (mergedOpen && !(builtinPlacements !== null && builtinPlacements !== void 0 && builtinPlacements[popupPlacement])) {
+        triggerAlign();
+      }
     }, [JSON.stringify(popupAlign)]);
     var alignedClassName = React.useMemo(function () {
       var baseClassName = (0, _util.getAlignPopupClassName)(builtinPlacements, prefixCls, alignInfo, alignPoint);

package/lib/interface.d.ts

@@ -33,6 +33,12 @@ export interface AlignType {
     };
     /** Auto adjust arrow position */
     autoArrow?: boolean;
+    /**
+     * Config visible region check of html node. Default `visible`:
+     *  - `visible`: The visible region of user browser window. Use `clientHeight` for check.
+     *  - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
+     */
+    htmlRegion?: 'visible' | 'scroll';
     /**
      * Whether use css right instead of left to position
      */

package/package.json

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