Merge pull request react-bootstrap#609 from AlexKVal/collapsibleProp

[changed] collapsable => collapsible property
Leonard-Li777 · May 4, 2015 · 7ca032c · 7ca032c
2 parents f77c955 + 51a205f
commit 7ca032c
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 46 deletions.
diff --git a/docs/examples/PanelListGroupFill.js b/docs/examples/PanelListGroupFill.js
@@ -1,5 +1,5 @@
 const panelInstance = (
-  <Panel collapsable defaultExpanded header='Panel heading'>
+  <Panel collapsible defaultExpanded header='Panel heading'>
     Some default panel content here.
     <ListGroup fill>
       <ListGroupItem>Item 1</ListGroupItem>

diff --git a/src/CollapsableNav.js b/src/CollapsableNav.js
@@ -1,7 +1,18 @@
-import CollapsibleNav from './CollapsibleNav';
+import React from 'react';
+import deprecationWarning from './utils/deprecationWarning';
+import assign from './utils/Object.assign';
+import {specCollapsibleNav} from './CollapsibleNav';
 
-let CollapsableNav = CollapsibleNav;
+const specCollapsableNav = assign({}, specCollapsibleNav, {
+  componentDidMount() {
+    deprecationWarning(
+      'CollapsableNav',
+      'CollapsibleNav',
+      'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'
+    );
+  }
+});
 
-CollapsableNav.__deprecated__ = true;
+const CollapsableNav = React.createClass(specCollapsableNav);
 
 export default CollapsableNav;
diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
@@ -3,19 +3,20 @@ import BootstrapMixin from './BootstrapMixin';
 import CollapsibleMixin from './CollapsibleMixin';
 import classNames from 'classnames';
 import domUtils from './utils/domUtils';
-import deprecationWarning from './utils/deprecationWarning';
+import collapsable from './utils/deprecatedProperty';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
-const CollapsibleNav = React.createClass({
+const specCollapsibleNav = {
   mixins: [BootstrapMixin, CollapsibleMixin],
 
   propTypes: {
     onSelect: React.PropTypes.func,
     activeHref: React.PropTypes.string,
     activeKey: React.PropTypes.any,
-    collapsable: React.PropTypes.bool,
+    collapsable,
+    collapsible: React.PropTypes.bool,
     expanded: React.PropTypes.bool,
     eventKey: React.PropTypes.any
   },
@@ -43,21 +44,12 @@ const CollapsibleNav = React.createClass({
     return height;
   },
 
-  componentDidMount() {
-    if (this.constructor.__deprecated__) {
-      deprecationWarning(
-        'CollapsableNav',
-        'CollapsibleNav',
-        'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'
-      );
-    }
-  },
-
   render() {
     /*
-     * this.props.collapsable is set in NavBar when a eventKey is supplied.
+     * this.props.collapsible is set in NavBar when a eventKey is supplied.
      */
-    let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
+    const collapsible = this.props.collapsible || this.props.collapsable;
+    let classes = collapsible ? this.getCollapsibleClassSet() : {};
     /*
      * prevent duplicating navbar-collapse call if passed as prop.
      * kind of overkill...
@@ -66,13 +58,13 @@ const CollapsibleNav = React.createClass({
      */
     if (this.props.className === undefined ||
       this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
-      classes['navbar-collapse'] = this.props.collapsable;
+      classes['navbar-collapse'] = collapsible;
     }
 
     return (
       <div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
         {ValidComponentChildren.map(this.props.children,
-          this.props.collapsable ?
+          collapsible ?
           this.renderCollapsibleNavChildren :
           this.renderChildren
         )}
@@ -127,6 +119,9 @@ const CollapsibleNav = React.createClass({
       }
     );
   }
-});
+};
+
+const CollapsibleNav = React.createClass(specCollapsibleNav);
 
+export {specCollapsibleNav};
 export default CollapsibleNav;
diff --git a/src/Nav.js b/src/Nav.js
@@ -3,7 +3,7 @@ import BootstrapMixin from './BootstrapMixin';
 import CollapsibleMixin from './CollapsibleMixin';
 import classNames from 'classnames';
 import domUtils from './utils/domUtils';
-
+import collapsable from './utils/deprecatedProperty';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -18,7 +18,8 @@ const Nav = React.createClass({
     stacked: React.PropTypes.bool,
     justified: React.PropTypes.bool,
     onSelect: React.PropTypes.func,
-    collapsable: React.PropTypes.bool,
+    collapsable,
+    collapsible: React.PropTypes.bool,
     expanded: React.PropTypes.bool,
     navbar: React.PropTypes.bool,
     eventKey: React.PropTypes.any,
@@ -45,11 +46,12 @@ const Nav = React.createClass({
   },
 
   render() {
-    let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
+    const collapsible = this.props.collapsible || this.props.collapsable;
+    let classes = collapsible ? this.getCollapsibleClassSet() : {};
 
-    classes['navbar-collapse'] = this.props.collapsable;
+    classes['navbar-collapse'] = collapsible;
 
-    if (this.props.navbar && !this.props.collapsable) {
+    if (this.props.navbar && !collapsible) {
       return (this.renderUl());
     }
 

diff --git a/src/Navbar.js b/src/Navbar.js
@@ -85,7 +85,7 @@ const Navbar = React.createClass({
   renderChild(child, index) {
     return cloneElement(child, {
       navbar: true,
-      collapsable: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
+      collapsible: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
       expanded: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey && this.isNavExpanded(),
       key: child.key ? child.key : index
     });

diff --git a/src/Panel.js b/src/Panel.js
@@ -3,12 +3,14 @@ import classNames from 'classnames';
 
 import BootstrapMixin from './BootstrapMixin';
 import CollapsibleMixin from './CollapsibleMixin';
+import collapsable from './utils/deprecatedProperty';
 
 const Panel = React.createClass({
   mixins: [BootstrapMixin, CollapsibleMixin],
 
   propTypes: {
-    collapsable: React.PropTypes.bool,
+    collapsable,
+    collapsible: React.PropTypes.bool,
     onSelect: React.PropTypes.func,
     header: React.PropTypes.node,
     id: React.PropTypes.string,
@@ -55,13 +57,14 @@ const Panel = React.createClass({
 
   render() {
     let classes = this.getBsClassSet();
+    const collapsible = this.props.collapsible || this.props.collapsable;
 
     return (
       <div {...this.props}
         className={classNames(this.props.className, classes)}
-        id={this.props.collapsable ? null : this.props.id} onSelect={null}>
+        id={collapsible ? null : this.props.id} onSelect={null}>
         {this.renderHeading()}
-        {this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()}
+        {collapsible ? this.renderCollapsableBody() : this.renderBody()}
         {this.renderFooter()}
       </div>
     );
@@ -144,15 +147,16 @@ const Panel = React.createClass({
 
   renderHeading() {
     let header = this.props.header;
+    const collapsible = this.props.collapsible || this.props.collapsable;
 
     if (!header) {
       return null;
     }
 
     if (!React.isValidElement(header) || Array.isArray(header)) {
-      header = this.props.collapsable ?
+      header = collapsible ?
         this.renderCollapsableTitle(header) : header;
-    } else if (this.props.collapsable) {
+    } else if (collapsible) {
 
       header = cloneElement(header, {
         className: classNames(this.prefixClass('title')),

diff --git a/src/PanelGroup.js b/src/PanelGroup.js
@@ -10,7 +10,6 @@ const PanelGroup = React.createClass({
   mixins: [BootstrapMixin],
 
   propTypes: {
-    collapsable: React.PropTypes.bool,
     accordion: React.PropTypes.bool,
     activeKey: React.PropTypes.any,
     defaultActiveKey: React.PropTypes.any,
@@ -51,7 +50,7 @@ const PanelGroup = React.createClass({
     };
 
     if (this.props.accordion) {
-      props.collapsable = true;
+      props.collapsible = true;
       props.expanded = (child.props.eventKey === activeKey);
       props.onSelect = this.handleSelect;
     }

diff --git a/src/utils/deprecatedProperty.js b/src/utils/deprecatedProperty.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import deprecationWarning from './deprecationWarning';
+
+export default function collapsable(props, propName, componentName) {
+  if (props[propName] !== undefined) {
+    deprecationWarning(
+      `${propName} in ${componentName}`,
+      'collapsible',
+      'https://github.com/react-bootstrap/react-bootstrap/issues/425'
+    );
+  }
+  return React.PropTypes.bool.call(null, props, propName, componentName);
+}
diff --git a/test/CollapsableNavSpec.js b/test/CollapsableNavSpec.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import CollapsibleNav from '../src/CollapsibleNav';
+import Nav from '../src/Nav';
+import Panel from '../src/Panel';
+import {shouldWarn} from './helpers';
+
+describe('Deprecations for collapsable property in CollapsibleNav', function () {
+  it('Should not warn about deprecation when collaps_i_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <CollapsibleNav collapsible />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    console.warn.called.should.be.false;
+  });
+
+  it('Should warn about deprecation when collaps_a_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <CollapsibleNav collapsable />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    shouldWarn('deprecated');
+  });
+});
+
+describe('Deprecations for collapsable property in Panel', function () {
+  it('Should not warn about deprecation when collaps_i_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <Panel collapsible />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    console.warn.called.should.be.false;
+  });
+
+  it('Should warn about deprecation when collaps_a_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <Panel collapsable />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    shouldWarn('deprecated');
+  });
+});
+
+describe('Deprecations for collapsable property in Nav', function () {
+  it('Should not warn about deprecation when collaps_i_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <Nav collapsible />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    console.warn.called.should.be.false;
+  });
+
+  it('Should warn about deprecation when collaps_a_ble property is used', function () {
+    let Component = React.createClass({
+      render: function() {
+        return (
+          <Nav collapsable />
+        );
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    shouldWarn('deprecated');
+  });
+});
diff --git a/test/CollapsibleNavSpec.js b/test/CollapsibleNavSpec.js
@@ -17,7 +17,7 @@ describe('CollapsibleNav', function () {
                 <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
               </Nav>
             </CollapsibleNav>
-            </Navbar>
+          </Navbar>
         );
       }
     });