Skip to content

Commit 13dfc4e

Browse files
diasbrunodiasbruno
committed
[chore] update tests.
1 parent ba81894 commit 13dfc4e

11 files changed

Lines changed: 240 additions & 114 deletions

File tree

‎examples/base.css‎

Lines changed: 10 additions & 0 deletions
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‎

Lines changed: 14 additions & 25 deletions
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

Lines changed: 21 additions & 8 deletions
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‎

Lines changed: 19 additions & 13 deletions
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

Lines changed: 12 additions & 10 deletions
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‎

Lines changed: 94 additions & 0 deletions
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

Lines changed: 7 additions & 12 deletions
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"

0 commit comments

Comments
 (0)