feat: offset support ptg and fix targetOffset logic (#378)

* feat: support ptg

* test: add test case

* chore: add react

Author: zombieJ

src/Popup/Mask.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import type { CSSMotionProps } from 'rc-motion';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 
 export interface MaskProps {
   prefixCls: string;

src/hooks/useAlign.ts

@@ -8,13 +8,35 @@ import type {
   AlignPointLeftRight,
   AlignPointTopBottom,
   AlignType,
+  OffsetType,
 } from '../interface';
 import { collectScroller, getVisibleArea, getWin, toNum } from '../util';
 
 type Rect = Record<'x' | 'y' | 'width' | 'height', number>;
 
 type Points = [topBottom: AlignPointTopBottom, leftRight: AlignPointLeftRight];
 
+function getUnitOffset(size: number, offset: OffsetType = 0) {
+  const offsetStr = `${offset}`;
+  const cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+
+function getNumberOffset(
+  rect: { width: number; height: number },
+  offset?: OffsetType[],
+) {
+  const [offsetX, offsetY] = offset || [];
+
+  return [
+    getUnitOffset(rect.width, offsetX),
+    getUnitOffset(rect.height, offsetY),
+  ];
+}
+
 function splitPoints(points: string = ''): Points {
   return [points[0] as any, points[1] as any];
 }
@@ -229,11 +251,14 @@ export default function useAlign(
 
       // Offset
       const { offset, targetOffset } = placementInfo;
-      const [popupOffsetX = 0, popupOffsetY = 0] = offset || [];
-      const [targetOffsetX = 0, targetOffsetY = 0] = targetOffset || [];
+      const [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
+      const [targetOffsetX, targetOffsetY] = getNumberOffset(
+        targetRect,
+        targetOffset,
+      );
 
-      targetRect.x += targetOffsetX;
-      targetRect.y += targetOffsetY;
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
 
       // Points
       const [popupPoint, targetPoint] = placementInfo.points || [];

src/interface.ts

@@ -20,6 +20,8 @@ export type AlignPointLeftRight = 'l' | 'r' | 'c';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
 
+export type OffsetType = number | `${number}%`;
+
 export interface AlignType {
   /**
    * move point of source node to align with point of target node.
@@ -30,12 +32,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.

tests/align.test.tsx

@@ -194,7 +194,7 @@ describe('Trigger.Align', () => {
         }}
         popupPlacement="top"
         popupAlign={{
-          targetOffset: [903, 1128],
+          targetOffset: [-903, -1128],
         }}
       >
         <svg />
@@ -210,4 +210,27 @@ describe('Trigger.Align', () => {
       top: `978px`,
     });
   });
+
+  it('targetOffset support ptg', async () => {
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{
+          targetOffset: ['50%', '-50%'],
+        }}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    // Correct this if I miss understand the value calculation
+    // from https://github.com/yiminghe/dom-align/blob/master/src/getElFuturePos.js
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      left: `-50px`,
+      top: `50px`,
+    });
+  });
 });

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "esnext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "jsx": "preserve",
+    "jsx": "react",
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,