Skip to content

Commit 58c26ae

Browse files
ryanflorenceryanflorence
committed
tests and stuff
1 parent 10fe405 commit 58c26ae

11 files changed

Lines changed: 264 additions & 110 deletions

File tree

‎README.md‎

Lines changed: 86 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,90 @@
11
React Modal
22
===========
33

4-
WIP
4+
Accessible React Modal Dialog Component
5+
6+
Usage
7+
-----
8+
9+
```xml
10+
<Modal
11+
isOpen={this.state.modalIsOpen}
12+
onRequestClose={this.handleModalCloseRequest}
13+
closeTimeoutMS={150}
14+
>
15+
<h1>Modal Content</h1>
16+
<p>Etc.</p>
17+
</Modal>
18+
```
19+
20+
Accessibility Notes
21+
-------------------
22+
23+
24+
25+
Inside the app:
26+
27+
```js
28+
/** @jsx React.DOM */
29+
30+
var React = require('react');
31+
var Modal = require('react-modal');
32+
33+
var appElement = document.getElementById('your-app-element');
34+
35+
Modal.setAppElement(appElement);
36+
Modal.injectCSS();
37+
38+
var App = React.createClass({
39+
40+
getInitialState: function() {
41+
return { modalIsOpen: false };
42+
},
43+
44+
openModal: function() {
45+
this.setState({modalIsOpen: true});
46+
},
47+
48+
closeModal: function() {
49+
this.setState({modalIsOpen: false});
50+
},
51+
52+
handleModalCloseRequest: function() {
53+
// opportunity to validate something and keep the modal open even if it
54+
// requested to be closed
55+
this.setState({modalIsOpen: false});
56+
},
57+
58+
render: function() {
59+
return (
60+
<div>
61+
<button onClick={this.openModal}>Open Modal</button>
62+
<Modal
63+
closeTimeoutMS={150}
64+
isOpen={this.state.modalIsOpen}
65+
onRequestClose={this.handleModalCloseRequest}
66+
>
67+
<h1>Hello</h1>
68+
<button onClick={this.closeModal}>close</button>
69+
<div>I am a modal</div>
70+
<form>
71+
<input />
72+
<input />
73+
<input />
74+
<input />
75+
<input />
76+
<br/>
77+
<button>hi</button>
78+
<button>hi</button>
79+
<button>hi</button>
80+
<button>hi</button>
81+
</form>
82+
</Modal>
83+
</div>
84+
);
85+
}
86+
});
87+
88+
React.renderComponent(<App/>, appElement);
89+
```
590

‎examples/README.md‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/basic/app.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ body {
44
background: #ccc;
55
}
66

7-
a {
8-
color: hsl(200, 50%, 50%);
9-
}
10-
11-
a.active {
12-
color: hsl(20, 50%, 50%);
13-
}
14-
157
.ReactModal__Overlay {
168
-webkit-perspective: 600;
179
perspective: 600;
@@ -41,5 +33,3 @@ a.active {
4133
transition: all 150ms ease-in;
4234
}
4335

44-
45-

‎examples/basic/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!doctype html public "embarassment">
22
<title>Master Detail Example</title>
33
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
4-
<link href="../global.css" rel="stylesheet"/>
54
<link href="app.css" rel="stylesheet"/>
65
<body>
76
<div id="example"></div>

‎examples/global.css‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎examples/index.html‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎lib/components/ModalPortal.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
/** @jsx React.DOM */
2-
31
var React = require('react');
2+
var div = React.DOM.div;
43
var focusManager = require('../helpers/focusManager');
54
var scopeTab = require('../helpers/scopeTab');
65

@@ -98,8 +97,8 @@ var ModalPortal = module.exports = React.createClass({
9897
},
9998

10099
handleKeyDown: function(event) {
101-
if (event.keyCode == 9 /*tab*/) scopeTab(this.getDOMNode(), event);
102-
if (event.keyCode == 27 /*esc*/) this.requestClose();
100+
if (event.key == 9 /*tab*/) scopeTab(this.getDOMNode(), event);
101+
if (event.key == 27 /*esc*/) this.requestClose();
103102
},
104103

105104
handleOverlayClick: function() {
@@ -134,27 +133,23 @@ var ModalPortal = module.exports = React.createClass({
134133
},
135134

136135
render: function() {
137-
if (this.shouldBeClosed())
138-
return <div/>;
139-
140-
return (
141-
<div
142-
className={this.buildClassName('overlay')}
143-
style={this.overlayStyles}
144-
onClick={this.handleOverlayClick}
145-
>
146-
<div
147-
onClick={stopPropagation}
148-
ref="content"
149-
onKeyDown={this.handleKeyDown}
150-
className={this.buildClassName('content')}
151-
tabIndex="-1"
152-
>
153-
{this.props.children}
154-
</div>
155-
</div>
136+
return this.shouldBeClosed() ? div() : (
137+
div({
138+
className: this.buildClassName('overlay'),
139+
style: this.overlayStyles,
140+
onClick: this.handleOverlayClick
141+
},
142+
div({
143+
ref: "content",
144+
className: this.buildClassName('content'),
145+
tabIndex: "-1",
146+
onClick: stopPropagation,
147+
onKeyDown: this.handleKeyDown
148+
},
149+
this.props.children
150+
)
151+
)
156152
);
157153
}
158-
159154
});
160155

‎lib/helpers/ariaAppHider.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,34 @@ function setElement(element) {
55
}
66

77
function hide(appElement) {
8-
validateElement();
8+
validateElement(appElement);
99
(appElement || _element).setAttribute('aria-hidden', 'true');
1010
}
1111

1212
function show(appElement) {
13-
validateElement();
13+
validateElement(appElement);
1414
(appElement || _element).removeAttribute('aria-hidden');
1515
}
1616

1717
function toggle(shouldHide, appElement) {
18-
if (shouldHide) hide(appElement); else show(appElement);
18+
if (shouldHide)
19+
hide(appElement);
20+
else
21+
show(appElement);
1922
}
2023

21-
function validateElement() {
22-
if (!_element)
24+
function validateElement(appElement) {
25+
if (!appElement && !_element)
2326
throw new Error('react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible');
2427
}
2528

29+
function resetForTesting() {
30+
_element = null;
31+
}
32+
2633
exports.toggle = toggle;
2734
exports.setElement = setElement;
2835
exports.show = show;
2936
exports.hide = hide;
37+
exports.resetForTesting = resetForTesting;
3038

0 commit comments

Comments
 (0)