diff --git a/lib/components/placeholder.js b/lib/components/placeholder.js index 70dfc0026..4e9eae0ac 100644 --- a/lib/components/placeholder.js +++ b/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` } /**