Skip to content

Commit 51a205f

Browse files
AlexKValAlexKVal
committed
[changed] collapsable => collapsible property
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`
1 parent 2b8dc5f commit 51a205f

10 files changed

+141
-30
lines changed

‎docs/examples/PanelListGroupFill.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const panelInstance = (
2-
<Panel collapsable defaultExpanded header='Panel heading'>
2+
<Panel collapsible defaultExpanded header='Panel heading'>
33
Some default panel content here.
44
<ListGroup fill>
55
<ListGroupItem>Item 1</ListGroupItem>

‎src/CollapsibleNav.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import BootstrapMixin from './BootstrapMixin';
33
import CollapsibleMixin from './CollapsibleMixin';
44
import classNames from 'classnames';
55
import domUtils from './utils/domUtils';
6+
import collapsable from './utils/deprecatedProperty';
67

78
import ValidComponentChildren from './utils/ValidComponentChildren';
89
import createChainedFunction from './utils/createChainedFunction';
@@ -14,7 +15,8 @@ const specCollapsibleNav = {
1415
onSelect: React.PropTypes.func,
1516
activeHref: React.PropTypes.string,
1617
activeKey: React.PropTypes.any,
17-
collapsable: React.PropTypes.bool,
18+
collapsable,
19+
collapsible: React.PropTypes.bool,
1820
expanded: React.PropTypes.bool,
1921
eventKey: React.PropTypes.any
2022
},
@@ -44,9 +46,10 @@ const specCollapsibleNav = {
4446

4547
render() {
4648
/*
47-
* this.props.collapsable is set in NavBar when a eventKey is supplied.
49+
* this.props.collapsible is set in NavBar when a eventKey is supplied.
4850
*/
49-
let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
51+
const collapsible = this.props.collapsible || this.props.collapsable;
52+
let classes = collapsible ? this.getCollapsibleClassSet() : {};
5053
/*
5154
* prevent duplicating navbar-collapse call if passed as prop.
5255
* kind of overkill...
@@ -55,13 +58,13 @@ const specCollapsibleNav = {
5558
*/
5659
if (this.props.className === undefined ||
5760
this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
58-
classes['navbar-collapse'] = this.props.collapsable;
61+
classes['navbar-collapse'] = collapsible;
5962
}
6063

6164
return (
6265
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
6366
{ValidComponentChildren.map(this.props.children,
64-
this.props.collapsable ?
67+
collapsible ?
6568
this.renderCollapsibleNavChildren :
6669
this.renderChildren
6770
)}

‎src/Nav.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import BootstrapMixin from './BootstrapMixin';
33
import CollapsibleMixin from './CollapsibleMixin';
44
import classNames from 'classnames';
55
import domUtils from './utils/domUtils';
6-
6+
import collapsable from './utils/deprecatedProperty';
77

88
import ValidComponentChildren from './utils/ValidComponentChildren';
99
import createChainedFunction from './utils/createChainedFunction';
@@ -18,7 +18,8 @@ const Nav = React.createClass({
1818
stacked: React.PropTypes.bool,
1919
justified: React.PropTypes.bool,
2020
onSelect: React.PropTypes.func,
21-
collapsable: React.PropTypes.bool,
21+
collapsable,
22+
collapsible: React.PropTypes.bool,
2223
expanded: React.PropTypes.bool,
2324
navbar: React.PropTypes.bool,
2425
eventKey: React.PropTypes.any,
@@ -45,11 +46,12 @@ const Nav = React.createClass({
4546
},
4647

4748
render() {
48-
let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
49+
const collapsible = this.props.collapsible || this.props.collapsable;
50+
let classes = collapsible ? this.getCollapsibleClassSet() : {};
4951

50-
classes['navbar-collapse'] = this.props.collapsable;
52+
classes['navbar-collapse'] = collapsible;
5153

52-
if (this.props.navbar && !this.props.collapsable) {
54+
if (this.props.navbar && !collapsible) {
5355
return (this.renderUl());
5456
}
5557

‎src/Navbar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const Navbar = React.createClass({
8585
renderChild(child, index) {
8686
return cloneElement(child, {
8787
navbar: true,
88-
collapsable: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
88+
collapsible: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey,
8989
expanded: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.eventKey && this.isNavExpanded(),
9090
key: child.key ? child.key : index
9191
});

‎src/Panel.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import classNames from 'classnames';
33

44
import BootstrapMixin from './BootstrapMixin';
55
import CollapsibleMixin from './CollapsibleMixin';
6+
import collapsable from './utils/deprecatedProperty';
67

78
const Panel = React.createClass({
89
mixins: [BootstrapMixin, CollapsibleMixin],
910

1011
propTypes: {
11-
collapsable: React.PropTypes.bool,
12+
collapsable,
13+
collapsible: React.PropTypes.bool,
1214
onSelect: React.PropTypes.func,
1315
header: React.PropTypes.node,
1416
id: React.PropTypes.string,
@@ -55,13 +57,14 @@ const Panel = React.createClass({
5557

5658
render() {
5759
let classes = this.getBsClassSet();
60+
const collapsible = this.props.collapsible || this.props.collapsable;
5861

5962
return (
6063
<div {...this.props}
6164
className={classNames(this.props.className, classes)}
62-
id={this.props.collapsable ? null : this.props.id} onSelect={null}>
65+
id={collapsible ? null : this.props.id} onSelect={null}>
6366
{this.renderHeading()}
64-
{this.props.collapsable ? this.renderCollapsableBody() : this.renderBody()}
67+
{collapsible ? this.renderCollapsableBody() : this.renderBody()}
6568
{this.renderFooter()}
6669
</div>
6770
);
@@ -144,15 +147,16 @@ const Panel = React.createClass({
144147

145148
renderHeading() {
146149
let header = this.props.header;
150+
const collapsible = this.props.collapsible || this.props.collapsable;
147151

148152
if (!header) {
149153
return null;
150154
}
151155

152156
if (!React.isValidElement(header) || Array.isArray(header)) {
153-
header = this.props.collapsable ?
157+
header = collapsible ?
154158
this.renderCollapsableTitle(header) : header;
155-
} else if (this.props.collapsable) {
159+
} else if (collapsible) {
156160

157161
header = cloneElement(header, {
158162
className: classNames(this.prefixClass('title')),

‎src/PanelGroup.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ const PanelGroup = React.createClass({
1010
mixins: [BootstrapMixin],
1111

1212
propTypes: {
13-
collapsable: React.PropTypes.bool,
1413
accordion: React.PropTypes.bool,
1514
activeKey: React.PropTypes.any,
1615
defaultActiveKey: React.PropTypes.any,
@@ -51,7 +50,7 @@ const PanelGroup = React.createClass({
5150
};
5251

5352
if (this.props.accordion) {
54-
props.collapsable = true;
53+
props.collapsible = true;
5554
props.expanded = (child.props.eventKey === activeKey);
5655
props.onSelect = this.handleSelect;
5756
}

‎src/utils/deprecatedProperty.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import deprecationWarning from './deprecationWarning';
3+
4+
export default function collapsable(props, propName, componentName) {
5+
if (props[propName] !== undefined) {
6+
deprecationWarning(
7+
`${propName} in ${componentName}`,
8+
'collapsible',
9+
'https://github.com/react-bootstrap/react-bootstrap/issues/425'
10+
);
11+
}
12+
return React.PropTypes.bool.call(null, props, propName, componentName);
13+
}

‎test/CollapsableNavSpec.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import ReactTestUtils from 'react/lib/ReactTestUtils';
3+
import CollapsibleNav from '../src/CollapsibleNav';
4+
import Nav from '../src/Nav';
5+
import Panel from '../src/Panel';
6+
import {shouldWarn} from './helpers';
7+
8+
describe('Deprecations for collapsable property in CollapsibleNav', function () {
9+
it('Should not warn about deprecation when collaps_i_ble property is used', function () {
10+
let Component = React.createClass({
11+
render: function() {
12+
return (
13+
<CollapsibleNav collapsible />
14+
);
15+
}
16+
});
17+
ReactTestUtils.renderIntoDocument(<Component />);
18+
19+
console.warn.called.should.be.false;
20+
});
21+
22+
it('Should warn about deprecation when collaps_a_ble property is used', function () {
23+
let Component = React.createClass({
24+
render: function() {
25+
return (
26+
<CollapsibleNav collapsable />
27+
);
28+
}
29+
});
30+
ReactTestUtils.renderIntoDocument(<Component />);
31+
32+
shouldWarn('deprecated');
33+
});
34+
});
35+
36+
describe('Deprecations for collapsable property in Panel', function () {
37+
it('Should not warn about deprecation when collaps_i_ble property is used', function () {
38+
let Component = React.createClass({
39+
render: function() {
40+
return (
41+
<Panel collapsible />
42+
);
43+
}
44+
});
45+
ReactTestUtils.renderIntoDocument(<Component />);
46+
47+
console.warn.called.should.be.false;
48+
});
49+
50+
it('Should warn about deprecation when collaps_a_ble property is used', function () {
51+
let Component = React.createClass({
52+
render: function() {
53+
return (
54+
<Panel collapsable />
55+
);
56+
}
57+
});
58+
ReactTestUtils.renderIntoDocument(<Component />);
59+
60+
shouldWarn('deprecated');
61+
});
62+
});
63+
64+
describe('Deprecations for collapsable property in Nav', function () {
65+
it('Should not warn about deprecation when collaps_i_ble property is used', function () {
66+
let Component = React.createClass({
67+
render: function() {
68+
return (
69+
<Nav collapsible />
70+
);
71+
}
72+
});
73+
ReactTestUtils.renderIntoDocument(<Component />);
74+
75+
console.warn.called.should.be.false;
76+
});
77+
78+
it('Should warn about deprecation when collaps_a_ble property is used', function () {
79+
let Component = React.createClass({
80+
render: function() {
81+
return (
82+
<Nav collapsable />
83+
);
84+
}
85+
});
86+
ReactTestUtils.renderIntoDocument(<Component />);
87+
88+
shouldWarn('deprecated');
89+
});
90+
});

‎test/CollapsibleNavSpec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('CollapsibleNav', function () {
1717
<NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
1818
</Nav>
1919
</CollapsibleNav>
20-
</Navbar>
20+
</Navbar>
2121
);
2222
}
2323
});

‎test/PanelSpec.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe('Panel', function () {
4949
it('Should have custom component header with anchor', function () {
5050
let header = <h3>Heading</h3>,
5151
instance = ReactTestUtils.renderIntoDocument(
52-
<Panel header={header} collapsable={true}>Panel content</Panel>
52+
<Panel header={header} collapsible={true}>Panel content</Panel>
5353
);
5454
header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'panel-heading').getDOMNode();
5555
assert.equal(header.firstChild.nodeName, 'H3');
@@ -68,21 +68,21 @@ describe('Panel', function () {
6868

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

7676
it('Should pass through dom properties', function () {
7777
let instance = ReactTestUtils.renderIntoDocument(
78-
<Panel collapsable={false} id="testid">Panel content</Panel>
78+
<Panel collapsible={false} id="testid">Panel content</Panel>
7979
);
8080
assert.equal(instance.getDOMNode().id, 'testid');
8181
});
8282

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

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

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

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

124124
it('Should be aria-expanded=false', function () {
125125
let instance = ReactTestUtils.renderIntoDocument(
126-
<Panel collapsable={true} expanded={false} header="Heading">Panel content</Panel>
126+
<Panel collapsible={true} expanded={false} header="Heading">Panel content</Panel>
127127
);
128128
let collapse = instance.getDOMNode().querySelector('.panel-collapse');
129129
let anchor = instance.getDOMNode().querySelector('.panel-title a');
@@ -137,15 +137,15 @@ describe('Panel', function () {
137137
done();
138138
}
139139
let instance = ReactTestUtils.renderIntoDocument(
140-
<Panel collapsable={true} onSelect={handleSelect} header="Click me" eventKey='1'>Panel content</Panel>
140+
<Panel collapsible={true} onSelect={handleSelect} header="Click me" eventKey='1'>Panel content</Panel>
141141
);
142142
let title = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'panel-title');
143143
ReactTestUtils.Simulate.click(title.getDOMNode().firstChild);
144144
});
145145

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

151151
assert.notOk(instance.state.expanded);

0 commit comments

Comments
 (0)