Skip to content

Commit

Permalink
[changed] collapsable => collapsible property
Browse files Browse the repository at this point in the history
Discussion is here react-bootstrap#425.

Components are involved:
- Nav
- Panel
- CollapsibleNav

Current property type checking for `collapsable` in `PanelGroup`
is needless and has been removed.

Tests for deprecated `collapsable` property for all three components
has been placed into one file `CollapsableNavSpec.js`
  • Loading branch information
AlexKVal committed May 4, 2015
1 parent 2b8dc5f commit 51a205f
Show file tree
Hide file tree
Showing 10 changed files with 141 additions and 30 deletions.
2 changes: 1 addition & 1 deletion docs/examples/PanelListGroupFill.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
13 changes: 8 additions & 5 deletions src/CollapsibleNav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
},
Expand Down Expand Up @@ -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...
Expand All @@ -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 (
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
{ValidComponentChildren.map(this.props.children,
this.props.collapsable ?
collapsible ?
this.renderCollapsibleNavChildren :
this.renderChildren
)}
Expand Down
12 changes: 7 additions & 5 deletions src/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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());
}

Expand Down
2 changes: 1 addition & 1 deletion src/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down
14 changes: 9 additions & 5 deletions src/Panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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')),
Expand Down
3 changes: 1 addition & 2 deletions src/PanelGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
Expand Down
13 changes: 13 additions & 0 deletions src/utils/deprecatedProperty.js
Original file line number Diff line number Diff line change
@@ -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);
}
90 changes: 90 additions & 0 deletions test/CollapsableNavSpec.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
2 changes: 1 addition & 1 deletion test/CollapsibleNavSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('CollapsibleNav', function () {
<NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
</Nav>
</CollapsibleNav>
</Navbar>
</Navbar>
);
}
});
Expand Down
20 changes: 10 additions & 10 deletions test/PanelSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('Panel', function () {
it('Should have custom component header with anchor', function () {
let header = <h3>Heading</h3>,
instance = ReactTestUtils.renderIntoDocument(
<Panel header={header} collapsable={true}>Panel content</Panel>
<Panel header={header} collapsible={true}>Panel content</Panel>
);
header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'panel-heading').getDOMNode();
assert.equal(header.firstChild.nodeName, 'H3');
Expand All @@ -68,21 +68,21 @@ describe('Panel', function () {

it('Should have collapse classes', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} expanded={true}>Panel content</Panel>
<Panel collapsible={true} expanded={true}>Panel content</Panel>
);
assert.ok(instance.getDOMNode().querySelector('.panel-collapse.collapse.in'));
});

it('Should pass through dom properties', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={false} id="testid">Panel content</Panel>
<Panel collapsible={false} id="testid">Panel content</Panel>
);
assert.equal(instance.getDOMNode().id, 'testid');
});

it('Should pass id to panel-collapse', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} id="testid" header="Heading">Panel content</Panel>
<Panel collapsible={true} id="testid" header="Heading">Panel content</Panel>
);
assert.notOk(instance.getDOMNode().id);
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
Expand All @@ -93,7 +93,7 @@ describe('Panel', function () {

it('Should be open', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} expanded={true} header="Heading">Panel content</Panel>
<Panel collapsible={true} expanded={true} header="Heading">Panel content</Panel>
);
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
let anchor = instance.getDOMNode().querySelector('.panel-title a');
Expand All @@ -103,7 +103,7 @@ describe('Panel', function () {

it('Should be closed', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} expanded={false} header="Heading">Panel content</Panel>
<Panel collapsible={true} expanded={false} header="Heading">Panel content</Panel>
);
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
let anchor = instance.getDOMNode().querySelector('.panel-title a');
Expand All @@ -113,7 +113,7 @@ describe('Panel', function () {

it('Should be aria-expanded=true', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} expanded={true} header="Heading">Panel content</Panel>
<Panel collapsible={true} expanded={true} header="Heading">Panel content</Panel>
);
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
let anchor = instance.getDOMNode().querySelector('.panel-title a');
Expand All @@ -123,7 +123,7 @@ describe('Panel', function () {

it('Should be aria-expanded=false', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} expanded={false} header="Heading">Panel content</Panel>
<Panel collapsible={true} expanded={false} header="Heading">Panel content</Panel>
);
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
let anchor = instance.getDOMNode().querySelector('.panel-title a');
Expand All @@ -137,15 +137,15 @@ describe('Panel', function () {
done();
}
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} onSelect={handleSelect} header="Click me" eventKey='1'>Panel content</Panel>
<Panel collapsible={true} onSelect={handleSelect} header="Click me" eventKey='1'>Panel content</Panel>
);
let title = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'panel-title');
ReactTestUtils.Simulate.click(title.getDOMNode().firstChild);
});

it('Should toggle when uncontrolled', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Panel collapsable={true} defaultExpanded={false} header="Click me">Panel content</Panel>
<Panel collapsible={true} defaultExpanded={false} header="Click me">Panel content</Panel>
);

assert.notOk(instance.state.expanded);
Expand Down

0 comments on commit 51a205f

Please sign in to comment.