Prefer classnames to ternary

This commit is contained in:
Jordan Eldredge 2016-08-31 09:06:01 -07:00
parent 137ff47303
commit d996d808a9
6 changed files with 14 additions and 10 deletions

View file

@ -1,5 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
class ClutterBar extends React.Component {
@ -25,7 +26,7 @@ class ClutterBar extends React.Component {
<div id='button-i' />
<div
id='button-d'
className={this.props.doubled ? 'selected' : ''}
className={classnames({selected: this.props.doubled})}
onMouseUp={this.handleMouseUpDouble}
onMouseDown={this.handleMouseDownDouble}
/>

View file

@ -1,5 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
import {close, setSkinFromFilename, openFileDialog} from '../actionCreators';
@ -46,8 +47,7 @@ class ContextMenu extends React.Component {
}
render() {
const classes = this.props.selected ? 'selected' : '';
return <div id='option' className={classes} onClick={this.toggleMenu}>
return <div id='option' className={classnames({selected: this.props.selected})} onClick={this.toggleMenu}>
<ul id='context-menu'>
<li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>
<li className='hr'><hr /></li>

View file

@ -28,7 +28,7 @@ import Volume from './Volume.jsx';
import '../../css/main-window.css';
class MainWindow extends React.Component {
export class MainWindow extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
@ -80,7 +80,7 @@ class MainWindow extends React.Component {
<div className='status'>
<ClutterBar />
<div id='play-pause' />
<div id='work-indicator' className={this.props.display.working ? 'selected' : ''} />
<div id='work-indicator' className={classnames({selected: this.props.display.working})} />
<Time />
<Visualizer analyser={this.props.mediaPlayer._analyser}/>
</div>
@ -110,4 +110,4 @@ class MainWindow extends React.Component {
}
}
module.exports = connect((state) => state)(MainWindow);
export default connect((state) => state)(MainWindow);

View file

@ -1,11 +1,12 @@
import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
const MonoStereo = (props) => {
return <div className='mono-stereo'>
<div id='stereo' className={props.channels === 2 ? 'selected' : ''} />
<div id='mono' className={props.channels === 1 ? 'selected' : ''} />
<div id='stereo' className={classnames({selected: props.channels === 2})} />
<div id='mono' className={classnames({selected: props.channels === 1})} />
</div>;
};

View file

@ -1,5 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
import {toggleRepeat} from '../actionCreators';
@ -15,7 +16,7 @@ class Repeat extends React.Component {
render() {
return <div
id='repeat'
className={this.props.repeat ? 'selected' : ''}
className={classnames({selected: this.props.repeat})}
onClick={this.handleClick}
/>;
}

View file

@ -1,5 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';
class Shuffle extends React.Component {
@ -13,7 +14,7 @@ class Shuffle extends React.Component {
render() {
return <div
id='shuffle'
className={this.props.shuffle ? 'selected' : ''}
className={classnames({selected: this.props.shuffle})}
onClick={this.handleClick}
/>;
}