2015-08-11 12:06:01 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
2015-09-30 18:30:50 +02:00
|
|
|
import { Link } from 'react-router';
|
2015-08-11 12:06:01 +02:00
|
|
|
|
|
|
|
import AccordionListItem from './accordion_list_item';
|
2015-12-02 19:31:50 +01:00
|
|
|
import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
|
2015-08-11 12:06:01 +02:00
|
|
|
|
|
|
|
import { getLangText } from '../../utils/lang_utils';
|
|
|
|
|
|
|
|
|
|
|
|
let AccordionListItemPiece = React.createClass({
|
|
|
|
propTypes: {
|
|
|
|
className: React.PropTypes.string,
|
2015-12-17 17:31:33 +01:00
|
|
|
artistName: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.element
|
|
|
|
]),
|
2015-12-21 14:46:10 +01:00
|
|
|
piece: React.PropTypes.object.isRequired,
|
2015-08-11 12:06:01 +02:00
|
|
|
children: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
|
|
|
React.PropTypes.element
|
|
|
|
]),
|
|
|
|
subsubheading: React.PropTypes.object,
|
|
|
|
buttons: React.PropTypes.object,
|
2015-12-02 19:31:50 +01:00
|
|
|
badge: React.PropTypes.object,
|
2015-12-04 13:52:17 +01:00
|
|
|
thumbnailPlaceholder: React.PropTypes.func
|
2015-12-02 19:31:50 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
|
|
|
thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
|
|
|
|
};
|
2015-08-11 12:06:01 +02:00
|
|
|
},
|
|
|
|
|
2015-08-25 17:22:32 +02:00
|
|
|
getLinkData() {
|
2015-09-30 18:30:50 +02:00
|
|
|
let { piece } = this.props;
|
|
|
|
|
|
|
|
if(piece && piece.first_edition) {
|
|
|
|
return `/editions/${piece.first_edition.bitcoin_id}`;
|
2015-08-25 17:22:32 +02:00
|
|
|
|
|
|
|
} else {
|
2015-09-30 18:30:50 +02:00
|
|
|
return `/pieces/${piece.id}`;
|
2015-08-25 17:22:32 +02:00
|
|
|
}
|
2015-08-11 12:06:01 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render() {
|
2015-12-02 19:31:50 +01:00
|
|
|
const {
|
|
|
|
artistName,
|
|
|
|
badge,
|
|
|
|
buttons,
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
piece,
|
|
|
|
subsubheading,
|
|
|
|
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
|
2015-12-21 14:46:10 +01:00
|
|
|
const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail;
|
|
|
|
|
|
|
|
// Display the 300x300 thumbnail if we have it, otherwise just use the safe url
|
|
|
|
const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl;
|
|
|
|
|
2015-10-22 10:39:11 +02:00
|
|
|
let thumbnail;
|
|
|
|
|
|
|
|
// Since we're going to refactor the thumbnail generation anyway at one point,
|
|
|
|
// for not use the annoying ascribe_spiral.png, we're matching the url against
|
|
|
|
// this name and replace it with a CSS version of the new logo.
|
2015-12-21 14:46:10 +01:00
|
|
|
if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
|
2015-12-02 19:31:50 +01:00
|
|
|
thumbnail = (<ThumbnailPlaceholder />);
|
2015-10-22 10:39:11 +02:00
|
|
|
} else {
|
|
|
|
thumbnail = (
|
2015-12-21 14:46:10 +01:00
|
|
|
<div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
|
2015-10-22 10:39:11 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-08-11 12:06:01 +02:00
|
|
|
return (
|
|
|
|
<AccordionListItem
|
2015-10-22 10:39:11 +02:00
|
|
|
className={className}
|
|
|
|
thumbnail={thumbnail}
|
|
|
|
heading={<h1>{piece.title}</h1>}
|
2015-08-11 12:06:01 +02:00
|
|
|
subheading={
|
|
|
|
<h3>
|
2015-08-13 13:28:09 +02:00
|
|
|
{getLangText('by ')}
|
2015-10-22 10:39:11 +02:00
|
|
|
{artistName ? artistName : piece.artist_name}
|
2015-08-11 12:06:01 +02:00
|
|
|
</h3>
|
|
|
|
}
|
2015-10-22 10:39:11 +02:00
|
|
|
subsubheading={subsubheading}
|
|
|
|
buttons={buttons}
|
|
|
|
badge={badge}
|
2015-12-21 14:46:10 +01:00
|
|
|
linkData={this.getLinkData()}>
|
2015-10-22 10:39:11 +02:00
|
|
|
{children}
|
2015-08-11 12:06:01 +02:00
|
|
|
</AccordionListItem>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default AccordionListItemPiece;
|