58 lines
1.6 KiB
JavaScript
Executable File
58 lines
1.6 KiB
JavaScript
Executable File
|
|
import React, { memo } from 'react';
|
|
import Thumbnail from './Thumbnail';
|
|
import URILink from './URILink';
|
|
|
|
export default memo(({ artists, uiActions: { showContextMenu } = {} }) => {
|
|
if (!artists) return null;
|
|
|
|
const onContextMenu = (e, item) => {
|
|
if (showContextMenu){
|
|
e.preventDefault();
|
|
showContextMenu({
|
|
e,
|
|
context: 'artist',
|
|
uris: [item.uri],
|
|
items: [item],
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="related-artists">
|
|
{artists.map((artist) => {
|
|
let { images } = artist;
|
|
if (Array.isArray(images)) {
|
|
images = images[0];
|
|
}
|
|
|
|
if (artist.uri) {
|
|
return (
|
|
<URILink
|
|
type="artist"
|
|
uri={artist.uri}
|
|
key={artist.uri}
|
|
className="related-artists__item related-artists__item--link"
|
|
handleContextMenu={(e) => onContextMenu(e, artist)}
|
|
>
|
|
<Thumbnail className="related-artists__item__thumbnail" circle size="small" images={images} />
|
|
<span className="related-artists__item__name">{ artist.name }</span>
|
|
</URILink>
|
|
);
|
|
}
|
|
return (
|
|
<span key={artist.uri} className="related-artists__item">
|
|
<Thumbnail
|
|
className="related-artists__item__thumbnail"
|
|
circle
|
|
size="small"
|
|
images={images}
|
|
/>
|
|
<span className="related-artists__item__name">{ artist.name }</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
});
|