secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dropzone and track hover states now via classes rather than :hover, fixes #28

Browse Source
This commit is contained in:
James Barnsley
2017-06-28 16:26:55 +12:00
parent 822edcf86b
commit c28cd48bd0
4 changed files with 54 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/js/components/Dropzone.js
View File

@ -8,14 +8,39 @@ import Icon from './Icon'
export default class Dropzone extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
hover: false
}
this.handleMouseOver = this.handleMouseOver.bind(this)
this.handleMouseOut = this.handleMouseOut.bind(this)
}
componentWillMount(){
window.addEventListener("mouseover", this.handleMouseOver, false);
window.addEventListener("mouseout", this.handleMouseOut, false);
}
componentWillUnmount(){
window.removeEventListener("mouseover", this.handleMouseOver, false);
window.removeEventListener("mouseout", this.handleMouseOut, false);
}
handleMouseOver(e){
this.setState({hover: true})
}
handleMouseOut(e){
this.setState({hover: false})
}
render(){
if( !this.props.data ) return null
return (
<div className="dropzone" onMouseUp={ e => this.props.handleMouseUp(e) }>
<div className={this.state.hover?"dropzone hover":"dropzone"} onMouseUp={ e => this.props.handleMouseUp(e) }>
<Icon className="white" name={ this.props.data.icon } />
<span className="title">{ this.props.data.title }</span>
</div>

19
src/js/components/Track.js
View File

@ -10,7 +10,11 @@ import * as helpers from '../helpers'
export default class Track extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
hover: false
}
}
handleMouseDown(e){
@ -35,11 +39,12 @@ export default class Track extends React.Component{
render(){
if( !this.props.track ) return null
var track = this.props.track;
var className = 'list-item track';
if( typeof(track.selected) !== 'undefined' && track.selected ) className += ' selected';
if( typeof(track.type) !== 'undefined' ) className += ' '+track.type;
if( track.playing ) className += ' playing';
var track = this.props.track
var className = 'list-item track'
if (typeof(track.selected) !== 'undefined' && track.selected) className += ' selected'
if (typeof(track.type) !== 'undefined') className += ' '+track.type
if (track.playing) className += ' playing'
if (this.state.hover) className += ' hover'
var album = '-'
if( track.album ){
@ -133,6 +138,8 @@ export default class Track extends React.Component{
return (
<div
className={className}
onMouseEnter={e => this.setState({hover: true})}
onMouseLeave={e => this.setState({hover: false})}
onTouchStart={ e => this.props.handleTouchStart(e) }
onTouchEnd={ e => this.handleTouchEnd(e) }
onMouseDown={ e => this.handleMouseDown(e) }