172 lines
7.8 KiB
TypeScript
172 lines
7.8 KiB
TypeScript
import { MessageIcon } from "@icons/messagIcon";
|
|
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
|
import TextareaAutosize from "@mui/base/TextareaAutosize";
|
|
import {
|
|
Box,
|
|
FormControl,
|
|
IconButton,
|
|
InputAdornment,
|
|
Popover,
|
|
TextField,
|
|
useMediaQuery,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } from "@root/questions/actions";
|
|
import type { KeyboardEvent, ReactNode } from "react";
|
|
import { useState } from "react";
|
|
import { Draggable } from "react-beautiful-dnd";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";
|
|
|
|
|
|
type AnswerItemProps = {
|
|
index: number;
|
|
questionId: string;
|
|
variant: QuestionVariant | ImageQuestionVariant;
|
|
largeCheck: boolean;
|
|
additionalContent?: ReactNode;
|
|
additionalMobile?: ReactNode;
|
|
};
|
|
|
|
export const AnswerItem = ({
|
|
index,
|
|
variant,
|
|
questionId,
|
|
largeCheck,
|
|
additionalContent,
|
|
additionalMobile,
|
|
}: AnswerItemProps) => {
|
|
const theme = useTheme();
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(790));
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
setIsOpen(true);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Draggable draggableId={String(index)} index={index}>
|
|
{(provided) => (
|
|
<Box ref={provided.innerRef} {...provided.draggableProps}>
|
|
<FormControl
|
|
key={index}
|
|
fullWidth
|
|
variant="standard"
|
|
sx={{
|
|
margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
|
|
borderRadius: "10px",
|
|
border: "1px solid rgba(0, 0, 0, 0.23)",
|
|
background: "white",
|
|
}}
|
|
>
|
|
<TextField
|
|
defaultValue={variant.answer}
|
|
fullWidth
|
|
focused={false}
|
|
placeholder={"Добавьте ответ"}
|
|
multiline={largeCheck}
|
|
onChange={({ target }) => {
|
|
setQuestionVariantField(questionId, variant.id, "answer", target.value)
|
|
}}
|
|
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.code === "Enter" && !largeCheck) {
|
|
addQuestionVariant(questionId);
|
|
}
|
|
}}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<>
|
|
<InputAdornment
|
|
{...provided.dragHandleProps}
|
|
position="start"
|
|
>
|
|
<PointsIcon
|
|
style={{ color: "#9A9AAF", fontSize: "30px" }}
|
|
/>
|
|
</InputAdornment>
|
|
{additionalContent}
|
|
</>
|
|
),
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
sx={{ padding: "0" }}
|
|
aria-describedby="my-popover-id"
|
|
onClick={handleClick}
|
|
>
|
|
<MessageIcon
|
|
style={{
|
|
color: "#9A9AAF",
|
|
fontSize: "30px",
|
|
marginRight: "6.5px",
|
|
}}
|
|
/>
|
|
</IconButton>
|
|
<Popover
|
|
id="my-popover-id"
|
|
open={isOpen}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
|
>
|
|
<TextareaAutosize
|
|
style={{ margin: "10px" }}
|
|
placeholder="Подсказка для этого ответа"
|
|
value={variant.hints}
|
|
onChange={e => setQuestionVariantField(questionId, variant.id, "hints", e.target.value)}
|
|
onKeyDown={(
|
|
event: KeyboardEvent<HTMLTextAreaElement>
|
|
) => event.stopPropagation()}
|
|
/>
|
|
</Popover>
|
|
<IconButton
|
|
sx={{ padding: "0" }}
|
|
onClick={() => deleteQuestionVariant(questionId, variant.id)}
|
|
>
|
|
<DeleteIcon
|
|
style={{
|
|
color: theme.palette.grey2.main,
|
|
marginRight: "-1px",
|
|
}}
|
|
/>
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
"& .MuiInputBase-root": {
|
|
padding: additionalContent ? "5px 13px" : "13px",
|
|
borderRadius: "10px",
|
|
background: "#ffffff",
|
|
"& input.MuiInputBase-input": {
|
|
height: "22px",
|
|
},
|
|
"& textarea.MuiInputBase-input": {
|
|
marginTop: "1px",
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "none",
|
|
},
|
|
},
|
|
}}
|
|
inputProps={{
|
|
sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
|
|
"data-cy": "quiz-variant-question-answer",
|
|
}}
|
|
/>
|
|
{additionalMobile}
|
|
</FormControl>
|
|
</Box>
|
|
)}
|
|
</Draggable>
|
|
|
|
);
|
|
};
|