50 lines
1.5 KiB
JavaScript
Executable File
50 lines
1.5 KiB
JavaScript
Executable File
|
|
import React, { PropTypes } from 'react'
|
|
import { Link, browserHistory } from 'react-router'
|
|
import FontAwesome from 'react-fontawesome'
|
|
|
|
import Thumbnail from './Thumbnail'
|
|
import ArtistSentence from './ArtistSentence'
|
|
|
|
export default class GridItem extends React.Component{
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
handleClick(e){
|
|
if( e.target.tagName.toLowerCase() !== 'a' ){
|
|
browserHistory.push( this.props.link );
|
|
}
|
|
}
|
|
|
|
renderThumbnail(){
|
|
if( this.props.item.images ) return <Thumbnail size="medium" images={this.props.item.images} />
|
|
if( this.props.item.icons ) return <Thumbnail size="medium" images={this.props.item.icons} />
|
|
return <Thumbnail size="medium" images={[]} />
|
|
}
|
|
|
|
render(){
|
|
if( !this.props.item ) return null
|
|
|
|
var item = this.props.item;
|
|
if( typeof(item.album) !== 'undefined' ){
|
|
item.album.added_at = item.added_at;
|
|
item = item.album;
|
|
}
|
|
return (
|
|
<div className="grid-item" onClick={ (e) => this.handleClick(e) }>
|
|
{ this.renderThumbnail() }
|
|
<div className="name">{ item.name }</div>
|
|
<div className="secondary">
|
|
{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
|
|
{ item.type == 'playlist' && item.tracks ? item.tracks.total+' tracks' : null }
|
|
{ item.followers ? item.followers.total.toLocaleString()+' followers' : null }
|
|
{ item.type == 'playlist' && item.can_edit ? <FontAwesome name="edit" /> : null }
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|