Skip to content

Commit 7ca032c

Browse files
mtscout6mtscout6
committed
Merge pull request react-bootstrap#609 from AlexKVal/collapsibleProp
[changed] collapsable => collapsible property
2 parents f77c955 + 51a205f commit 7ca032c

11 files changed

Lines changed: 160 additions & 46 deletions

‎docs/examples/PanelListGroupFill.js‎

Lines changed: 1 addition & 1 deletion
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/CollapsableNav.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import CollapsibleNav from './CollapsibleNav';
1+
import React from 'react';
2+
import deprecationWarning from './utils/deprecationWarning';
3+
import assign from './utils/Object.assign';
4+
import {specCollapsibleNav} from './CollapsibleNav';
25

3-
let CollapsableNav = CollapsibleNav;
6+
const specCollapsableNav = assign({}, specCollapsibleNav, {
7+
componentDidMount() {
8+
deprecationWarning(
9+
'CollapsableNav',
10+
'CollapsibleNav',
11+
'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'
12+
);
13+
}
14+
});
415

5-
CollapsableNav.__deprecated__ = true;
16+
const CollapsableNav = React.createClass(specCollapsableNav);
617

718
export default CollapsableNav;

‎src/CollapsibleNav.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,20 @@ import BootstrapMixin from './BootstrapMixin';
33
import CollapsibleMixin from './CollapsibleMixin';
44
import classNames from 'classnames';
55
import domUtils from './utils/domUtils';
6-
import deprecationWarning from './utils/deprecationWarning';
6+
import collapsable from './utils/deprecatedProperty';
77

88
import ValidComponentChildren from './utils/ValidComponentChildren';
99
import createChainedFunction from './utils/createChainedFunction';
1010

11-
const CollapsibleNav = React.createClass({
11+
const specCollapsibleNav = {
1212
mixins: [BootstrapMixin, CollapsibleMixin],
1313

1414
propTypes: {
1515
onSelect: React.PropTypes.func,
1616
activeHref: React.PropTypes.string,
1717
activeKey: React.PropTypes.any,
18-
collapsable: React.PropTypes.bool,
18+
collapsable,
19+
collapsible: React.PropTypes.bool,
1920
expanded: React.PropTypes.bool,
2021
eventKey: React.PropTypes.any
2122
},
@@ -43,21 +44,12 @@ const CollapsibleNav = React.createClass({
4344
return height;
4445
},
4546

46-
componentDidMount() {
47-
if (this.constructor.__deprecated__) {
48-
deprecationWarning(
49-
'CollapsableNav',
50-
'CollapsibleNav',
51-
'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'
52-
);
53-
}
54-
},
55-
5647
render() {
5748
/*
58-
* 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.
5950
*/
60-
let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
51+
const collapsible = this.props.collapsible || this.props.collapsable;
52+
let classes = collapsible ? this.getCollapsibleClassSet() : {};
6153
/*
6254
* prevent duplicating navbar-collapse call if passed as prop.
6355
* kind of overkill...
@@ -66,13 +58,13 @@ const CollapsibleNav = React.createClass({
6658
*/
6759
if (this.props.className === undefined ||
6860
this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
69-
classes['navbar-collapse'] = this.props.collapsable;
61+
classes['navbar-collapse'] = collapsible;
7062
}
7163

7264
return (
7365
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
7466
{ValidComponentChildren.map(this.props.children,
75-
this.props.collapsable ?
67+
collapsible ?
7668
this.renderCollapsibleNavChildren :
7769
this.renderChildren
7870
)}
@@ -127,6 +119,9 @@ const CollapsibleNav = React.createClass({
127119
}
128120
);
129121
}
130-
});
122+
};
123+
124+
const CollapsibleNav = React.createClass(specCollapsibleNav);
131125

126+
export {specCollapsibleNav};
132127
export default CollapsibleNav;

‎src/Nav.js‎

Lines changed: 7 additions & 5 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 9 additions & 5 deletions
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‎

Lines changed: 1 addition & 2 deletions
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‎

Lines changed: 13 additions & 0 deletions
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‎

Lines changed: 90 additions & 0 deletions
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‎

Lines changed: 1 addition & 1 deletion
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
});

0 commit comments

Comments
 (0)