Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 3x 3x 3x 1x 3x 3x | import { TDocument } from "@common/FilePreview/types";
import { styled } from "@mui/material";
import { DetailedHTMLProps, ImgHTMLAttributes, useEffect } from "react";
import { useImage } from "react-image";
import FallbackImg from "@assets/images/image-unavailable.png";
const FALLBACK_IMG_WIDTH = 231;
const FALLBACK_IMG_HEIGHT = 186;
interface ICustomImage extends ImageProps {
file: TDocument;
onError: (error: any) => void;
onLoad?: (e: any, customSize?: { width: number; height: number }) => void;
isLoading?: boolean;
customStyle?: React.CSSProperties;
}
const CustomImage = ({
file,
onError,
onLoad,
isLoading,
customStyle,
...props
}: ICustomImage) => {
const { src, error } = useImage({
srcList: [file?.URL, FallbackImg],
});
useEffect(() => {
if (error) onError(error);
}, [error]);
useEffect(() => {
if (src !== file?.URL && isLoading && onLoad) {
onLoad(null, { width: FALLBACK_IMG_WIDTH, height: FALLBACK_IMG_HEIGHT });
}
}, [src, file, isLoading]);
return (
<StyledImage
src={src}
alt={file?.name}
isLoading={isLoading}
onLoad={onLoad}
style={customStyle}
{...props}
/>
);
};
type ImageProps = {
zoom: number;
maxed?: boolean;
isLoading?: boolean;
} & DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
const StyledImage = styled("img", {
shouldForwardProp: (prop) =>
prop !== "zoom" && prop !== "maxed" && prop !== "isLoading",
})<ImageProps>(({ theme, zoom, maxed = false, isLoading }) => ({
objectFit: "contain",
transform: `scale(${zoom})`,
transformOrigin: "center",
transition: "transform 0.3s ease-in-out",
userSelect: "none",
[theme.breakpoints.up("sm")]: {
...(maxed && {
...(zoom > 1 && { width: "100%" }),
height: "100%",
}),
margin: "auto",
},
[theme.breakpoints.down("sm")]: {
width: "100%",
},
...(isLoading && {
display: "none",
}),
}));
export default CustomImage;
|