parent
9c4ff421af
commit
e567d964a7
@ -1,64 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styled from 'react-emotion';
|
|
||||||
|
|
||||||
const CardImage = styled.img`
|
|
||||||
width: 100%;
|
|
||||||
height: 160px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 2px 2px 0 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CardImagePlaceholder = CardImage.withComponent(`div`);
|
|
||||||
|
|
||||||
export default class MediaLibraryCardImage extends React.Component {
|
|
||||||
state = {
|
|
||||||
imageURL: '',
|
|
||||||
isFetching: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
loadImage() {
|
|
||||||
const { image, getCachedImageURLByID, cacheImageURLByID } = this.props;
|
|
||||||
const { imageURL: existingImageURL, isFetching } = this.state;
|
|
||||||
|
|
||||||
if (existingImageURL !== '' || isFetching) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (getCachedImageURLByID && image.key) {
|
|
||||||
const imageURL = getCachedImageURLByID(image.key);
|
|
||||||
if (imageURL) {
|
|
||||||
this.setState({ imageURL });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (image.url) {
|
|
||||||
this.setState({ imageURL: image.url });
|
|
||||||
if (image.key && cacheImageURLByID) {
|
|
||||||
cacheImageURLByID(image.key, image.url);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (image.getBlobPromise) {
|
|
||||||
this.setState({ isFetching: true });
|
|
||||||
image.getBlobPromise().then(blob => {
|
|
||||||
const imageURL = window.URL.createObjectURL(blob);
|
|
||||||
this.setState({ imageURL, isFetching: false });
|
|
||||||
if (image.key && cacheImageURLByID) {
|
|
||||||
cacheImageURLByID(image.key, imageURL);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { imageURL, isFetching } = this.state;
|
|
||||||
|
|
||||||
if (imageURL === '' && !isFetching) {
|
|
||||||
this.loadImage();
|
|
||||||
}
|
|
||||||
|
|
||||||
return imageURL === '' ? <CardImagePlaceholder /> : <CardImage src={imageURL} />;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user