модалка для кнопки ветвление

src/pages/Questions/answerOptions/UploadImage.tsx

@@ -8,17 +8,20 @@ const Modalka = ({open, handleClose, imgHC}:any) => {
 
     const dropZone = React.useRef<any>(null);
     const [ready, setReady] = React.useState(false);
+
+    const dragenterHC = () => {
+        console.log("a")
+        setReady(true)
+    }
+
     console.log(dropZone.current)
     React.useEffect(() => {
         console.log(dropZone.current)
         if (dropZone.current) {
-            dropZone.current.addEventListener("dragenter", () => {
+            dropZone.current.addEventListener("dragenter", dragenterHC)
-                console.log("a")
-                setReady(true)
-            })
         }
-        return () => {console.log("end")}
+        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
-    })
+    },)
     return (
             <Box
                 sx={{
@@ -33,18 +36,19 @@ const Modalka = ({open, handleClose, imgHC}:any) => {
                     boxShadow: 24,
                     p: 0,}}>
                 <Box
-                    ref={dropZone}
+
                     sx={{display: 'flex',
 
                         flexDirection: 'column',
                         padding: '20px',
-                        background:  ready? "red" : theme.palette.background.default,
+                        background: theme.palette.background.default,
                     }}
                 >
                     <Typography>Добавьте изображение</Typography>
                     <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
                         <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
                         <Box
+                            ref={dropZone}
                             sx={{
                                 width: '580px',
                                 padding: '33px',
@@ -52,7 +56,7 @@ const Modalka = ({open, handleClose, imgHC}:any) => {
                                 justifyContent: "space-between",
                                 alignItems: "center",
                                 backgroundColor: theme.palette.background.default,
-                                border: `1px solid ${theme.palette.grey2.main}`,
+                                border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
                                 borderRadius: "8px",
                             }}
 

src/pages/Questions/answerOptions/branchingAnswerOptions.tsx

@@ -0,0 +1,201 @@
+import {
+    Box,
+    Button,
+    FormControl, FormControlLabel, Link,
+    MenuItem,
+    Modal, Radio, RadioGroup,
+    Select,
+    SelectChangeEvent,
+    Typography,
+    useTheme
+} from "@mui/material";
+import * as React from "react";
+import InfoIcon from "../../../components/icons/InfoIcon";
+import ArrowDown from "../../../components/icons/ArrowDownIcon";
+import CustomButton from "../../../components/CustomButton";
+
+
+export default function BranchingAnswerOptions() {
+    const theme = useTheme()
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    const [display, setDisplay] = React.useState('10');
+    const handleChange = (event: SelectChangeEvent) => {
+        setDisplay(event.target.value);
+    }
+
+    const [value, setValue] = React.useState('female');
+
+    const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue((event.target as HTMLInputElement).value);
+    };
+    return(
+        <>
+            <Button onClick={handleOpen}>открыть</Button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+                <Box sx={{position: 'absolute' as 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    maxWidth: '690px',
+                    bgcolor: 'background.paper',
+                    borderRadius: '12px',
+
+                    boxShadow: 24,
+                    p: 0,}}>
+                    <Box
+                        sx={{display: 'flex',
+                            padding: '20px',
+                            borderRadius: '12px 12px 0 0',
+                            background: theme.palette.background.default,
+                        }}
+                    >
+                        <Typography>0</Typography>
+                        <InfoIcon/>
+                    </Box>
+                    <Box sx={{padding: '20px'}}>
+                        <FormControl
+                            fullWidth
+                            size="small"
+                            sx={{
+                                width: "100%",
+                                minWidth: "200px",
+                                height: "48px",
+                            }}
+                        >
+                            <Select
+                                id="display-select"
+                                variant="outlined"
+                                value={display}
+                                displayEmpty
+                                onChange={handleChange}
+                                sx={{
+                                    height: "48px",
+                                    borderRadius: "8px",
+                                    "& .MuiOutlinedInput-notchedOutline": {
+                                        border: `1px solid ${theme.palette.brightPurple.main} !important`,
+                                    },
+                                }}
+                                MenuProps={{
+                                    PaperProps: {
+                                        sx: {
+                                            mt: "8px",
+                                            p: "4px",
+                                            borderRadius: "8px",
+                                            border: "1px solid #EEE4FC",
+                                            boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                                        },
+                                    },
+                                    MenuListProps: {
+                                        sx: {
+                                            py: 0,
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "8px",
+                                            "& .Mui-selected": {
+                                                backgroundColor: theme.palette.background.default,
+                                                color: theme.palette.brightPurple.main,
+                                            }
+                                        },
+                                    },
+                                }}
+                                inputProps={{
+                                    sx: {
+                                        color: theme.palette.brightPurple.main,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        px: "9px",
+                                        gap: "20px",
+                                    }
+                                }}
+                                IconComponent={props => <ArrowDown {...props} />}
+                            >
+                                <MenuItem
+                                    value={10}
+                                    sx={{
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "20px",
+                                        p: "4px",
+                                        borderRadius: "5px",
+                                        color: theme.palette.grey2.main,
+                                    }}
+                                >
+                                    Показать
+                                </MenuItem>
+                                <MenuItem
+                                    value={20}
+                                    sx={{
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "20px",
+                                        p: "4px",
+                                        borderRadius: "5px",
+                                        color: theme.palette.grey2.main,
+                                    }}
+                                >
+                                    Скрыть
+                                </MenuItem>
+                            </Select>
+                        </FormControl>
+                        <Typography>если в ответе на вопрос</Typography>
+                        <Box>
+                            <Link
+                                component="button"
+                                variant="body2"
+                                sx={{color: theme.palette.brightPurple.main}}
+                                // onClick={() => {
+                                // }}
+                            >
+                                Добавить условие
+                            </Link>
+
+                            <FormControl>
+                                <RadioGroup
+                                    aria-labelledby="demo-controlled-radio-buttons-group"
+                                    name="controlled-radio-buttons-group"
+                                    value={value}
+                                    onChange={handleChangeRadio}
+                                >
+                                    <FormControlLabel value="female" control={<Radio />} label="Все условия обязательны" />
+                                    <FormControlLabel value="male" control={<Radio />} label="Обязательно хотя бы одно условие" />
+                                </RadioGroup>
+                            </FormControl>
+
+                        </Box>
+                        <Box>
+                            <CustomButton
+                                variant="outlined"
+                                sx={{
+                                    border: `1px solid ${theme.palette.brightPurple.main}`,
+                                    color: theme.palette.brightPurple.main,
+                                    width: "auto",
+                                    ml: "auto",
+                                    px: "20px",
+                                    py: "9px",
+                                }}
+                            >Отмена</CustomButton>
+                            <CustomButton
+                                variant="contained"
+                                sx={{
+                                    backgroundColor: theme.palette.brightPurple.main,
+                                    color: "white",
+                                    width: "auto",
+                                    px: "20px",
+                                    py: "9px",
+                                }}
+                            >Готово</CustomButton>
+                        </Box>
+                    </Box>
+                </Box>
+            </Modal>
+        </>
+    );
+}

src/pages/Questions/answerOptions/switchAnswerOptions.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import UploadImage from "./UploadImage";
 import HelpAnswerOptions from "./helpAnswerOptions";
 import ResponseSettings from "./responseSettings";
+import BranchingAnswerOptions from "./branchingAnswerOptions";
 
 
 interface Props {
@@ -18,7 +19,7 @@ export default function SwitchAnswerOptions({switchState = 'setting' }: Props) {
             return (<HelpAnswerOptions/>);
             break
         case 'branching':
-            return (<></>);
+            return (<BranchingAnswerOptions/>);
             break;
         case 'image':
             return (<UploadImage/>);