This commit is contained in:
nflnkr 2024-04-03 23:45:48 +03:00
parent 257b027bac
commit 76b06f12ea

@ -19,7 +19,6 @@ import { enqueueSnackbar } from "notistack";
import { FC, useCallback, useMemo, useRef, useState } from "react"; import { FC, useCallback, useMemo, useRef, useState } from "react";
import ReactCrop, { import ReactCrop, {
PercentCrop, PercentCrop,
PixelCrop,
centerCrop, centerCrop,
convertToPixelCrop, convertToPixelCrop,
makeAspectCrop, makeAspectCrop,
@ -82,7 +81,6 @@ export const CropModal: FC<Props> = ({
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const [percentCrop, setPercentCrop] = useState<PercentCrop>(); const [percentCrop, setPercentCrop] = useState<PercentCrop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
const [darken, setDarken] = useState(0); const [darken, setDarken] = useState(0);
const [imageWidth, setImageWidth] = useState<number | null>(null); const [imageWidth, setImageWidth] = useState<number | null>(null);
const [imageHeight, setImageHeight] = useState<number | null>(null); const [imageHeight, setImageHeight] = useState<number | null>(null);
@ -96,23 +94,25 @@ export const CropModal: FC<Props> = ({
function resetEditState() { function resetEditState() {
setPercentCrop(undefined); setPercentCrop(undefined);
setCompletedCrop(undefined);
setDarken(0); setDarken(0);
} }
async function handleCropClick() { async function handleCropClick() {
if (!percentCrop || !imageWidth || !imageHeight) return;
if (!cropImageElementRef.current) throw new Error("No image"); if (!cropImageElementRef.current) throw new Error("No image");
if (!completedCrop) return;
const width = cropImageElementRef.current.width;
const height = cropImageElementRef.current.height;
const pixelCrop = convertToPixelCrop(percentCrop, width, height);
try { try {
const blob = await getCroppedImageBlob( const blob = await getCroppedImageBlob(
cropImageElementRef.current, cropImageElementRef.current,
completedCrop, pixelCrop,
); );
setCropModalImageBlob(blob); setCropModalImageBlob(blob);
setPercentCrop(undefined); setPercentCrop(undefined);
setCompletedCrop(undefined);
} catch (error) { } catch (error) {
devlog("getCroppedImageBlob error", error); devlog("getCroppedImageBlob error", error);
enqueueSnackbar("Не удалось изменить изображение"); enqueueSnackbar("Не удалось изменить изображение");
@ -127,7 +127,6 @@ export const CropModal: FC<Props> = ({
setCropModalImageBlob(blob); setCropModalImageBlob(blob);
setPercentCrop(undefined); setPercentCrop(undefined);
setCompletedCrop(undefined);
} catch (error) { } catch (error) {
devlog("getRotatedImageBlob error", error); devlog("getRotatedImageBlob error", error);
enqueueSnackbar("Не удалось изменить изображение"); enqueueSnackbar("Не удалось изменить изображение");
@ -237,9 +236,8 @@ export const CropModal: FC<Props> = ({
<ReactCrop <ReactCrop
crop={percentCrop} crop={percentCrop}
onChange={(_, percentCrop) => setPercentCrop(percentCrop)} onChange={(_, percentCrop) => setPercentCrop(percentCrop)}
onComplete={(c) => setCompletedCrop(c)} minWidth={5}
minWidth={50} minHeight={5}
minHeight={50}
aspect={ aspect={
cropAspectRatio cropAspectRatio
? cropAspectRatio.width / cropAspectRatio.height ? cropAspectRatio.width / cropAspectRatio.height
@ -256,8 +254,6 @@ export const CropModal: FC<Props> = ({
src={imageUrl} src={imageUrl}
style={{ style={{
filter: `brightness(${100 - darken}%)`, filter: `brightness(${100 - darken}%)`,
width: imageWidth ? imageWidth : undefined,
height: "100%",
maxWidth: "100%", maxWidth: "100%",
maxHeight: "320px", maxHeight: "320px",
display: "block", display: "block",
@ -379,22 +375,17 @@ export const CropModal: FC<Props> = ({
<Button <Button
onClick={handleCropClick} onClick={handleCropClick}
disableRipple disableRipple
disabled={!completedCrop}
sx={{ sx={{
padding: "10px 20px", padding: "10px 20px",
borderRadius: "8px", borderRadius: "8px",
background: theme.palette.brightPurple.main, background: theme.palette.brightPurple.main,
fontSize: "18px", fontSize: "18px",
color: "#7E2AEA", color: "#7E2AEA",
border: `1px solid ${ border: "1px solid #7E2AEA",
!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
}`,
backgroundColor: "transparent", backgroundColor: "transparent",
}} }}
> >
<CropIcon <CropIcon color="#7E2AEA" />
color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}
/>
Обрезать Обрезать
</Button> </Button>