From 20710e59673eb58375b64ad5908f6504bd670402 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 17:48:06 +0800
Subject: [PATCH 1/6] add demo for random align

---
 examples/simple.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/examples/simple.js b/examples/simple.js
index 4adac23..1adf289 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import Align from '../src';
 
+const allPoints = ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br'];
+
 class Test extends Component {
   state = {
     monitor: true,
@@ -62,6 +64,18 @@ class Test extends Component {
     }));
   };
 
+  randomAlign = () => {
+    const randomPoints = [];
+    randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
+    randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
+    console.log(randomPoints);
+    this.setState({
+      align: {
+        points: randomPoints,
+      },
+    });
+  };
+
   forceAlign = () => {
     this.$align.forceAlign();
   };
@@ -91,6 +105,10 @@ class Test extends Component {
             Resize Source
           </button>
           &nbsp;&nbsp;&nbsp;
+          <button type="button" onClick={this.randomAlign}>
+            Random Align
+          </button>
+          &nbsp;&nbsp;&nbsp;
           <label>
             <input type="checkbox" checked={this.state.monitor} onChange={this.toggleMonitor} />
             &nbsp; Monitor window resize

From 9136478f5d38fae3b9c226048b59013cc646d67a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 18:07:21 +0800
Subject: [PATCH 2/6] fix: should realign when align object changes

---
 examples/simple.js |  1 -
 package.json       |  1 +
 src/Align.tsx      | 15 +++++++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/examples/simple.js b/examples/simple.js
index 1adf289..8b3d5f7 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -68,7 +68,6 @@ class Test extends Component {
     const randomPoints = [];
     randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
     randomPoints.push(allPoints[Math.floor(Math.random() * 100) % allPoints.length]);
-    console.log(randomPoints);
     this.setState({
       align: {
         points: randomPoints,
diff --git a/package.json b/package.json
index 8fe2023..df8bad3 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
     "dom-align": "^1.7.0",
+    "lodash": "^4.17.21",
     "rc-util": "^5.3.0",
     "resize-observer-polyfill": "^1.5.1"
   },
diff --git a/src/Align.tsx b/src/Align.tsx
index e621863..c188e68 100644
--- a/src/Align.tsx
+++ b/src/Align.tsx
@@ -8,6 +8,7 @@ import { composeRef } from 'rc-util/lib/ref';
 import isVisible from 'rc-util/lib/Dom/isVisible';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import isEqual from 'lodash/isEqual';
 
 import { isSamePoint, restoreFocus, monitorResize } from './util';
 import { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
@@ -48,7 +49,9 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   { children, disabled, target, align, onAlign, monitorWindowResize, monitorBufferTime = 0 },
   ref,
 ) => {
-  const cacheRef = React.useRef<{ element?: HTMLElement; point?: TargetPoint }>({});
+  const cacheRef = React.useRef<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>(
+    {},
+  );
   const nodeRef = React.useRef();
   let childNode = React.Children.only(children);
 
@@ -57,16 +60,19 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   const forceAlignPropsRef = React.useRef<{
     disabled?: boolean;
     target?: TargetType;
+    align?: AlignType;
     onAlign?: OnAlign;
   }>({});
   forceAlignPropsRef.current.disabled = disabled;
   forceAlignPropsRef.current.target = target;
+  forceAlignPropsRef.current.align = align;
   forceAlignPropsRef.current.onAlign = onAlign;
 
   const [forceAlign, cancelForceAlign] = useBuffer(() => {
     const {
       disabled: latestDisabled,
       target: latestTarget,
+      align: latestAlign,
       onAlign: latestOnAlign,
     } = forceAlignPropsRef.current;
     if (!latestDisabled && latestTarget) {
@@ -78,6 +84,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
 
       cacheRef.current.element = element;
       cacheRef.current.point = point;
+      cacheRef.current.align = latestAlign;
 
       // IE lose focus after element realign
       // We should record activeElement and restore later
@@ -121,7 +128,11 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
       sourceResizeMonitor.current.cancel = monitorResize(nodeRef.current, forceAlign);
     }
 
-    if (cacheRef.current.element !== element || !isSamePoint(cacheRef.current.point, point)) {
+    if (
+      cacheRef.current.element !== element ||
+      !isSamePoint(cacheRef.current.point, point) ||
+      !isEqual(cacheRef.current.align, align)
+    ) {
       forceAlign();
 
       // Add resize observer

From d7d0bc76b9504da7847e69930792819c4cdc50de Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 19:02:29 +0800
Subject: [PATCH 3/6] fix lint

---
 src/Align.tsx |  8 ++++----
 src/util.ts   |  7 +++++--
 tsconfig.json | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 tsconfig.json

diff --git a/src/Align.tsx b/src/Align.tsx
index c188e68..616d518 100644
--- a/src/Align.tsx
+++ b/src/Align.tsx
@@ -11,7 +11,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import isEqual from 'lodash/isEqual';
 
 import { isSamePoint, restoreFocus, monitorResize } from './util';
-import { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
+import type { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
 import useBuffer from './hooks/useBuffer';
 
 type OnAlign = (source: HTMLElement, result: AlignResult) => void;
@@ -192,7 +192,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   return childNode;
 };
 
-const RefAlign = React.forwardRef(Align);
-RefAlign.displayName = 'Align';
+const RcAlign = React.forwardRef(Align);
+RcAlign.displayName = 'Align';
 
-export default RefAlign;
+export default RcAlign;
diff --git a/src/util.ts b/src/util.ts
index a6f7c08..77e3bf5 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,6 +1,6 @@
 import ResizeObserver from 'resize-observer-polyfill';
 import contains from 'rc-util/lib/Dom/contains';
-import { TargetPoint } from './interface';
+import type { TargetPoint } from './interface';
 
 export function isSamePoint(prev: TargetPoint, next: TargetPoint) {
   if (prev === next) return true;
@@ -28,7 +28,10 @@ export function restoreFocus(activeElement, container) {
   }
 }
 
-export function monitorResize(element: HTMLElement, callback: Function) {
+export function monitorResize(
+  element: HTMLElement,
+  callback: (args: { width?: number; height?: number }) => void,
+) {
   let prevWidth: number = null;
   let prevHeight: number = null;
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f6d9605
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "jsx": "preserve",
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "rc-dialog": ["src/index.ts"]
+    }
+  }
+}

From 0d5ac47c69633826edbb37e3fa58b0213404a260 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 19:05:54 +0800
Subject: [PATCH 4/6] tsc --noEmit

---
 package.json  | 1 +
 tsconfig.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/package.json b/package.json
index df8bad3..5f1bb41 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "start": "cross-env NODE_ENV=development father doc dev --storybook",
     "build": "father doc build --storybook",
     "compile": "father build",
+    "tsc": "tsc",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "father test",
diff --git a/tsconfig.json b/tsconfig.json
index f6d9605..ce0bb80 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "noEmit": true,
     "paths": {
       "@/*": ["src/*"],
       "@@/*": ["src/.umi/*"],

From 35c7bd669b0fc8a9882c2a33592277fbec46a6b6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 19:11:13 +0800
Subject: [PATCH 5/6] fix tsc errors

---
 src/util.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/util.ts b/src/util.ts
index 77e3bf5..30b1f4b 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -28,10 +28,7 @@ export function restoreFocus(activeElement, container) {
   }
 }
 
-export function monitorResize(
-  element: HTMLElement,
-  callback: (args: { width?: number; height?: number }) => void,
-) {
+export function monitorResize(element: HTMLElement, callback: Function) {
   let prevWidth: number = null;
   let prevHeight: number = null;
 

From 67c4b697c793c8c0648726d45be55b6a5c4846b6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Aug 2021 19:28:20 +0800
Subject: [PATCH 6/6] add test case

---
 tests/element.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/tests/element.test.js b/tests/element.test.js
index ce4ae7d..29064cc 100644
--- a/tests/element.test.js
+++ b/tests/element.test.js
@@ -88,6 +88,24 @@ describe('element align', () => {
     expect(onAlign).toHaveBeenCalled();
   });
 
+  // https://github.com/ant-design/ant-design/issues/31717
+  it('changing align should trigger onAlign', () => {
+    const onAlign = jest.fn();
+    const wrapper = mount(<Test align={{ points: ['cc', 'cc'] }} onAlign={onAlign} />);
+    expect(onAlign).toHaveBeenCalledTimes(1);
+    expect(onAlign).toHaveBeenLastCalledWith(
+      expect.any(HTMLElement),
+      expect.objectContaining({ points: ['cc', 'cc'] }),
+    );
+    wrapper.setProps({ align: { points: ['cc', 'tl'] } });
+    jest.runAllTimers();
+    expect(onAlign).toHaveBeenCalledTimes(2);
+    expect(onAlign).toHaveBeenLastCalledWith(
+      expect.any(HTMLElement),
+      expect.objectContaining({ points: ['cc', 'tl'] }),
+    );
+  });
+
   it('should switch to the correct align callback after starting the timers', () => {
     // This test case is tricky. An error occurs if the following things happen
     // exactly in this order: