fix placeholder to reposition on window resize, closes #132

lib/components/placeholder.js

@@ -22,6 +22,17 @@ class Placeholder extends React.Component {
     style: React.PropTypes.object
   };
 
+  /**
+   * Constructor.
+   *
+   * @param {Object} props
+   */
+
+  constructor(props) {
+    super(props)
+    this.tmp = {}
+  }
+
   /**
    * Should the component update?
    *
@@ -40,6 +51,22 @@ class Placeholder extends React.Component {
     )
   }
 
+  /**
+   * On mount, start listening for resize events.
+   */
+
+  componentDidMount = () => {
+    window.addEventListener('resize', this.updatePosition)
+  }
+
+  /**
+   * On unmount, stop listening for resize events.
+   */
+
+  componentWillUnmount = () => {
+    window.removeEventListener('resize', this.updatePosition)
+  }
+
   /**
    * Is the placeholder visible?
    *
@@ -64,16 +91,25 @@ class Placeholder extends React.Component {
    */
 
   onOpen = (portal) => {
+    this.tmp.placeholder = portal.firstChild
+    this.updatePosition()
+  }
+
+  /**
+   * Update the placeholder element's position.
+   */
+
+  updatePosition = () => {
     const { node } = this.props
-    const el = portal.firstChild
-    const nodeEl = findDOMNode(node)
-    const rect = nodeEl.getBoundingClientRect()
-    el.style.pointerEvents = 'none'
-    el.style.position = 'absolute'
-    el.style.top = `${window.scrollY + rect.top}px`
-    el.style.left = `${window.scrollX + rect.left}px`
-    el.style.width = `${rect.width}px`
-    el.style.height = `${rect.height}px`
+    const { placeholder } = this.tmp
+    const el = findDOMNode(node)
+    const rect = el.getBoundingClientRect()
+    placeholder.style.pointerEvents = 'none'
+    placeholder.style.position = 'absolute'
+    placeholder.style.top = `${window.scrollY + rect.top}px`
+    placeholder.style.left = `${window.scrollX + rect.left}px`
+    placeholder.style.width = `${rect.width}px`
+    placeholder.style.height = `${rect.height}px`
   }
 
   /**