m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 20:02:58 +01:00
Code

Add optional portal to Popover component (#8253)

Browse Source
This commit is contained in:
Whymarrh Whitby 2020-03-30 18:25:17 -02:30 committed by GitHub
parent 079db2fdb4
commit d1f761956a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/home.html
View File

@ -9,6 +9,7 @@
</head> </head>
<body> <body>
<div id="app-content"></div> <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-libs.js" type="text/javascript" charset="utf-8"></script>
<script src="./ui.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>

1
app/notification.html
View File

@ -36,6 +36,7 @@
<img id="loading__logo" src="./images/logo/metamask-fox.svg" /> <img id="loading__logo" src="./images/logo/metamask-fox.svg" />
<img id="loading__spinner" src="./images/spinner.gif" /> <img id="loading__spinner" src="./images/spinner.gif" />
</div> </div>
<div id="popover-content"></div>
<script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script> <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
<script src="./ui.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>

1
app/popup.html
View File

@ -9,6 +9,7 @@
</head> </head>
<body style="width:357px; height:600px;"> <body style="width:357px; height:600px;">
<div id="app-content"></div> <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-libs.js" type="text/javascript" charset="utf-8"></script>
<script src="./ui.js" type="text/javascript" charset="utf-8"></script> <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body> </body>

34
ui/app/components/ui/popover/popover.component.js
View File

@ -1,4 +1,5 @@
import React from 'react' import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import PopoverHeader from './popover.header.component' import PopoverHeader from './popover.header.component'
@ -20,4 +21,33 @@ Popover.propTypes = {
onClose: PropTypes.func.isRequired, 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
}
}