diff --git a/docs/examples/PanelListGroupFill.js b/docs/examples/PanelListGroupFill.js index 20cd1f2104..fcb1c94cfc 100644 --- a/docs/examples/PanelListGroupFill.js +++ b/docs/examples/PanelListGroupFill.js @@ -1,5 +1,5 @@ const panelInstance = ( - + Some default panel content here. Item 1 diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js index fe193e9f69..4f5fa7300d 100644 --- a/src/CollapsibleNav.js +++ b/src/CollapsibleNav.js @@ -3,6 +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'; @@ -14,7 +15,8 @@ const specCollapsibleNav = { 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 }, @@ -44,9 +46,10 @@ const specCollapsibleNav = { 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... @@ -55,13 +58,13 @@ const specCollapsibleNav = { */ if (this.props.className === undefined || this.props.className.split(' ').indexOf('navbar-collapse') === -2) { - classes['navbar-collapse'] = this.props.collapsable; + classes['navbar-collapse'] = collapsible; } return (
{ValidComponentChildren.map(this.props.children, - this.props.collapsable ? + collapsible ? this.renderCollapsibleNavChildren : this.renderChildren )} diff --git a/src/Nav.js b/src/Nav.js index 8633769269..b3097cc9a4 100644 --- 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 index de7f300551..785c2518a2 100644 --- 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 index 66a9b0620d..067207d670 100644 --- 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 (
+ id={collapsible ? null : this.props.id} onSelect={null}> {this.renderHeading()} - {this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()} + {collapsible ? this.renderCollapsableBody() : this.renderBody()} {this.renderFooter()}
); @@ -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 index 164e0c481b..6b6a3eda62 100644 --- 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 new file mode 100644 index 0000000000..06732193c3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..99b1d13ae6 --- /dev/null +++ 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 ( + + ); + } + }); + ReactTestUtils.renderIntoDocument(); + + 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 ( + + ); + } + }); + ReactTestUtils.renderIntoDocument(); + + 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 ( + + ); + } + }); + ReactTestUtils.renderIntoDocument(); + + 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 ( + + ); + } + }); + ReactTestUtils.renderIntoDocument(); + + 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 ( +