44 lines
1.3 KiB
React
44 lines
1.3 KiB
React
// Image with a placeholder which is replaced when the promise is resolved.
|
|
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
export default class LazyImage extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
src: 'img/placeholder.png',
|
|
style: Object.assign({padding: '4px'}, this.props.style),
|
|
className: this.props.className,
|
|
alt: this.props.alt,
|
|
onClick: this.props.onClick,
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
// whenDone is a wrapper around an actual promise to be able to cancel it.
|
|
this.props.whenDone
|
|
.promise
|
|
.then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
|
|
.catch(() => this.setState({src: 'img/broken_image.png'}));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.whenDone.cancel();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (prevProps.whenDone != this.props.whenDone) {
|
|
this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});
|
|
this.props.whenDone
|
|
.promise
|
|
.then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
|
|
.catch(() => this.setState({src: 'img/broken_image.png'}));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return React.createElement('img', this.state);
|
|
}
|
|
};
|