8000 [changed] collapsable => collapsible property · react-bootstrap/react-bootstrap@0d7835e · GitHub
[go: up one dir, main page]
Skip to content

Commit 0d7835e

Browse files
AlexKValAlexKVal
committed
[changed] collapsable => collapsible property
Discussion is here #425. Components are involved: - Nav - Panel - CollapsibleNav Current property type checking for `collapsable` in `PanelGroup` is needless and has been removed.
1 parent 13c2c33 commit 0d7835e

File tree

10 files changed

+132
-31
lines changed

10 files changed

+132
-31
lines changed

‎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/CollapsibleNav.js

Lines changed: 8 additions & 6 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-
import deprecationWarning from './utils/deprecationWarning';
6+
import deprecationWarning, {collapsable} from './utils/deprecationWarning';
77

88
import ValidComponentChildren from './utils/ValidComponentChildren';
99
import createChainedFunction from './utils/createChainedFunction';
@@ -15,7 +15,8 @@ const CollapsibleNav = React.createClass({
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
},
@@ -55,9 +56,10 @@ const CollapsibleNav = React.createClass({
5556

5657
render() {
5758
/*
58-
* this.props.collapsable is set in NavBar when a eventKey is supplied.
59+
* this.props.collapsible is set in NavBar when a eventKey is supplied.
5960
*/
60-
let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
61+
let collapsible = this.props.collapsible || this.props.collapsable;
62+
let classes = collapsible ? this.getCollapsibleClassSet() : {};
6163
/*
6264
* prevent duplicating navbar-collapse call if passed as prop.
6365
* kind of overkill...
@@ -66,13 +68,13 @@ const CollapsibleNav = React.createClass({
6668
*/
6769
if (this.props.className === undefined ||
6870
this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
69-
classes['navbar-collapse'] = this.props.collapsable;
71+
classes['navbar-collapse'] = collapsible;
7072
}
7173

7274
return (
7375
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
7476
{ValidComponentChildren.map(this.props.children,
75-
this.props.collapsable ?
77+
collapsible ?
7678
this.renderCollapsibleNavChildren :
7779
this.renderChildren
7880
)}

‎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/deprecationWarning';
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+
let 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/deprecationWarning';
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+
let 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+
let 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/deprecationWarning.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import React from 'react';
2+
13
export default function deprecationWarning(oldname, newname, link) {
24
if (process.env.NODE_ENV !== 'production') {
35
if (!window.console && (typeof console.warn !== 'function')) {
@@ -12,3 +14,14 @@ export default function deprecationWarning(oldname, newname, link) {
1214
}
1315
}
1416
}
17+
18+
export function collapsable(props, propName, componentName) {
19+
if (props[propName] !== undefined) {
20+
deprecationWarning(
21+
`${propName} in ${componentName}`,
22+
'collapsible',
23+
'https://github.com/react-bootstrap/react-bootstrap/issues/425'
24+
);
25+
}
26+
return React.PropTypes.bool.call(null, props, propName, componentName);
27+
}

‎test/CollapsibleNavSpec.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Navbar from '../src/Navbar';
44
import CollapsibleNav from '../src/CollapsibleNav';
55
import Nav from '../src/Nav';
66
import NavItem from '../src/NavItem';
7+
import {shouldWarn} from './helpers';
78

89
describe('CollapsibleNav', function () {
910
it('Should create div and add collapse class', function () {
@@ -17,7 +18,7 @@ describe('CollapsibleNav', function () {
1718
<NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
1819
</Nav>
1920
</CollapsibleNav>
20-
</Navbar>
21+
</Navbar>
2122
);
2223
}
2324
});
@@ -111,4 +112,30 @@ describe('CollapsibleNav', function () {
111112
, idx = classArray.indexOf('navbar-collapse');
112113
assert.equal(classArray.indexOf('navbar-collapse', idx+1), -1);
113114
});
115+
116+
it('Should not warn about deprecation when collaps_i_ble property is used', function () {
117+
let Component = React.createClass({
118+
render: function() {
119+
return (
120+
<CollapsibleNav collapsible />
121+
);
122+
}
123+
});
124+
ReactTestUtils.renderIntoDocument(<Component />);
125+
126+
console.warn.called.should.be.false;
127+
});
128+
129+
it('Should warn about deprecation when collaps_a_ble property is used', function () {
130+
let Component = React.createClass({
131+
render: function() {
132+
return (
133+
<CollapsibleNav collapsable />
134+
);
135+
}
136+
});
137+
ReactTestUtils.renderIntoDocument(<Component />);
138+
139+
shouldWarn('deprecated');
140+
});
114141
});

‎test/NavSpec.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
33
import Nav from '../src/Nav';
44
import NavItem from '../src/NavItem';
55
import Button from '../src/Button';
6+
import {shouldWarn} from './helpers';
67

78
describe('Nav', function () {
89
it('Should set the correct item active', function () {
@@ -114,4 +115,30 @@ describe('Nav', function () {
114115

115116
assert.ok(items[0].props.navItem);
116117
});
118+
119+
it('Should not warn about deprecation when collaps_i_ble property is used', function () {
120+
let Component = React.createClass({
121+
render: function() {
122+
return (
123+
<Nav collapsible />
124+
);
125+
}
126+
});
127+
ReactTestUtils.renderIntoDocument(<Component />);
128+
129+
console.warn.called.should.be.false;
130+
});
131+
132+
it('Should warn about deprecation when collaps_a_ble property is used', function () {
133+
let Component = React.createClass({
134+
render: function() {
135+
return (
136+
<Nav collapsable />
137+
);
138+
}
139+
});
140+
ReactTestUtils.renderIntoDocument(<Component />);
141+
142+
shouldWarn('deprecated');
143+
});
117144
});

0 commit comments

Comments
 (0)
0