@rc-component/trigger 1.10.2 → 1.11.0

package/es/Popup/Arrow.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { AlignType, ArrowType } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
     arrow: ArrowType;
 }
-export default function Arrow(props: ArrowProps): JSX.Element;
+export default function Arrow(props: ArrowProps): React.JSX.Element;

package/es/Popup/Mask.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
 export interface MaskProps {
     prefixCls: string;
     open?: boolean;
@@ -7,4 +7,4 @@ export interface MaskProps {
     mask?: boolean;
     motion?: CSSMotionProps;
 }
-export default function Mask(props: MaskProps): JSX.Element;
+export default function Mask(props: MaskProps): React.JSX.Element;

package/es/Popup/Mask.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 export default function Mask(props) {
   var prefixCls = props.prefixCls,
     open = props.open,

package/es/hooks/useAlign.js

@@ -6,6 +6,22 @@ import useEvent from "rc-util/es/hooks/useEvent";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import * as React from 'react';
 import { collectScroller, getVisibleArea, getWin, toNum } from "../util";
+function getUnitOffset(size) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var offsetStr = "".concat(offset);
+  var cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+function getNumberOffset(rect, offset) {
+  var _ref = offset || [],
+    _ref2 = _slicedToArray(_ref, 2),
+    offsetX = _ref2[0],
+    offsetY = _ref2[1];
+  return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
+}
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -167,26 +183,22 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;
-      var _ref = offset || [],
-        _ref2 = _slicedToArray(_ref, 2),
-        _ref2$ = _ref2[0],
-        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
-        _ref2$2 = _ref2[1],
-        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
-      var _ref3 = targetOffset || [],
-        _ref4 = _slicedToArray(_ref3, 2),
-        _ref4$ = _ref4[0],
-        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-      targetRect.x += targetOffsetX;
-      targetRect.y += targetOffsetY;
+      var _getNumberOffset = getNumberOffset(popupRect, offset),
+        _getNumberOffset2 = _slicedToArray(_getNumberOffset, 2),
+        popupOffsetX = _getNumberOffset2[0],
+        popupOffsetY = _getNumberOffset2[1];
+      var _getNumberOffset3 = getNumberOffset(targetRect, targetOffset),
+        _getNumberOffset4 = _slicedToArray(_getNumberOffset3, 2),
+        targetOffsetX = _getNumberOffset4[0],
+        targetOffsetY = _getNumberOffset4[1];
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
 
       // Points
-      var _ref5 = placementInfo.points || [],
-        _ref6 = _slicedToArray(_ref5, 2),
-        popupPoint = _ref6[0],
-        targetPoint = _ref6[1];
+      var _ref3 = placementInfo.points || [],
+        _ref4 = _slicedToArray(_ref3, 2),
+        popupPoint = _ref4[0],
+        targetPoint = _ref4[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);

package/es/interface.d.ts

@@ -5,6 +5,7 @@ export declare type AlignPointTopBottom = 't' | 'b' | 'c';
 export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export declare type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+export declare type OffsetType = number | `${number}%`;
 export interface AlignType {
     /**
      * move point of source node to align with point of target node.
@@ -15,12 +16,12 @@ export interface AlignType {
      * offset source node by offset[0] in x and offset[1] in y.
      * If offset contains percentage string value, it is relative to sourceNode region.
      */
-    offset?: number[];
+    offset?: OffsetType[];
     /**
      * offset target node by offset[0] in x and offset[1] in y.
      * If targetOffset contains percentage string value, it is relative to targetNode region.
      */
-    targetOffset?: number[];
+    targetOffset?: OffsetType[];
     /**
      * If adjustX field is true, will adjust source node in x direction if source node is invisible.
      * If adjustY field is true, will adjust source node in y direction if source node is invisible.

package/lib/Popup/Arrow.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { AlignType, ArrowType } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
     arrow: ArrowType;
 }
-export default function Arrow(props: ArrowProps): JSX.Element;
+export default function Arrow(props: ArrowProps): React.JSX.Element;

package/lib/Popup/Mask.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
 export interface MaskProps {
     prefixCls: string;
     open?: boolean;
@@ -7,4 +7,4 @@ export interface MaskProps {
     mask?: boolean;
     motion?: CSSMotionProps;
 }
-export default function Mask(props: MaskProps): JSX.Element;
+export default function Mask(props: MaskProps): React.JSX.Element;

package/lib/Popup/Mask.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ exports.default = Mask;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var React = _interopRequireWildcard(require("react"));
 function Mask(props) {
   var prefixCls = props.prefixCls,
     open = props.open,

package/lib/hooks/useAlign.js

@@ -14,6 +14,22 @@ 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 getUnitOffset(size) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var offsetStr = "".concat(offset);
+  var cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+function getNumberOffset(rect, offset) {
+  var _ref = offset || [],
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    offsetX = _ref2[0],
+    offsetY = _ref2[1];
+  return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
+}
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -175,26 +191,22 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;
-      var _ref = offset || [],
-        _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        _ref2$ = _ref2[0],
-        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
-        _ref2$2 = _ref2[1],
-        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
-      var _ref3 = targetOffset || [],
-        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        _ref4$ = _ref4[0],
-        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-      targetRect.x += targetOffsetX;
-      targetRect.y += targetOffsetY;
+      var _getNumberOffset = getNumberOffset(popupRect, offset),
+        _getNumberOffset2 = (0, _slicedToArray2.default)(_getNumberOffset, 2),
+        popupOffsetX = _getNumberOffset2[0],
+        popupOffsetY = _getNumberOffset2[1];
+      var _getNumberOffset3 = getNumberOffset(targetRect, targetOffset),
+        _getNumberOffset4 = (0, _slicedToArray2.default)(_getNumberOffset3, 2),
+        targetOffsetX = _getNumberOffset4[0],
+        targetOffsetY = _getNumberOffset4[1];
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
 
       // Points
-      var _ref5 = placementInfo.points || [],
-        _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        popupPoint = _ref6[0],
-        targetPoint = _ref6[1];
+      var _ref3 = placementInfo.points || [],
+        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        popupPoint = _ref4[0],
+        targetPoint = _ref4[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);

package/lib/interface.d.ts

@@ -5,6 +5,7 @@ export declare type AlignPointTopBottom = 't' | 'b' | 'c';
 export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export declare type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+export declare type OffsetType = number | `${number}%`;
 export interface AlignType {
     /**
      * move point of source node to align with point of target node.
@@ -15,12 +16,12 @@ export interface AlignType {
      * offset source node by offset[0] in x and offset[1] in y.
      * If offset contains percentage string value, it is relative to sourceNode region.
      */
-    offset?: number[];
+    offset?: OffsetType[];
     /**
      * offset target node by offset[0] in x and offset[1] in y.
      * If targetOffset contains percentage string value, it is relative to targetNode region.
      */
-    targetOffset?: number[];
+    targetOffset?: OffsetType[];
     /**
      * If adjustX field is true, will adjust source node in x direction if source node is invisible.
      * If adjustY field is true, will adjust source node in y direction if source node is invisible.

package/package.json

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