Skip to content

Commit d4d997d

Browse files
KikobeatsKikobeats
authored
Merge pull request #78 from n1c0de/fix/replace-class-attribute-by-classname
Use "className" instead of "class" in React components
2 parents 2cbe18f + 9a2b144 commit d4d997d

File tree

18 files changed

+82
-82
lines changed

18 files changed

+82
-82
lines changed

‎docs/src/js/components/Demo.js‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,9 @@ class Demo extends React.PureComponent {
175175
`}
176176
</style>
177177
)}
178-
<div class='rjv-demo'>
179-
<div class='rjv-header'>
180-
<div class='header-1'>@microlink/react-json-view</div>
178+
<div className='rjv-demo'>
179+
<div className='rjv-header'>
180+
<div className='header-1'>@microlink/react-json-view</div>
181181
</div>
182182
<ReactJson
183183
name={false}
@@ -217,52 +217,52 @@ class Demo extends React.PureComponent {
217217
iconStyle={iconStyle}
218218
/>
219219

220-
<div class='rjv-settings'>
221-
<div class='rjv-input'>
222-
<div class='rjv-label'>Theme:</div>
220+
<div className='rjv-settings'>
221+
<div className='rjv-input'>
222+
<div className='rjv-label'>Theme:</div>
223223
{this.getThemeInput(theme)}
224224
</div>
225-
<div class='rjv-input'>
226-
<div class='rjv-label'>Icon Style:</div>
225+
<div className='rjv-input'>
226+
<div className='rjv-label'>Icon Style:</div>
227227
{this.getIconStyleInput(iconStyle)}
228228
</div>
229-
<div class='rjv-input'>
230-
<div class='rjv-label'>Enable Edit:</div>
229+
<div className='rjv-input'>
230+
<div className='rjv-label'>Enable Edit:</div>
231231
{this.getEditInput(onEdit)}
232232
</div>
233-
<div class='rjv-input'>
234-
<div class='rjv-label'>Enable Add:</div>
233+
<div className='rjv-input'>
234+
<div className='rjv-label'>Enable Add:</div>
235235
{this.getAddInput(onAdd)}
236236
</div>
237-
<div class='rjv-input'>
238-
<div class='rjv-label'>Enable Delete:</div>
237+
<div className='rjv-input'>
238+
<div className='rjv-label'>Enable Delete:</div>
239239
{this.getDeleteInput(onDelete)}
240240
</div>
241-
<div class='rjv-input'>
242-
<div class='rjv-label'>Enable Clipboard:</div>
241+
<div className='rjv-input'>
242+
<div className='rjv-label'>Enable Clipboard:</div>
243243
{this.getEnableClipboardInput(enableClipboard)}
244244
</div>
245245
</div>
246246

247-
<div class='rjv-settings'>
248-
<div class='rjv-input'>
249-
<div class='rjv-label'>Display Data Types:</div>
247+
<div className='rjv-settings'>
248+
<div className='rjv-input'>
249+
<div className='rjv-label'>Display Data Types:</div>
250250
{this.getDataTypesInput(displayDataTypes)}
251251
</div>
252-
<div class='rjv-input'>
253-
<div class='rjv-label'>Display Object Size:</div>
252+
<div className='rjv-input'>
253+
<div className='rjv-label'>Display Object Size:</div>
254254
{this.getObjectSizeInput(displayObjectSize)}
255255
</div>
256-
<div class='rjv-input'>
257-
<div class='rjv-label'>Indent Width:</div>
256+
<div className='rjv-input'>
257+
<div className='rjv-label'>Indent Width:</div>
258258
{this.getIndentWidthInput(indentWidth)}
259259
</div>
260-
<div class='rjv-input'>
261-
<div class='rjv-label'>Collapsed:</div>
260+
<div className='rjv-input'>
261+
<div className='rjv-label'>Collapsed:</div>
262262
{this.getCollapsedInput(collapsed)}
263263
</div>
264-
<div class='rjv-input'>
265-
<div class='rjv-label'>Collapse Strings After Length:</div>
264+
<div className='rjv-input'>
265+
<div className='rjv-label'>Collapse Strings After Length:</div>
266266
{this.getCollapsedStringsInput(collapseStringsAfter)}
267267
</div>
268268
</div>

‎docs/src/js/entry.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const app = document.getElementById('mac-react-container')
77

88
//app entrypoint
99
ReactDom.render(
10-
<div class='app-entry'>
10+
<div className='app-entry'>
1111
<Index />
1212
</div>,
1313
app

‎docs/src/js/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactJsonDemo from './components/Demo'
44
// index entrypoint component
55
export default function Demo () {
66
return (
7-
<div class='mac-react'>
7+
<div className='mac-react'>
88
<ReactJsonDemo />
99
</div>
1010
)

‎src/js/components/ArrayGroup.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default class extends React.PureComponent {
6666

6767
return (
6868
<div
69-
class='object-key-val'
69+
className='object-key-val'
7070
{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
7171
paddingLeft: object_padding_left
7272
})}
@@ -79,15 +79,15 @@ export default class extends React.PureComponent {
7979
{[...Array(groups)].map((_, i) => (
8080
<div
8181
key={i}
82-
class='object-key-val array-group'
82+
className='object-key-val array-group'
8383
{...Theme(theme, 'objectKeyVal', {
8484
marginLeft: 6,
8585
paddingLeft: array_group_padding_left
8686
})}
8787
>
8888
<span {...Theme(theme, 'brace-row')}>
8989
<div
90-
class='icon-container'
90+
className='icon-container'
9191
{...Theme(theme, 'icon-container')}
9292
onClick={e => {
9393
this.toggleCollapsed(i)
@@ -118,14 +118,14 @@ export default class extends React.PureComponent {
118118
onClick={e => {
119119
this.toggleCollapsed(i)
120120
}}
121-
class='array-group-brace'
121+
className='array-group-brace'
122122
>
123123
[
124124
<div
125125
{...Theme(theme, 'array-group-meta-data')}
126-
class='array-group-meta-data'
126+
className='array-group-meta-data'
127127
>
128-
<span class='object-size' {...Theme(theme, 'object-size')}>
128+
<span className='object-size' {...Theme(theme, 'object-size')}>
129129
{i * size}
130130
{' - '}
131131
{i * size + size > src.length

‎src/js/components/CopyToClipboard.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,13 @@ export default class extends React.PureComponent {
7474
if (this.state.copied) {
7575
return (
7676
<span>
77-
<Clippy class='copy-icon' {...Theme(theme, 'copy-icon')} />
77+
<Clippy className='copy-icon' {...Theme(theme, 'copy-icon')} />
7878
<span {...Theme(theme, 'copy-icon-copied')}>✔</span>
7979
</span>
8080
)
8181
}
8282

83-
return <Clippy class='copy-icon' {...Theme(theme, 'copy-icon')} />
83+
return <Clippy className='copy-icon' {...Theme(theme, 'copy-icon')} />
8484
}
8585

8686
clipboardValue = value => {

‎src/js/components/DataTypes/DataTypeLabel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default class extends React.PureComponent {
88
const { rjvId, type_name, displayDataTypes, theme } = this.props
99
if (displayDataTypes) {
1010
return (
11-
<span class='data-type-label' {...Theme(theme, 'data-type-label')}>
11+
<span className='data-type-label' {...Theme(theme, 'data-type-label')}>
1212
{type_name}
1313
</span>
1414
)

‎src/js/components/DataTypes/Date.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class extends React.PureComponent {
1919
return (
2020
<div {...Theme(props.theme, 'date')}>
2121
<DataTypeLabel type_name={type_name} {...props} />
22-
<span class='date-value' {...Theme(props.theme, 'date-value')}>
22+
<span className='date-value' {...Theme(props.theme, 'date-value')}>
2323
{props.value.toLocaleTimeString('en-us', display_options)}
2424
</span>
2525
</div>

‎src/js/components/DataTypes/Function.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default class extends React.PureComponent {
4747
<DataTypeLabel type_name={type_name} {...props} />
4848
<span
4949
{...Theme(props.theme, 'function-value')}
50-
class='rjv-function-container'
50+
className='rjv-function-container'
5151
onClick={this.toggleCollapsed}
5252
>
5353
{this.getFunctionDisplay(collapsed)}
@@ -65,7 +65,7 @@ export default class extends React.PureComponent {
6565
.toString()
6666
.slice(9, -1)
6767
.replace(/\{[\s\S]+/, '')}
68-
<span class='function-collapsed' style={{ fontWeight: 'bold' }}>
68+
<span className='function-collapsed' style={{ fontWeight: 'bold' }}>
6969
<span>{'{'}</span>
7070
<span {...Theme(props.theme, 'ellipsis')}>...</span>
7171
<span>{'}'}</span>

‎src/js/components/DataTypes/Object.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@ class RjvObject extends React.PureComponent {
9999

100100
getObjectContent = (depth, src, props) => {
101101
return (
102-
<div class='pushed-content object-container'>
102+
<div className='pushed-content object-container'>
103103
<div
104-
class='object-content'
104+
className='object-content'
105105
{...Theme(this.props.theme, 'pushed-content')}
106106
>
107107
{this.renderObjectContents(src, props)}
@@ -120,7 +120,7 @@ class RjvObject extends React.PureComponent {
120120
return (
121121
<div
122122
{...Theme(this.props.theme, 'ellipsis')}
123-
class='node-ellipsis'
123+
className='node-ellipsis'
124124
onClick={this.toggleCollapsed}
125125
>
126126
...
@@ -159,7 +159,7 @@ class RjvObject extends React.PureComponent {
159159
}}
160160
{...Theme(theme, 'brace-row')}
161161
>
162-
<div class='icon-container' {...Theme(theme, 'icon-container')}>
162+
<div className='icon-container' {...Theme(theme, 'icon-container')}>
163163
<IconComponent {...{ theme, iconStyle }} />
164164
</div>
165165
<ObjectName {...this.props} />
@@ -200,7 +200,7 @@ class RjvObject extends React.PureComponent {
200200

201201
return (
202202
<div
203-
class='object-key-val'
203+
className='object-key-val'
204204
onMouseEnter={() => this.setState({ ...this.state, hovered: true })}
205205
onMouseLeave={() => this.setState({ ...this.state, hovered: false })}
206206
{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', styles)}
@@ -213,7 +213,7 @@ class RjvObject extends React.PureComponent {
213213
...rest
214214
})
215215
: this.getEllipsis()}
216-
<span class='brace-row'>
216+
<span className='brace-row'>
217217
<span
218218
style={{
219219
...Theme(theme, 'brace').style,

‎src/js/components/DataTypes/String.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default class extends React.PureComponent {
6565
return (
6666
<div {...Theme(theme, 'string')}>
6767
<DataTypeLabel type_name={type_name} {...props} />
68-
<span class='string-value' {...style} onClick={this.toggleCollapsed}>
68+
<span className='string-value' {...style} onClick={this.toggleCollapsed}>
6969
"{value}"
7070
</span>
7171
</div>

0 commit comments

Comments
 (0)