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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 3x 2x 2x 2x 1x 1x 1x 2x 2x 2x 2x 2x | import { TRenderer } from "../types";
import { showMessage } from "@common/Toast";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { MouseEventHandler, Suspense, useEffect } from "react";
import CustomImage from "../components/ImagePreviewer/CustomImage";
import { ZoomControls } from "../layout/Toolbar.atoms";
import useZoom from "./useZoom";
import { DotsMenuButton } from "../components/DotsMenuButton";
import { isEmpty } from "lodash";
const useImagePreviewer: TRenderer = ({
file,
onClose,
handleOpenDrawer,
toggleControlsPersistence,
customImageStyle,
}) => {
const { isMobileView } = useCustomTheme();
const {
zoom,
onZoom,
resetZoom,
resetOriginalSize,
disabled,
onLoadImageSetSize,
isImageBiggerThanScreen,
isLoading,
resetLoading,
} = useZoom({
minZoom: 1,
maxZoomEqualsDeviceSize: true,
});
useEffect(() => {
resetZoom();
resetOriginalSize();
isEmpty(file) && resetLoading();
}, [file]);
const handleImageError = () => {
showMessage("Error", "An error occurred while rendering the image");
if (onClose) onClose();
};
const handleClickOnImage: MouseEventHandler<HTMLDivElement> = (e) => {
e.stopPropagation();
};
const toolbar = {
primary: {
content: (
<ZoomControls
onZoom={onZoom}
disabled={disabled}
onMouseEnterAndLeave={toggleControlsPersistence}
/>
),
hidden: isMobileView,
},
};
const slots = {
...(isMobileView && {
Container: {
sx: {
paddingInline: 0,
},
},
}),
ContentWrapper: {
sx: {
overflowY: "hidden",
display: "flex",
width: "100%",
height: "100%",
},
},
};
return {
toolbar,
onZoom,
slots,
...(isMobileView && {
headerActions: <DotsMenuButton onClick={handleOpenDrawer} />,
}),
Previewer: (
<Suspense
fallback={
<LoadingSpinner sx={{ height: "50vh", marginInline: "auto" }} />
}
>
{isLoading && (
<LoadingSpinner sx={{ height: "50vh", marginInline: "auto" }} />
)}
<CustomImage
zoom={zoom}
file={file}
onError={handleImageError}
onLoad={onLoadImageSetSize}
maxed={isImageBiggerThanScreen}
onClick={handleClickOnImage}
isLoading={isLoading}
customStyle={customImageStyle}
/>
</Suspense>
),
};
};
export default useImagePreviewer;
|