update Location of buttons in the image settings CropModal
This commit is contained in:
ArtChaos189
parent
c51cdbea67
commit
0cc07e48f8
@ -1,40 +1,10 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const CropIcon: FC = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6 6H2.25"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 2.25V18H21.75"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18 15V6H9"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18 21.75V18"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -1,330 +1,344 @@
|
||||
import { CropIcon } from "@icons/CropIcon";
|
||||
import { ResetIcon } from "@icons/ResetIcon";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Modal,
|
||||
Slider,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Modal,
|
||||
Slider,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { FC, useMemo, useRef, useState } from "react";
|
||||
import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
|
||||
import "react-image-crop/dist/ReactCrop.css";
|
||||
import { canvasPreview } from "./utils/canvasPreview";
|
||||
|
||||
|
||||
const styleSlider: SxProps<Theme> = {
|
||||
color: "#7E2AEA",
|
||||
height: "12px",
|
||||
"& .MuiSlider-track": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSlider-rail": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
border: `1px solid #9A9AAF`,
|
||||
},
|
||||
"& .MuiSlider-thumb": {
|
||||
height: 26,
|
||||
width: 26,
|
||||
border: `6px solid #7E2AEA`,
|
||||
backgroundColor: "white",
|
||||
boxShadow: `0px 0px 0px 3px white,
|
||||
color: "#7E2AEA",
|
||||
height: "12px",
|
||||
"& .MuiSlider-track": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiSlider-rail": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
border: `1px solid #9A9AAF`,
|
||||
},
|
||||
"& .MuiSlider-thumb": {
|
||||
height: 26,
|
||||
width: 26,
|
||||
border: `6px solid #7E2AEA`,
|
||||
backgroundColor: "white",
|
||||
boxShadow: `0px 0px 0px 3px white,
|
||||
0px 4px 4px 3px #C3C8DD`,
|
||||
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
|
||||
boxShadow: `0px 0px 0px 3px white,
|
||||
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
|
||||
boxShadow: `0px 0px 0px 3px white,
|
||||
0px 4px 4px 3px #C3C8DD`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
imageBlob: Blob | null;
|
||||
originalImageUrl: string | null;
|
||||
setCropModalImageBlob: (imageBlob: Blob) => void;
|
||||
onClose: () => void;
|
||||
onSaveImageClick: (imageBlob: Blob) => void;
|
||||
isOpen: boolean;
|
||||
imageBlob: Blob | null;
|
||||
originalImageUrl: string | null;
|
||||
setCropModalImageBlob: (imageBlob: Blob) => void;
|
||||
onClose: () => void;
|
||||
onSaveImageClick: (imageBlob: Blob) => void;
|
||||
}
|
||||
|
||||
export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
|
||||
const theme = useTheme();
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
|
||||
const [darken, setDarken] = useState(0);
|
||||
const [rotate, setRotate] = useState(0);
|
||||
const [width, setWidth] = useState<number>(240);
|
||||
const cropImageElementRef = useRef<HTMLImageElement>(null);
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(786));
|
||||
export const CropModal: FC<Props> = ({
|
||||
isOpen,
|
||||
imageBlob,
|
||||
originalImageUrl,
|
||||
setCropModalImageBlob,
|
||||
onSaveImageClick,
|
||||
onClose,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
|
||||
const [darken, setDarken] = useState(0);
|
||||
const [rotate, setRotate] = useState(0);
|
||||
const [width, setWidth] = useState<number>(240);
|
||||
const cropImageElementRef = useRef<HTMLImageElement>(null);
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(786));
|
||||
|
||||
const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
|
||||
const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
|
||||
|
||||
const handleCropClick = async () => {
|
||||
if (!completedCrop) throw new Error("No completed crop");
|
||||
if (!cropImageElementRef.current) throw new Error("No image");
|
||||
const handleCropClick = async () => {
|
||||
if (!completedCrop) throw new Error("No completed crop");
|
||||
if (!cropImageElementRef.current) throw new Error("No image");
|
||||
|
||||
const canvasCopy = document.createElement("canvas");
|
||||
const ctx = canvasCopy.getContext("2d");
|
||||
if (!ctx) throw new Error("No 2d context");
|
||||
const canvasCopy = document.createElement("canvas");
|
||||
const ctx = canvasCopy.getContext("2d");
|
||||
if (!ctx) throw new Error("No 2d context");
|
||||
|
||||
canvasCopy.width = completedCrop.width;
|
||||
canvasCopy.height = completedCrop.height;
|
||||
ctx.filter = `brightness(${100 - darken}%)`;
|
||||
canvasCopy.width = completedCrop.width;
|
||||
canvasCopy.height = completedCrop.height;
|
||||
ctx.filter = `brightness(${100 - darken}%)`;
|
||||
|
||||
await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
|
||||
await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
|
||||
|
||||
canvasCopy.toBlob((blob) => {
|
||||
if (!blob) throw new Error("Failed to create blob");
|
||||
canvasCopy.toBlob((blob) => {
|
||||
if (!blob) throw new Error("Failed to create blob");
|
||||
|
||||
setCropModalImageBlob(blob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
});
|
||||
};
|
||||
setCropModalImageBlob(blob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
});
|
||||
};
|
||||
|
||||
function handleSaveClick() {
|
||||
if (imageBlob) onSaveImageClick?.(imageBlob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
onClose();
|
||||
function handleSaveClick() {
|
||||
if (imageBlob) onSaveImageClick?.(imageBlob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
onClose();
|
||||
}
|
||||
|
||||
async function handleLoadOriginalImage() {
|
||||
if (!originalImageUrl) return;
|
||||
|
||||
const response = await fetch(originalImageUrl);
|
||||
const blob = await response.blob();
|
||||
|
||||
setCropModalImageBlob(blob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
}
|
||||
|
||||
const getImageSize = () => {
|
||||
if (cropImageElementRef.current) {
|
||||
const imageWidth = cropImageElementRef.current.naturalWidth;
|
||||
const imageHeight = cropImageElementRef.current.naturalHeight;
|
||||
|
||||
const aspect = imageWidth / imageHeight;
|
||||
|
||||
if (aspect <= 1.333) {
|
||||
setWidth(240);
|
||||
}
|
||||
if (aspect >= 1.5) {
|
||||
setWidth(580);
|
||||
}
|
||||
if (aspect >= 1.778) {
|
||||
setWidth(580);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function handleLoadOriginalImage() {
|
||||
if (!originalImageUrl) return;
|
||||
|
||||
const response = await fetch(originalImageUrl);
|
||||
const blob = await response.blob();
|
||||
|
||||
setCropModalImageBlob(blob);
|
||||
setCrop(undefined);
|
||||
setCompletedCrop(undefined);
|
||||
}
|
||||
|
||||
const getImageSize = () => {
|
||||
if (cropImageElementRef.current) {
|
||||
const imageWidth = cropImageElementRef.current.naturalWidth;
|
||||
const imageHeight = cropImageElementRef.current.naturalHeight;
|
||||
|
||||
const aspect = imageWidth / imageHeight;
|
||||
|
||||
if (aspect <= 1.333) {
|
||||
setWidth(240);
|
||||
}
|
||||
if (aspect >= 1.5) {
|
||||
setWidth(580);
|
||||
}
|
||||
if (aspect >= 1.778) {
|
||||
setWidth(580);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
padding: "20px",
|
||||
borderRadius: "8px",
|
||||
width: isMobile ? "343px" : "620px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "320px",
|
||||
padding: "10px",
|
||||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
padding: "20px",
|
||||
borderRadius: "8px",
|
||||
width: isMobile ? "343px" : "620px",
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "320px",
|
||||
padding: "10px",
|
||||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{imageUrl && (
|
||||
<ReactCrop
|
||||
crop={crop}
|
||||
onChange={(_, percentCrop) => setCrop(percentCrop)}
|
||||
onComplete={(c) => setCompletedCrop(c)}
|
||||
maxWidth={500}
|
||||
minWidth={50}
|
||||
maxHeight={320}
|
||||
minHeight={50}
|
||||
>
|
||||
<img
|
||||
onLoad={getImageSize}
|
||||
ref={cropImageElementRef}
|
||||
alt="Crop me"
|
||||
src={imageUrl}
|
||||
style={{
|
||||
filter: `brightness(${100 - darken}%)`,
|
||||
transform: ` rotate(${rotate}deg)`,
|
||||
maxWidth: "580px",
|
||||
maxHeight: "320px",
|
||||
}}
|
||||
width={width}
|
||||
/>
|
||||
</ReactCrop>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
color: "#7E2AEA",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "16xp",
|
||||
fontWeight: "600",
|
||||
marginBottom: "50px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
|
||||
{crop?.width ? Math.round(crop.width) + "px" : ""}
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
|
||||
{crop?.height ? Math.round(crop.height) + "px" : ""}
|
||||
</Typography>
|
||||
</Box>
|
||||
{imageUrl && (
|
||||
<ReactCrop
|
||||
crop={crop}
|
||||
onChange={(_, percentCrop) => setCrop(percentCrop)}
|
||||
onComplete={(c) => setCompletedCrop(c)}
|
||||
maxWidth={500}
|
||||
minWidth={50}
|
||||
maxHeight={320}
|
||||
minHeight={50}
|
||||
>
|
||||
<img
|
||||
onLoad={getImageSize}
|
||||
ref={cropImageElementRef}
|
||||
alt="Crop me"
|
||||
src={imageUrl}
|
||||
style={{
|
||||
filter: `brightness(${100 - darken}%)`,
|
||||
transform: ` rotate(${rotate}deg)`,
|
||||
maxWidth: "580px",
|
||||
maxHeight: "320px",
|
||||
}}
|
||||
width={width}
|
||||
/>
|
||||
</ReactCrop>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
color: "#7E2AEA",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "16xp",
|
||||
fontWeight: "600",
|
||||
marginBottom: "50px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
|
||||
{crop?.width ? Math.round(crop.width) + "px" : ""}
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
|
||||
{crop?.height ? Math.round(crop.height) + "px" : ""}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: isMobile ? "block" : "flex",
|
||||
alignItems: "end",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
|
||||
<ResetIcon />
|
||||
</IconButton>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Размер
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[styleSlider, {
|
||||
width: isMobile ? "350px" : "250px",
|
||||
}]}
|
||||
value={width}
|
||||
min={50}
|
||||
max={580}
|
||||
step={1}
|
||||
onChange={(_, newValue) => {
|
||||
setWidth(newValue as number);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Затемнение
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[styleSlider, {
|
||||
width: isMobile ? "350px" : "250px",
|
||||
}]}
|
||||
value={darken}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onChange={(_, newValue) => setDarken(newValue as number)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "40px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleSaveClick}
|
||||
disableRipple
|
||||
data-cy="crop-modal-save-button"
|
||||
sx={{
|
||||
height: "48px",
|
||||
color: "#7E2AEA",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
marginRight: "10px",
|
||||
px: "20px",
|
||||
}}
|
||||
>Сохранить</Button>
|
||||
<Button
|
||||
onClick={handleLoadOriginalImage}
|
||||
disableRipple
|
||||
disabled={!originalImageUrl}
|
||||
sx={{
|
||||
width: "215px",
|
||||
height: "48px",
|
||||
color: "#7E2AEA",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
marginRight: "10px",
|
||||
ml: "auto",
|
||||
}}
|
||||
>
|
||||
Загрузить оригинал
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCropClick}
|
||||
disableRipple
|
||||
variant="contained"
|
||||
disabled={!completedCrop}
|
||||
sx={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
background: theme.palette.brightPurple.main,
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
<CropIcon />
|
||||
Обрезать
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
<Box
|
||||
sx={{
|
||||
display: isMobile ? "block" : "flex",
|
||||
alignItems: "end",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
|
||||
<ResetIcon />
|
||||
</IconButton>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? "350px" : "250px",
|
||||
},
|
||||
]}
|
||||
value={width}
|
||||
min={50}
|
||||
max={580}
|
||||
step={1}
|
||||
onChange={(_, newValue) => {
|
||||
setWidth(newValue as number);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? "350px" : "250px",
|
||||
},
|
||||
]}
|
||||
value={darken}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onChange={(_, newValue) => setDarken(newValue as number)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "40px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleCropClick}
|
||||
disableRipple
|
||||
disabled={!completedCrop}
|
||||
sx={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
background: theme.palette.brightPurple.main,
|
||||
fontSize: "18px",
|
||||
color: "#7E2AEA",
|
||||
border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
|
||||
Обрезать
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleLoadOriginalImage}
|
||||
disableRipple
|
||||
disabled={!originalImageUrl}
|
||||
sx={{
|
||||
width: "215px",
|
||||
height: "48px",
|
||||
color: "#7E2AEA",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
>
|
||||
Загрузить оригинал
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSaveClick}
|
||||
disableRipple
|
||||
variant="contained"
|
||||
data-cy="crop-modal-save-button"
|
||||
sx={{
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
marginRight: "10px",
|
||||
px: "20px",
|
||||
ml: "auto",
|
||||
}}
|
||||
>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export function useCropModalState(initialOpenState = false) {
|
||||
const [isCropModalOpen, setOpened] = useState(initialOpenState);
|
||||
const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
|
||||
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
|
||||
const [isCropModalOpen, setOpened] = useState(initialOpenState);
|
||||
const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
|
||||
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
|
||||
|
||||
const closeCropModal = () => {
|
||||
setOpened(false);
|
||||
setCropModalImageBlob(null);
|
||||
setOriginalImageUrl(null);
|
||||
};
|
||||
const closeCropModal = () => {
|
||||
setOpened(false);
|
||||
setCropModalImageBlob(null);
|
||||
setOriginalImageUrl(null);
|
||||
};
|
||||
|
||||
async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
|
||||
if (typeof image === "string") {
|
||||
const response = await fetch(image);
|
||||
image = await response.blob();
|
||||
}
|
||||
|
||||
setCropModalImageBlob(image);
|
||||
setOriginalImageUrl(originalImageUrl);
|
||||
setOpened(true);
|
||||
async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
|
||||
if (typeof image === "string") {
|
||||
const response = await fetch(image);
|
||||
image = await response.blob();
|
||||
}
|
||||
|
||||
return {
|
||||
isCropModalOpen,
|
||||
openCropModal,
|
||||
closeCropModal,
|
||||
imageBlob,
|
||||
setCropModalImageBlob,
|
||||
originalImageUrl,
|
||||
} as const;
|
||||
setCropModalImageBlob(image);
|
||||
setOriginalImageUrl(originalImageUrl);
|
||||
setOpened(true);
|
||||
}
|
||||
|
||||
return {
|
||||
isCropModalOpen,
|
||||
openCropModal,
|
||||
closeCropModal,
|
||||
imageBlob,
|
||||
setCropModalImageBlob,
|
||||
originalImageUrl,
|
||||
} as const;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user