Skip to content

Commit f386aa4

Browse files
diasbrunodiasbruno
committedJun 29, 2017
[chore] added more examples.
·
v3.16.33.0.0-alpha
1 parent b67ad54 commit f386aa4

File tree

4 files changed

+245
-67
lines changed

4 files changed

+245
-67
lines changed
 

‎examples/basic/app.js

+15-67
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,36 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import Modal from '../../src/index';
4+
import ViewA from './view_a';
5+
import ViewB from './view_b';
46

57
const appElement = document.getElementById('example');
68

79
Modal.setAppElement('#example');
810

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+
};
17+
918
class App extends Component {
1019
constructor(props) {
1120
super(props);
12-
this.state = { modal1: false, modal2: false };
13-
}
14-
15-
toggleModal_1 = () => {
16-
this.setState({ ...this.state, modal1: !this.state.modal1 });
17-
}
18-
19-
toggleModal_2 = event => {
20-
event.preventDefault();
21-
this.setState({ ...this.state, modal2: !this.state.modal2 });
22-
}
23-
24-
handleModalCloseRequest = () => {
25-
// opportunity to validate something and keep the modal open even if it
26-
// requested to be closed
27-
this.setState({ ...this.state, modal1: false });
28-
}
29-
30-
handleInputChange = () => {
31-
this.setState({ ...this.state, foo: 'bar' });
21+
this.state = { firstView: true };
3222
}
3323

34-
handleOnAfterOpenModal = () => {
35-
// when ready, we can access the available refs.
36-
this.refs.title.style.color = '#F00';
24+
toggleView = () => {
25+
this.setState({ ...this.state, firstView: !this.state.firstView });
3726
}
3827

3928
render() {
40-
const { modal1, modal2 } = this.state;
4129
return (
4230
<div>
43-
<button onClick={this.toggleModal_1}>Open Modal A</button>
44-
<button onClick={this.toggleModal_2}>Open Modal B</button>
45-
<Modal
46-
ref="mymodal"
47-
id="test"
48-
closeTimeoutMS={150}
49-
isOpen={modal1}
50-
contentLabel="modalA"
51-
onAfterOpen={this.handleOnAfterOpenModal}
52-
onRequestClose={this.handleModalCloseRequest}>
53-
<h1 ref="title">Hello</h1>
54-
<button onClick={this.toggleModal_1}>close</button>
55-
<div>I am a modal</div>
56-
<form>
57-
<input onChange={this.handleInputChange} />
58-
<input />
59-
<input />
60-
<input />
61-
<input />
62-
<br/>
63-
<button>hi</button>
64-
<button>hi</button>
65-
<button>hi</button>
66-
<button>hi</button>
67-
<button onClick={this.toggleModal_2}>Open Modal B</button>
68-
</form>
69-
</Modal>
70-
<Modal ref="mymodal2"
71-
id="test2"
72-
aria={{
73-
labelledby: "heading",
74-
describedby: "fulldescription"
75-
}}
76-
closeTimeoutMS={150}
77-
contentLabel="modalB"
78-
isOpen={modal2}
79-
onAfterOpen={() => {}}
80-
onRequestClose={this.toggleModal_2}>
81-
<h1 id="heading">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>
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 />}
8634
</div>
8735
);
8836
}

‎examples/basic/modal_a.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import Modal from '../../src/index';
3+
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+
) {
15+
return (
16+
<Modal
17+
id="test"
18+
contentLabel="modalA"
19+
closeTimeoutMS={150}
20+
isOpen={isOpen}
21+
onAfterOpen={onAfterOpen}
22+
onRequestClose={onRequestClose}>
23+
<h1>{title}</h1>
24+
<button onClick={askToClose}>close</button>
25+
<div>I am a modal. Use the first input to change the modal's title.</div>
26+
<form>
27+
<input onChange={onChangeInput} />
28+
<input />
29+
<br />
30+
<button>Button A</button>
31+
<button>Button B</button>
32+
<button>Button C</button>
33+
<button>Button D</button>
34+
</form>
35+
</Modal>
36+
);
37+
}

‎examples/basic/view_a.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { Component } from 'react';
2+
import Modal from '../../src/index';
3+
import ModalA from './modal_a';
4+
5+
const MODAL_A = 'modal_a';
6+
const MODAL_B = 'modal_b';
7+
8+
const DEFAULT_TITLE = 'Default title';
9+
10+
export default class ViewA 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+
this.setState({ ...this.state, currentModal: key, title1: DEFAULT_TITLE });
26+
}
27+
28+
handleModalCloseRequest = () => {
29+
// opportunity to validate something and keep the modal open even if it
30+
// requested to be closed
31+
this.setState({
32+
...this.state,
33+
currentModal: null
34+
});
35+
}
36+
37+
handleInputChange = (e) => {
38+
let text = e.target.value;
39+
if (text == '') {
40+
text = DEFAULT_TITLE;
41+
}
42+
this.setState({ ...this.state, title1: text });
43+
}
44+
45+
handleOnAfterOpenModal = () => {
46+
// when ready, we can access the available refs.
47+
this.heading && (this.heading.style.color = '#F00');
48+
}
49+
50+
render() {
51+
const { currentModal } = this.state;
52+
return (
53+
<div>
54+
<button onClick={this.toggleModal(MODAL_A)}>Open Modal A</button>
55+
<button onClick={this.toggleModal(MODAL_B)}>Open Modal B</button>
56+
<ModalA
57+
title={this.state.title1}
58+
isOpen={currentModal == MODAL_A}
59+
onAfterOpen={this.handleOnAfterOpenModal}
60+
onRequestClose={this.handleModalCloseRequest}
61+
askToClose={this.toggleModal(MODAL_A)}
62+
onChangeInput={this.handleInputChange} />
63+
<Modal
64+
ref="mymodal2"
65+
id="test2"
66+
aria={{
67+
labelledby: "heading",
68+
describedby: "fulldescription"
69+
}}
70+
closeTimeoutMS={150}
71+
contentLabel="modalB"
72+
isOpen={currentModal == MODAL_B}
73+
onAfterOpen={this.handleOnAfterOpenModal}
74+
onRequestClose={this.toggleModal(MODAL_B)}>
75+
<h1 id="heading" ref={h1 => this.heading = h1}>This is the modal 2!</h1>
76+
<div id="fulldescription" tabIndex="0" role="document">
77+
<p>This is a description of what it does: nothing :)</p>
78+
</div>
79+
</Modal>
80+
</div>
81+
);
82+
}
83+
}

‎examples/basic/view_b.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React, { Component } from 'react';
2+
import Modal from '../../src/index';
3+
import ModalA from './modal_a';
4+
5+
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+
)}
11+
</div>
12+
);
13+
}
14+
15+
export default class ViewB extends Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
listItemsIsOpen: false,
20+
currentItem: -1,
21+
loading: false,
22+
items: []
23+
};
24+
}
25+
26+
toggleModal = event => {
27+
event.preventDefault();
28+
if (this.state.listItemsIsOpen) {
29+
this.handleModalCloseRequest();
30+
return;
31+
}
32+
this.setState({
33+
...this.state,
34+
items: [],
35+
listItemsIsOpen: true,
36+
loading: true
37+
});
38+
}
39+
40+
handleModalCloseRequest = () => {
41+
// opportunity to validate something and keep the modal open even if it
42+
// requested to be closed
43+
this.setState({
44+
...this.state,
45+
listItemsIsOpen: false,
46+
loading: false
47+
});
48+
}
49+
50+
handleOnAfterOpenModal = () => {
51+
// when ready, we can access the available refs.
52+
(new Promise((resolve, reject) => {
53+
setTimeout(() => resolve(true), 1000);
54+
})).then(res => {
55+
this.setState({
56+
...this.state,
57+
items: [1, 2, 3, 4, 5].map(x => `Item ${x}`),
58+
loading: false
59+
});
60+
});
61+
}
62+
63+
onItemClick = index => event => {
64+
this.setState({ ...this.state, currentItem: index });
65+
}
66+
67+
cleanCurrentItem = () => {
68+
this.setState({ ...this.state, currentItem: -1 });
69+
}
70+
71+
render() {
72+
const { listItemsIsOpen } = this.state;
73+
return (
74+
<div>
75+
<button onClick={this.toggleModal}>Open Modal A</button>
76+
<Modal
77+
id="test"
78+
closeTimeoutMS={150}
79+
contentLabel="modalA"
80+
isOpen={listItemsIsOpen}
81+
onAfterOpen={this.handleOnAfterOpenModal}
82+
onRequestClose={this.toggleModal}>
83+
<h1>List of items</h1>
84+
{this.state.loading ? (
85+
<p>Loading...</p>
86+
) : (
87+
<List onItemClick={this.onItemClick} items={this.state.items} />
88+
)}
89+
</Modal>
90+
<Modal
91+
id="test2"
92+
closeTimeoutMS={150}
93+
contentLabel="modalB"
94+
isOpen={this.state.currentItem > -1}
95+
onRequestClose={this.cleanCurrentItem}
96+
aria={{
97+
labelledby: "item_title",
98+
describedby: "item_info"
99+
}}>
100+
<h1 id="item_title">Item: {this.state.items[this.state.currentItem]}</h1>
101+
<div id="item_info">
102+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar varius auctor. Aliquam maximus et justo ut faucibus. Nullam sit amet urna molestie turpis bibendum accumsan a id sem. Proin ullamcorper nisl sapien, gravida dictum nibh congue vel. Vivamus convallis dolor vitae ipsum ultricies, vitae pulvinar justo tincidunt. Maecenas a nunc elit. Phasellus fermentum, tellus ut consectetur scelerisque, eros nunc lacinia eros, aliquet efficitur tellus arcu a nibh. Praesent quis consequat nulla. Etiam dapibus ac sem vel efficitur. Nunc faucibus efficitur leo vitae vulputate. Nunc at quam vitae felis pretium vehicula vel eu quam. Quisque sapien mauris, condimentum eget dictum ut, congue id dolor. Donec vitae varius orci, eu faucibus turpis. Morbi eleifend orci non urna bibendum, ac scelerisque augue efficitur.</p>
103+
104+
<p>Maecenas justo justo, laoreet vitae odio quis, lacinia porttitor arcu. Nunc nisl est, ultricies sed laoreet eu, semper in nisi. Phasellus lacinia porta purus, eu luctus neque. Nullam quis mi malesuada, vestibulum sem id, rhoncus purus. Aliquam erat volutpat. Duis nec turpis mi. Pellentesque eleifend nisl sed risus aliquet, eu feugiat elit auctor. Suspendisse ac neque vitae ligula consequat aliquam. Vivamus sit amet eros et ante mollis porta.</p>
105+
</div>
106+
</Modal>
107+
</div>
108+
);
109+
}
110+
}

0 commit comments

Comments
 (0)
Please sign in to comment.