tests and stuff

Widen · Sep 24, 2014 · 58c26ae · 58c26ae
1 parent 10fe405
commit 58c26ae
Show file tree

Hide file tree

Showing 11 changed files with 264 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,90 @@
 React Modal
 ===========
 
-WIP
+Accessible React Modal Dialog Component
+
+Usage
+-----
+
+```xml
+<Modal
+  isOpen={this.state.modalIsOpen}
+  onRequestClose={this.handleModalCloseRequest}
+  closeTimeoutMS={150}
+>
+  <h1>Modal Content</h1>
+  <p>Etc.</p>
+</Modal>
+```
+
+Accessibility Notes
+-------------------
+
+
+
+Inside the app:
+
+```js
+/** @jsx React.DOM */
+
+var React = require('react');
+var Modal = require('react-modal');
+
+var appElement = document.getElementById('your-app-element');
+
+Modal.setAppElement(appElement);
+Modal.injectCSS();
+
+var App = React.createClass({
+
+  getInitialState: function() {
+    return { modalIsOpen: false };
+  },
+
+  openModal: function() {
+    this.setState({modalIsOpen: true});
+  },
+
+  closeModal: function() {
+    this.setState({modalIsOpen: false});
+  },
+
+  handleModalCloseRequest: function() {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
+  },
+
+  render: function() {
+    return (
+      <div>
+        <button onClick={this.openModal}>Open Modal</button>
+        <Modal
+          closeTimeoutMS={150}
+          isOpen={this.state.modalIsOpen}
+          onRequestClose={this.handleModalCloseRequest}
+        >
+          <h1>Hello</h1>
+          <button onClick={this.closeModal}>close</button>
+          <div>I am a modal</div>
+          <form>
+            <input />
+            <input />
+            <input />
+            <input />
+            <input />
+            <br/>
+            <button>hi</button>
+            <button>hi</button>
+            <button>hi</button>
+            <button>hi</button>
+          </form>
+        </Modal>
+      </div>
+    );
+  }
+});
+
+React.renderComponent(<App/>, appElement);
+```
 
diff --git a/examples/README.md b/examples/README.md
diff --git a/examples/basic/app.css b/examples/basic/app.css
@@ -4,14 +4,6 @@ body {
   background: #ccc;
 }
 
-a {
-  color: hsl(200, 50%, 50%);
-}
-
-a.active {
-  color: hsl(20, 50%, 50%);
-}
-
 .ReactModal__Overlay {
   -webkit-perspective: 600;
   perspective: 600;
@@ -41,5 +33,3 @@ a.active {
   transition: all 150ms ease-in;
 }
 
-
-
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -1,7 +1,6 @@
 <!doctype html public "embarassment">
 <title>Master Detail Example</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-<link href="../global.css" rel="stylesheet"/>
 <link href="app.css" rel="stylesheet"/>
 <body>
 <div id="example"></div>

diff --git a/examples/global.css b/examples/global.css
diff --git a/examples/index.html b/examples/index.html
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -1,6 +1,5 @@
-/** @jsx React.DOM */
-
 var React = require('react');
+var div = React.DOM.div;
 var focusManager = require('../helpers/focusManager');
 var scopeTab = require('../helpers/scopeTab');
 
@@ -98,8 +97,8 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   handleKeyDown: function(event) {
-    if (event.keyCode == 9 /*tab*/) scopeTab(this.getDOMNode(), event);
-    if (event.keyCode == 27 /*esc*/) this.requestClose();
+    if (event.key == 9 /*tab*/) scopeTab(this.getDOMNode(), event);
+    if (event.key == 27 /*esc*/) this.requestClose();
   },
 
   handleOverlayClick: function() {
@@ -134,27 +133,23 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   render: function() {
-    if (this.shouldBeClosed())
-      return <div/>;
-
-    return (
-      <div
-        className={this.buildClassName('overlay')}
-        style={this.overlayStyles}
-        onClick={this.handleOverlayClick}
-      >
-        <div
-          onClick={stopPropagation}
-          ref="content"
-          onKeyDown={this.handleKeyDown}
-          className={this.buildClassName('content')}
-          tabIndex="-1"
-        >
-          {this.props.children}
-        </div>
-      </div>
+    return this.shouldBeClosed() ? div() : (
+      div({
+        className: this.buildClassName('overlay'),
+        style: this.overlayStyles,
+        onClick: this.handleOverlayClick
+      },
+        div({
+          ref: "content",
+          className: this.buildClassName('content'),
+          tabIndex: "-1",
+          onClick: stopPropagation,
+          onKeyDown: this.handleKeyDown
+        },
+          this.props.children
+        )
+      )
     );
   }
-
 });
 
diff --git a/lib/helpers/ariaAppHider.js b/lib/helpers/ariaAppHider.js
@@ -5,26 +5,34 @@ function setElement(element) {
 }
 
 function hide(appElement) {
-  validateElement();
+  validateElement(appElement);
   (appElement || _element).setAttribute('aria-hidden', 'true');
 }
 
 function show(appElement) {
-  validateElement();
+  validateElement(appElement);
   (appElement || _element).removeAttribute('aria-hidden');
 }
 
 function toggle(shouldHide, appElement) {
-  if (shouldHide) hide(appElement); else show(appElement);
+  if (shouldHide)
+    hide(appElement);
+  else
+    show(appElement);
 }
 
-function validateElement() {
-  if (!_element)
+function validateElement(appElement) {
+  if (!appElement && !_element)
     throw new Error('react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible');
 }
 
+function resetForTesting() {
+  _element = null;
+}
+
 exports.toggle = toggle;
 exports.setElement = setElement;
 exports.show = show;
 exports.hide = hide;
+exports.resetForTesting = resetForTesting;