Differentiate between failed thumbnail url and emtpy url images.

This commit is contained in:
Daniel Dominguez 2018-07-27 17:58:56 -03:00
parent 884cad936f
commit ad0c356c1e

View file

@ -18,6 +18,7 @@ type Props = {
type State = { type State = {
thumbnailError: boolean, thumbnailError: boolean,
thumbnailErrorImage: string,
}; };
class SelectThumbnail extends React.PureComponent<Props, State> { class SelectThumbnail extends React.PureComponent<Props, State> {
@ -26,6 +27,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
this.state = { this.state = {
thumbnailError: false, thumbnailError: false,
thumbnailErrorImage: 'no-thumbnail.png',
}; };
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this); (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
@ -36,7 +38,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
const newThumbnail = e.target.value.replace(' ', ''); const newThumbnail = e.target.value.replace(' ', '');
updatePublishForm({ thumbnail: newThumbnail }); updatePublishForm({ thumbnail: newThumbnail });
this.setState({ thumbnailError: false }); this.setState({ thumbnailError: false, thumbnailErrorImage: 'no-thumbnail.png' });
} }
render() { render() {
@ -49,9 +51,9 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
thumbnailPath, thumbnailPath,
resetThumbnailStatus, resetThumbnailStatus,
} = this.props; } = this.props;
const { thumbnailError } = this.state; const { thumbnailError, thumbnailErrorImage } = this.state;
const thumbnailSrc = const thumbnailSrc =
!thumbnail || thumbnailError ? Native.imagePath('no-thumbnail.png') : thumbnail; !thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
return ( return (
<div className="card__content"> <div className="card__content">
@ -62,7 +64,11 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
className="column__item thumbnail-preview" className="column__item thumbnail-preview"
alt={__('Thumbnail Preview')} alt={__('Thumbnail Preview')}
onError={() => { onError={() => {
this.setState({ thumbnailError: true }); this.setState({
thumbnailError: true,
thumbnailErrorImage:
thumbnail && thumbnail.length > 0 ? 'warning.png' : 'no-thumbnail.png',
});
}} }}
/> />
<div className="column__item"> <div className="column__item">