diff --git a/examples/simple.js b/examples/simple.js index cf916ca..4adac23 100644 --- a/examples/simple.js +++ b/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 + + Resize Source + + Monitor window resize @@ -117,7 +129,7 @@ class Test extends Component { = ( const [forceAlign, cancelForceAlign] = useBuffer(() => { const { disabled: latestDisabled, target: latestTarget } = forceAlignPropsRef.current; if (!latestDisabled && latestTarget) { - const source = findDOMNode(nodeRef.current); + const source = nodeRef.current; let result: AlignResult; const element = getElement(latestTarget); @@ -102,10 +101,20 @@ const Align: React.RefForwardingComponent = ( const resizeMonitor = React.useRef({ cancel: () => {}, }); + // Listen for source updated + const sourceResizeMonitor = React.useRef({ + 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 = ( React.useEffect( () => () => { resizeMonitor.current.cancel(); + sourceResizeMonitor.current.cancel(); if (winResizeRef.current) winResizeRef.current.remove(); cancelForceAlign(); },