[changed] Modal doesn't require ModalTrigger

kyletsang · Jun 30, 2015 · 83b4cbc · 83b4cbc
1 parent d70f617
commit 83b4cbc
Show file tree

Hide file tree

Showing 10 changed files with 356 additions and 183 deletions.
diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -36,6 +36,7 @@
     "ModalTrigger",
     "OverlayTrigger",
     "OverlayMixin",
+    "Overlay",
     "PageHeader",
     "PageItem",
     "Pager",

diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js
@@ -9,28 +9,40 @@
  * }
  */
 
-const ContainedModal = React.createClass({
-  render() {
-    return (
-      <Modal {...this.props} title='Contained Modal' animation>
-        <div className='modal-body'>
-          Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
-    );
-  }
-});
-
 const Trigger = React.createClass({
+  getInitialState(){
+    return { show: false };
+  },
+
   render() {
+    let close = e => this.setState({ show: false});
+
     return (
       <div className='modal-container' style={{height: 200}}>
-        <ModalTrigger modal={<ContainedModal container={this} />} container={this}>
-          <Button bsStyle='primary' bsSize='large'>Launch contained modal</Button>
-        </ModalTrigger>
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={e => this.setState({ show: true})}
+        >
+          Launch contained modal
+        </Button>
+
+        <Modal
+          show={this.state.show}
+          onHide={close}
+          container={this}
+          aria-labelledby='contained-modal-title'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title'>Contained Modal</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </div>
     );
   }

diff --git a/docs/examples/ModalDefaultSizing.js b/docs/examples/ModalDefaultSizing.js
@@ -1,8 +1,11 @@
 const MySmallModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='small' aria-labelledby='contained-modal-title-sm'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-sm'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <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>
           <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({
           <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>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <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>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
@@ -25,8 +28,11 @@ const MySmallModal = React.createClass({
 const MyLargeModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='large' aria-labelledby='contained-modal-title-lg'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <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>
           <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({
           <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>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <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>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ButtonToolbar>
-    <ModalTrigger modal={<MySmallModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
-    </ModalTrigger>
-    <ModalTrigger modal={<MyLargeModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
-    </ModalTrigger>
-  </ButtonToolbar>
-);
+const App = React.createClass({
+  getInitialState(){
+    return { smShow: false, lgShow: false };
+  },
+  render(){
+    let smClose = e => this.setState({ smShow: false });
+    let lgClose = e => this.setState({ lgShow: false });
 
-React.render(overlayTriggerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ smShow: true })}>
+          Launch small demo modal
+        </Button>
+        <Button bsStyle='primary' onClick={()=>this.setState({ lgShow: true })}>
+          Launch large demo modal
+        </Button>
+
+        <MySmallModal show={this.state.smShow} onHide={smClose} />
+        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
+      </ButtonToolbar>
+    );
+  }
+});
+
+React.render(<App/>, mountNode);
diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
@@ -1,18 +1,24 @@
 const modalInstance = (
   <div className='static-modal'>
-    <Modal title='Modal title'
+    <Modal
       enforceFocus={false}
       backdrop={false}
       animation={false}
       container={mountNode}
-      onRequestHide={function() {}}>
-      <div className='modal-body'>
+      onHide={function(){}}>
+
+      <Modal.Header closeButton>
+        <Modal.Title>Modal title</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
         One fine body...
-      </div>
-      <div className='modal-footer'>
+      </Modal.Body>
+
+      <Modal.Footer>
         <Button>Close</Button>
         <Button bsStyle='primary'>Save changes</Button>
-      </div>
+      </Modal.Footer>
     </Modal>
   </div>
 );

diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js
@@ -1,42 +1,61 @@
-const MyModal = React.createClass({
+const Example = React.createClass({
+
+  getInitialState(){
+    return { showModal: false };
+  },
+
   render() {
+    let closeModal = e => this.setState({ showModal: false });
+
+    let popover = <Popover title='popover'>very popover. such engagement</Popover>;
+    let tooltip = <Tooltip>wow.</Tooltip>;
+
     return (
-      <Modal {...this.props} title='Modal heading' animation={false}>
-        <div className='modal-body'>
-          <h4>Text in a modal</h4>
-          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
-          <h4>Popover in a modal</h4>
-          <p>TODO</p>
-
-          <h4>Tooltips in a modal</h4>
-          <p>TODO</p>
-
-          <hr />
-
-          <h4>Overflowing text to show scroll behavior</h4>
-          <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>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <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>
-          <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>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <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>
-          <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>
-          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-          <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>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
+      <div>
+        <p>Click to get the full Modal experience!</p>
+
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={e => this.setState({ showModal: true })}
+        >
+          Launch demo modal
+        </Button>
+
+        <Modal show={this.state.showModal} onHide={closeModal}>
+          <Modal.Header closeButton>
+            <Modal.Title>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Text in a modal</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+            <h4>Popover in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={popover}><a href='#'>popover</a></OverlayTrigger> here</p>
+
+            <h4>Tooltips in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={tooltip}><a href='#'>tooltip</a></OverlayTrigger> here</p>
+
+            <hr />
+
+            <h4>Overflowing text to show scroll behavior</h4>
+            <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>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <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>
+            <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>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <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>
+            <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>
+            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+            <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>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
-
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -262,19 +262,25 @@ const ComponentsPage = React.createClass({
                   <h1 id='modals' className='page-header'>Modals <small>Modal</small></h1>
 
                   <h3 id='modals-static'>A static example</h3>
-                  <p>A rendered modal with header, body, and set of actions in the footer.</p>
-                  <p>The header is added automatically if you pass in a <code>title</code> prop.</p>
+                  <p>
+                    A rendered modal with header, body, and set of actions in the footer. The <code>{'<Modal/>'}</code> Component comes with
+                    a few convenient "sub components": <code>{'<Modal.Header/>'}</code>, <code>{'<Modal.Title/>'}</code>, <code>{'<Modal.Body/>'}</code>,
+                    and <code>{'<Modal.Footer/>'}</code>, which you can use to build the Modal content.
+                  </p>
+                  <div className='bs-callout bs-callout-info'>
+                    <h4>Additional Import Options</h4>
+                    <p>
+                      The Modal Header, Title, Body, and Footer components are available as static properties the <code>{'<Modal/>'}</code> component, but you can also,
+                      import them directly from the <code>/lib</code> directory like: <code>{"require('react-bootstrap/lib/ModalHeader')"}</code>.
+                    </p>
+                  </div>
                   <ReactPlayground codeText={Samples.ModalStatic} />
 
                   <h3 id='modals-live'>Live demo</h3>
-                  <p>Use <code>&lt;ModalTrigger /&gt;</code> to create a real modal that's added to the document body when opened.</p>
+                  <p>Use <code>{'<Modal/>'}</code> in combination with other components to show or hide your Modal.</p>
                   <ReactPlayground codeText={Samples.ModalTrigger} />
 
-                  <h3 id='modals-custom'>Custom trigger</h3>
-                  <p>Use <code>OverlayMixin</code> in a custom component to manage the modal's state yourself.</p>
-                  <ReactPlayground codeText={Samples.ModalOverlayMixin} />
-
-                  <h3 id='modals-custom'>Contained Modal</h3>
+                  <h3 id='modals-contained'>Contained Modal</h3>
                   <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>
                   <pre>
                     {React.DOM.code(null,
@@ -301,7 +307,19 @@ const ComponentsPage = React.createClass({
                   <h4>Modal</h4>
                   <PropTable component='Modal'/>
 
-                  <h4>ModalTrigger</h4>
+                  <h4>Modal.Header</h4>
+                  <PropTable component='ModalHeader'/>
+
+                  <h4>Modal.Title</h4>
+                  <PropTable component='ModalTitle'/>
+
+                  <h4>Modal.Body</h4>
+                  <PropTable component='ModalBody'/>
+
+                  <h4>Modal.Footer</h4>
+                  <PropTable component='ModalFooter'/>
+
+                  <h4>ModalTrigger <strong className='text-danger'>Deprecated: use the Modal directly to manage it's visibility</strong></h4>
                   <PropTable component='ModalTrigger'/>
 
                 </div>