32 lines
827 B
JavaScript
32 lines
827 B
JavaScript
// @flow
|
|
import React from 'react';
|
|
import Card from 'component/common/card';
|
|
import ErrorText from 'component/common/error-text';
|
|
import ZoomableImage from 'component/zoomableImage';
|
|
|
|
type Props = {
|
|
source: string,
|
|
};
|
|
|
|
function ImageViewer(props: Props) {
|
|
const { source } = props;
|
|
const [loadingError, setLoadingError] = React.useState(false);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{loadingError && (
|
|
<Card
|
|
title={__('Error displaying image')}
|
|
actions={<ErrorText>There was an error displaying the image. You may still download it.</ErrorText>}
|
|
/>
|
|
)}
|
|
{!loadingError && (
|
|
<div className="file-viewer">
|
|
<ZoomableImage src={source} onError={() => setLoadingError(true)} />
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default ImageViewer;
|