@rc-component/trigger - npm Package Compare versions

Comparing version 1.13.6 to 1.14.0

es/hooks/useAlign.d.ts

@@ -7,2 +7,4 @@ import type { TriggerProps } from '..';
     offsetY: number,
+    offsetR: number,
+    offsetB: number,
     arrowX: number,
@@ -9,0 +11,0 @@ arrowY: number,

es/hooks/useAlign.js

@@ -76,2 +76,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
       offsetY: 0,
+      offsetR: 0,
+      offsetB: 0,
       arrowX: 0,
@@ -111,2 +113,4 @@ arrowY: 0,
       var originTop = popupElement.style.top;
+      var originRight = popupElement.style.right;
+      var originBottom = popupElement.style.bottom;
       var doc = popupElement.ownerDocument;
@@ -121,2 +125,4 @@ var win = getWin(popupElement);
       popupElement.style.top = '0';
+      popupElement.style.right = 'auto';
+      popupElement.style.bottom = 'auto';
 
@@ -185,5 +191,14 @@ // Calculate align style, we should consider `transform` case
 
+      // Record right & bottom align data
+      popupElement.style.left = 'auto';
+      popupElement.style.top = 'auto';
+      popupElement.style.right = '0';
+      popupElement.style.bottom = '0';
+      var popupMirrorRect = popupElement.getBoundingClientRect();
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
+      popupElement.style.right = originRight;
+      popupElement.style.bottom = originBottom;
 
@@ -439,2 +454,6 @@ // Calculate scale
       onPopupAlign === null || onPopupAlign === void 0 ? void 0 : onPopupAlign(popupEle, nextAlignInfo);
+
+      // Additional calculate right & bottom position
+      var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
       setOffsetInfo({
@@ -444,2 +463,4 @@ ready: true,
         offsetY: nextOffsetY / _scaleY,
+        offsetR: offsetX4Right / _scaleX,
+        offsetB: offsetY4Bottom / _scaleY,
         arrowX: nextArrowX / _scaleX,
@@ -479,3 +500,3 @@ arrowY: nextArrowY / _scaleY,
   }, [open]);
-  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
+  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.offsetR, offsetInfo.offsetB, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
 }

es/index.js

@@ -23,2 +23,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { getAlignPopupClassName, getMotion } from "./util";
+
+// Removed Props List
+// Seems this can be auto
+// getDocument?: (element?: HTMLElement) => Document;
+// New version will not wrap popup with `rc-trigger-popup-content` when multiple children
 export function generateTrigger() {
@@ -208,12 +213,14 @@ var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Portal;
     var _useAlign = useAlign(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
-      _useAlign2 = _slicedToArray(_useAlign, 9),
+      _useAlign2 = _slicedToArray(_useAlign, 11),
       ready = _useAlign2[0],
       offsetX = _useAlign2[1],
       offsetY = _useAlign2[2],
-      arrowX = _useAlign2[3],
-      arrowY = _useAlign2[4],
-      scaleX = _useAlign2[5],
-      scaleY = _useAlign2[6],
-      alignInfo = _useAlign2[7],
-      onAlign = _useAlign2[8];
+      offsetR = _useAlign2[3],
+      offsetB = _useAlign2[4],
+      arrowX = _useAlign2[5],
+      arrowY = _useAlign2[6],
+      scaleX = _useAlign2[7],
+      scaleY = _useAlign2[8],
+      alignInfo = _useAlign2[9],
+      onAlign = _useAlign2[10];
     var triggerAlign = useEvent(function () {
@@ -467,2 +474,4 @@ if (!inMotion) {
       offsetY: offsetY,
+      offsetR: offsetR,
+      offsetB: offsetB,
       onAlign: triggerAlign
@@ -469,0 +478,0 @@ // Stretch

es/interface.d.ts

@@ -16,2 +16,11 @@ /// <reference types="react" />
     /**
+     * @private Do not use in your production code
+     */
+    _experimental?: {
+        /**
+         * @private Do not use in your production code. Auto adjust align logic
+         */
+        dynamicInset?: boolean;
+    };
+    /**
      * offset source node by offset[0] in x and offset[1] in y.
@@ -18,0 +27,0 @@ * If offset contains percentage string value, it is relative to sourceNode region.

es/Popup/index.d.ts

@@ -32,2 +32,4 @@ import type { CSSMotionProps } from 'rc-motion';
     offsetY: number;
+    offsetR: number;
+    offsetB: number;
     onAlign: VoidFunction;
@@ -34,0 +36,0 @@ onPrepare: () => Promise<void>;

es/Popup/index.js

@@ -39,2 +39,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     offsetY = props.offsetY,
+    offsetR = props.offsetR,
+    offsetB = props.offsetB,
     onAlign = props.onAlign,
@@ -70,10 +72,33 @@ onPrepare = props.onPrepare,
   // >>>>> Offset
-  var offsetStyle = ready || !open ? {
-    left: offsetX,
-    top: offsetY
-  } : {
+  var AUTO = 'auto';
+  var offsetStyle = {
     left: '-1000vw',
-    top: '-1000vh'
+    top: '-1000vh',
+    right: AUTO,
+    bottom: AUTO
   };
 
+  // Set align style
+  if (ready || !open) {
+    var points = align.points,
+      _experimental = align._experimental;
+    var dynamicInset = _experimental === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset;
+    var alignRight = dynamicInset && points[0][1] === 'r';
+    var alignBottom = dynamicInset && points[0][0] === 'b';
+    if (alignRight) {
+      offsetStyle.right = offsetR;
+      offsetStyle.left = AUTO;
+    } else {
+      offsetStyle.left = offsetX;
+      offsetStyle.right = AUTO;
+    }
+    if (alignBottom) {
+      offsetStyle.bottom = offsetB;
+      offsetStyle.top = AUTO;
+    } else {
+      offsetStyle.top = offsetY;
+      offsetStyle.bottom = AUTO;
+    }
+  }
+
   // >>>>> Misc
@@ -80,0 +105,0 @@ var miscStyle = {};

lib/hooks/useAlign.d.ts

@@ -7,2 +7,4 @@ import type { TriggerProps } from '..';
     offsetY: number,
+    offsetR: number,
+    offsetB: number,
     arrowX: number,
@@ -9,0 +11,0 @@ arrowY: number,

lib/hooks/useAlign.js

@@ -84,2 +84,4 @@ "use strict";
       offsetY: 0,
+      offsetR: 0,
+      offsetB: 0,
       arrowX: 0,
@@ -119,2 +121,4 @@ arrowY: 0,
       var originTop = popupElement.style.top;
+      var originRight = popupElement.style.right;
+      var originBottom = popupElement.style.bottom;
       var doc = popupElement.ownerDocument;
@@ -129,2 +133,4 @@ var win = (0, _util.getWin)(popupElement);
       popupElement.style.top = '0';
+      popupElement.style.right = 'auto';
+      popupElement.style.bottom = 'auto';
 
@@ -193,5 +199,14 @@ // Calculate align style, we should consider `transform` case
 
+      // Record right & bottom align data
+      popupElement.style.left = 'auto';
+      popupElement.style.top = 'auto';
+      popupElement.style.right = '0';
+      popupElement.style.bottom = '0';
+      var popupMirrorRect = popupElement.getBoundingClientRect();
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
+      popupElement.style.right = originRight;
+      popupElement.style.bottom = originBottom;
 
@@ -447,2 +462,6 @@ // Calculate scale
       onPopupAlign === null || onPopupAlign === void 0 ? void 0 : onPopupAlign(popupEle, nextAlignInfo);
+
+      // Additional calculate right & bottom position
+      var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
       setOffsetInfo({
@@ -452,2 +471,4 @@ ready: true,
         offsetY: nextOffsetY / _scaleY,
+        offsetR: offsetX4Right / _scaleX,
+        offsetB: offsetY4Bottom / _scaleY,
         arrowX: nextArrowX / _scaleX,
@@ -487,3 +508,3 @@ arrowY: nextArrowY / _scaleY,
   }, [open]);
-  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
+  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.offsetR, offsetInfo.offsetB, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
 }

lib/index.js

@@ -32,2 +32,8 @@ "use strict";
 var _excluded = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "alignPoint", "onPopupClick", "onPopupAlign", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
+// Removed Props List
+// Seems this can be auto
+// getDocument?: (element?: HTMLElement) => Document;
+
+// New version will not wrap popup with `rc-trigger-popup-content` when multiple children
+
 function generateTrigger() {
@@ -217,12 +223,14 @@ var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _portal.default;
     var _useAlign = (0, _useAlign3.default)(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
-      _useAlign2 = (0, _slicedToArray2.default)(_useAlign, 9),
+      _useAlign2 = (0, _slicedToArray2.default)(_useAlign, 11),
       ready = _useAlign2[0],
       offsetX = _useAlign2[1],
       offsetY = _useAlign2[2],
-      arrowX = _useAlign2[3],
-      arrowY = _useAlign2[4],
-      scaleX = _useAlign2[5],
-      scaleY = _useAlign2[6],
-      alignInfo = _useAlign2[7],
-      onAlign = _useAlign2[8];
+      offsetR = _useAlign2[3],
+      offsetB = _useAlign2[4],
+      arrowX = _useAlign2[5],
+      arrowY = _useAlign2[6],
+      scaleX = _useAlign2[7],
+      scaleY = _useAlign2[8],
+      alignInfo = _useAlign2[9],
+      onAlign = _useAlign2[10];
     var triggerAlign = (0, _useEvent.default)(function () {
@@ -476,2 +484,4 @@ if (!inMotion) {
       offsetY: offsetY,
+      offsetR: offsetR,
+      offsetB: offsetB,
       onAlign: triggerAlign
@@ -478,0 +488,0 @@ // Stretch

lib/interface.d.ts

@@ -16,2 +16,11 @@ /// <reference types="react" />
     /**
+     * @private Do not use in your production code
+     */
+    _experimental?: {
+        /**
+         * @private Do not use in your production code. Auto adjust align logic
+         */
+        dynamicInset?: boolean;
+    };
+    /**
      * offset source node by offset[0] in x and offset[1] in y.
@@ -18,0 +27,0 @@ * If offset contains percentage string value, it is relative to sourceNode region.

lib/Popup/index.d.ts

@@ -32,2 +32,4 @@ import type { CSSMotionProps } from 'rc-motion';
     offsetY: number;
+    offsetR: number;
+    offsetB: number;
     onAlign: VoidFunction;
@@ -34,0 +36,0 @@ onPrepare: () => Promise<void>;

lib/Popup/index.js

@@ -47,2 +47,4 @@ "use strict";
     offsetY = props.offsetY,
+    offsetR = props.offsetR,
+    offsetB = props.offsetB,
     onAlign = props.onAlign,
@@ -78,10 +80,33 @@ onPrepare = props.onPrepare,
   // >>>>> Offset
-  var offsetStyle = ready || !open ? {
-    left: offsetX,
-    top: offsetY
-  } : {
+  var AUTO = 'auto';
+  var offsetStyle = {
     left: '-1000vw',
-    top: '-1000vh'
+    top: '-1000vh',
+    right: AUTO,
+    bottom: AUTO
   };
 
+  // Set align style
+  if (ready || !open) {
+    var points = align.points,
+      _experimental = align._experimental;
+    var dynamicInset = _experimental === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset;
+    var alignRight = dynamicInset && points[0][1] === 'r';
+    var alignBottom = dynamicInset && points[0][0] === 'b';
+    if (alignRight) {
+      offsetStyle.right = offsetR;
+      offsetStyle.left = AUTO;
+    } else {
+      offsetStyle.left = offsetX;
+      offsetStyle.right = AUTO;
+    }
+    if (alignBottom) {
+      offsetStyle.bottom = offsetB;
+      offsetStyle.top = AUTO;
+    } else {
+      offsetStyle.top = offsetY;
+      offsetStyle.bottom = AUTO;
+    }
+  }
+
   // >>>>> Misc
@@ -88,0 +113,0 @@ var miscStyle = {};

package.json

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

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

174448

increased by2.75%

Lines of code

3861

increased by3.43%

No dependency changes