feat: Stable popup align (#362)

* docs: update demo

* fix: flip memo

* test: add test case

Author: zombieJ

docs/examples/inside.tsx

@@ -70,9 +70,11 @@ export const builtinPlacements = {
   },
 };
 
-const popupPlacement = 'leftBottom';
+const popupPlacement = 'top';
 
 export default () => {
+  const [popupHeight, setPopupHeight] = React.useState(60);
+
   const containerRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
@@ -81,59 +83,70 @@ export default () => {
   }, []);
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        inset: 64,
-        overflow: `auto`,
-        border: '1px solid red',
-      }}
-      ref={containerRef}
-    >
+    <>
+      <div style={{ position: 'fixed', top: 0, left: 0 }}>
+        <button
+          onClick={() => {
+            setPopupHeight(popupHeight === 60 ? 200 : 60);
+          }}
+        >
+          Popup Height: {popupHeight}
+        </button>
+      </div>
       <div
         style={{
-          width: `300vw`,
-          height: `300vh`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          position: 'absolute',
+          inset: 64,
+          overflow: `auto`,
+          border: '1px solid red',
         }}
+        ref={containerRef}
       >
-        <Trigger
-          arrow
-          popup={
-            <div
+        <div
+          style={{
+            width: `300vw`,
+            height: `300vh`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Trigger
+            arrow
+            popup={
+              <div
+                style={{
+                  background: 'yellow',
+                  border: '1px solid blue',
+                  width: 200,
+                  height: popupHeight,
+                  opacity: 0.9,
+                }}
+              >
+                Popup
+              </div>
+            }
+            popupVisible
+            getPopupContainer={() => containerRef.current}
+            popupPlacement={popupPlacement}
+            builtinPlacements={builtinPlacements}
+          >
+            <span
               style={{
-                background: 'yellow',
-                border: '1px solid blue',
-                width: 200,
-                height: 60,
+                display: 'inline-block',
+                background: 'green',
+                color: '#FFF',
+                paddingBlock: 30,
+                paddingInline: 70,
                 opacity: 0.9,
+                transform: 'scale(0.6)',
               }}
             >
-              Popup
-            </div>
-          }
-          popupVisible
-          getPopupContainer={() => containerRef.current}
-          popupPlacement={popupPlacement}
-          builtinPlacements={builtinPlacements}
-        >
-          <span
-            style={{
-              display: 'inline-block',
-              background: 'green',
-              color: '#FFF',
-              paddingBlock: 30,
-              paddingInline: 70,
-              opacity: 0.9,
-              transform: 'scale(0.6)',
-            }}
-          >
-            Target
-          </span>
-        </Trigger>
+              Target
+            </span>
+          </Trigger>
+        </div>
       </div>
-    </div>
+    </>
   );
 };

src/hooks/useAlign.ts

@@ -113,6 +113,24 @@ export default function useAlign(
     return collectScroller(popupEle);
   }, [popupEle]);
 
+  // ========================= Flip ==========================
+  // We will memo flip info.
+  // If size change to make flip, it will memo the flip info and use it in next align.
+  const prevFlipRef = React.useRef<{
+    tb?: boolean;
+    bt?: boolean;
+    lr?: boolean;
+    rl?: boolean;
+  }>({});
+
+  const resetFlipCache = () => {
+    prevFlipRef.current = {};
+  };
+
+  if (!open) {
+    resetFlipCache();
+  }
+
   // ========================= Align =========================
   const onAlign = useEvent(() => {
     if (popupEle && target && open) {
@@ -295,7 +313,7 @@ export default function useAlign(
       if (
         needAdjustY &&
         popupPoints[0] === 't' &&
-        nextPopupBottom > visibleArea.bottom
+        (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)
       ) {
         let tmpNextOffsetY: number = nextOffsetY;
 
@@ -310,20 +328,23 @@ export default function useAlign(
           getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >=
           originIntersectionVisibleArea
         ) {
+          prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
 
           nextAlignInfo.points = [
             reversePoints(popupPoints, 0),
             reversePoints(targetPoints, 0),
           ];
+        } else {
+          prevFlipRef.current.bt = false;
         }
       }
 
       // Top to Bottom
       if (
         needAdjustY &&
         popupPoints[0] === 'b' &&
-        nextPopupY < visibleArea.top
+        (nextPopupY < visibleArea.top || prevFlipRef.current.tb)
       ) {
         let tmpNextOffsetY: number = nextOffsetY;
 
@@ -338,12 +359,15 @@ export default function useAlign(
           getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >=
           originIntersectionVisibleArea
         ) {
+          prevFlipRef.current.tb = true;
           nextOffsetY = tmpNextOffsetY;
 
           nextAlignInfo.points = [
             reversePoints(popupPoints, 0),
             reversePoints(targetPoints, 0),
           ];
+        } else {
+          prevFlipRef.current.tb = false;
         }
       }
 
@@ -357,7 +381,7 @@ export default function useAlign(
       if (
         needAdjustX &&
         popupPoints[1] === 'l' &&
-        nextPopupRight > visibleArea.right
+        (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)
       ) {
         let tmpNextOffsetX: number = nextOffsetX;
 
@@ -372,20 +396,23 @@ export default function useAlign(
           getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >=
           originIntersectionVisibleArea
         ) {
+          prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
 
           nextAlignInfo.points = [
             reversePoints(popupPoints, 1),
             reversePoints(targetPoints, 1),
           ];
+        } else {
+          prevFlipRef.current.rl = false;
         }
       }
 
       // Left to Right
       if (
         needAdjustX &&
         popupPoints[1] === 'r' &&
-        nextPopupX < visibleArea.left
+        (nextPopupX < visibleArea.left || prevFlipRef.current.lr)
       ) {
         let tmpNextOffsetX: number = nextOffsetX;
 
@@ -400,12 +427,15 @@ export default function useAlign(
           getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >=
           originIntersectionVisibleArea
         ) {
+          prevFlipRef.current.lr = true;
           nextOffsetX = tmpNextOffsetX;
 
           nextAlignInfo.points = [
             reversePoints(popupPoints, 1),
             reversePoints(targetPoints, 1),
           ];
+        } else {
+          prevFlipRef.current.lr = false;
         }
       }