Implement global modal

2 files changed, 85 insertions, 0 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 660a68230..71e767b91 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -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;
diff --git a/ui/app/components/modal.js b/ui/app/components/modal.js
new file mode 100644
index 000000000..5bbc86ff5
--- /dev/null
+++ b/ui/app/components/modal.js
@@ -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,
+// }