Move global modals into own pod, inside components/modals

1 files changed, 100 insertions, 0 deletions

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
new file mode 100644
index 000000000..006e009b3
--- /dev/null
+++ b/ui/app/components/modals/modal.js
@@ -0,0 +1,100 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../actions')
+const isMobileView = require('../../../lib/is-mobile-view')
+const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modalOpen
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+// Global Modal Component
+inherits(Modal, Component)
+function Modal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
+
+const mobileModalStyles = {
+  width: '95%',
+  // Used to create matching t/l/r/b space in mobile view.
+  top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+}
+
+const laptopModalStyles = {
+  width: '66%',
+  top: 'calc(30% + 10px)',
+  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+}
+
+const backdropStyles = {
+  backgroundColor: 'rgba(245, 245, 245, 0.85)',
+}
+
+Modal.prototype.render = function () {
+
+  return h(FadeModal,
+    {
+      className: 'modal',
+      keyboard: false,
+      onHide: () => {this.onHide()},
+      ref: (ref) => {
+        this.modalRef = ref
+      },
+      modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
+      backdropStyle: backdropStyles,
+    },
+    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()
+}
+
+// TODO: specify default props and proptypes
+// Modal.defaultProps = {}
+
+// const elementType = require('react-prop-types/lib/elementType')
+// const PropTypes from 'prop-types'
+
+// Modal.propTypes = {
+//   active: PropTypes.bool,
+//   hideModal: PropTypes.func.isRequired,
+//   component: elementType,
+//   onHideCallback: PropTypes.func,
+// }