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', () => {