Floating android-style context trigger on tracklists

src/js/components/ContextMenu.js

@@ -52,8 +52,8 @@ class ContextMenu extends React.Component{
 	}
 
 	handleClick(e){
-		// if we click outside of the context menu, kill it
-		if ($(e.target).closest('.context-menu').length <= 0){
+		// if we click outside of the context menu or context menu trigger, kill it
+		if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){
 			this.props.uiActions.hideContextMenu()
 		}
 	}

src/js/components/TrackList.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import Track from './Track'
+import ContextMenuTrigger from './ContextMenuTrigger'
 
 import * as helpers from '../helpers'
 import * as mopidyActions from '../services/mopidy/actions'
@@ -19,7 +20,7 @@ class TrackList extends React.Component{
 		this._touch_y = null
 
 		this.state = {
-			tracks: this.keyifyTracks(this.props.tracks),
+			tracks: [],
 			lastSelectedTrack: false
 		}
 
@@ -34,6 +35,10 @@ class TrackList extends React.Component{
 		window.removeEventListener("keyup", this.handleKeyUp, false);
 	}
 
+	componentDidMount(){
+		this.setState({ tracks: this.keyifyTracks(this.props.tracks) })
+	}
+
 	componentWillReceiveProps(nextProps){
 		this.setState({ tracks: this.keyifyTracks(nextProps.tracks) });
 	}
@@ -206,7 +211,12 @@ class TrackList extends React.Component{
 
 	keyifyTracks( tracks ){
 		for( var i = 0; i < tracks.length; i++ ){
-			tracks[i] = Object.assign({}, tracks[i], { key: i+'_'+tracks[i].uri })
+			tracks[i] = Object.assign(
+				{}, 
+				tracks[i], 
+				{
+					key: i+'_'+tracks[i].uri
+				})
 		}
 		return tracks
 	}
@@ -317,6 +327,7 @@ class TrackList extends React.Component{
 						}
 					)
 				}
+				{this.selectedTracks().length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} /> : null}
 			</div>
 		);
 	}