diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
index 1bb3749a..c8a50991 100644
--- a/src/hooks/useAlign.ts
+++ b/src/hooks/useAlign.ts
@@ -69,7 +69,7 @@ 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',
@@ -77,14 +77,13 @@ function reversePoints(points: Points, index: number): string {
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();
diff --git a/src/util.ts b/src/util.ts
index cc13eb60..ba05902a 100644
--- a/src/util.ts
+++ b/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(
diff --git a/tests/align.test.tsx b/tests/align.test.tsx
index 1ef62f02..858f312b 100644
--- a/tests/align.test.tsx
+++ b/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(
+