diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index b05728e389..807dc71636 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -525,8 +525,8 @@ const ComponentsPage = React.createClass({
Additional Import Options
The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
- the {""}
component, but you can also,
- import them directly from the /lib
directory
+ the {""}
component but you can also import them directly from
+ the /lib
directory
like: {'require("react-bootstrap/lib/NavbarHeader")'}
.
@@ -540,7 +540,7 @@ const ComponentsPage = React.createClass({
By setting the prop defaultNavExpanded
the Navbar will start
expanded by default. You can also finely control the collapsing behavior by using
- the navExpanded
and onToggle
props.
+ the expanded
and onToggle
props.
diff --git a/src/Navbar.js b/src/Navbar.js
index 3f8d74742a..166c91ca31 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,7 +1,9 @@
+/* eslint react/no-multi-comp: 0 */
import React, { PropTypes } from 'react';
import uncontrollable from 'uncontrollable';
import classNames from 'classnames';
import elementType from 'react-prop-types/lib/elementType';
+import deprecated from 'react-prop-types/lib/deprecated';
import deprecationWarning from './utils/deprecationWarning';
import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -20,9 +22,11 @@ let has = (obj, key) => obj && {}.hasOwnProperty.call(obj, key);
function shouldRenderOldNavbar(component) {
let props = component.props;
return (
+ has(props, 'brand') ||
has(props, 'toggleButton') ||
has(props, 'toggleNavKey') ||
- has(props, 'brand') ||
+ has(props, 'navExpanded') ||
+ has(props, 'defaultNavExpanded') ||
// this should be safe b/c the new version requires wrapping in a Header
ValidComponentChildren.findValidComponents(
props.children, child => child.props.bsRole === 'brand'
@@ -72,14 +76,20 @@ let Navbar = React.createClass({
*
* @controllable onToggle
*/
- navExpanded: React.PropTypes.bool
+ expanded: React.PropTypes.bool,
+
+ /**
+ * @deprecated
+ */
+ navExpanded: deprecated(React.PropTypes.bool,
+ 'Use `expanded` and `defaultExpanded` instead.')
},
childContextTypes: {
$bs_navbar: PropTypes.bool,
$bs_navbar_bsClass: PropTypes.string,
$bs_navbar_onToggle: PropTypes.func,
- $bs_navbar_navExpanded: PropTypes.bool,
+ $bs_navbar_expanded: PropTypes.bool,
},
getDefaultProps() {
@@ -99,16 +109,16 @@ let Navbar = React.createClass({
$bs_navbar: true,
$bs_navbar_bsClass: this.props.bsClass,
$bs_navbar_onToggle: this.handleToggle,
- $bs_navbar_navExpanded: this.props.navExpanded
+ $bs_navbar_expanded: this.props.expanded
};
},
handleToggle() {
- this.props.onToggle(!this.props.navExpanded);
+ this.props.onToggle(!this.props.expanded);
},
isNavExpanded() {
- return !!this.props.navExpanded;
+ return !!this.props.expanded;
},
render() {
@@ -127,7 +137,8 @@ let Navbar = React.createClass({
if (shouldRenderOldNavbar(this)) {
deprecationWarning({ message:
'Rendering a deprecated version of the Navbar due to the use of deprecated ' +
- 'props. Please use the new Navbar api, and remove `toggleButton`, `toggleNavKey`, `brand` or ' +
+ 'props. Please use the new Navbar api, and remove `toggleButton`, ' +
+ '`toggleNavKey`, `brand`, `navExpanded`, `defaultNavExpanded` props or the ' +
'use of the `` component outside of a ``. \n\n' +
'for more details see: http://react-bootstrap.github.io/components.html#navbars'
});
@@ -159,7 +170,7 @@ const NAVBAR_STATES = [DEFAULT, INVERSE];
Navbar = bsStyles(NAVBAR_STATES, DEFAULT,
bsClasses('navbar',
- uncontrollable(Navbar, { navExpanded: 'onToggle' })
+ uncontrollable(Navbar, { expanded: 'onToggle' })
)
);
@@ -177,8 +188,16 @@ function createSimpleWrapper(tag, suffix, displayName) {
wrapper.displayName = displayName;
- wrapper.propTypes = { componentClass: elementType};
- wrapper.defaultProps = { componentClass: tag };
+ wrapper.propTypes = {
+ componentClass: elementType,
+ pullRight: React.PropTypes.bool,
+ pullLeft: React.PropTypes.bool,
+ };
+ wrapper.defaultProps = {
+ componentClass: tag,
+ pullRight: false,
+ pullLeft: false
+ };
wrapper.contextTypes = {
$bs_navbar_bsClass: PropTypes.string
diff --git a/src/NavbarCollapse.js b/src/NavbarCollapse.js
index bce989462a..4a4bf209e2 100644
--- a/src/NavbarCollapse.js
+++ b/src/NavbarCollapse.js
@@ -6,14 +6,14 @@ let NavbarCollapse = React.createClass({
contextTypes: {
$bs_navbar_bsClass: PropTypes.string,
- $bs_navbar_navExpanded: PropTypes.bool
+ $bs_navbar_expanded: PropTypes.bool
},
render() {
let { children, ...props } = this.props;
let {
$bs_navbar_bsClass: bsClass = 'navbar',
- $bs_navbar_navExpanded: expanded,
+ $bs_navbar_expanded: expanded,
} = this.context;
return (
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 642f47ac7c..12a846bc16 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -172,9 +172,9 @@ describe('Navbar', () => {
ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse');
});
- it('Should pass navExpanded to Collapse', () => {
+ it('Should pass expanded to Collapse', () => {
let instance = ReactTestUtils.renderIntoDocument(
-
+
hello
@@ -183,7 +183,7 @@ describe('Navbar', () => {
let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
- expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
+ expect(collapse.context.$bs_navbar_expanded).to.equal(true);
});
it('Should wire the toggle to the collapse', () => {
@@ -201,11 +201,11 @@ describe('Navbar', () => {
let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
- expect(collapse.context.$bs_navbar_navExpanded).to.not.be.ok;
+ expect(collapse.context.$bs_navbar_expanded).to.not.be.ok;
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
- expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
+ expect(collapse.context.$bs_navbar_expanded).to.equal(true);
});
it('Should pass `bsClass` down to sub components', () => {