203 lines
5.9 KiB
TypeScript
203 lines
5.9 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import {
|
||
Box,
|
||
FormControl,
|
||
MenuItem,
|
||
Select,
|
||
SelectChangeEvent,
|
||
Typography,
|
||
Tooltip,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import ButtonsOptions from "../ButtonsOptions";
|
||
|
||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
|
||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||
import ArrowDown from "../../../assets/icons/ArrowDownIcon";
|
||
import SwitchUpload from "./switchUpload";
|
||
|
||
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
|
||
import type {
|
||
QuizQuestionFile,
|
||
UploadFileType,
|
||
} from "../../../model/questionTypes/file";
|
||
|
||
interface Props {
|
||
totalIndex: number;
|
||
}
|
||
|
||
type DesignItem = {
|
||
name: string;
|
||
value: UploadFileType;
|
||
};
|
||
|
||
const DESIGN_TYPES: DesignItem[] = [
|
||
{ name: "Все типы файлов", value: "all" },
|
||
{ name: "Изображения", value: "picture" },
|
||
{ name: "Видео", value: "video" },
|
||
{ name: "Аудио", value: "audio" },
|
||
{ name: "Документ", value: "document" },
|
||
];
|
||
|
||
export default function UploadFile({ totalIndex }: Props) {
|
||
const [switchState, setSwitchState] = useState("setting");
|
||
const quizId = Number(useParams().quizId);
|
||
const { listQuestions } = questionStore();
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
||
const question = listQuestions[quizId][totalIndex] as QuizQuestionFile;
|
||
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||
|
||
const SSHC = (data: string) => {
|
||
setSwitchState(data);
|
||
};
|
||
|
||
const handleChange = ({ target }: SelectChangeEvent) => {
|
||
updateQuestionsList<AnyQuizQuestion>(quizId, totalIndex, {
|
||
content: { ...question.content, type: target.value as UploadFileType },
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
const isTypeSetted = DESIGN_TYPES.find(
|
||
({ value }) => value === question.content.type
|
||
);
|
||
|
||
if (!isTypeSetted) {
|
||
updateQuestionsList<AnyQuizQuestion>(quizId, totalIndex, {
|
||
content: { ...question.content, type: DESIGN_TYPES[0].value },
|
||
});
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? "auto" : "100%",
|
||
maxWidth: "640px",
|
||
display: "flex",
|
||
px: "20px",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
|
||
<FormControl
|
||
fullWidth
|
||
size="small"
|
||
sx={{
|
||
width: "100%",
|
||
minWidth: "200px",
|
||
height: "48px",
|
||
maxWidth: isFigmaTablet ? "551px" : "640px",
|
||
}}
|
||
>
|
||
<Select
|
||
id="category-select"
|
||
variant="outlined"
|
||
value={question.content.type}
|
||
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: {
|
||
height: "48px",
|
||
color: theme.palette.brightPurple.main,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
px: "9px",
|
||
gap: "20px",
|
||
},
|
||
}}
|
||
IconComponent={(props) => <ArrowDown {...props} />}
|
||
>
|
||
{DESIGN_TYPES.map(({ name, value }) => (
|
||
<MenuItem
|
||
key={value}
|
||
value={value}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
p: "4px",
|
||
borderRadius: "5px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
{name}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "flex-start",
|
||
marginBottom: "20px",
|
||
marginTop: "15px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 400,
|
||
fontSize: "16px",
|
||
lineHeight: "18.96px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Пользователь может загрузить любой собственный файл
|
||
</Typography>
|
||
<Tooltip
|
||
title="Можно загрузить файл в желаемом формате."
|
||
placement="top"
|
||
>
|
||
<Box>
|
||
<InfoIcon />
|
||
</Box>
|
||
</Tooltip>
|
||
</Box>
|
||
</Box>
|
||
<ButtonsOptions
|
||
switchState={switchState}
|
||
SSHC={SSHC}
|
||
totalIndex={totalIndex}
|
||
/>
|
||
<SwitchUpload switchState={switchState} totalIndex={totalIndex} />
|
||
</>
|
||
);
|
||
}
|