fix: Use ref to save props

Author: zombieJ

examples/simple.js

@@ -16,14 +16,9 @@ class Test extends Component {
     this.id = setInterval(() => {
       const { random } = this.state;
       if (random) {
-        this.setState(
-          {
-            randomWidth: 60 + 40 * Math.random(),
-          },
-          () => {
-            this.forceAlign();
-          },
-        );
+        this.setState({
+          randomWidth: 60 + 40 * Math.random(),
+        });
       }
     }, 1000);
   }
@@ -101,8 +96,8 @@ class Test extends Component {
           ref={this.containerRef}
           id="container"
           style={{
-            // width: '80%',
-            maxWidth: 1000,
+            width: '80%',
+            // maxWidth: 1000,
             height: 500,
             border: '1px solid red',
             ...(random

src/Align.tsx

@@ -13,10 +13,12 @@ import { isSamePoint, restoreFocus, monitorResize } from './util';
 import { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
 import useBuffer from './hooks/useBuffer';
 
+type OnAlign = (source: HTMLElement, result: AlignResult) => void;
+
 export interface AlignProps {
   align: AlignType;
   target: TargetType;
-  onAlign?: (source: HTMLElement, result: AlignResult) => void;
+  onAlign?: OnAlign;
   monitorBufferTime?: number;
   monitorWindowResize?: boolean;
   disabled?: boolean;
@@ -51,19 +53,24 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
   let childNode = React.Children.only(children);
 
   // ===================== Align ======================
-  const forceAlignRef = React.useRef<Function>();
+  // We save the props here to avoid closure makes props ood
+  const forceAlignPropsRef = React.useRef<{
+    disabled?: boolean;
+    target?: TargetType;
+    onAlign?: OnAlign;
+  }>({});
+  forceAlignPropsRef.current.disabled = disabled;
+  forceAlignPropsRef.current.target = target;
+  forceAlignPropsRef.current.onAlign = onAlign;
 
   const [forceAlign, cancelForceAlign] = useBuffer(() => {
-    forceAlignRef.current();
-  }, monitorBufferTime);
-
-  forceAlignRef.current = () => {
-    if (!disabled && target) {
+    const { disabled: latestDisabled, target: latestTarget } = forceAlignPropsRef.current;
+    if (!latestDisabled && latestTarget) {
       const source = findDOMNode<HTMLElement>(nodeRef.current);
 
       let result: AlignResult;
-      const element = getElement(target);
-      const point = getPoint(target);
+      const element = getElement(latestTarget);
+      const point = getPoint(latestTarget);
 
       cacheRef.current.element = element;
       cacheRef.current.point = point;
@@ -83,10 +90,12 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
       if (onAlign) {
         onAlign(source, result);
       }
-    } else {
-      cancelForceAlign();
+
+      return true;
     }
-  };
+
+    return false;
+  }, monitorBufferTime);
 
   // ===================== Effect =====================
   // Listen for target updated

src/hooks/useBuffer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default (callback: Function, buffer: number) => {
+export default (callback: () => boolean, buffer: number) => {
   const calledRef = React.useRef<boolean>(false);
   const timeoutRef = React.useRef<number>(null);
 
@@ -10,9 +10,12 @@ export default (callback: Function, buffer: number) => {
 
   function trigger() {
     if (!calledRef.current) {
-      callback();
-      calledRef.current = true;
+      if (callback() === false) {
+        // Not delay since callback cancelled self
+        return;
+      }
 
+      calledRef.current = true;
       cancelTrigger();
       timeoutRef.current = window.setTimeout(() => {
         calledRef.current = false;