модалка предупреждения о удалении + подключение размера, затемнения

src/ui_kit/Modal/CropModal/AlertModalDeleteImage.tsx

@@ -0,0 +1,53 @@
+import { Box, Button, Modal, Typography, useMediaQuery, useTheme } from "@mui/material";
+interface Props {
+    open: boolean;
+    cancelDelete: () => void;
+    deleteImage: () => void;
+}
+export default ({
+    open,
+    cancelDelete,
+    deleteImage,
+}: Props) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(450));
+
+
+    return (
+        <Modal
+            open={open}
+            onClose={cancelDelete}
+        >
+            <Box
+                sx={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    bgcolor: "background.paper",
+                    boxShadow: 24,
+                    borderRadius: "12px",
+                    width: isMobile ? "200px" : "350px",
+                    height: "350px",
+                    display: "flex",
+                    flexDirection: "column",
+                }}
+            >
+                <Typography sx={{
+                    // height: isMobile ? "91px" : "70px",
+                    backgroundColor: "#F2F3F7",
+                    padding: isMobile ? "25px 20px 24px 20px" : "25px 43px 24px 20px",
+                    borderRadius: "8px 8px 0px 0px",
+                    color: "#9A9AAF",
+                    fontSize: "18px",
+                    lineHeight: "21.33px"
+                }}>
+                    Вы уверены, что хотите удалить всю картинку и каждую настройку?
+                </Typography>
+                <Button sx={{margin: "25px"}} variant="contained" onClick={cancelDelete}>нет</Button>
+                <Button sx={{margin: "25px"}} variant="outlined" onClick={deleteImage}>да</Button>
+
+            </Box>
+        </Modal>
+    );
+};

src/ui_kit/Modal/CropModal/CropGeneral.tsx

@@ -63,9 +63,12 @@ export const CropGeneral: FC<Props> = ({
     cropAspectRatio,
     editedImagesChange,
 }) => {
+    console.log(editedImage)
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
+    const {crop, darken, rotate} = editedImage.newRules;
+
     const cropImageElementRef = useRef<HTMLImageElement>(null);
 
     const [imageWidth, setImageWidth] = useState<number | null>(null);
@@ -140,7 +143,7 @@ export const CropGeneral: FC<Props> = ({
                 }}
             >
                 <ReactCrop
-                    crop={editedImage.newRules.crop}
+                    crop={crop}
                     onChange={(_, percentCrop) => editedImagesChange((old) => ({
                         newRules: {
                             ...old.newRules,
@@ -216,7 +219,7 @@ export const CropGeneral: FC<Props> = ({
                         display: "flex",
                         justifyContent: "space-between",
                         flexDirection: isMobile ? "column": "",
-                        width: isMobile ? "100%": "",
+                        width: isMobile ? "100%": "auto",
                         gap: "24px",
                     }}
                 >
@@ -231,7 +234,7 @@ export const CropGeneral: FC<Props> = ({
                                     width: isMobile ? undefined : "248px",
                                 },
                             ]}
-                            value={55}
+                            value={crop.width}
                             min={1}
                             max={100}
                             step={0.1}
@@ -252,7 +255,7 @@ export const CropGeneral: FC<Props> = ({
                                     width: isMobile ? undefined : "248px",
                                 },
                             ]}
-                            value={52}
+                            value={darken}
                             min={0}
                             max={100}
                             step={1}

src/ui_kit/Modal/CropModal/CropModal.tsx

@@ -39,9 +39,17 @@ export const CropModal: FC<CropModalProps> = ({
   ), [currentStep])
 
   const editedImagesChange: EditedImagesChangeType = (changed) => {
+    console.log("n*")
     setEditedImages(old => {
-      old[currentStepName] = { ...old[currentStepName], ...changed(old[currentStepName]) }
+      console.log("n currentStepName")
-      return old
+      console.log(currentStepName)
+      console.log("n old[currentStepName]")
+      console.log(old[currentStepName])
+      const newData = { ...old };
+      newData[currentStepName] = { ...old[currentStepName], ...changed(old[currentStepName]) };
+      console.log("newData[currentStepName]")
+      console.log(newData[currentStepName])
+      return newData;
     })
   }
   const resetImage = () => {

src/ui_kit/Modal/CropModal/WorkSpace.tsx

@@ -47,6 +47,8 @@ export default function WorkSpace({
         modalModels[currentStepName]
     ), [currentStepName]);
 
+    console.log(" промежуточный рендер которому должно быть похуй")
+
     return (
         <>
             <Box
@@ -90,7 +92,7 @@ export default function WorkSpace({
                             {currentModel.icon}
                         </Box>
                         <IconButton
-                            // onClick={onDeleteClick}
+                            onClick={onDeleteClick}
                             sx={{
                                 height: "24px",
                                 width: "24px",
@@ -100,7 +102,7 @@ export default function WorkSpace({
                                 mb:"5px",
                             }}
                         >
-                            <AmoTrash></AmoTrash>
+                            <AmoTrash/>
                         </IconButton>
 
                     </Box>

src/ui_kit/Modal/CropModal/index.tsx

@@ -9,6 +9,7 @@ import {
     DEFAULTCROPRULES,
 } from "@/model/CropModal/CropModal"
 import { isImageBlobAGifFile } from "@/utils/isImageBlobAGifFile";
+import AlertModalDeleteImage from "./AlertModalDeleteImage"
 
 const workSpaceTypesList: WorkSpaceTypesList = {
     images: [
@@ -114,6 +115,9 @@ export const CropModalInit: FC<CropOnOpenType> = ({
 
     const [acceptedOriginalImageUrl, setOriginalImageUrl] = useState("");
     const [editedImages, setEditedImages] = useState<EditedImages>({} as EditedImages);
+    const [readyDelete, setReadyDelete] = useState(false);
+    console.log("editedImages index")
+    console.log(editedImages)
 
     useEffect(() => {
         //Если нам не дали с чем работать, то и работать не нужно
@@ -138,7 +142,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                     if (questionId) {
                         if (questionType) {
                             if (Boolean(editedUrlImagesList)) {
-                                
+
                                 const newEditedImagesList = {} as EditedImages;
 
                                 for (let key in editedUrlImagesList) {
@@ -170,7 +174,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
         selfClose?.()
     }
 
-    const handleCropModalDeleteImageClick: CropOnDeleteIamgeClick = () => {
+    const handleCropModalDeleteImageClick = () => {
 
         //сохранить пустую строку и дефолтные настройки картинки в самом вопросе, не информируя БД о удалении картинки
         selfClose?.()
@@ -194,15 +198,24 @@ export const CropModalInit: FC<CropOnOpenType> = ({
 
     if (acceptedOriginalImageUrl.length === 0) return <></>
 
-    return <CropModal
+    return (
-        editedImages={editedImages}
+        <>
-        workSpaceTypes={workSpaceTypesList[questionType]}
+            <CropModal
-        originalImageUrl={acceptedOriginalImageUrl}
+                editedImages={editedImages}
+                workSpaceTypes={workSpaceTypesList[questionType]}
+                originalImageUrl={acceptedOriginalImageUrl}
 
-        setEditedImages={setEditedImages}
+                setEditedImages={setEditedImages}
-        onSaveImageClick={saveImagesAndRules}
+                onSaveImageClick={saveImagesAndRules}
-        closeCropModal={closeModal}
+                closeCropModal={closeModal}
-        onDeleteClick={handleCropModalDeleteImageClick}
+                onDeleteClick={() => setReadyDelete(true)}
-    />
+            />
+            <AlertModalDeleteImage
+                open={readyDelete}
+                cancelDelete={() => setReadyDelete(false)}
+                deleteImage={handleCropModalDeleteImageClick}
+            />
+        </>
+    )
 
 };