fix: Visible change should trigger align

Author: zombieJ

examples/simple.js

@@ -5,6 +5,7 @@ class Test extends Component {
   state = {
     monitor: true,
     random: false,
+    disabled: false,
     randomWidth: 100,
     align: {
       points: ['cc', 'cc'],
@@ -59,6 +60,12 @@ class Test extends Component {
     }));
   };
 
+  toggleDisabled = () => {
+    this.setState(({ disabled }) => ({
+      disabled: !disabled,
+    }));
+  };
+
   forceAlign = () => {
     this.$align.forceAlign();
   };
@@ -85,6 +92,10 @@ class Test extends Component {
             <input type="checkbox" checked={this.state.random} onChange={this.toggleRandom} />
             &nbsp; Random Size
           </label>
+          <label>
+            <input type="checkbox" checked={this.state.disabled} onChange={this.toggleDisabled} />
+            &nbsp; Disabled
+          </label>
         </p>
         <div
           ref={this.containerRef}
@@ -106,6 +117,7 @@ class Test extends Component {
             target={this.getTarget}
             monitorWindowResize={this.state.monitor}
             align={this.state.align}
+            disabled={this.state.disabled}
           >
             <div
               style={{

src/Align.tsx

@@ -107,6 +107,13 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
     }
   });
 
+  // Listen for disabled change
+  React.useEffect(() => {
+    if (!disabled) {
+      forceAlign();
+    }
+  }, [disabled]);
+
   // Listen for window resize
   const winResizeRef = React.useRef<{ remove: Function }>(null);
   React.useEffect(() => {

tests/element.test.js

@@ -4,46 +4,52 @@ import { mount } from 'enzyme';
 import Align from '../src';
 
 describe('element align', () => {
-  it('resize', () => {
+  beforeEach(() => {
     jest.useFakeTimers();
+  });
 
-    const align = {
-      points: ['bc', 'tc'],
-    };
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
-    const onAlign = jest.fn();
+  const align = {
+    points: ['bc', 'tc'],
+  };
 
-    class Test extends React.Component {
-      getTarget = () => this.$target;
+  class Test extends React.Component {
+    getTarget = () => this.$target;
 
-      targetRef = ele => {
-        this.$target = ele;
-      };
+    targetRef = ele => {
+      this.$target = ele;
+    };
 
-      render() {
-        return (
-          <div style={{ paddingTop: 100 }}>
-            <div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
-              target
-            </div>
-            <Align target={this.getTarget} align={align} onAlign={onAlign} {...this.props}>
-              <div
-                id="ele_src"
-                style={{
-                  position: 'absolute',
-                  width: 50,
-                  height: 80,
-                }}
-              >
-                source
-              </div>
-            </Align>
+    render() {
+      return (
+        <div style={{ paddingTop: 100 }}>
+          <div ref={this.targetRef} style={{ display: 'inline-block', width: 50, height: 50 }}>
+            target
           </div>
-        );
-      }
+          <Align target={this.getTarget} align={align} {...this.props}>
+            <div
+              id="ele_src"
+              style={{
+                position: 'absolute',
+                width: 50,
+                height: 80,
+              }}
+            >
+              source
+            </div>
+          </Align>
+        </div>
+      );
     }
+  }
+
+  it('resize', () => {
+    const onAlign = jest.fn();
 
-    const wrapper = mount(<Test monitorWindowResize />);
+    const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} />);
     expect(onAlign).toHaveBeenCalled();
 
     // Window resize
@@ -62,8 +68,17 @@ describe('element align', () => {
     // Remove should not crash
     wrapper.setProps({ monitorWindowResize: true });
     wrapper.unmount();
+  });
 
-    jest.useRealTimers();
+  it('disabled should trigger align', () => {
+    const onAlign = jest.fn();
+
+    const wrapper = mount(<Test monitorWindowResize onAlign={onAlign} disabled />);
+    expect(onAlign).not.toHaveBeenCalled();
+
+    wrapper.setProps({ disabled: false });
+    jest.runAllTimers();
+    expect(onAlign).toHaveBeenCalled();
   });
 });
 /* eslint-enable */