From d1f761956ab71a603527b33e917d485ada98d554 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 30 Mar 2020 18:25:17 -0230 Subject: [PATCH] Add optional portal to Popover component (#8253) --- app/home.html | 1 + app/notification.html | 1 + app/popup.html | 1 + .../ui/popover/popover.component.js | 34 +++++++++++++++++-- 4 files changed, 35 insertions(+), 2 deletions(-) diff --git a/app/home.html b/app/home.html index 4c54d7e7a..5c131bfc8 100644 --- a/app/home.html +++ b/app/home.html @@ -9,6 +9,7 @@
+
diff --git a/app/notification.html b/app/notification.html index 479d9f8eb..769ce31f4 100644 --- a/app/notification.html +++ b/app/notification.html @@ -36,6 +36,7 @@ +
diff --git a/app/popup.html b/app/popup.html index b29f1aa65..0c3d70407 100644 --- a/app/popup.html +++ b/app/popup.html @@ -9,6 +9,7 @@
+
diff --git a/ui/app/components/ui/popover/popover.component.js b/ui/app/components/ui/popover/popover.component.js index 7fac5de80..1e7b7fc8c 100644 --- a/ui/app/components/ui/popover/popover.component.js +++ b/ui/app/components/ui/popover/popover.component.js @@ -1,4 +1,5 @@ -import React from 'react' +import React, { PureComponent } from 'react' +import ReactDOM from 'react-dom' import PropTypes from 'prop-types' import PopoverHeader from './popover.header.component' @@ -20,4 +21,33 @@ Popover.propTypes = { onClose: PropTypes.func.isRequired, } -export default Popover +export default class PopoverPortal extends PureComponent { + static propTypes = Popover.propTypes + + rootNode = document.getElementById('popover-content') + + instanceNode = document.createElement('div') + + componentDidMount () { + if (!this.rootNode) { + return + } + + this.rootNode.appendChild(this.instanceNode) + } + + componentWillUnmount () { + if (!this.rootNode) { + return + } + + this.rootNode.removeChild(this.instanceNode) + } + + render () { + const children = + return this.rootNode + ? ReactDOM.createPortal(children, this.instanceNode) + : children + } +}