frontPanel/src/pages/Questions/UploadFile/UploadFile.tsx
2023-10-06 22:28:30 +03:00

203 lines
5.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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} />
</>
);
}