reuse our old modal markup as a react component instead of react-modal.

formspree/js/Modal.js

@@ -0,0 +1,37 @@
+/** @format */
+
+const React = require('react')
+const cs = require('class-set')
+
+export default class Modal extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.close = this.close.bind(this)
+  }
+
+  render() {
+    return (
+      <div className={cs({modal: true, target: this.props.opened})}>
+        <div className="container">
+          {this.props.opened ? (
+            <>
+              <div className="x">
+                <h4>{this.props.title}</h4>
+                <a href="#" onClick={this.close}>
+                  &times;
+                </a>
+              </div>
+              {this.props.children}
+            </>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
+  close(e) {
+    e.preventDefault()
+    this.props.onClose(e)
+  }
+}

formspree/js/forms/CreateForm.js

@@ -13,6 +13,8 @@ export default class CreateForm extends React.Component {
   constructor(props) {
     super(props)
 
+    this.openModal = this.openModal.bind(this)
+    this.closeModal = this.closeModal.bind(this)
     this.setEmail = this.setEmail.bind(this)
     this.setURL = this.setURL.bind(this)
     this.setSitewide = this.setSitewide.bind(this)
@@ -21,6 +23,8 @@ export default class CreateForm extends React.Component {
     this.checkSitewide = this.checkSitewide.bind(this)
 
     this.state = {
+      modalOpened: false,
+
       url: '',
       email: '',
       sitewide: false,
@@ -31,10 +35,6 @@ export default class CreateForm extends React.Component {
     }
   }
 
-  componentDidMount() {
-    modals()
-  }
-
   render() {
     let {
       email,
@@ -48,16 +48,16 @@ export default class CreateForm extends React.Component {
     return (
       <div className="col-1-1">
         <div className="create-form">
-          <a href="#create-form" className="button">
+          <a href="#" onClick={this.openModal} className="button">
             Create a form
           </a>
 
-          <div className="modal" id="create-form" aria-hidden="true">
+          <Modal
+            opened={this.state.modalOpened}
+            onClose={this.closeModal}
+            title="Create form"
+          >
             <div className="container">
-              <div className="x">
-                <h4>Create form</h4>
-                <a href="#">&times;</a>
-              </div>
               <form onSubmit={this.create}>
                 <div className="col-1-1">
                   <h4>Send email to:</h4>
@@ -149,7 +149,7 @@ export default class CreateForm extends React.Component {
                 </div>
               </form>
             </div>
-          </div>
+          </Modal>
         </div>
       </div>
     )
@@ -263,4 +263,14 @@ export default class CreateForm extends React.Component {
       toastr.error('Failed to create form, see the console for more details.')
     }
   }
+
+  openModal(e) {
+    e.preventDefault()
+    this.setState({modalOpened: true})
+  }
+
+  closeModal(e) {
+    e.preventDefault()
+    this.setState({modalOpened: false})
+  }
 }

formspree/js/forms/FormPage/Whitelabel.js

@@ -6,10 +6,11 @@ const cs = require('class-set')
 const qs = require('query-string')
 const React = require('react')
 const CodeMirror = require('react-codemirror2')
-const Modal = require('react-modal')
 require('codemirror/mode/xml/xml')
 require('codemirror/mode/css/css')
 
+import Modal from '../../Modal'
+
 const MODAL_REVERT = 'revert'
 const MODAL_PREVIEW = 'preview'
 const MODAL_SYNTAX = 'syntax'
@@ -186,11 +187,9 @@ export default class FormSettings extends React.Component {
           </div>
         </div>
         <Modal
-          contentLabel="Revert changes"
-          isOpen={this.state.modal === MODAL_REVERT}
-          onRequestClose={this.closeModal}
-          className="dummy"
-          overlayClassName="dummy"
+          title="Revert changes"
+          opened={this.state.modal === MODAL_REVERT}
+          onClose={this.closeModal}
         >
           <div>
             <div className="container">
@@ -207,11 +206,9 @@ export default class FormSettings extends React.Component {
           </div>
         </Modal>
         <Modal
-          contentLabel="Preview"
-          isOpen={this.state.modal === MODAL_PREVIEW}
-          onRequestClose={this.closeModal}
-          className="dummy"
-          overlayClassName="dummy"
+          title="Preview"
+          opened={this.state.modal === MODAL_PREVIEW}
+          onClose={this.closeModal}
         >
           <div id="whitelabel-preview-modal">
             <iframe
@@ -232,11 +229,9 @@ export default class FormSettings extends React.Component {
           </div>
         </Modal>
         <Modal
-          contentLabel="Email Syntax"
-          isOpen={this.state.modal === MODAL_SYNTAX}
-          onRequestClose={this.closeModal}
-          className="dummy"
-          overlayClassName="dummy"
+          title="Email Syntax"
+          opened={this.state.modal === MODAL_SYNTAX}
+          onClose={this.closeModal}
         >
           <div>
             <div>

formspree/js/forms/main.js

@@ -2,13 +2,11 @@
 
 const render = require('react-dom').render
 const React = require('react') // eslint-disable-line no-unused-vars
-const Modal = require('react-modal')
 
 import Dashboard from './Dashboard'
 
 if (document.querySelector('body.forms.dashboard')) {
   let el = document.querySelector('.container.block')
-  Modal.setAppElement(el)
 
   document.querySelector('.menu .item:nth-child(2)').innerHTML = ''
   render(<Dashboard />, el)

formspree/scss/dashboard.scss

@@ -534,34 +534,6 @@
   }
 }
 
-.ReactModal__Overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.5);
-  display: flex;
-  justify-content: center;
-
-  .ReactModal__Content {
-    z-index: 11;
-    position: absolute;
-    top: 80px;
-    background: #fefefe;
-    border: #333333 solid 1px;
-    border-radius: 5px;
-    padding: 1.4em 1.4em 0.5em 1.4em;
-    max-width: 900px;
-    transform: translate(0, -500%);
-    transition: transform 0.6s ease-out;
-  }
-
-  &.ReactModal__Overlay--after-open .ReactModal__Content {
-    transform: translate(0, 0);
-  }
-}
-
 .CodeMirror {
   z-index: 0;
   padding: 10px;

package.json

@@ -7,7 +7,6 @@
     "react": "^16.4.2",
     "react-codemirror2": "^5.1.0",
     "react-dom": "^16.4.2",
-    "react-modal": "^3.5.1",
     "react-router-dom": "^4.3.1",
     "url": "^0.11.0",
     "valid-url": "^1.0.9"