use monitorResize (#35)

Author: shaodahong

examples/simple.js

@@ -10,6 +10,7 @@ class Test extends Component {
     align: {
       points: ['cc', 'cc'],
     },
+    sourceWidth: 50,
   };
 
   componentDidMount() {
@@ -65,6 +66,13 @@ class Test extends Component {
     this.$align.forceAlign();
   };
 
+  toggleSourceSize = () => {
+    this.setState({
+      // eslint-disable-next-line react/no-access-state-in-setstate
+      sourceWidth: this.state.sourceWidth + 10,
+    });
+  };
+
   render() {
     const { random, randomWidth } = this.state;
 
@@ -79,6 +87,10 @@ class Test extends Component {
             Force align
           </button>
           &nbsp;&nbsp;&nbsp;
+          <button type="button" onClick={this.toggleSourceSize}>
+            Resize Source
+          </button>
+          &nbsp;&nbsp;&nbsp;
           <label>
             <input type="checkbox" checked={this.state.monitor} onChange={this.toggleMonitor} />
             &nbsp; Monitor window resize
@@ -117,7 +129,7 @@ class Test extends Component {
             <div
               style={{
                 position: 'absolute',
-                width: 50,
+                width: this.state.sourceWidth,
                 height: 50,
                 background: 'yellow',
               }}

src/Align.tsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import { composeRef } from 'rc-util/lib/ref';
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 
@@ -66,7 +65,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   const [forceAlign, cancelForceAlign] = useBuffer(() => {
     const { disabled: latestDisabled, target: latestTarget } = forceAlignPropsRef.current;
     if (!latestDisabled && latestTarget) {
-      const source = findDOMNode<HTMLElement>(nodeRef.current);
+      const source = nodeRef.current;
 
       let result: AlignResult;
       const element = getElement(latestTarget);
@@ -102,10 +101,20 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   const resizeMonitor = React.useRef<MonitorRef>({
     cancel: () => {},
   });
+  // Listen for source updated
+  const sourceResizeMonitor = React.useRef<MonitorRef>({
+    cancel: () => {},
+  });
   React.useEffect(() => {
     const element = getElement(target);
     const point = getPoint(target);
 
+    if (nodeRef.current !== sourceResizeMonitor.current.element) {
+      sourceResizeMonitor.current.cancel();
+      sourceResizeMonitor.current.element = nodeRef.current;
+      sourceResizeMonitor.current.cancel = monitorResize(nodeRef.current, forceAlign);
+    }
+
     if (cacheRef.current.element !== element || !isSamePoint(cacheRef.current.point, point)) {
       forceAlign();
 
@@ -144,6 +153,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   React.useEffect(
     () => () => {
       resizeMonitor.current.cancel();
+      sourceResizeMonitor.current.cancel();
       if (winResizeRef.current) winResizeRef.current.remove();
       cancelForceAlign();
     },