1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Implement global modal

This commit is contained in:
sdtsui 2017-08-08 13:37:41 -07:00
parent aab0fda9ac
commit f72f57dc6c
2 changed files with 85 additions and 0 deletions

View File

@ -36,6 +36,7 @@ const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
const Modal = require('./components/modal')
module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
@ -105,6 +106,9 @@ App.prototype.render = function () {
},
}, [
// global modal
this.renderGlobalModal(),
// app bar
this.renderAppBar(),
@ -126,6 +130,12 @@ App.prototype.render = function () {
)
}
App.prototype.renderGlobalModal = function() {
return h(Modal, {
ref: "modalRef",
}, ['test modal'])
}
App.prototype.renderSidebar = function() {
// if (!this.props.sidebarOpen) {
// return null;

View File

@ -0,0 +1,75 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
// const elementType = require('react-prop-types/lib/elementType')
// const PropTypes from 'prop-types'
const FadeModal = require('boron').FadeModal
const actions = require('../actions')
function mapStateToProps (state) {
return {
active: state.appState.modalOpen
}
}
function mapDispatchToProps (dispatch) {
return {
hideModal: () => {
dispatch(actions.hideModal())
},
}
}
inherits(Modal, Component)
function Modal () {
Component.call(this)
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
Modal.prototype.render = function () {
return h(FadeModal,
{
keyboard: false,
onHide: () => {this.onHide()},
ref: (ref) => {
this.modalRef = ref
},
},
this.props.children,
)
}
Modal.prototype.componentWillReceiveProps = function(nextProps) {
if (nextProps.active) {
this.show()
} else if (this.props.active) {
this.hide()
}
}
Modal.prototype.onHide = function() {
if (this.props.onHideCallback) {
this.props.onHideCallback()
}
this.props.hideModal()
}
Modal.prototype.hide = function() {
this.modalRef.hide()
}
Modal.prototype.show = function() {
this.modalRef.show()
}
// Modal.defaultProps = {}
// Modal.propTypes = {
// active: PropTypes.bool,
// hideModal: PropTypes.func.isRequired,
// component: elementType,
// onHideCallback: PropTypes.func,
// }