модалка для кнопки ветвление
This commit is contained in:
tamara
parent
24db2a8b26
commit
0e62c7cdfd
@ -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", () => {
|
||||
console.log("a")
|
||||
setReady(true)
|
||||
})
|
||||
dropZone.current.addEventListener("dragenter", dragenterHC)
|
||||
}
|
||||
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",
|
||||
}}
|
||||
|
||||
|
||||
201
src/pages/Questions/answerOptions/branchingAnswerOptions.tsx
Normal file
201
src/pages/Questions/answerOptions/branchingAnswerOptions.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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/>);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user