feat: should trigger align when popupAlign had updated (#329)

* feat: should trigger align when popupAlign had updated

* feat: optimize code

Author: kiner-tang

src/hooks/useAlign.ts

@@ -204,7 +204,7 @@ export default function useAlign(
 
       // Placement
       const placementInfo: AlignType =
-        builtinPlacements[placement] || popupAlign || {};
+        popupAlign || builtinPlacements[placement] || {};
 
       // Offset
       const { offset, targetOffset } = placementInfo;

src/index.tsx

@@ -358,6 +358,11 @@ export function generateTrigger(
       triggerAlign();
     }, [mousePos]);
 
+    useLayoutEffect(() => {
+      if(!mergedOpen) return;
+      triggerAlign();
+    }, [JSON.stringify(popupAlign)]);
+
     const alignedClassName = React.useMemo(() => {
       const baseClassName = getAlignPopupClassName(
         builtinPlacements,

tests/align.test.tsx

@@ -3,6 +3,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
 import type { TriggerProps } from '../src';
 import Trigger from '../src';
+import { awaitFakeTimer } from "./util";
 
 import { _rs } from 'rc-resize-observer';
 
@@ -33,15 +34,6 @@ describe('Trigger.Align', () => {
     jest.useRealTimers();
   });
 
-  async function awaitFakeTimer() {
-    for (let i = 0; i < 10; i += 1) {
-      await act(async () => {
-        jest.advanceTimersByTime(100);
-        await Promise.resolve();
-      });
-    }
-  }
-
   it('not show', async () => {
     const onAlign = jest.fn();
 

tests/basic.test.jsx

@@ -1,11 +1,16 @@
 /* eslint-disable max-classes-per-file */
 
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+} from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React, { createRef, StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import Trigger from '../src';
-import { placementAlignMap } from './util';
+import { placementAlignMap, awaitFakeTimer } from './util';
 
 describe('Trigger.Basic', () => {
   beforeEach(() => {
@@ -842,4 +847,48 @@ describe('Trigger.Basic', () => {
     expect(errorSpy).not.toHaveBeenCalled();
     errorSpy.mockRestore();
   });
+  it('should trigger align when popupAlign had updated', async () => {
+    const onPopupAlign = jest.fn();
+    const App = () => {
+      const [placementAlign, setPlacementAlign] = React.useState(
+        placementAlignMap.leftTop,
+      );
+      const [open, setOpen] = React.useState(true);
+      return (
+        <>
+          <Trigger
+            popupVisible={open}
+            popupAlign={placementAlign}
+            onPopupAlign={onPopupAlign}
+            popup={<strong className="x-content">tooltip2</strong>}
+          >
+            <div>
+              <div
+                id="btn"
+                onClick={() => {
+                  setPlacementAlign(prev => prev === placementAlignMap.left ? placementAlignMap.leftTop: placementAlignMap.left);
+                }}
+              >
+                click
+              </div>
+              <div id="close" onClick={() => {
+                setOpen(false);
+              }}>close</div>
+            </div>
+          </Trigger>
+        </>
+      );
+    };
+    render(<App />);
+    await awaitFakeTimer();
+    expect(onPopupAlign).toHaveBeenCalledTimes(1);
+    fireEvent.click(document.querySelector('#btn'));
+    await awaitFakeTimer();
+    expect(onPopupAlign).toHaveBeenCalledTimes(2);
+    fireEvent.click(document.querySelector('#close'));
+    await awaitFakeTimer();
+    fireEvent.click(document.querySelector('#btn'));
+    await awaitFakeTimer();
+    expect(onPopupAlign).toHaveBeenCalledTimes(2);
+  });
 });

tests/util.tsx

@@ -1,3 +1,5 @@
+import { act } from "@testing-library/react";
+
 const autoAdjustOverflow = {
   adjustX: 1,
   adjustY: 1,
@@ -91,3 +93,13 @@ export function getMouseEvent(type: string, values = {}): FakeMouseEvent {
   };
   return new FakeMouseEvent(type, values);
 }
+
+
+export async function awaitFakeTimer() {
+  for (let i = 0; i < 10; i += 1) {
+    await act(async () => {
+      jest.advanceTimersByTime(100);
+      await Promise.resolve();
+    });
+  }
+}