Add deprecation path!

good idea @taion, should help some folks upgrade.
michelgb · Nov 15, 2015 · 7b1c7b2 · 7b1c7b2
1 parent 0be007f
commit 7b1c7b2
Show file tree

Hide file tree

Showing 8 changed files with 346 additions and 22 deletions.
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
@@ -9,11 +9,11 @@ const navbarInstance = (
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
       <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
-        <MenuItem eventKey="1">Action</MenuItem>
-        <MenuItem eventKey="2">Another action</MenuItem>
-        <MenuItem eventKey="3">Something else here</MenuItem>
+        <MenuItem eventKey={3.1}>Action</MenuItem>
+        <MenuItem eventKey={3.2}>Another action</MenuItem>
+        <MenuItem eventKey={3.3}>Something else here</MenuItem>
         <MenuItem divider />
-        <MenuItem eventKey="4">Separated link</MenuItem>
+        <MenuItem eventKey={3.3}>Separated link</MenuItem>
       </NavDropdown>
     </Nav>
   </Navbar>

diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
@@ -10,15 +10,15 @@ const navbarInstance = (
       <Nav>
         <NavItem eventKey={1} href="#">Link</NavItem>
         <NavItem eventKey={2} href="#">Link</NavItem>
-        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
-          <MenuItem eventKey="1">Action</MenuItem>
-          <MenuItem eventKey="2">Another action</MenuItem>
-          <MenuItem eventKey="3">Something else here</MenuItem>
+        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
+          <MenuItem eventKey={3.1}>Action</MenuItem>
+          <MenuItem eventKey={3.2}>Another action</MenuItem>
+          <MenuItem eventKey={3.3}>Something else here</MenuItem>
           <MenuItem divider />
-          <MenuItem eventKey="4">Separated link</MenuItem>
+          <MenuItem eventKey={3.3}>Separated link</MenuItem>
         </NavDropdown>
       </Nav>
-      <Nav right>
+      <Nav pullRight>
         <NavItem eventKey={1} href="#">Link Right</NavItem>
         <NavItem eventKey={2} href="#">Link Right</NavItem>
       </Nav>

diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
@@ -1,11 +1,12 @@
 import React, { cloneElement } from 'react';
 import Collapse from './Collapse';
 import classNames from 'classnames';
+import deprecationWarning from './utils/deprecationWarning';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
-const CollapsibleNav = React.createClass({
+let CollapsibleNav = React.createClass({
 
   propTypes: {
     onSelect: React.PropTypes.func,
@@ -95,4 +96,7 @@ const CollapsibleNav = React.createClass({
   }
 });
 
-export default CollapsibleNav;
+export default deprecationWarning.wrapper(CollapsibleNav,
+  'CollapsibleNav', 'Navbar.Collapse',
+  'http://react-bootstrap.github.io/components.html#navbars'
+);
diff --git a/src/Nav.js b/src/Nav.js
@@ -7,6 +7,8 @@ import tbsUtils, { bsStyles, bsClass as _bsClass } from './utils/bootstrapUtils'
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
+import Collapse from './Collapse';
+
 class Nav extends React.Component {
 
   render() {
@@ -17,18 +19,19 @@ class Nav extends React.Component {
     classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
 
-
     if (isNavbar) {
       let bsClass = this.context.$bs_navbar_bsClass || 'navbar';
       const navbarRight = this.props.right != null ? this.props.right : this.props.pullRight;
 
       classes[tbsUtils.prefix({ bsClass }, 'nav')] = true;
       classes[tbsUtils.prefix({ bsClass }, 'right')] = navbarRight;
+      classes[tbsUtils.prefix({ bsClass }, 'left')] = this.props.pullLeft;
     } else {
       classes['pull-right'] = this.props.pullRight;
+      classes['pull-left'] = this.props.pullLeft;
     }
 
-    return (
+    let list = (
       <ul ref="ul"
         {...this.props}
         id={ulId || id}
@@ -38,6 +41,22 @@ class Nav extends React.Component {
         {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
+
+    // TODO remove in 0.29
+    if (this.context.$bs_deprecated_navbar && this.props.collapsible) {
+      list = (
+        <Collapse
+          in={this.props.expanded}
+          className={isNavbar ? 'navbar-collapse' : void 0}
+        >
+          <div>
+            { list }
+          </div>
+        </Collapse>
+      );
+    }
+
+    return list;
   }
 
   getChildActiveProp(child) {
@@ -115,23 +134,41 @@ Nav.propTypes = {
   ulId: deprecated(React.PropTypes.string,
     'The wrapping `<nav>` has been removed you can use `id` now'),
 
-  expanded: React.PropTypes.bool,
-
+  /**
+   * Apply styling an alignment for use in a Navbar. This prop will be set
+   * automatically when the Nav is used inside a Navbar.
+   */
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
   pullRight: React.PropTypes.bool,
-  right: deprecated(React.PropTypes.bool, 'Use the `pullRight` prop instead')
+  pullLeft: React.PropTypes.bool,
+
+  right: deprecated(React.PropTypes.bool,
+    'Use the `pullRight` prop instead'),
+
+  /**
+   * @private
+   */
+  expanded: React.PropTypes.bool,
+
+  /**
+   * @private
+   */
+  collapsible: deprecated(React.PropTypes.bool,
+    'Use `Navbar.Collapse` instead, to create collapsible Navbars'),
 };
 
 Nav.contextTypes = {
   $bs_navbar: React.PropTypes.bool,
-  $bs_navbar_bsClass: React.PropTypes.string
+  $bs_navbar_bsClass: React.PropTypes.string,
+
+  $bs_deprecated_navbar: React.PropTypes.bool
 };
 
 Nav.defaultProps = {
   justified: false,
   pullRight: false,
-  right: false,
+  pullLeft: false,
   stacked: false
 };
 

diff --git a/src/Navbar.js b/src/Navbar.js
@@ -2,8 +2,11 @@ import React, { PropTypes } from 'react';
 import uncontrollable from 'uncontrollable';
 import classNames from 'classnames';
 import elementType from 'react-prop-types/lib/elementType';
+import deprecationWarning from './utils/deprecationWarning';
+import ValidComponentChildren from './utils/ValidComponentChildren';
 
 import Grid from './Grid';
+import OldNavbar from './deprecated/Navbar';
 import NavbarBrand from './NavbarBrand';
 import NavbarHeader from './NavbarHeader';
 import NavbarToggle from './NavbarToggle';
@@ -12,6 +15,21 @@ import NavbarCollapse from './NavbarCollapse';
 import tbsUtils, { bsClass as bsClasses, bsStyles } from './utils/bootstrapUtils';
 import { DEFAULT, INVERSE } from './styleMaps';
 
+let has = (obj, key) => obj && {}.hasOwnProperty.call(obj, key);
+
+function shouldRenderOldNavbar(component) {
+  let props = component.props;
+  return (
+    has(props, 'toggleButton') ||
+    has(props, 'toggleNavKey') ||
+    has(props, 'brand') ||
+    // this should be safe b/c the new version requires wrapping in a Header
+    ValidComponentChildren.findValidComponents(
+      props.children, child => child.props.bsRole === 'brand'
+    ).length > 0
+  );
+}
+
 let Navbar = React.createClass({
 
   propTypes: {
@@ -106,6 +124,17 @@ let Navbar = React.createClass({
       ...props
     } = this.props;
 
+    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 ' +
+        'use of the `<NavBrand>` component outside of a `<Navbar.Header>`. \n\n' +
+        'for more details see: http://react-bootstrap.github.io/components.html#navbars'
+      });
+
+      return <OldNavbar {...this.props}/>;
+    }
+
     const classes = tbsUtils.getClassSet(this.props);
 
     classes[tbsUtils.prefix(this.props, 'fixed-top')] = this.props.fixedTop;