feat: autoAlign pos (#405)

* feat: autoAlign pos

* chore: fix lint

* test: add test case

Author: zombieJ

docs/examples/inside.tsx

@@ -1,16 +1,23 @@
 /* eslint no-console:0 */
 import React from 'react';
 import '../../assets/index.less';
-import Trigger from '../../src';
+import Trigger, { BuildInPlacements } from '../../src';
 
-export const builtinPlacements = {
+const experimentalConfig = {
+  _experimental: {
+    dynamicInset: true,
+  },
+};
+
+export const builtinPlacements: BuildInPlacements = {
   top: {
     points: ['bc', 'tc'],
     overflow: {
       shiftX: 0,
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   topLeft: {
     points: ['bl', 'tl'],
@@ -19,6 +26,7 @@ export const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   topRight: {
     points: ['br', 'tr'],
@@ -27,6 +35,7 @@ export const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   left: {
     points: ['cr', 'cl'],
@@ -35,6 +44,7 @@ export const builtinPlacements = {
       shiftY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   leftTop: {
     points: ['tr', 'tl'],
@@ -43,6 +53,7 @@ export const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   leftBottom: {
     points: ['br', 'bl'],
@@ -51,6 +62,7 @@ export const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   right: {
     points: ['cl', 'cr'],
@@ -59,6 +71,7 @@ export const builtinPlacements = {
       shiftY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
   bottom: {
     points: ['tc', 'bc'],
@@ -67,6 +80,7 @@ export const builtinPlacements = {
       adjustY: true,
     },
     offset: [0, 0],
+    ...experimentalConfig,
   },
 };
 
@@ -106,6 +120,9 @@ export default () => {
           style={{
             width: `300vw`,
             height: `300vh`,
+            // width: 500,
+            // height: 500,
+            background: `rgba(0, 0, 255, 0.1)`,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',

src/Popup/index.tsx

@@ -51,6 +51,8 @@ export interface PopupProps {
   ready: boolean;
   offsetX: number;
   offsetY: number;
+  offsetR: number;
+  offsetB: number;
   onAlign: VoidFunction;
   onPrepare: () => Promise<void>;
 
@@ -103,6 +105,8 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     ready,
     offsetX,
     offsetY,
+    offsetR,
+    offsetB,
     onAlign,
     onPrepare,
 
@@ -136,16 +140,38 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   }
 
   // >>>>> Offset
-  const offsetStyle: React.CSSProperties =
-    ready || !open
-      ? {
-          left: offsetX,
-          top: offsetY,
-        }
-      : {
-          left: '-1000vw',
-          top: '-1000vh',
-        };
+  const AUTO = 'auto' as const;
+
+  const offsetStyle: React.CSSProperties = {
+    left: '-1000vw',
+    top: '-1000vh',
+    right: AUTO,
+    bottom: AUTO,
+  };
+
+  // Set align style
+  if (ready || !open) {
+    const { points, _experimental } = align;
+    const dynamicInset = _experimental?.dynamicInset;
+    const alignRight = dynamicInset && points[0][1] === 'r';
+    const alignBottom = dynamicInset && points[0][0] === 'b';
+
+    if (alignRight) {
+      offsetStyle.right = offsetR;
+      offsetStyle.left = AUTO;
+    } else {
+      offsetStyle.left = offsetX;
+      offsetStyle.right = AUTO;
+    }
+
+    if (alignBottom) {
+      offsetStyle.bottom = offsetB;
+      offsetStyle.top = AUTO;
+    } else {
+      offsetStyle.top = offsetY;
+      offsetStyle.bottom = AUTO;
+    }
+  }
 
   // >>>>> Misc
   const miscStyle: React.CSSProperties = {};

src/hooks/useAlign.ts

@@ -99,6 +99,8 @@ export default function useAlign(
   ready: boolean,
   offsetX: number,
   offsetY: number,
+  offsetR: number,
+  offsetB: number,
   arrowX: number,
   arrowY: number,
   scaleX: number,
@@ -110,6 +112,8 @@ export default function useAlign(
     ready: boolean;
     offsetX: number;
     offsetY: number;
+    offsetR: number;
+    offsetB: number;
     arrowX: number;
     arrowY: number;
     scaleX: number;
@@ -119,6 +123,8 @@ export default function useAlign(
     ready: false,
     offsetX: 0,
     offsetY: 0,
+    offsetR: 0,
+    offsetB: 0,
     arrowX: 0,
     arrowY: 0,
     scaleX: 1,
@@ -160,6 +166,8 @@ export default function useAlign(
 
       const originLeft = popupElement.style.left;
       const originTop = popupElement.style.top;
+      const originRight = popupElement.style.right;
+      const originBottom = popupElement.style.bottom;
 
       const doc = popupElement.ownerDocument;
       const win = getWin(popupElement);
@@ -173,6 +181,8 @@ export default function useAlign(
       // Reset first
       popupElement.style.left = '0';
       popupElement.style.top = '0';
+      popupElement.style.right = 'auto';
+      popupElement.style.bottom = 'auto';
 
       // Calculate align style, we should consider `transform` case
       let targetRect: Rect;
@@ -244,9 +254,19 @@ export default function useAlign(
         ? visibleRegionArea
         : visibleArea;
 
+      // Record right & bottom align data
+      popupElement.style.left = 'auto';
+      popupElement.style.top = 'auto';
+      popupElement.style.right = '0';
+      popupElement.style.bottom = '0';
+
+      const popupMirrorRect = popupElement.getBoundingClientRect();
+
       // Reset back
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
+      popupElement.style.right = originRight;
+      popupElement.style.bottom = originBottom;
 
       // Calculate scale
       const scaleX = toNum(
@@ -622,10 +642,18 @@ export default function useAlign(
 
       onPopupAlign?.(popupEle, nextAlignInfo);
 
+      // Additional calculate right & bottom position
+      const offsetX4Right =
+        popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      const offsetY4Bottom =
+        popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
+
       setOffsetInfo({
         ready: true,
         offsetX: nextOffsetX / scaleX,
         offsetY: nextOffsetY / scaleY,
+        offsetR: offsetX4Right / scaleX,
+        offsetB: offsetY4Bottom / scaleY,
         arrowX: nextArrowX / scaleX,
         arrowY: nextArrowY / scaleY,
         scaleX,
@@ -667,6 +695,8 @@ export default function useAlign(
     offsetInfo.ready,
     offsetInfo.offsetX,
     offsetInfo.offsetY,
+    offsetInfo.offsetR,
+    offsetInfo.offsetB,
     offsetInfo.arrowX,
     offsetInfo.arrowY,
     offsetInfo.scaleX,

src/index.tsx

@@ -359,6 +359,8 @@ export function generateTrigger(
       ready,
       offsetX,
       offsetY,
+      offsetR,
+      offsetB,
       arrowX,
       arrowY,
       scaleX,
@@ -659,6 +661,8 @@ export function generateTrigger(
             ready={ready}
             offsetX={offsetX}
             offsetY={offsetY}
+            offsetR={offsetR}
+            offsetB={offsetB}
             onAlign={triggerAlign}
             // Stretch
             stretch={stretch}

src/interface.ts

@@ -28,6 +28,17 @@ export interface AlignType {
    * Such as ['tr','cc'], align top right point of source node with center point of target node.
    * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
   points?: (string | AlignPoint)[];
+
+  /**
+   * @private Do not use in your production code
+   */
+  _experimental?: {
+    /**
+     * @private Do not use in your production code. Auto adjust align logic
+     */
+    dynamicInset?: boolean;
+  };
+
   /**
    * 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.

tests/align.test.tsx

@@ -23,6 +23,8 @@ describe('Trigger.Align', () => {
         y: 100,
         width: 100,
         height: 100,
+        right: 200,
+        bottom: 200,
       }),
     });
 
@@ -233,4 +235,27 @@ describe('Trigger.Align', () => {
       top: `50px`,
     });
   });
+
+  it('support dynamicInset', async () => {
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{
+          points: ['bc', 'tc'],
+          _experimental: {
+            dynamicInset: true,
+          },
+        }}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      bottom: `100px`,
+    });
+  });
 });