56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import { Button } from "@mui/material";
|
|
import { useState } from "react";
|
|
import Cropper from "react-easy-crop";
|
|
import { cropImage, dataURLtoFile } from "./cropImg";
|
|
|
|
function Crop({ data, uploadImg, handleClose }) {
|
|
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
|
const [zoom, setZoom] = useState(1);
|
|
const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
|
|
|
|
const onComplete = async (imagePromise) => {
|
|
const dataUrl = await imagePromise;
|
|
const file = dataURLtoFile(dataUrl, "cropped-image.jpg");
|
|
|
|
uploadImg({ blob: dataUrl, file });
|
|
};
|
|
|
|
return (
|
|
<div className="mt-[16px]">
|
|
<div className="px-[24px]">
|
|
<div className="relative w-[424px] h-[380px] rounded-[8px] overflow-hidden">
|
|
<Cropper
|
|
crop={crop}
|
|
zoom={zoom}
|
|
aspect={4 / 3}
|
|
image={data.blob}
|
|
onCropChange={setCrop}
|
|
onCropComplete={(_, croppedAreaPixels) =>
|
|
setCroppedAreaPixels(croppedAreaPixels)
|
|
}
|
|
onZoomChange={setZoom}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-[16px] mt-[16px]">
|
|
<Button
|
|
variant="outlined"
|
|
onClick={handleClose}
|
|
className="!text-[16px] !max-w-[calc(50%_-_8px)] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none"
|
|
>
|
|
انصراف
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => onComplete(cropImage(data.blob, croppedAreaPixels))}
|
|
className="!text-[16px] !max-w-[calc(50%_-_8px)] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px]"
|
|
>
|
|
ذخیره
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Crop;
|