refactor crop modal
This commit is contained in:
nflnkr
parent
00a250c676
commit
ed920affbc
@ -1,66 +1,27 @@
|
||||
import React, { useState, useRef, useEffect, FC } from "react";
|
||||
import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Modal,
|
||||
Slider,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import React, { FC, useEffect, useRef, useState } from "react";
|
||||
import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
|
||||
|
||||
import { canvasPreview } from "./utils/canvasPreview";
|
||||
import { useDebounceEffect } from "./utils/useDebounceEffect";
|
||||
|
||||
import { ResetIcon } from "@icons/ResetIcon";
|
||||
|
||||
import "react-image-crop/dist/ReactCrop.css";
|
||||
import { CropIcon } from "@icons/CropIcon";
|
||||
import "react-image-crop/dist/ReactCrop.css";
|
||||
|
||||
interface Iprops {
|
||||
opened: boolean;
|
||||
onClose: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
picture?: string;
|
||||
onCropPress?: (imageUrl: string) => void;
|
||||
}
|
||||
|
||||
export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress }) => {
|
||||
const [imgSrc, setImgSrc] = useState("");
|
||||
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const previewCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const hiddenAnchorRef = useRef<HTMLAnchorElement>(null);
|
||||
const blobUrlRef = useRef("");
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
|
||||
const [rotate, setRotate] = useState(0);
|
||||
const [darken, setDarken] = useState(0);
|
||||
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(786));
|
||||
|
||||
useEffect(() => {
|
||||
if (picture) {
|
||||
setImgSrc(picture);
|
||||
}
|
||||
}, [picture]);
|
||||
|
||||
const styleModal = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: isMobile ? "343px" : "620px",
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
padding: "20px",
|
||||
borderRadius: "8px",
|
||||
};
|
||||
|
||||
const styleSlider = {
|
||||
width: isMobile ? "350px" : "250px",
|
||||
const styleSlider: SxProps<Theme> = {
|
||||
color: "#7E2AEA",
|
||||
height: "12px",
|
||||
"& .MuiSlider-track": {
|
||||
@ -82,35 +43,57 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
0px 4px 4px 3px #C3C8DD`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const rotateImage = () => {
|
||||
const newRotation = (rotate + 90) % 360;
|
||||
setRotate(newRotation);
|
||||
};
|
||||
interface Iprops {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
picture?: string;
|
||||
onCropPress?: (imageUrl: string) => void;
|
||||
}
|
||||
|
||||
export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress }) => {
|
||||
const theme = useTheme();
|
||||
const [crop, setCrop] = useState<Crop>();
|
||||
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
|
||||
const [darken, setDarken] = useState(0);
|
||||
const [rotate, setRotate] = useState(0);
|
||||
const [imgSrc, setImgSrc] = useState("");
|
||||
const [width, setWidth] = useState<number>(0);
|
||||
const blobUrlRef = useRef("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(786));
|
||||
|
||||
useEffect(() => {
|
||||
if (picture) setImgSrc(picture);
|
||||
}, [picture]);
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (!event.target.files?.length) return;
|
||||
|
||||
const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
setCrop(undefined);
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () =>
|
||||
setImgSrc(reader.result?.toString() || "")
|
||||
);
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
try {
|
||||
const url = URL.createObjectURL(event.target.files[0]);
|
||||
setImgSrc(url);
|
||||
} catch (error) {
|
||||
console.error("Failed to create object url for image", error);
|
||||
}
|
||||
};
|
||||
|
||||
const onDownloadCropClick = () => {
|
||||
if (!previewCanvasRef.current) {
|
||||
throw new Error("Crop canvas does not exist");
|
||||
}
|
||||
const handleCropClick = () => {
|
||||
if (!completedCrop) throw new Error("No completed crop");
|
||||
if (!imgRef.current) throw new Error("No image");
|
||||
|
||||
const canvasCopy = document.createElement("canvas");
|
||||
const ctx = canvasCopy.getContext("2d");
|
||||
canvasCopy.width = previewCanvasRef.current.width;
|
||||
canvasCopy.height = previewCanvasRef.current.height;
|
||||
ctx!.filter = `brightness(${100 - darken}%)`;
|
||||
ctx!.drawImage(previewCanvasRef.current, 0, 0);
|
||||
if (!ctx) throw new Error("No 2d context");
|
||||
|
||||
canvasCopy.width = completedCrop.width;
|
||||
canvasCopy.height = completedCrop.height;
|
||||
ctx.filter = `brightness(${100 - darken}%)`;
|
||||
|
||||
canvasPreview(imgRef.current, canvasCopy, completedCrop, rotate);
|
||||
|
||||
canvasCopy.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
@ -120,36 +103,13 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
URL.revokeObjectURL(blobUrlRef.current);
|
||||
}
|
||||
blobUrlRef.current = URL.createObjectURL(blob);
|
||||
hiddenAnchorRef.current!.href = blobUrlRef.current;
|
||||
hiddenAnchorRef.current!.click();
|
||||
|
||||
setImgSrc(blobUrlRef.current);
|
||||
onCropPress?.(blobUrlRef.current);
|
||||
setCrop(undefined);
|
||||
});
|
||||
};
|
||||
|
||||
useDebounceEffect(
|
||||
async () => {
|
||||
if (
|
||||
completedCrop?.width &&
|
||||
completedCrop?.height &&
|
||||
imgRef.current &&
|
||||
previewCanvasRef.current
|
||||
) {
|
||||
canvasPreview(
|
||||
imgRef.current,
|
||||
previewCanvasRef.current,
|
||||
completedCrop,
|
||||
rotate
|
||||
);
|
||||
}
|
||||
},
|
||||
100,
|
||||
[completedCrop, rotate]
|
||||
);
|
||||
|
||||
const [width, setWidth] = useState<number>(0);
|
||||
|
||||
const getImageSize = () => {
|
||||
if (imgRef.current) {
|
||||
const imageWidth = imgRef.current.naturalWidth;
|
||||
@ -170,22 +130,34 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
}
|
||||
};
|
||||
|
||||
function handleSaveClick() {
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
open={opened}
|
||||
onClose={onClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={styleModal}>
|
||||
<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",
|
||||
@ -243,16 +215,17 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<ResetIcon
|
||||
onClick={rotateImage}
|
||||
style={{ marginBottom: "10px", cursor: "pointer" }}
|
||||
/>
|
||||
<IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
|
||||
<ResetIcon />
|
||||
</IconButton>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Размер
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={styleSlider}
|
||||
sx={[styleSlider, {
|
||||
width: isMobile ? "350px" : "250px",
|
||||
}]}
|
||||
value={width}
|
||||
min={50}
|
||||
max={580}
|
||||
@ -267,7 +240,9 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
Затемнение
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={styleSlider}
|
||||
sx={[styleSlider, {
|
||||
width: isMobile ? "350px" : "250px",
|
||||
}]}
|
||||
value={darken}
|
||||
min={0}
|
||||
max={100}
|
||||
@ -281,16 +256,20 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
marginTop: "40px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "end",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{ display: "none", zIndex: "-999" }}
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={onSelectFile}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSaveClick}
|
||||
disableRipple
|
||||
sx={{
|
||||
height: "48px",
|
||||
color: "#7E2AEA",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
marginRight: "10px",
|
||||
px: "20px",
|
||||
}}
|
||||
>Сохранить</Button>
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disableRipple
|
||||
@ -301,12 +280,20 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
marginRight: "10px",
|
||||
ml: "auto",
|
||||
}}
|
||||
>
|
||||
Загрузить оригинал
|
||||
<input
|
||||
style={{ display: "none", zIndex: "-999" }}
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onDownloadCropClick}
|
||||
onClick={handleCropClick}
|
||||
disableRipple
|
||||
variant="contained"
|
||||
sx={{
|
||||
@ -322,33 +309,5 @@ export const CropModal: FC<Iprops> = ({ opened, onClose, picture, onCropPress })
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
{completedCrop && (
|
||||
<div>
|
||||
<canvas
|
||||
ref={previewCanvasRef}
|
||||
style={{
|
||||
display: "none",
|
||||
zIndex: "-999",
|
||||
border: "1px solid black",
|
||||
objectFit: "contain",
|
||||
width: completedCrop.width,
|
||||
height: completedCrop.height,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<a
|
||||
href="#hidden"
|
||||
ref={hiddenAnchorRef}
|
||||
download
|
||||
style={{
|
||||
display: "none",
|
||||
}}
|
||||
>
|
||||
Hidden download
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user