fix: correct flip (#349)

* fix: correct flip

* chore: fix lint

* chore: optimize test

* chore: optimize test

* chore: add test

* chore: update

* chore: update

* test: merge test case

* chore: rename

* chore: merge naming

* chore: merge master

* chore: merge master

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: acyza

src/hooks/useAlign.ts

@@ -269,16 +269,19 @@ export default function useAlign(
 
       // ============== Intersection ===============
       // Get area by position. Used for check if flip area is better
-      function getIntersectionVisibleArea(x: number, y: number) {
-        const r = x + popupWidth;
-        const b = y + popupHeight;
+      function getIntersectionVisibleArea(offsetX: number, offsetY: number) {
+        const l = popupRect.x + offsetX;
+        const t = popupRect.y + offsetY;
 
-        const visibleX = Math.max(x, visibleArea.left);
-        const visibleY = Math.max(y, visibleArea.top);
+        const r = l + popupWidth;
+        const b = t + popupHeight;
+
+        const visibleL = Math.max(l, visibleArea.left);
+        const visibleT = Math.max(t, visibleArea.top);
         const visibleR = Math.min(r, visibleArea.right);
         const visibleB = Math.min(b, visibleArea.bottom);
 
-        return (visibleR - visibleX) * (visibleB - visibleY);
+        return (visibleR - visibleL) * (visibleB - visibleT);
       }
 
       const originIntersectionVisibleArea = getIntersectionVisibleArea(

tests/flip.test.tsx

@@ -41,6 +41,13 @@ describe('Trigger.Align', () => {
     height: 1,
   };
 
+  let popupRect = {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+  };
+
   beforeAll(() => {
     spyElementPrototypes(HTMLElement, {
       clientWidth: {
@@ -53,12 +60,7 @@ describe('Trigger.Align', () => {
 
     spyElementPrototypes(HTMLDivElement, {
       getBoundingClientRect() {
-        return {
-          x: 0,
-          y: 0,
-          width: 100,
-          height: 100,
-        };
+        return popupRect;
       },
     });
 
@@ -82,6 +84,12 @@ describe('Trigger.Align', () => {
       width: 1,
       height: 1,
     };
+    popupRect = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    };
     jest.useFakeTimers();
   });
 
@@ -187,4 +195,79 @@ describe('Trigger.Align', () => {
       });
     });
   });
+
+  // `getPopupContainer` sometime makes the popup 0/0 not start at left top.
+  // We need cal the real visible position
+  /*
+
+  *******************
+  *          Target *
+  *          *************
+  *          *   Popup   *
+  *          *************
+  *                 *
+  *******************
+
+  To:
+
+  *******************
+  *          Target *
+  *   ************* *
+  *   *   Popup   * *
+  *   ************* *
+  *                 *
+  *******************
+
+  */
+  it('popup start position not at left top', async () => {
+    spanRect.x = 99;
+    spanRect.y = 0;
+
+    popupRect = {
+      x: 100,
+      y: 1,
+      width: 100,
+      height: 100,
+    };
+
+    render(
+      <Trigger
+        popupVisible
+        popupPlacement="topLeft"
+        builtinPlacements={{
+          topLeft: {
+            points: ['tl', 'bl'],
+            overflow: {
+              adjustX: true,
+              adjustY: true,
+            },
+          },
+          topRight: {
+            points: ['tr', 'br'],
+            overflow: {
+              adjustX: true,
+              adjustY: true,
+            },
+          },
+        }}
+        popup={<strong>trigger</strong>}
+      >
+        <span className="target" />
+      </Trigger>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // Flip
+    expect(
+      document.querySelector('.rc-trigger-popup-placement-topRight'),
+    ).toBeTruthy();
+
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      left: `-100px`, // (left: 100) - (offset: 100) = 0
+      top: `0px`,
+    });
+  });
 });