@rc-component/trigger - npm Package Compare versions

Comparing version 1.12.1 to 1.13.0

es/hooks/useAlign.js

@@ -155,10 +155,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
       // Get bounding of visible area
-      var visibleArea = placementInfo.htmlRegion === 'scroll' ?
-      // Scroll region should take scrollLeft & scrollTop into account
-      {
-        left: -scrollLeft,
-        top: -scrollTop,
-        right: scrollWidth - scrollLeft,
-        bottom: scrollHeight - scrollTop
-      } : {
+      var visibleRegion = {
         left: 0,
@@ -169,4 +162,23 @@ top: 0,
       };
-      visibleArea = getVisibleArea(visibleArea, scrollerList);
+      var scrollRegion = {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
+      };
+      var htmlRegion = placementInfo.htmlRegion;
+      var VISIBLE = 'visible';
+      var VISIBLE_FIRST = 'visibleFirst';
+      if (htmlRegion !== 'scroll' && htmlRegion !== VISIBLE_FIRST) {
+        htmlRegion = VISIBLE;
+      }
+      var isVisibleFirst = htmlRegion === VISIBLE_FIRST;
+      var scrollRegionArea = getVisibleArea(scrollRegion, scrollerList);
+      var visibleRegionArea = getVisibleArea(visibleRegion, scrollerList);
+      var visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 
+      // When set to `visibleFirst`,
+      // the check `adjust` logic will use `visibleRegion` for check first.
+      var adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
+
       // Reset back
@@ -219,2 +231,3 @@ popupElement.style.left = originLeft;
       function getIntersectionVisibleArea(offsetX, offsetY) {
+        var area = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : visibleArea;
         var l = popupRect.x + offsetX;
@@ -224,6 +237,6 @@ var t = popupRect.y + offsetY;
         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);
+        var visibleL = Math.max(l, area.left);
+        var visibleT = Math.max(t, area.top);
+        var visibleR = Math.min(r, area.right);
+        var visibleB = Math.min(b, area.bottom);
         return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
@@ -233,2 +246,5 @@ }
 
+      // As `visibleFirst`, we prepare this for check
+      var originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
+
       // ========================== Overflow ===========================
@@ -269,3 +285,3 @@ var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
+      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.current.bt)) {
         var tmpNextOffsetY = nextOffsetY;
@@ -277,3 +293,9 @@ if (sameTB) {
         }
-        if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
+        var newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        var newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.bt = true;
@@ -288,3 +310,3 @@ nextOffsetY = tmpNextOffsetY;
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
+      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.current.tb)) {
         var _tmpNextOffsetY = nextOffsetY;
@@ -296,3 +318,9 @@ if (sameTB) {
         }
-        if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY);
+        var _newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea > originIntersectionVisibleArea || _newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.tb = true;
@@ -313,3 +341,3 @@ nextOffsetY = _tmpNextOffsetY;
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
+      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.current.rl)) {
         var tmpNextOffsetX = nextOffsetX;
@@ -321,3 +349,9 @@ if (sameLR) {
         }
-        if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        var _newVisibleRecommendArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea2 > originIntersectionVisibleArea || _newVisibleArea2 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
           prevFlipRef.current.rl = true;
@@ -332,3 +366,3 @@ nextOffsetX = tmpNextOffsetX;
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
+      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.current.lr)) {
         var _tmpNextOffsetX = nextOffsetX;
@@ -340,3 +374,9 @@ if (sameLR) {
         }
-        if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY);
+        var _newVisibleRecommendArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea3 > originIntersectionVisibleArea || _newVisibleArea3 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
           prevFlipRef.current.lr = true;
@@ -343,0 +383,0 @@ nextOffsetX = _tmpNextOffsetX;

es/index.js

@@ -226,3 +226,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
       triggerAlign();
-    }, [mousePos]);
+    }, [mousePos, popupPlacement]);
 
@@ -229,0 +229,0 @@ // When no builtinPlacements and popupAlign changed

es/interface.d.ts

@@ -39,6 +39,13 @@ /// <reference types="react" />
      * 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.
+     *  - `visible`:
+     *    The visible region of user browser window.
+     *    Use `clientHeight` for check.
+     *    If `visible` region not satisfy, fallback to `scroll`.
+     *  - `scroll`:
+     *    The whole region of the html scroll area.
+     *    Use `scrollHeight` for check.
+     *  - `visibleFirst`:
+     *    Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
      */
-    htmlRegion?: 'visible' | 'scroll';
+    htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
     /**
@@ -45,0 +52,0 @@ * Whether use css right instead of left to position

lib/hooks/useAlign.js

@@ -163,10 +163,3 @@ "use strict";
       // Get bounding of visible area
-      var visibleArea = placementInfo.htmlRegion === 'scroll' ?
-      // Scroll region should take scrollLeft & scrollTop into account
-      {
-        left: -scrollLeft,
-        top: -scrollTop,
-        right: scrollWidth - scrollLeft,
-        bottom: scrollHeight - scrollTop
-      } : {
+      var visibleRegion = {
         left: 0,
@@ -177,4 +170,23 @@ top: 0,
       };
-      visibleArea = (0, _util.getVisibleArea)(visibleArea, scrollerList);
+      var scrollRegion = {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
+      };
+      var htmlRegion = placementInfo.htmlRegion;
+      var VISIBLE = 'visible';
+      var VISIBLE_FIRST = 'visibleFirst';
+      if (htmlRegion !== 'scroll' && htmlRegion !== VISIBLE_FIRST) {
+        htmlRegion = VISIBLE;
+      }
+      var isVisibleFirst = htmlRegion === VISIBLE_FIRST;
+      var scrollRegionArea = (0, _util.getVisibleArea)(scrollRegion, scrollerList);
+      var visibleRegionArea = (0, _util.getVisibleArea)(visibleRegion, scrollerList);
+      var visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 
+      // When set to `visibleFirst`,
+      // the check `adjust` logic will use `visibleRegion` for check first.
+      var adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
+
       // Reset back
@@ -227,2 +239,3 @@ popupElement.style.left = originLeft;
       function getIntersectionVisibleArea(offsetX, offsetY) {
+        var area = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : visibleArea;
         var l = popupRect.x + offsetX;
@@ -232,6 +245,6 @@ var t = popupRect.y + offsetY;
         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);
+        var visibleL = Math.max(l, area.left);
+        var visibleT = Math.max(t, area.top);
+        var visibleR = Math.min(r, area.right);
+        var visibleB = Math.min(b, area.bottom);
         return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
@@ -241,2 +254,5 @@ }
 
+      // As `visibleFirst`, we prepare this for check
+      var originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
+
       // ========================== Overflow ===========================
@@ -277,3 +293,3 @@ var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
+      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.current.bt)) {
         var tmpNextOffsetY = nextOffsetY;
@@ -285,3 +301,9 @@ if (sameTB) {
         }
-        if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
+        var newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        var newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.bt = true;
@@ -296,3 +318,3 @@ nextOffsetY = tmpNextOffsetY;
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
+      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.current.tb)) {
         var _tmpNextOffsetY = nextOffsetY;
@@ -304,3 +326,9 @@ if (sameTB) {
         }
-        if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY);
+        var _newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea > originIntersectionVisibleArea || _newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
           prevFlipRef.current.tb = true;
@@ -321,3 +349,3 @@ nextOffsetY = _tmpNextOffsetY;
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
+      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.current.rl)) {
         var tmpNextOffsetX = nextOffsetX;
@@ -329,3 +357,9 @@ if (sameLR) {
         }
-        if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        var _newVisibleRecommendArea2 = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea2 > originIntersectionVisibleArea || _newVisibleArea2 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
           prevFlipRef.current.rl = true;
@@ -340,3 +374,3 @@ nextOffsetX = tmpNextOffsetX;
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
+      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.current.lr)) {
         var _tmpNextOffsetX = nextOffsetX;
@@ -348,3 +382,9 @@ if (sameLR) {
         }
-        if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+        var _newVisibleArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY);
+        var _newVisibleRecommendArea3 = getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        _newVisibleArea3 > originIntersectionVisibleArea || _newVisibleArea3 === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
           prevFlipRef.current.lr = true;
@@ -351,0 +391,0 @@ nextOffsetX = _tmpNextOffsetX;

lib/index.js

@@ -235,3 +235,3 @@ "use strict";
       triggerAlign();
-    }, [mousePos]);
+    }, [mousePos, popupPlacement]);
 
@@ -238,0 +238,0 @@ // When no builtinPlacements and popupAlign changed

lib/interface.d.ts

@@ -39,6 +39,13 @@ /// <reference types="react" />
      * 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.
+     *  - `visible`:
+     *    The visible region of user browser window.
+     *    Use `clientHeight` for check.
+     *    If `visible` region not satisfy, fallback to `scroll`.
+     *  - `scroll`:
+     *    The whole region of the html scroll area.
+     *    Use `scrollHeight` for check.
+     *  - `visibleFirst`:
+     *    Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
      */
-    htmlRegion?: 'visible' | 'scroll';
+    htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
     /**
@@ -45,0 +52,0 @@ * Whether use css right instead of left to position

package.json

 {
   "name": "@rc-component/trigger",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "base abstract trigger component for react",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -12,18 +12,16 @@ # @rc-component/trigger
 
-[npm-image]: http://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/@rc-component/trigger
-[github-actions-image]: https://github.com/react-component/trigger/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/trigger/actions
-[circleci-image]: https://img.shields.io/circleci/react-component/trigger/master?style=flat-square
-[circleci-url]: https://circleci.com/gh/react-component/trigger
-[codecov-image]: https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square
-[codecov-url]: https://app.codecov.io/gh/react-component/trigger
-[david-url]: https://david-dm.org/react-component/trigger
-[david-image]: https://david-dm.org/react-component/trigger/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/trigger?type=dev
-[david-dev-image]: https://david-dm.org/react-component/trigger/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/@rc-component/trigger.svg?style=flat-square
-[download-url]: https://npmjs.org/package/@rc-component/trigger
-[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/trigger
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/trigger
+[npm-image]: http://img.shields.io/npm/v/rc-checkbox.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-checkbox
+[github-actions-image]: https://github.com/react-component/checkbox/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/checkbox/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/checkbox/branch/master
+[david-url]: https://david-dm.org/react-component/checkbox
+[david-image]: https://david-dm.org/react-component/checkbox/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/checkbox?type=dev
+[david-dev-image]: https://david-dm.org/react-component/checkbox/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/rc-checkbox.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-checkbox
+[bundlephobia-url]: https://bundlephobia.com/result?p=rc-checkbox
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-checkbox
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
@@ -30,0 +28,0 @@ [dumi-url]: https://github.com/umijs/dumi

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

165366

increased by3.18%

Lines of code

3654

increased by2.53%

Worsened metrics

Number of lines in readme file

259

decreased by-0.77%

No dependency changes