fix: Align flip should both work (#599)

* fix: reverse should be OK

* test: add test case

Author: zombieJ

src/hooks/useAlign.ts

@@ -69,22 +69,21 @@ function getAlignPoint(rect: Rect, points: Points) {
   return { x, y };
 }
 
-function reversePoints(points: Points, index: number): string {
+function reversePoints(points: Points, index: number): Points {
   const reverseMap = {
     t: 'b',
     b: 't',
     l: 'r',
     r: 'l',
   };
 
-  return points
-    .map((point, i) => {
-      if (i === index) {
-        return reverseMap[point] || 'c';
-      }
-      return point;
-    })
-    .join('');
+  const clone = [...points] as Points;
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+
+function flatPoints(points: Points): string {
+  return points.join('');
 }
 
 export default function useAlign(
@@ -340,6 +339,8 @@ export default function useAlign(
         ...placementInfo,
       };
 
+      let nextPoints = [popupPoints, targetPoints];
+
       // Next Offset
       let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
       let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
@@ -450,9 +451,9 @@ export default function useAlign(
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
 
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 0),
-            reversePoints(targetPoints, 0),
+          nextPoints = [
+            reversePoints(nextPoints[0], 0),
+            reversePoints(nextPoints[1], 0),
           ];
         } else {
           prevFlipRef.current.bt = false;
@@ -496,9 +497,9 @@ export default function useAlign(
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
 
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 0),
-            reversePoints(targetPoints, 0),
+          nextPoints = [
+            reversePoints(nextPoints[0], 0),
+            reversePoints(nextPoints[1], 0),
           ];
         } else {
           prevFlipRef.current.tb = false;
@@ -549,9 +550,9 @@ export default function useAlign(
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
 
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 1),
-            reversePoints(targetPoints, 1),
+          nextPoints = [
+            reversePoints(nextPoints[0], 1),
+            reversePoints(nextPoints[1], 1),
           ];
         } else {
           prevFlipRef.current.rl = false;
@@ -595,15 +596,20 @@ export default function useAlign(
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
 
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 1),
-            reversePoints(targetPoints, 1),
+          nextPoints = [
+            reversePoints(nextPoints[0], 1),
+            reversePoints(nextPoints[1], 1),
           ];
         } else {
           prevFlipRef.current.lr = false;
         }
       }
 
+      nextAlignInfo.points = [
+        flatPoints(nextPoints[0]),
+        flatPoints(nextPoints[1]),
+      ];
+
       // ============================ Shift ============================
       syncNextPopupPosition();
 

src/util.ts

@@ -1,17 +1,16 @@
-import type {
-  AlignType,
-  BuildInPlacements,
-} from './interface';
+import type { AlignType, BuildInPlacements } from './interface';
 
 function isPointsEq(
   a1: string[] = [],
   a2: string[] = [],
   isAlignPoint: boolean,
 ): boolean {
+  const getVal = (a: string[], index: number) => a[index] || '';
+
   if (isAlignPoint) {
-    return a1[0] === a2[0];
+    return getVal(a1, 0) === getVal(a2, 0);
   }
-  return a1[0] === a2[0] && a1[1] === a2[1];
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 
 export function getAlignPopupClassName(

tests/align.test.tsx

@@ -296,4 +296,41 @@ describe('Trigger.Align', () => {
       top: `56px`,
     });
   });
+
+  it('both adjustX and adjustY should get correct points', async () => {
+    // Set target position to top left corner to force flip to bottom right
+    rectX = 0;
+    rectY = 0;
+    rectWidth = 100;
+    rectHeight = 100;
+
+    const onPopupAlign = jest.fn();
+
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{
+          points: ['tl', 'bl'],
+          overflow: {
+            adjustX: true,
+            adjustY: true,
+          },
+        }}
+        onPopupAlign={onPopupAlign}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    // Check that the points have been flipped correctly
+    expect(onPopupAlign).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        points: ['br', 'tr'],
+      }),
+    );
+  });
 });