Add optional portal to Popover component (#8253)

5 years ago · d1f761956a
parent 079db2fdb4
commit d1f761956a
4 changed files with 35 additions and 2 deletions
--- a/app/home.html
+++ b/app/home.html
@ -9,6 +9,7 @@
  </head>
  <body>
    <div id="app-content"></div>
+    <div id="popover-content"></div>
    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
--- a/app/notification.html
+++ b/app/notification.html
@ -36,6 +36,7 @@
      <img id="loading__logo" src="./images/logo/metamask-fox.svg" />
      <img id="loading__spinner" src="./images/spinner.gif" />
    </div>
+    <div id="popover-content"></div>
    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
--- a/app/popup.html
+++ b/app/popup.html
@ -9,6 +9,7 @@
  </head>
  <body style="width:357px; height:600px;">
    <div id="app-content"></div>
+    <div id="popover-content"></div>
    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
--- 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 = <Popover {...this.props} />
+    return this.rootNode
+      ? ReactDOM.createPortal(children, this.instanceNode)
+      : children
+  }
+}