Skip to content

Commit 83b4cbc

Browse files
jquensejquense
committed
[changed] Modal doesn't require ModalTrigger
1 parent d70f617 commit 83b4cbc

File tree

10 files changed

+356
-183
lines changed

10 files changed

+356
-183
lines changed

‎docs/examples/.eslintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"ModalTrigger",
3737
"OverlayTrigger",
3838
"OverlayMixin",
39+
"Overlay",
3940
"PageHeader",
4041
"PageItem",
4142
"Pager",

‎docs/examples/ModalContained.js‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,40 @@
99
* }
1010
*/
1111

12-
const ContainedModal = React.createClass({
13-
render() {
14-
return (
15-
<Modal {...this.props} title='Contained Modal' animation>
16-
<div className='modal-body'>
17-
Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
18-
</div>
19-
<div className='modal-footer'>
20-
<Button onClick={this.props.onRequestHide}>Close</Button>
21-
</div>
22-
</Modal>
23-
);
24-
}
25-
});
26-
2712
const Trigger = React.createClass({
13+
getInitialState(){
14+
return { show: false };
15+
},
16+
2817
render() {
18+
let close = e => this.setState({ show: false});
19+
2920
return (
3021
<div className='modal-container' style={{height: 200}}>
31-
<ModalTrigger modal={<ContainedModal container={this} />} container={this}>
32-
<Button bsStyle='primary' bsSize='large'>Launch contained modal</Button>
33-
</ModalTrigger>
22+
<Button
23+
bsStyle='primary'
24+
bsSize='large'
25+
onClick={e => this.setState({ show: true})}
26+
>
27+
Launch contained modal
28+
</Button>
29+
30+
<Modal
31+
show={this.state.show}
32+
onHide={close}
33+
container={this}
34+
aria-labelledby='contained-modal-title'
35+
>
36+
<Modal.Header closeButton>
37+
<Modal.Title id='contained-modal-title'>Contained Modal</Modal.Title>
38+
</Modal.Header>
39+
<Modal.Body>
40+
Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
41+
</Modal.Body>
42+
<Modal.Footer>
43+
<Button onClick={close}>Close</Button>
44+
</Modal.Footer>
45+
</Modal>
3446
</div>
3547
);
3648
}

‎docs/examples/ModalDefaultSizing.js‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
const MySmallModal = React.createClass({
22
render() {
33
return (
4-
<Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
5-
<div className='modal-body'>
4+
<Modal {...this.props} bsSize='small' aria-labelledby='contained-modal-title-sm'>
5+
<Modal.Header closeButton>
6+
<Modal.Title id='contained-modal-title-sm'>Modal heading</Modal.Title>
7+
</Modal.Header>
8+
<Modal.Body>
69
<h4>Wrapped Text</h4>
710
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
811
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -13,10 +16,10 @@ const MySmallModal = React.createClass({
1316
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
1417
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
1518
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
16-
</div>
17-
<div className='modal-footer'>
18-
<Button onClick={this.props.onRequestHide}>Close</Button>
19-
</div>
19+
</Modal.Body>
20+
<Modal.Footer>
21+
<Button onClick={this.props.onHide}>Close</Button>
22+
</Modal.Footer>
2023
</Modal>
2124
);
2225
}
@@ -25,8 +28,11 @@ const MySmallModal = React.createClass({
2528
const MyLargeModal = React.createClass({
2629
render() {
2730
return (
28-
<Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
29-
<div className='modal-body'>
31+
<Modal {...this.props} bsSize='large' aria-labelledby='contained-modal-title-lg'>
32+
<Modal.Header closeButton>
33+
<Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
34+
</Modal.Header>
35+
<Modal.Body>
3036
<h4>Wrapped Text</h4>
3137
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
3238
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -37,24 +43,37 @@ const MyLargeModal = React.createClass({
3743
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
3844
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
3945
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
40-
</div>
41-
<div className='modal-footer'>
42-
<Button onClick={this.props.onRequestHide}>Close</Button>
43-
</div>
46+
</Modal.Body>
47+
<Modal.Footer>
48+
<Button onClick={this.props.onHide}>Close</Button>
49+
</Modal.Footer>
4450
</Modal>
4551
);
4652
}
4753
});
4854

49-
const overlayTriggerInstance = (
50-
<ButtonToolbar>
51-
<ModalTrigger modal={<MySmallModal />}>
52-
<Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
53-
</ModalTrigger>
54-
<ModalTrigger modal={<MyLargeModal />}>
55-
<Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
56-
</ModalTrigger>
57-
</ButtonToolbar>
58-
);
55+
const App = React.createClass({
56+
getInitialState(){
57+
return { smShow: false, lgShow: false };
58+
},
59+
render(){
60+
let smClose = e => this.setState({ smShow: false });
61+
let lgClose = e => this.setState({ lgShow: false });
5962

60-
React.render(overlayTriggerInstance, mountNode);
63+
return (
64+
<ButtonToolbar>
65+
<Button bsStyle='primary' onClick={()=>this.setState({ smShow: true })}>
66+
Launch small demo modal
67+
</Button>
68+
<Button bsStyle='primary' onClick={()=>this.setState({ lgShow: true })}>
69+
Launch large demo modal
70+
</Button>
71+
72+
<MySmallModal show={this.state.smShow} onHide={smClose} />
73+
<MyLargeModal show={this.state.lgShow} onHide={lgClose} />
74+
</ButtonToolbar>
75+
);
76+
}
77+
});
78+
79+
React.render(<App/>, mountNode);

‎docs/examples/ModalOverlayMixin.js‎

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

‎docs/examples/ModalStatic.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
const modalInstance = (
22
<div className='static-modal'>
3-
<Modal title='Modal title'
3+
<Modal
44
enforceFocus={false}
55
backdrop={false}
66
animation={false}
77
container={mountNode}
8-
onRequestHide={function() {}}>
9-
<div className='modal-body'>
8+
onHide={function(){}}>
9+
10+
<Modal.Header closeButton>
11+
<Modal.Title>Modal title</Modal.Title>
12+
</Modal.Header>
13+
14+
<Modal.Body>
1015
One fine body...
11-
</div>
12-
<div className='modal-footer'>
16+
</Modal.Body>
17+
18+
<Modal.Footer>
1319
<Button>Close</Button>
1420
<Button bsStyle='primary'>Save changes</Button>
15-
</div>
21+
</Modal.Footer>
1622
</Modal>
1723
</div>
1824
);

‎docs/examples/ModalTrigger.js‎

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,61 @@
1-
const MyModal = React.createClass({
1+
const Example = React.createClass({
2+
3+
getInitialState(){
4+
return { showModal: false };
5+
},
6+
27
render() {
8+
let closeModal = e => this.setState({ showModal: false });
9+
10+
let popover = <Popover title='popover'>very popover. such engagement</Popover>;
11+
let tooltip = <Tooltip>wow.</Tooltip>;
12+
313
return (
4-
<Modal {...this.props} title='Modal heading' animation={false}>
5-
<div className='modal-body'>
6-
<h4>Text in a modal</h4>
7-
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
8-
9-
<h4>Popover in a modal</h4>
10-
<p>TODO</p>
11-
12-
<h4>Tooltips in a modal</h4>
13-
<p>TODO</p>
14-
15-
<hr />
16-
17-
<h4>Overflowing text to show scroll behavior</h4>
18-
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
19-
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
20-
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
21-
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
22-
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
23-
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
24-
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
25-
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
26-
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
27-
</div>
28-
<div className='modal-footer'>
29-
<Button onClick={this.props.onRequestHide}>Close</Button>
30-
</div>
31-
</Modal>
14+
<div>
15+
<p>Click to get the full Modal experience!</p>
16+
17+
<Button
18+
bsStyle='primary'
19+
bsSize='large'
20+
onClick={e => this.setState({ showModal: true })}
21+
>
22+
Launch demo modal
23+
</Button>
24+
25+
<Modal show={this.state.showModal} onHide={closeModal}>
26+
<Modal.Header closeButton>
27+
<Modal.Title>Modal heading</Modal.Title>
28+
</Modal.Header>
29+
<Modal.Body>
30+
<h4>Text in a modal</h4>
31+
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
32+
33+
<h4>Popover in a modal</h4>
34+
<p>there is a <OverlayTrigger overlay={popover}><a href='#'>popover</a></OverlayTrigger> here</p>
35+
36+
<h4>Tooltips in a modal</h4>
37+
<p>there is a <OverlayTrigger overlay={tooltip}><a href='#'>tooltip</a></OverlayTrigger> here</p>
38+
39+
<hr />
40+
41+
<h4>Overflowing text to show scroll behavior</h4>
42+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
43+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
44+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
45+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
46+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
47+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
48+
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
49+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
50+
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
51+
</Modal.Body>
52+
<Modal.Footer>
53+
<Button onClick={closeModal}>Close</Button>
54+
</Modal.Footer>
55+
</Modal>
56+
</div>
3257
);
3358
}
3459
});
3560

36-
const overlayTriggerInstance = (
37-
<ModalTrigger modal={<MyModal />}>
38-
<Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
39-
</ModalTrigger>
40-
);
41-
42-
React.render(overlayTriggerInstance, mountNode);
61+
React.render(<Example/>, mountNode);

‎docs/src/ComponentsPage.js‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -262,19 +262,25 @@ const ComponentsPage = React.createClass({
262262
<h1 id='modals' className='page-header'>Modals <small>Modal</small></h1>
263263

264264
<h3 id='modals-static'>A static example</h3>
265-
<p>A rendered modal with header, body, and set of actions in the footer.</p>
266-
<p>The header is added automatically if you pass in a <code>title</code> prop.</p>
265+
<p>
266+
A rendered modal with header, body, and set of actions in the footer. The <code>{'<Modal/>'}</code> Component comes with
267+
a few convenient "sub components": <code>{'<Modal.Header/>'}</code>, <code>{'<Modal.Title/>'}</code>, <code>{'<Modal.Body/>'}</code>,
268+
and <code>{'<Modal.Footer/>'}</code>, which you can use to build the Modal content.
269+
</p>
270+
<div className='bs-callout bs-callout-info'>
271+
<h4>Additional Import Options</h4>
272+
<p>
273+
The Modal Header, Title, Body, and Footer components are available as static properties the <code>{'<Modal/>'}</code> component, but you can also,
274+
import them directly from the <code>/lib</code> directory like: <code>{"require('react-bootstrap/lib/ModalHeader')"}</code>.
275+
</p>
276+
</div>
267277
<ReactPlayground codeText={Samples.ModalStatic} />
268278

269279
<h3 id='modals-live'>Live demo</h3>
270-
<p>Use <code>&lt;ModalTrigger /&gt;</code> to create a real modal that's added to the document body when opened.</p>
280+
<p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
271281
<ReactPlayground codeText={Samples.ModalTrigger} />
272282

273-
<h3 id='modals-custom'>Custom trigger</h3>
274-
<p>Use <code>OverlayMixin</code> in a custom component to manage the modal's state yourself.</p>
275-
<ReactPlayground codeText={Samples.ModalOverlayMixin} />
276-
277-
<h3 id='modals-custom'>Contained Modal</h3>
283+
<h3 id='modals-contained'>Contained Modal</h3>
278284
<p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
279285
<pre>
280286
{React.DOM.code(null,
@@ -301,7 +307,19 @@ const ComponentsPage = React.createClass({
301307
<h4>Modal</h4>
302308
<PropTable component='Modal'/>
303309

304-
<h4>ModalTrigger</h4>
310+
<h4>Modal.Header</h4>
311+
<PropTable component='ModalHeader'/>
312+
313+
<h4>Modal.Title</h4>
314+
<PropTable component='ModalTitle'/>
315+
316+
<h4>Modal.Body</h4>
317+
<PropTable component='ModalBody'/>
318+
319+
<h4>Modal.Footer</h4>
320+
<PropTable component='ModalFooter'/>
321+
322+
<h4>ModalTrigger <strong className='text-danger'>Deprecated: use the Modal directly to manage it's visibility</strong></h4>
305323
<PropTable component='ModalTrigger'/>
306324

307325
</div>

0 commit comments

Comments
 (0)