Layout the popup after initial render.

example/example.js

@@ -40,7 +40,6 @@ class App extends React.Component {
     this.setState({popupVisible: false});
   }
   onPopupLayout (currentLayout) {
-
     return [
       (window.innerWidth - CUSTOM_DIMENSION) / 2,
       (window.innerHeight - CUSTOM_DIMENSION) / 2,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bthlabs/react-custom-popup",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "description": "React component for simply building custom popups and modals.",
   "main": "./lib/react-custom-popup.js",

src/Popup.js

@@ -25,16 +25,24 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-export const Popup = (props) => {
+export class Popup extends React.Component {
-  const className = ClassName('bthlabs-react-custom-popup', props.className, {
+  constructor (props) {
-    'bthlabs-rcp-visible': props.visible
+    super(props);
-  });
 
+    this.state = {
+      layout: [0, 0]
+    };
+  }
+  componentDidUpdate (prevProps, prevState) {
+    if (prevProps.visible !== this.props.visible && this.props.visible) {
+      this.layout();
+    }
+  }
+  layout () {
     let layout = [0, 0];
     const body = document.body;
-  const innerStyle = {};
+    if (this.props.visible && this.props.anchor && this.props.anchor.current) {
-  if (props.visible && props.anchor && props.anchor.current) {
+      const box = this.props.anchor.current.getBoundingClientRect();
-    const box = props.anchor.current.getBoundingClientRect();
       const document_ = document.documentElement;
 
       const scrollTop = (
@@ -51,35 +59,46 @@ export const Popup = (props) => {
       layout[1] = box.top +  scrollTop - clientTop;
     }
 
-  if (props.visible) {
+    if (this.props.visible) {
-    if (typeof props.onLayout === 'function') {
+      if (typeof this.props.onLayout === 'function') {
-      layout = props.onLayout(layout);
+        layout = this.props.onLayout(layout);
       }
 
-    innerStyle.left = `${layout[0]}px`;
+      this.setState({layout: layout});
-    innerStyle.top = `${layout[1]}px`;
+    }
+  }
+  render () {
+    const className = ClassName('bthlabs-react-custom-popup', this.props.className, {
+      'bthlabs-rcp-visible': this.props.visible
+    });
 
-    if (layout[2]) {
+    const innerStyle = {};
-      innerStyle.width = `${layout[2]}px`;
+    if (this.props.visible) {
+      innerStyle.left = `${this.state.layout[0]}px`;
+      innerStyle.top = `${this.state.layout[1]}px`;
+
+      if (this.state.layout[2]) {
+        innerStyle.width = `${this.state.layout[2]}px`;
       }
 
-    if (layout[3]) {
+      if (this.state.layout[3]) {
-      innerStyle.height = `${layout[3]}px`;
+        innerStyle.height = `${this.state.layout[3]}px`;
       }
     }
 
     return ReactDOM.createPortal(
       <div className={className}>
-      {!props.hideOverlay &&
+        {!this.props.hideOverlay &&
-        <div className="bthlabs-rcp-overlay" onClick={props.onOverlayClick} />
+          <div className="bthlabs-rcp-overlay" onClick={this.props.onOverlayClick} />
         }
         <div className="bthlabs-rcp-inner" style={innerStyle}>
-        {props.children}
+          {this.props.children}
         </div>
       </div>,
-    props.domNode || body
+      this.props.domNode || document.body
     );
-};
+  }
+}
 
 Popup.propTypes = {
   anchor: PropTypes.object,

tests/Popup.spec.js

@@ -48,6 +48,106 @@ describe('Popup', () => {
     document.body.removeChild(mountNode);
   });
 
+  describe('componentDidUpdate', () => {
+    it('should not layout if visibility did not change', () => {
+      const component = shallow(
+        <Popup className='spam' visible={false}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      spyOn(component.instance(), 'layout');
+
+      component.instance().componentDidUpdate({visible: false});
+      expect(component.instance().layout).not.toHaveBeenCalled();
+    });
+
+    it('should not layout if it became hidden', () => {
+      const component = shallow(
+        <Popup className='spam' visible={false}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      spyOn(component.instance(), 'layout');
+
+      component.instance().componentDidUpdate({visible: true});
+      expect(component.instance().layout).not.toHaveBeenCalled();
+    });
+
+    it('should not layout if it became visible', () => {
+      const component = shallow(
+        <Popup className='spam' visible={true}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      spyOn(component.instance(), 'layout');
+
+      component.instance().componentDidUpdate({visible: false});
+      expect(component.instance().layout).toHaveBeenCalled();
+    });
+  });
+
+  describe('layout', () => {
+    it('should apply default layout if rendering without anchor', () => {
+      const component = shallow(
+        <Popup visible={true}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      component.instance().layout();
+
+      expect(component.state('layout')).toEqual([0, 0]);
+    });
+
+    it('should not call onLayout when invisible', () => {
+      const component = shallow(
+        <Popup visible={false} onLayout={onLayout}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      component.instance().layout();
+
+      expect(onLayout).not.toHaveBeenCalled();
+    });
+
+    it('should layout according to the anchor', () => {
+      const component = mount(<Wrapper />, {attachTo: mountNode});
+      component.setState({popupVisible: true});
+
+      const popup = component.find(Popup);
+      expect(popup.instance().state.layout).not.toEqual([0, 0]);
+
+      component.unmount();
+    });
+
+    it('should call onLayout to allow for customization of the inner layer layout', () => {
+      onLayout = onLayout.and.returnValue([20, 20]);
+
+      const component = shallow(
+        <Popup visible={true} onLayout={onLayout}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      component.instance().layout();
+
+      expect(onLayout).toHaveBeenCalledWith([0, 0]);
+      expect(component.state('layout')).toEqual([20, 20]);
+    });
+
+    it('should allow the onLayout callback to specify height and width', () => {
+      onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
+
+      const component = shallow(
+        <Popup visible={true} onLayout={onLayout}>
+          <span>HERE POPUP CONTENT BE</span>
+        </Popup>
+      );
+      component.instance().layout();
+
+      expect(component.state('layout')).toEqual([20, 20, 100, 100]);
+    });
+  });
+
+  describe('render', () => {
     it('should render with a custom class', () => {
       const component = shallow(
         <Popup className='spam' visible={false}>
@@ -104,7 +204,7 @@ describe('Popup', () => {
       expect(overlay.prop('onClick')).toBe(onOverlayClick);
     });
 
-  it('should not layout the inner layer when invisible', () => {
+    it('should not apply layout style on the inner layer when invisible', () => {
       const component = shallow(
         <Popup visible={false}>
           <span>HERE POPUP CONTENT BE</span>
@@ -115,65 +215,28 @@ describe('Popup', () => {
       expect(inner.prop('style')).toEqual({});
     });
 
-  it('should not call onLayout when invisible', () => {
+    it('should apply layout style on the inner layer when visible', () => {
-    const component = shallow(
-      <Popup visible={false} onLayout={onLayout}>
-        <span>HERE POPUP CONTENT BE</span>
-      </Popup>
-    );
-
-    const inner = component.find('.bthlabs-rcp-inner');
-    expect(onLayout).not.toHaveBeenCalled();
-  });
-
-  it('should apply default layout to the inner layer if rendering without anchor', () => {
       const component = shallow(
         <Popup visible={true}>
           <span>HERE POPUP CONTENT BE</span>
         </Popup>
       );
+      component.setState({layout: [20, 20]});
 
       const inner = component.find('.bthlabs-rcp-inner');
-    expect(inner.prop('style')).toEqual({left: '0px', top: '0px'});
+      expect(inner.prop('style').left).toEqual('20px');
+      expect(inner.prop('style').top).toEqual('20px');
     });
 
-  it('should layout the inner layer according to the anchor', () => {
+    it('should set the inner layer height and width if onLayout specified them', () => {
-    const component = mount(<Wrapper />, {attachTo: mountNode});
-    component.setState({popupVisible: true});
-
-    const popup = component.find(Popup);
-    const inner = popup.find('.bthlabs-rcp-inner');
-    expect(inner.prop('style').left).not.toEqual('0px');
-    expect(inner.prop('style').top).not.toEqual('0px');
-
-    component.unmount();
-  });
-
-  it('should call onLayout to allow for customization of the inner layer layout', () => {
-    onLayout = onLayout.and.returnValue([20, 20]);
-
       const component = shallow(
         <Popup visible={true} onLayout={onLayout}>
           <span>HERE POPUP CONTENT BE</span>
         </Popup>
       );
+      component.setState({layout: [20, 20, 100, 100]});
 
       const inner = component.find('.bthlabs-rcp-inner');
-    expect(onLayout).toHaveBeenCalledWith([0, 0]);
-    expect(inner.prop('style')).toEqual({left: '20px', top: '20px'});
-  });
-
-  it('should set the inner layour height and width if onLayout specified them', () => {
-    onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
-
-    const component = shallow(
-      <Popup visible={true} onLayout={onLayout}>
-        <span>HERE POPUP CONTENT BE</span>
-      </Popup>
-    );
-
-    const inner = component.find('.bthlabs-rcp-inner');
-    expect(onLayout).toHaveBeenCalledWith([0, 0]);
       expect(inner.prop('style').height).toEqual('100px');
       expect(inner.prop('style').width).toEqual('100px');
     });
@@ -189,3 +252,4 @@ describe('Popup', () => {
       expect(inner.contains(<span>HERE POPUP CONTENT BE</span>)).toBe(true);
     });
   });
+});