56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import buildURL from 'utils/buildURL';
|
|
|
|
import { Tooltip, IconButton, Box } from '@material-ui/core';
|
|
import { Delete as DeleteIcon } from '@material-ui/icons';
|
|
|
|
export interface PreviewImageProps {
|
|
file?: File | null;
|
|
src?: string | null;
|
|
onDelete?: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const PreviewImage = ({ file, src, onDelete, disabled }: PreviewImageProps) => {
|
|
const [_src, _setSrc] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
if (!file && !src && process.env.NODE_ENV === 'development') {
|
|
console.warn('PreviewImage: you should specify file or src');
|
|
}
|
|
if (!file) return _setSrc(buildURL('cdn', src ?? ''));
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
_setSrc(typeof e.target?.result === 'string' ? e.target.result : '');
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}, [src, file]);
|
|
|
|
return (
|
|
<Box textAlign="center">
|
|
<Box position="relative" display="inline-block">
|
|
<Box position="absolute" right="2%" top="2%">
|
|
<Tooltip title="Usuń">
|
|
<IconButton
|
|
disabled={disabled}
|
|
color={'secondary'}
|
|
onClick={onDelete}
|
|
>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
<img
|
|
src={_src}
|
|
alt="Podgląd zdjęcia"
|
|
style={{ maxWidth: '100%', maxHeight: '400px' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default PreviewImage;
|