Merge branch 'master' into pr-308

mtscout6 · mtscout6 · commit 6d36bc0541c7 · 2015-01-23T13:47:24.000-07:00
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # react-bootstrap
 
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-bootstrap/react-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 [Bootstrap 3](http://getbootstrap.com) components built with [React](http://facebook.github.io/react/)
 
 [![Build Status](https://travis-ci.org/react-bootstrap/react-bootstrap.svg)](https://travis-ci.org/react-bootstrap/react-bootstrap) [![NPM version](https://badge.fury.io/js/react-bootstrap.svg)](http://badge.fury.io/js/react-bootstrap) [![Bower version](https://badge.fury.io/bo/react-bootstrap.svg)](http://badge.fury.io/bo/react-bootstrap)
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
@@ -7,6 +7,7 @@ var modalInstance = (
       <Modal title="Modal title"
         backdrop={false}
         animation={false}
+        container={mountNode}
         onRequestHide={handleHide}>
         <div className="modal-body">
           One fine body...
diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
@@ -25,7 +25,7 @@ var Page = React.createClass({
                   <h2 id="setup" className="page-header">Setup</h2>
                   <p className="lead">You can import the lib with as AMD modules, CommonJS modules as a global JS script.</p>
 
-                  <p>First add the bootstrap CSS to your project then:</p>
+                  <p>First add the Bootstrap CSS to your project; check <a href="http://getbootstrap.com/getting-started/" name="Bootstrap Docs">here</a> if you have not already done that. Then:</p>
 
                   <h3>CommonJS</h3>
                   <div className="highlight">
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",
diff --git a/src/Button.jsx b/src/Button.jsx
@@ -12,7 +12,9 @@ var Button = React.createClass({
     block:    React.PropTypes.bool,
     navItem:    React.PropTypes.bool,
     navDropdown: React.PropTypes.bool,
-    componentClass: React.PropTypes.node
+    componentClass: React.PropTypes.node,
+    href: React.PropTypes.string,
+    target: React.PropTypes.string
   },
 
   getDefaultProps: function () {
@@ -34,7 +36,7 @@ var Button = React.createClass({
       return this.renderNavItem(classes);
     }
 
-    renderFuncName = this.props.href || this.props.navDropdown ?
+    renderFuncName = this.props.href || this.props.target || this.props.navDropdown ?
       'renderAnchor' : 'renderButton';
 
     return this[renderFuncName](classes);
diff --git a/src/ListGroupItem.jsx b/src/ListGroupItem.jsx
@@ -15,7 +15,9 @@ var ListGroupItem = React.createClass({
     disabled: React.PropTypes.any,
     header: React.PropTypes.node,
     onClick: React.PropTypes.func,
-    eventKey: React.PropTypes.any
+    eventKey: React.PropTypes.any,
+    href: React.PropTypes.string,
+    target: React.PropTypes.string
   },
 
   getDefaultProps: function () {
@@ -30,7 +32,7 @@ var ListGroupItem = React.createClass({
     classes['active'] = this.props.active;
     classes['disabled'] = this.props.disabled;
 
-    if (this.props.href || this.props.onClick) {
+    if (this.props.href || this.props.target || this.props.onClick) {
       return this.renderAnchor(classes);
     } else {
       return this.renderSpan(classes);
@@ -85,7 +87,7 @@ var ListGroupItem = React.createClass({
   handleClick: function (e) {
     if (this.props.onClick) {
       e.preventDefault();
-      this.props.onClick(this.props.eventKey, this.props.href);
+      this.props.onClick(this.props.eventKey, this.props.href, this.props.target);
     }
   }
 });
diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx
@@ -8,8 +8,9 @@ var MenuItem = React.createClass({
     divider:   React.PropTypes.bool,
     href:      React.PropTypes.string,
     title:     React.PropTypes.string,
+    target:    React.PropTypes.string,
     onSelect:  React.PropTypes.func,
-    eventKey: React.PropTypes.any
+    eventKey:  React.PropTypes.any
   },
 
   getDefaultProps: function () {
@@ -21,13 +22,13 @@ var MenuItem = React.createClass({
   handleClick: function (e) {
     if (this.props.onSelect) {
       e.preventDefault();
-      this.props.onSelect(this.props.eventKey);
+      this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
     }
   },
 
   renderAnchor: function () {
     return (
-      <a onClick={this.handleClick} href={this.props.href} title={this.props.title} tabIndex="-1">
+      <a onClick={this.handleClick} href={this.props.href} target={this.props.target} title={this.props.title} tabIndex="-1">
         {this.props.children}
       </a>
     );
diff --git a/src/Modal.jsx b/src/Modal.jsx
@@ -124,6 +124,9 @@ var Modal = React.createClass({
     this._onDocumentKeyupListener =
       EventListener.listen(document, 'keyup', this.handleDocumentKeyUp);
 
+    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    container.className += container.className.length ? ' modal-open' : 'modal-open';
+
     if (this.props.backdrop) {
       this.iosClickHack();
     }
@@ -137,6 +140,8 @@ var Modal = React.createClass({
 
   componentWillUnmount: function () {
     this._onDocumentKeyupListener.remove();
+    var container = (this.props.container && this.props.container.getDOMNode()) || document.body;
+    container.className = container.className.replace(/ ?modal-open/, '');
   },
 
   handleBackdropClick: function (e) {
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
@@ -12,7 +12,8 @@ var NavItem = React.createClass({
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
     title: React.PropTypes.string,
-    eventKey: React.PropTypes.any
+    eventKey: React.PropTypes.any,
+    target: React.PropTypes.string
   },
 
   getDefaultProps: function () {
@@ -27,6 +28,7 @@ var NavItem = React.createClass({
         active,
         href,
         title,
+        target,
         children,
         ...props } = this.props,
         classes = {
@@ -39,6 +41,7 @@ var NavItem = React.createClass({
         <a
           href={href}
           title={title}
+          target={target}
           onClick={this.handleClick}
           ref="anchor">
           { children }
@@ -52,7 +55,7 @@ var NavItem = React.createClass({
       e.preventDefault();
 
       if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, this.props.href);
+        this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
       }
     }
   }
diff --git a/src/OverlayTrigger.jsx b/src/OverlayTrigger.jsx
@@ -118,6 +118,10 @@ var OverlayTrigger = React.createClass({
     clearTimeout(this._hoverDelay);
   },
 
+  componentDidMount: function() {
+    this.updateOverlayPosition();
+  },
+
   handleDelayedShow: function () {
     if (this._hoverDelay != null) {
       clearTimeout(this._hoverDelay);
diff --git a/src/PageItem.jsx b/src/PageItem.jsx
@@ -5,6 +5,8 @@ var classSet = require('./utils/classSet');
 var PageItem = React.createClass({
 
   propTypes: {
+    href: React.PropTypes.string,
+    target: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     previous: React.PropTypes.bool,
     next: React.PropTypes.bool,
@@ -32,6 +34,7 @@ var PageItem = React.createClass({
         <a
           href={this.props.href}
           title={this.props.title}
+          target={this.props.target}
           onClick={this.handleSelect}
           ref="anchor">
           {this.props.children}
@@ -45,7 +48,7 @@ var PageItem = React.createClass({
       e.preventDefault();
 
       if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, this.props.href);
+        this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
       }
     }
   }
diff --git a/src/SplitButton.jsx b/src/SplitButton.jsx
@@ -14,6 +14,7 @@ var SplitButton = React.createClass({
     pullRight:     React.PropTypes.bool,
     title:         React.PropTypes.node,
     href:          React.PropTypes.string,
+    target:        React.PropTypes.string,
     dropdownTitle: React.PropTypes.node,
     onClick:       React.PropTypes.func,
     onSelect:      React.PropTypes.func,
@@ -50,6 +51,8 @@ var SplitButton = React.createClass({
         className={joinClasses(this.props.className, 'dropdown-toggle')}
         onClick={this.handleDropdownClick}
         title={null}
+        href={null}
+        target={null}
         id={null}>
         <span className="sr-only">{this.props.dropdownTitle}</span>
         <span className="caret" />
@@ -80,7 +83,7 @@ var SplitButton = React.createClass({
     }
 
     if (this.props.onClick) {
-      this.props.onClick(e);
+      this.props.onClick(e, this.props.href, this.props.target);
     }
   },
 
diff --git a/src/SubNav.jsx b/src/SubNav.jsx
@@ -17,7 +17,8 @@ var SubNav = React.createClass({
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
     title: React.PropTypes.string,
-    text: React.PropTypes.node
+    text: React.PropTypes.node,
+    target: React.PropTypes.string
   },
 
   getDefaultProps: function () {
@@ -31,7 +32,7 @@ var SubNav = React.createClass({
       e.preventDefault();
 
       if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, this.props.href);
+        this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
       }
     }
   },
@@ -101,6 +102,7 @@ var SubNav = React.createClass({
         <a
           href={this.props.href}
           title={this.props.title}
+          target={this.props.target}
           onClick={this.handleClick}
           ref="anchor">
           {this.props.text}
diff --git a/test/ButtonSpec.jsx b/test/ButtonSpec.jsx
@@ -64,6 +64,17 @@ describe('Button', function () {
     assert.equal(instance.getDOMNode().getAttribute('href'), href);
   });
 
+  it('Should output an anchor if called with a target', function () {
+    var target = '_blank';
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Button target={target}>
+        Title
+      </Button>
+    );
+    assert.equal(instance.getDOMNode().nodeName, 'A');
+    assert.equal(instance.getDOMNode().getAttribute('target'), target);
+  });
+
   it('Should call onClick callback', function (done) {
     var doneOp = function () {
       done();
diff --git a/test/ListGroupItemSpec.jsx b/test/ListGroupItemSpec.jsx
@@ -79,4 +79,15 @@ describe('ListGroupItem', function () {
     );
     ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
   });
+
+  it('Should call "onClick" with target attribute', function (done) {
+    function handleClick(key, href, target) {
+      assert.equal(target, '_blank');
+      done();
+    }
+    var instance = ReactTestUtils.renderIntoDocument(
+      <ListGroupItem onClick={handleClick} eventKey='2' href="#link" target='_blank'>Item</ListGroupItem>
+    );
+    ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+  });
 });
diff --git a/test/MenuItemSpec.jsx b/test/MenuItemSpec.jsx
@@ -83,6 +83,31 @@ describe('MenuItem', function () {
     assert(instance.getDOMNode().className.match(/\bdropdown-header\b/), 'Has no header class');
     assert.equal(instance.getDOMNode().innerHTML, 'Title');
   });
+
+  it('Should set target attribute on anchor', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <MenuItem target="_blank">
+        Title
+      </MenuItem>
+    );
+
+    var anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
+    assert.equal(anchor.getDOMNode().getAttribute('target'), '_blank');
+  });
+
+  it('Should call `onSelect` with target attribute', function (done) {
+    function handleSelect(key, href, target) {
+      assert.equal(href, 'link');
+      assert.equal(target, '_blank');
+      done();
+    }
+    var instance = ReactTestUtils.renderIntoDocument(
+      <MenuItem onSelect={handleSelect} target="_blank" href="link">
+        Title
+      </MenuItem>
+    );
+    ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+  });
 });
 
 
diff --git a/test/ModalSpec.jsx b/test/ModalSpec.jsx
@@ -16,6 +16,39 @@ describe('Modal', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
   });
 
+  it('Should add modal-open class to the modal container while open', function(done) {
+
+    var Container = React.createClass({
+      getInitialState: function() {
+        return {modalOpen: true};
+      },
+      handleCloseModal: function() {
+        this.setState({modalOpen: false});
+      },
+      render: function() {
+        if (this.state.modalOpen) {
+          return <Modal onRequestHide={this.handleCloseModal} container={this}>
+            <strong>Message</strong>
+          </Modal>;
+        } else {
+          return <span/>;
+        }
+      }
+    });
+    var instance = ReactTestUtils.renderIntoDocument(
+        <Container />
+    );
+    assert.ok(instance.getDOMNode().className.match(/\modal-open\b/));
+
+    var backdrop = instance.getDOMNode().getElementsByClassName('modal-backdrop')[0];
+    ReactTestUtils.Simulate.click(backdrop);
+    setTimeout(function(){
+      assert.equal(instance.getDOMNode().className.length, 0);
+      done();
+    }, 0);
+
+  });
+
   it('Should close the modal when the backdrop is clicked', function (done) {
     var doneOp = function () { done(); };
     var instance = ReactTestUtils.renderIntoDocument(
diff --git a/test/NavItemSpec.jsx b/test/NavItemSpec.jsx
@@ -69,4 +69,25 @@ describe('NavItem', function () {
     );
     ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
   });
+
+  it('Should set target attribute on anchor', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+          <NavItem href="/some/unique-thing/" target="_blank">Item content</NavItem>
+        );
+    var linkElement = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a').getDOMNode();
+    assert.equal(linkElement.target, '_blank');
+  });
+
+  it('Should call `onSelect` with target attribute', function (done) {
+    function handleSelect(key, href, target) {
+      assert.equal(target, '_blank');
+      done();
+    }
+    var instance = ReactTestUtils.renderIntoDocument(
+      <NavItem onSelect={handleSelect} target="_blank">
+        <span>Item content</span>
+      </NavItem>
+    );
+    ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
+  });
 });
diff --git a/test/PageItemSpec.jsx b/test/PageItemSpec.jsx
diff --git a/test/SplitButtonSpec.jsx b/test/SplitButtonSpec.jsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-bootstrap",`
`3`		`- "version": "0.13.0",`
	`3`	`+ "version": "0.13.2",`
`4`	`4`	`"description": "Bootstrap 3 components build with React",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`