Skip to content

Commit 6dfcf36

Browse files
mtscout6mtscout6
committed
[changed] Internal variables classSet to classNames
This has been causing a lot of confusion for folks since React has depricated `classSet`. We felt at the time that changing the require call to `require('classnames')` withing changing the variable name would be enough. It hasn't due to the confusion people are seeing. Fixes react-bootstrap#489
1 parent ee562c8 commit 6dfcf36

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+109
-109
lines changed

‎docs/examples/.eslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"globals": {
77
"mountNode",
88
"React",
9-
"classSet",
9+
"classNames",
1010
"Accordion",
1111
"Alert",
1212
"Badge",

‎docs/examples/CollapsableParagraph.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const CollapsableParagraph = React.createClass({
2020
return (
2121
<div>
2222
<Button onClick={this.onHandleToggle}>{text} Content</Button>
23-
<div ref='panel' className={classSet(styles)}>
23+
<div ref='panel' className={classNames(styles)}>
2424
{this.props.children}
2525
</div>
2626
</div>

‎docs/src/ReactPlayground.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable */
22
import React from 'react';
3-
import classSet from 'classnames';
3+
import classNames from 'classnames';
44
import Accordion from '../../src/Accordion';
55
import Alert from '../../src/Alert';
66
import Badge from '../../src/Badge';
@@ -198,11 +198,11 @@ const ReactPlayground = React.createClass({
198198
}
199199
return (
200200
<div className='playground'>
201-
<div className={classSet(classes)}>
201+
<div className={classNames(classes)}>
202202
<div ref='mount' />
203203
</div>
204204
{editor}
205-
<a className={classSet(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
205+
<a className={classNames(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
206206
</div>
207207
);
208208
},

‎src/Affix.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import AffixMixin from './AffixMixin';
44
import domUtils from './utils/domUtils';
55

@@ -15,7 +15,7 @@ const Affix = React.createClass({
1515

1616
return (
1717
<div {...this.props}
18-
className={classSet(this.props.className, this.state.affixClass)}
18+
className={classNames(this.props.className, this.state.affixClass)}
1919
style={holderStyle}>
2020
{this.props.children}
2121
</div>

‎src/Alert.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44

55
const Alert = React.createClass({
@@ -36,7 +36,7 @@ const Alert = React.createClass({
3636
classes['alert-dismissable'] = isDismissable;
3737

3838
return (
39-
<div {...this.props} className={classSet(this.props.className, classes)}>
39+
<div {...this.props} className={classNames(this.props.className, classes)}>
4040
{isDismissable ? this.renderDismissButton() : null}
4141
{this.props.children}
4242
</div>

‎src/Badge.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ValidComponentChildren from './utils/ValidComponentChildren';
3-
import classSet from 'classnames';
3+
import classNames from 'classnames';
44

55

66
const Badge = React.createClass({
@@ -22,7 +22,7 @@ const Badge = React.createClass({
2222
return (
2323
<span
2424
{...this.props}
25-
className={classSet(this.props.className, classes)}>
25+
className={classNames(this.props.className, classes)}>
2626
{this.props.children}
2727
</span>
2828
);

‎src/Button.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44

55
const Button = React.createClass({
@@ -54,7 +54,7 @@ const Button = React.createClass({
5454
<Component
5555
{...this.props}
5656
href={href}
57-
className={classSet(this.props.className, classes)}
57+
className={classNames(this.props.className, classes)}
5858
role="button">
5959
{this.props.children}
6060
</Component>
@@ -67,7 +67,7 @@ const Button = React.createClass({
6767
return (
6868
<Component
6969
{...this.props}
70-
className={classSet(this.props.className, classes)}>
70+
className={classNames(this.props.className, classes)}>
7171
{this.props.children}
7272
</Component>
7373
);
@@ -79,7 +79,7 @@ const Button = React.createClass({
7979
};
8080

8181
return (
82-
<li className={classSet(liClasses)}>
82+
<li className={classNames(liClasses)}>
8383
{this.renderAnchor(classes)}
8484
</li>
8585
);

‎src/ButtonGroup.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44

55
const ButtonGroup = React.createClass({
@@ -25,7 +25,7 @@ const ButtonGroup = React.createClass({
2525
return (
2626
<div
2727
{...this.props}
28-
className={classSet(this.props.className, classes)}>
28+
className={classNames(this.props.className, classes)}>
2929
{this.props.children}
3030
</div>
3131
);

‎src/ButtonToolbar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44

55
const ButtonToolbar = React.createClass({
@@ -18,7 +18,7 @@ const ButtonToolbar = React.createClass({
1818
<div
1919
{...this.props}
2020
role="toolbar"
21-
className={classSet(this.props.className, classes)}>
21+
className={classNames(this.props.className, classes)}>
2222
{this.props.children}
2323
</div>
2424
);

‎src/Carousel.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { cloneElement } from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44
import ValidComponentChildren from './utils/ValidComponentChildren';
55

@@ -142,7 +142,7 @@ const Carousel = React.createClass({
142142
return (
143143
<div
144144
{...this.props}
145-
className={classSet(this.props.className, classes)}
145+
className={classNames(this.props.className, classes)}
146146
onMouseOver={this.handleMouseOver}
147147
onMouseOut={this.handleMouseOut}>
148148
{this.props.indicators ? this.renderIndicators() : null}

‎src/CarouselItem.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import TransitionEvents from './utils/TransitionEvents';
44

55
const CarouselItem = React.createClass({
@@ -73,7 +73,7 @@ const CarouselItem = React.createClass({
7373
}
7474

7575
return (
76-
<div {...this.props} className={classSet(this.props.className, classes)}>
76+
<div {...this.props} className={classNames(this.props.className, classes)}>
7777
{this.props.children}
7878
{this.props.caption ? this.renderCaption() : null}
7979
</div>

‎src/Col.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import constants from './constants';
44

55
const Col = React.createClass({
@@ -62,7 +62,7 @@ const Col = React.createClass({
6262
}, this);
6363

6464
return (
65-
<ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
65+
<ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
6666
{this.props.children}
6767
</ComponentClass>
6868
);

‎src/CollapsableNav.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { cloneElement } from 'react';
22
import BootstrapMixin from './BootstrapMixin';
33
import CollapsableMixin from './CollapsableMixin';
4-
import classSet from 'classnames';
4+
import classNames from 'classnames';
55
import domUtils from './utils/domUtils';
66

77
import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -52,7 +52,7 @@ const CollapsableNav = React.createClass({
5252
}
5353

5454
return (
55-
<div eventKey={this.props.eventKey} className={classSet(this.props.className, classes)} >
55+
<div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
5656
{ValidComponentChildren.map(this.props.children, this.props.collapsable ? this.renderCollapsableNavChildren : this.renderChildren )}
5757
</div>
5858
);

‎src/DropdownButton.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { cloneElement } from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33

44
import createChainedFunction from './utils/createChainedFunction';
55
import BootstrapMixin from './BootstrapMixin';
@@ -64,7 +64,7 @@ const DropdownButton = React.createClass({
6464
return (
6565
<ButtonGroup
6666
bsSize={this.props.bsSize}
67-
className={classSet(this.props.className, groupClasses)}>
67+
className={classNames(this.props.className, groupClasses)}>
6868
{children}
6969
</ButtonGroup>
7070
);
@@ -78,7 +78,7 @@ const DropdownButton = React.createClass({
7878
};
7979

8080
return (
81-
<li className={classSet(this.props.className, classes)}>
81+
<li className={classNames(this.props.className, classes)}>
8282
{children}
8383
</li>
8484
);

‎src/DropdownMenu.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { cloneElement } from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33

44
import createChainedFunction from './utils/createChainedFunction';
55
import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -19,7 +19,7 @@ const DropdownMenu = React.createClass({
1919
return (
2020
<ul
2121
{...this.props}
22-
className={classSet(this.props.className, classes)}
22+
className={classNames(this.props.className, classes)}
2323
role="menu">
2424
{ValidComponentChildren.map(this.props.children, this.renderMenuItem)}
2525
</ul>

‎src/FormGroup.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33

44
class FormGroup extends React.Component {
55
render() {
@@ -12,7 +12,7 @@ class FormGroup extends React.Component {
1212
};
1313

1414
return (
15-
<div className={classSet(classes, this.props.groupClassName)}>
15+
<div className={classNames(classes, this.props.groupClassName)}>
1616
{this.props.children}
1717
</div>
1818
);

‎src/Glyphicon.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import BootstrapMixin from './BootstrapMixin';
44
import constants from './constants';
55

@@ -22,7 +22,7 @@ const Glyphicon = React.createClass({
2222
classes['glyphicon-' + this.props.glyph] = true;
2323

2424
return (
25-
<span {...this.props} className={classSet(this.props.className, classes)}>
25+
<span {...this.props} className={classNames(this.props.className, classes)}>
2626
{this.props.children}
2727
</span>
2828
);

‎src/Grid.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33

44
const Grid = React.createClass({
55
propTypes: {
@@ -20,7 +20,7 @@ const Grid = React.createClass({
2020
return (
2121
<ComponentClass
2222
{...this.props}
23-
className={classSet(this.props.className, className)}>
23+
className={classNames(this.props.className, className)}>
2424
{this.props.children}
2525
</ComponentClass>
2626
);

‎src/Input.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33
import Button from './Button';
44
import FormGroup from './FormGroup';
55

@@ -90,17 +90,17 @@ const Input = React.createClass({
9090
switch (this.props.type) {
9191
case 'select':
9292
input = (
93-
<select {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input">
93+
<select {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input">
9494
{this.props.children}
9595
</select>
9696
);
9797
break;
9898
case 'textarea':
99-
input = <textarea {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input" />;
99+
input = <textarea {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input" />;
100100
break;
101101
case 'static':
102102
input = (
103-
<p {...this.props} className={classSet(this.props.className, 'form-control-static')} ref="input" key="input">
103+
<p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
104104
{this.props.value}
105105
</p>
106106
);
@@ -112,7 +112,7 @@ const Input = React.createClass({
112112
break;
113113
default:
114114
let className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
115-
input = <input {...this.props} className={classSet(this.props.className, className)} ref="input" key="input" />;
115+
input = <input {...this.props} className={classNames(this.props.className, className)} ref="input" key="input" />;
116116
}
117117

118118
return input;
@@ -150,7 +150,7 @@ const Input = React.createClass({
150150
}
151151

152152
return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
153-
<div className={classSet(inputGroupClassName, 'input-group')} key="input-group">
153+
<div className={classNames(inputGroupClassName, 'input-group')} key="input-group">
154154
{addonBefore}
155155
{buttonBefore}
156156
{children}
@@ -170,7 +170,7 @@ const Input = React.createClass({
170170
};
171171

172172
return this.props.hasFeedback ? (
173-
<span className={classSet(classes)} key="icon" />
173+
<span className={classNames(classes)} key="icon" />
174174
) : null;
175175
},
176176

@@ -189,7 +189,7 @@ const Input = React.createClass({
189189
};
190190

191191
return (
192-
<div className={classSet(classes)} key="checkboxRadioWrapper">
192+
<div className={classNames(classes)} key="checkboxRadioWrapper">
193193
{children}
194194
</div>
195195
);
@@ -210,7 +210,7 @@ const Input = React.createClass({
210210
classes[this.props.labelClassName] = this.props.labelClassName;
211211

212212
return this.props.label ? (
213-
<label htmlFor={this.props.id} className={classSet(classes)} key="label">
213+
<label htmlFor={this.props.id} className={classNames(classes)} key="label">
214214
{children}
215215
{this.props.label}
216216
</label>

‎src/Jumbotron.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import classSet from 'classnames';
2+
import classNames from 'classnames';
33

44
const Jumbotron = React.createClass({
55
render() {
66
return (
7-
<div {...this.props} className={classSet(this.props.className, 'jumbotron')}>
7+
<div {...this.props} className={classNames(this.props.className, 'jumbotron')}>
88
{this.props.children}
99
</div>
1010
);

0 commit comments

Comments
 (0)