Skip to content

Commit 13dfc4e

Browse files
diasbrunodiasbruno
committedSep 21, 2017
[chore] update tests.
·
v3.16.33.0.0-alpha
1 parent ba81894 commit 13dfc4e

File tree

11 files changed

+240
-114
lines changed

11 files changed

+240
-114
lines changed
 

‎examples/base.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
/* From http://instructure-react.github.io/library/shared.css */
3+
4+
.padbox {
5+
padding: 40px;
6+
}
7+
8+
.branding {
9+
border-bottom: 1px solid hsl(200, 0%, 90%);
10+
}

‎examples/basic/app.js

+14-25
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,28 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
3-
import Modal from '../../src/index';
4-
import ViewA from './view_a';
5-
import ViewB from './view_b';
3+
import Modal from 'react-modal';
4+
import SimpleUsage from './simple_usage';
5+
import MultipleModals from './multiple_modals';
66

77
const appElement = document.getElementById('example');
88

99
Modal.setAppElement('#example');
1010

11-
const heading = firstView => {
12-
if (firstView) {
13-
return "#1. Working with one modal at a time.";
14-
}
15-
return "#2. Working with many modal.";
16-
};
11+
const examples = [
12+
SimpleUsage,
13+
MultipleModals
14+
];
1715

18-
class App extends Component {
19-
constructor(props) {
20-
super(props);
21-
this.state = { firstView: true };
22-
}
23-
24-
toggleView = () => {
25-
this.setState({ ...this.state, firstView: !this.state.firstView });
26-
}
27-
28-
render() {
16+
function App(props) {
17+
return examples.map((example, key) => {
18+
const ExampleApp = example.app;
2919
return (
30-
<div>
31-
<button onClick={this.toggleView}>Click to go to the next example!</button>
32-
<h2>{heading(this.state.firstView)}</h2>
33-
{this.state.firstView ? <ViewA /> : <ViewB />}
20+
<div key={key} className="example">
21+
<h3>{example.label}</h3>
22+
<ExampleApp />
3423
</div>
3524
);
36-
}
25+
});
3726
}
3827

3928
ReactDOM.render(<App/>, appElement);

‎examples/basic/view_a.js renamed to ‎examples/basic/forms/index.js

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { Component } from 'react';
2-
import Modal from '../../src/index';
3-
import ModalA from './modal_a';
2+
import Modal from 'react-modal';
3+
import MyModal from './modal';
44

55
const MODAL_A = 'modal_a';
66
const MODAL_B = 'modal_b';
77

88
const DEFAULT_TITLE = 'Default title';
99

10-
export default class ViewA extends Component {
10+
class SimpleUsage extends Component {
1111
constructor(props) {
1212
super(props);
1313
this.state = {
@@ -22,7 +22,12 @@ export default class ViewA extends Component {
2222
this.handleModalCloseRequest();
2323
return;
2424
}
25-
this.setState({ ...this.state, currentModal: key, title1: DEFAULT_TITLE });
25+
26+
this.setState({
27+
...this.state,
28+
currentModal: key,
29+
title1: DEFAULT_TITLE
30+
});
2631
}
2732

2833
handleModalCloseRequest = () => {
@@ -34,7 +39,7 @@ export default class ViewA extends Component {
3439
});
3540
}
3641

37-
handleInputChange = (e) => {
42+
handleInputChange = e => {
3843
let text = e.target.value;
3944
if (text == '') {
4045
text = DEFAULT_TITLE;
@@ -47,13 +52,16 @@ export default class ViewA extends Component {
4752
this.heading && (this.heading.style.color = '#F00');
4853
}
4954

55+
headingRef = h1 => this.heading = h1;
56+
5057
render() {
5158
const { currentModal } = this.state;
59+
5260
return (
5361
<div>
5462
<button onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
5563
<button onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
56-
<ModalA
64+
<MyModal
5765
title={this.state.title1}
5866
isOpen={currentModal == MODAL_A}
5967
onAfterOpen={this.handleOnAfterOpenModal}
@@ -72,12 +80,17 @@ export default class ViewA extends Component {
7280
isOpen={currentModal == MODAL_B}
7381
onAfterOpen={this.handleOnAfterOpenModal}
7482
onRequestClose={this.toggleModal(MODAL_B)}>
75-
<h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
83+
<h1 id="heading" ref={headingRef}>This is the modal 2!</h1>
7684
<div id="fulldescription" tabIndex="0" role="document">
7785
<p>This is a description of what it does: nothing :)</p>
78-
</div>
86+
</div>p
7987
</Modal>
8088
</div>
8189
);
8290
}
8391
}
92+
93+
export default {
94+
label: "#1. Working with one modal at a time.",
95+
app: SimpleUsage
96+
};

‎examples/basic/index.html

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<!doctype html public "embarassment">
2-
<title>Basic Example</title>
3-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
4-
<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
5-
<link rel="stylesheet" href="app.css"/>
6-
<body>
7-
<header class="branding padbox">
8-
<h1>react-modal</h1>
9-
<h2>an accessible React modal dialog component</h2>
10-
</header>
11-
<div id="example" class="padbox"></div>
12-
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
13-
<script src="../__build__/shared.js"></script>
14-
<script src="../__build__/basic.js"></script>
2+
<html>
3+
<head>
4+
<title>Basic Example</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="/base.css"/>
8+
<link rel="stylesheet" href="app.css"/>
9+
</head>
10+
<body>
11+
<header class="branding padbox">
12+
<h1>react-modal</h1>
13+
<h2>an accessible React modal dialog component</h2>
14+
</header>
15+
<div id="example" class="padbox"></div>
16+
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
17+
<script src="../__build__/shared.js"></script>
18+
<script src="../__build__/basic.js"></script>
19+
</body>
20+
</html>

‎examples/basic/view_b.js renamed to ‎examples/basic/multiple_modals/index.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import React, { Component } from 'react';
2-
import Modal from '../../src/index';
3-
import ModalA from './modal_a';
2+
import Modal from 'react-modal';
43

54
function List(props) {
6-
return (
7-
<div>
8-
{props.items.map(
9-
(x, i) => <div key={i} onClick={props.onItemClick(i)}><a href="javascript:void(0)">{x}</a></div>
10-
)}
5+
return props.items.map((x, i) => (
6+
<div key={i} onClick={props.onItemClick(i)}>
7+
<a href="javascript:void(0)">{x}</a>
118
</div>
12-
);
9+
));
1310
}
1411

15-
export default class ViewB extends Component {
12+
class MultipleModals extends Component {
1613
constructor(props) {
1714
super(props);
1815
this.state = {
@@ -72,7 +69,7 @@ export default class ViewB extends Component {
7269
const { listItemsIsOpen } = this.state;
7370
return (
7471
<div>
75-
<button onClick={this.toggleModal}>Open Modal A</button>
72+
<button type="button" className="btn btn-primary" onClick={this.toggleModal}>Open Modal A</button>
7673
<Modal
7774
id="test"
7875
closeTimeoutMS={150}
@@ -108,3 +105,8 @@ export default class ViewB extends Component {
108105
);
109106
}
110107
}
108+
109+
export default {
110+
label: "#2. Working with many modal.",
111+
app: MultipleModals
112+
};

‎examples/basic/simple_usage/index.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { Component } from 'react';
2+
import Modal from 'react-modal';
3+
import MyModal from './modal';
4+
5+
const MODAL_A = 'modal_a';
6+
const MODAL_B = 'modal_b';
7+
8+
const DEFAULT_TITLE = 'Default title';
9+
10+
class SimpleUsage extends Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
title1: DEFAULT_TITLE,
15+
currentModal: null
16+
};
17+
}
18+
19+
toggleModal = key => event => {
20+
event.preventDefault();
21+
if (this.state.currentModal) {
22+
this.handleModalCloseRequest();
23+
return;
24+
}
25+
26+
this.setState({
27+
...this.state,
28+
currentModal: key,
29+
title1: DEFAULT_TITLE
30+
});
31+
}
32+
33+
handleModalCloseRequest = () => {
34+
// opportunity to validate something and keep the modal open even if it
35+
// requested to be closed
36+
this.setState({
37+
...this.state,
38+
currentModal: null
39+
});
40+
}
41+
42+
handleInputChange = e => {
43+
let text = e.target.value;
44+
if (text == '') {
45+
text = DEFAULT_TITLE;
46+
}
47+
this.setState({ ...this.state, title1: text });
48+
}
49+
50+
handleOnAfterOpenModal = () => {
51+
// when ready, we can access the available refs.
52+
this.heading && (this.heading.style.color = '#F00');
53+
}
54+
55+
render() {
56+
const { currentModal } = this.state;
57+
58+
return (
59+
<div>
60+
<button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
61+
<button type="button" className="btn btn-primary" onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
62+
<MyModal
63+
title={this.state.title1}
64+
isOpen={currentModal == MODAL_A}
65+
onAfterOpen={this.handleOnAfterOpenModal}
66+
onRequestClose={this.handleModalCloseRequest}
67+
askToClose={this.toggleModal(MODAL_A)}
68+
onChangeInput={this.handleInputChange} />
69+
<Modal
70+
ref="mymodal2"
71+
id="test2"
72+
aria={{
73+
labelledby: "heading",
74+
describedby: "fulldescription"
75+
}}
76+
closeTimeoutMS={150}
77+
contentLabel="modalB"
78+
isOpen={currentModal == MODAL_B}
79+
onAfterOpen={this.handleOnAfterOpenModal}
80+
onRequestClose={this.toggleModal(MODAL_B)}>
81+
<h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
82+
<div id="fulldescription" tabIndex="0" role="document">
83+
<p>This is a description of what it does: nothing :)</p>
84+
</div>
85+
</Modal>
86+
</div>
87+
);
88+
}
89+
}
90+
91+
export default {
92+
label: "#1. Working with one modal at a time.",
93+
app: SimpleUsage
94+
};

‎examples/basic/modal_a.js renamed to ‎examples/basic/simple_usage/modal.js

+7-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import React from 'react';
2-
import Modal from '../../src/index';
2+
import Modal from 'react-modal';
3+
4+
export default props => {
5+
const {
6+
title, isOpen, askToClose,
7+
onAfterOpen, onRequestClose, onChangeInput
8+
} = props;
39

4-
// This way you can provide a correct interface
5-
// for anyone that will use this modal.
6-
//
7-
// NOTE: Code style is just to show the interface.
8-
// Prefer comment your api.
9-
export default function ModalA(
10-
{
11-
title, isOpen, onAfterOpen,
12-
onRequestClose, askToClose, onChangeInput
13-
}
14-
) {
1510
return (
1611
<Modal
1712
id="test"

‎examples/bootstrap/app.js

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
1-
var React = require('react');
2-
var ReactDOM = require('react-dom');
3-
var Modal = require('../../src/index');
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Modal from 'react-modal';
44

55
var appElement = document.getElementById('example');
66

77
Modal.setAppElement(appElement);
88

9-
var App = React.createClass({
10-
11-
getInitialState: function() {
12-
return { modalIsOpen: false };
13-
},
9+
class App extends Component {
10+
constructor(props) {
11+
super(props);
12+
this.state = { modalIsOpen: false };
13+
}
1414

15-
openModal: function() {
15+
openModal = () => {
1616
this.setState({modalIsOpen: true});
17-
},
17+
}
1818

19-
closeModal: function() {
19+
closeModal = () => {
2020
this.setState({modalIsOpen: false});
21-
},
21+
}
2222

23-
handleModalCloseRequest: function() {
23+
handleModalCloseRequest = () => {
2424
// opportunity to validate something and keep the modal open even if it
2525
// requested to be closed
2626
this.setState({modalIsOpen: false});
27-
},
27+
}
2828

29-
handleSaveClicked: function(e) {
29+
handleSaveClicked = (e) => {
3030
alert('Save button was clicked');
31-
},
31+
}
3232

33-
render: function() {
33+
render() {
3434
return (
3535
<div>
36-
<button onClick={this.openModal}>Open Modal</button>
36+
<button type="button" className="btn btn-primary" onClick={this.openModal}>Open Modal</button>
3737
<Modal
3838
className="Modal__Bootstrap modal-dialog"
3939
closeTimeoutMS={150}
@@ -63,6 +63,6 @@ var App = React.createClass({
6363
</div>
6464
);
6565
}
66-
});
66+
}
6767

6868
ReactDOM.render(<App/>, appElement);

‎examples/bootstrap/index.html

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
<!doctype html public "embarassment">
2-
<title>Bootstrap-Style Example</title>
3-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
4-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
5-
<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
6-
<link rel="stylesheet" href="app.css"/>
7-
<body>
8-
<header class="branding padbox">
9-
<h1>react-modal</h1>
10-
<h2>an accessible React modal dialog component</h2>
11-
</header>
12-
<div id="example" class="padbox"></div>
13-
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
14-
<script src="../__build__/shared.js"></script>
15-
<script src="../__build__/bootstrap.js"></script>
2+
<html>
3+
<head>
4+
<title>Bootstrap-Style Example</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="/base.css" type="text/css" />
8+
<link rel="stylesheet" href="app.css"/>
9+
</head>
10+
<body>
11+
<header class="branding padbox">
12+
<h1>react-modal</h1>
13+
<h2>an accessible React modal dialog component</h2>
14+
</header>
15+
<div id="example" class="padbox"></div>
16+
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
17+
<script src="../__build__/shared.js"></script>
18+
<script src="../__build__/bootstrap.js"></script>
19+
</body>
20+
</html>

‎examples/index.html

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<!doctype html public "embarassment">
2-
<title>Basic Example</title>
3-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
4-
<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
5-
<link rel="stylesheet" href="basic/app.css"/>
6-
<body>
7-
<header class="branding padbox">
8-
<h1>react-modal</h1>
9-
<h2>an accessible React modal dialog component</h2>
10-
</header>
11-
<div id="example" class="padbox"></div>
12-
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
13-
<script src="__build__/shared.js"></script>
14-
<script src="__build__/basic.js"></script>
2+
<html>
3+
<head>
4+
<title>Basic Example</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="/base.css" type="text/css" />
8+
</head>
9+
<body>
10+
<header class="branding padbox">
11+
<h1>react-modal</h1>
12+
<h2>an accessible React modal dialog component</h2>
13+
</header>
14+
<div id="example" class="padbox">
15+
<a class="btn btn-primary" href="/basic/">Basic</a>
16+
<a class="btn btn-primary" href="/bootstrap/">Bootstrap</a>
17+
</div>
18+
<a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
19+
</body>
20+
</html>

‎webpack.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ module.exports = {
3939
]
4040
},
4141

42+
resolve: {
43+
alias: {
44+
"react-modal": path.resolve(__dirname, "./src")
45+
}
46+
},
47+
4248
plugins: [
4349
new webpack.optimize.CommonsChunkPlugin('shared.js')
4450
]

0 commit comments

Comments
 (0)
Please sign in to comment.