Replaced Modal with use of react-modal, an already accessible Modal c…

…omponent from reactjs.
erin-doyle · Sep 2, 2018 · f9b8e15 · f9b8e15
1 parent c0c9494
commit f9b8e15
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-modal": "^3.5.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },

diff --git a/public/app.css b/public/app.css
@@ -70,6 +70,19 @@ a {
     color: #3951b1;
 }
 
-.modal.show {
-    display: inherit;
+.dialog-modal {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    right: 40px;
+    bottom: 40px;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(77, 77, 77, 0.9);
 }
diff --git a/public/index.html b/public/index.html
@@ -31,7 +31,6 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="app-root"></div>
-    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/primitives/Modal.js b/src/primitives/Modal.js
diff --git a/src/wishlist/MovieEditor.js b/src/wishlist/MovieEditor.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Modal from 'react-modal';
 
-import Modal from '../primitives/Modal';
 
+// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
+Modal.setAppElement('#app-root');
 
 class MovieEditor extends Component {
     constructor(props) {
@@ -37,42 +39,53 @@ class MovieEditor extends Component {
     }
 
     render() {
+        const { isOpen } = this.props;
         const { notes } = this.state;
 
         return (
-            <Modal>
-                <div className="modal fade show">
-                    <div className="modal-dialog modal-dialog-centered">
-                        <div className="modal-content">
-                            <div className="modal-header">
-                                <h5 className="modal-title">Edit Movie</h5>
-                                <button type="button" className="close" onClick={this.handleClose}>
-                                    <span>&times;</span>
-                                </button>
-                            </div>
-                            <div className="modal-body">
-                                <div className="form-group">
-                                    <label>Notes:</label>
-                                    <textarea className="form-control" value={notes} onChange={this.handleChangeNotes} />
-                                </div>
-                            </div>
-                            <div className="modal-footer">
-                                <button type="button" className="btn btn-primary" onClick={this.handleSave}>Save</button>
+            <Modal
+                role="dialog"
+                isOpen={isOpen}
+                onRequestClose={this.handleClose}
+                className="dialog-modal"
+                overlayClassName="modal-overlay"
+                aria={{
+                    labelledby: "modal-title"
+                }}
+                shouldFocusAfterRender={true}
+                shouldCloseOnOverlayClick={true}
+            >
+                <div className="modal-dialog modal-dialog-centered">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h5 id="modal-title" className="modal-title">Edit Movie</h5>
+                            <button type="button" className="close" onClick={this.handleClose}>
+                                <span>&times;</span>
+                            </button>
+                        </div>
+                        <div className="modal-body">
+                            <div className="form-group">
+                                <label>Notes:</label>
+                                <textarea className="form-control" value={notes} onChange={this.handleChangeNotes} />
                             </div>
                         </div>
+                        <div className="modal-footer">
+                            <button type="button" className="btn btn-primary" onClick={this.handleSave}>Save</button>
+                        </div>
                     </div>
                 </div>
-                <div className="modal-backdrop fade show" />
             </Modal>
         );
     }
 }
 
 MovieEditor.defaultTypes = {
+    isOpen: false,
     movie: {}
 };
 
 MovieEditor.propTypes = {
+    isOpen: PropTypes.bool,
     movie: PropTypes.object,
     updateMovie: PropTypes.func.isRequired
 };

diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
@@ -92,10 +92,11 @@ class MovieWishlist extends Component {
                                 />
                             </div>
 
-                            { showEditor
-                                ? <MovieEditor movie={movieInEditing} updateMovie={this.handleUpdateMovie} />
-                                : null
-                            }
+                            <MovieEditor
+                                movie={movieInEditing}
+                                updateMovie={this.handleUpdateMovie}
+                                isOpen={showEditor}
+                            />
                         </Fragment>
 
                         // No movies yet in the WishList

diff --git a/yarn.lock b/yarn.lock
@@ -2647,6 +2647,10 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -5783,6 +5787,19 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-modal@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.5.1.tgz#33d38527def90ea324848f7d63e53acc4468a451"
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
+    warning "^3.0.0"
+
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"