Skip to content

Commit 626fefa

Browse files
AlexKValAlexKVal
committed
Move CollapsableNav => CollapsibleNav
And refactor CollapsableNav to use CollapsibleMixin
1 parent 4f66df8 commit 626fefa

2 files changed

Lines changed: 125 additions & 107 deletions

File tree

‎src/CollapsableNav.js‎

Lines changed: 4 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,8 @@
1-
import React, { cloneElement } from 'react';
2-
import BootstrapMixin from './BootstrapMixin';
3-
import CollapsableMixin from './CollapsableMixin';
4-
import classNames from 'classnames';
5-
import domUtils from './utils/domUtils';
1+
import deprecationWarning from './utils/deprecationWarning';
2+
import CollapsibleNav from './CollapsibleNav';
63

7-
import ValidComponentChildren from './utils/ValidComponentChildren';
8-
import createChainedFunction from './utils/createChainedFunction';
4+
let CollapsableNav = CollapsibleNav;
95

10-
const CollapsableNav = React.createClass({
11-
mixins: [BootstrapMixin, CollapsableMixin],
12-
13-
propTypes: {
14-
onSelect: React.PropTypes.func,
15-
activeHref: React.PropTypes.string,
16-
activeKey: React.PropTypes.any,
17-
collapsable: React.PropTypes.bool,
18-
expanded: React.PropTypes.bool,
19-
eventKey: React.PropTypes.any
20-
},
21-
22-
getCollapsableDOMNode() {
23-
return this.getDOMNode();
24-
},
25-
26-
getCollapsableDimensionValue() {
27-
let height = 0;
28-
let nodes = this.refs;
29-
for (let key in nodes) {
30-
if (nodes.hasOwnProperty(key)) {
31-
32-
let n = nodes[key].getDOMNode()
33-
, h = n.offsetHeight
34-
, computedStyles = domUtils.getComputedStyles(n);
35-
36-
height += (h + parseInt(computedStyles.marginTop, 10) + parseInt(computedStyles.marginBottom, 10));
37-
}
38-
}
39-
return height;
40-
},
41-
42-
render() {
43-
/*
44-
* this.props.collapsable is set in NavBar when a eventKey is supplied.
45-
*/
46-
let classes = this.props.collapsable ? this.getCollapsableClassSet() : {};
47-
/*
48-
* prevent duplicating navbar-collapse call if passed as prop. kind of overkill... good cadidate to have check implemented as a util that can
49-
* also be used elsewhere.
50-
*/
51-
if (this.props.className === undefined || this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
52-
classes['navbar-collapse'] = this.props.collapsable;
53-
}
54-
55-
return (
56-
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
57-
{ValidComponentChildren.map(this.props.children, this.props.collapsable ? this.renderCollapsableNavChildren : this.renderChildren )}
58-
</div>
59-
);
60-
},
61-
62-
getChildActiveProp(child) {
63-
if (child.props.active) {
64-
return true;
65-
}
66-
if (this.props.activeKey != null) {
67-
if (child.props.eventKey === this.props.activeKey) {
68-
return true;
69-
}
70-
}
71-
if (this.props.activeHref != null) {
72-
if (child.props.href === this.props.activeHref) {
73-
return true;
74-
}
75-
}
76-
77-
return child.props.active;
78-
},
79-
80-
renderChildren(child, index) {
81-
let key = child.key ? child.key : index;
82-
return cloneElement(
83-
child,
84-
{
85-
activeKey: this.props.activeKey,
86-
activeHref: this.props.activeHref,
87-
ref: 'nocollapse_' + key,
88-
key: key,
89-
navItem: true
90-
}
91-
);
92-
},
93-
94-
renderCollapsableNavChildren(child, index) {
95-
let key = child.key ? child.key : index;
96-
return cloneElement(
97-
child,
98-
{
99-
active: this.getChildActiveProp(child),
100-
activeKey: this.props.activeKey,
101-
activeHref: this.props.activeHref,
102-
onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
103-
ref: 'collapsable_' + key,
104-
key: key,
105-
navItem: true
106-
}
107-
);
108-
}
109-
});
6+
deprecationWarning('CollapsableNav', 'CollapsibleNav');
1107

1118
export default CollapsableNav;

‎src/CollapsibleNav.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { cloneElement } from 'react';
2+
import BootstrapMixin from './BootstrapMixin';
3+
import CollapsibleMixin from './CollapsibleMixin';
4+
import classNames from 'classnames';
5+
import domUtils from './utils/domUtils';
6+
7+
import ValidComponentChildren from './utils/ValidComponentChildren';
8+
import createChainedFunction from './utils/createChainedFunction';
9+
10+
const CollapsibleNav = React.createClass({
11+
mixins: [BootstrapMixin, CollapsibleMixin],
12+
13+
propTypes: {
14+
onSelect: React.PropTypes.func,
15+
activeHref: React.PropTypes.string,
16+
activeKey: React.PropTypes.any,
17+
collapsable: React.PropTypes.bool,
18+
expanded: React.PropTypes.bool,
19+
eventKey: React.PropTypes.any
20+
},
21+
22+
getCollapsibleDOMNode() {
23+
return this.getDOMNode();
24+
},
25+
26+
getCollapsibleDimensionValue() {
27+
let height = 0;
28+
let nodes = this.refs;
29+
for (let key in nodes) {
30+
if (nodes.hasOwnProperty(key)) {
31+
32+
let n = nodes[key].getDOMNode()
33+
, h = n.offsetHeight
34+
, computedStyles = domUtils.getComputedStyles(n);
35+
36+
height += (h +
37+
parseInt(computedStyles.marginTop, 10) +
38+
parseInt(computedStyles.marginBottom, 10)
39+
);
40+
}
41+
}
42+
return height;
43+
},
44+
45+
render() {
46+
/*
47+
* this.props.collapsable is set in NavBar when a eventKey is supplied.
48+
*/
49+
let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
50+
/*
51+
* prevent duplicating navbar-collapse call if passed as prop.
52+
* kind of overkill...
53+
* good cadidate to have check implemented as an util that can
54+
* also be used elsewhere.
55+
*/
56+
if (this.props.className === undefined ||
57+
this.props.className.split(' ').indexOf('navbar-collapse') === -2) {
58+
classes['navbar-collapse'] = this.props.collapsable;
59+
}
60+
61+
return (
62+
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
63+
{ValidComponentChildren.map(this.props.children,
64+
this.props.collapsable ?
65+
this.renderCollapsibleNavChildren :
66+
this.renderChildren
67+
)}
68+
</div>
69+
);
70+
},
71+
72+
getChildActiveProp(child) {
73+
if (child.props.active) {
74+
return true;
75+
}
76+
if (this.props.activeKey != null) {
77+
if (child.props.eventKey === this.props.activeKey) {
78+
return true;
79+
}
80+
}
81+
if (this.props.activeHref != null) {
82+
if (child.props.href === this.props.activeHref) {
83+
return true;
84+
}
85+
}
86+
87+
return child.props.active;
88+
},
89+
90+
renderChildren(child, index) {
91+
let key = child.key ? child.key : index;
92+
return cloneElement(
93+
child,
94+
{
95+
activeKey: this.props.activeKey,
96+
activeHref: this.props.activeHref,
97+
ref: 'nocollapse_' + key,
98+
key: key,
99+
navItem: true
100+
}
101+
);
102+
},
103+
104+
renderCollapsibleNavChildren(child, index) {
105+
let key = child.key ? child.key : index;
106+
return cloneElement(
107+
child,
108+
{
109+
active: this.getChildActiveProp(child),
110+
activeKey: this.props.activeKey,
111+
activeHref: this.props.activeHref,
112+
onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
113+
ref: 'collapsable_' + key,
114+
key: key,
115+
navItem: true
116+
}
117+
);
118+
}
119+
});
120+
121+
export default CollapsibleNav;

0 commit comments

Comments
 (0)