103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import { useQuizSettings } from "@/contexts/QuizDataContext";
|
||
import { useQuizViewStore } from "@/stores/quizView";
|
||
import type { QuizQuestionDate } from "@model/questionTypes/date";
|
||
import { DateCalendar } from "@mui/x-date-pickers";
|
||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||
import type { Moment } from "moment";
|
||
import moment from "moment";
|
||
import { Box, Paper, TextField, useTheme } from "@mui/material";
|
||
import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
|
||
|
||
type DateProps = {
|
||
currentQuestion: QuizQuestionDate;
|
||
};
|
||
|
||
export default ({ currentQuestion }: DateProps) => {
|
||
const theme = useTheme();
|
||
const today = moment();
|
||
const isMobile = useRootContainerSize() < 690;
|
||
const { settings } = useQuizSettings();
|
||
const { updateAnswer } = useQuizViewStore((state) => state);
|
||
|
||
const answers = useQuizViewStore((state) => state.answers);
|
||
const answer = (answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string) || ["0", "0"];
|
||
|
||
const currentFrom = Number(answer[0]) ? moment(Number(answer[0])) : moment().utc();
|
||
const currentTo = Number(answer[1]) ? moment(Number(answer[1])) : moment().utc();
|
||
|
||
const onDateChange = async (date: Moment | null, index: number) => {
|
||
if (!date) return;
|
||
let newAnswer = [...answer];
|
||
newAnswer[index] = (moment(date).unix() * 1000).toString();
|
||
|
||
updateAnswer(currentQuestion.id, newAnswer, 0);
|
||
};
|
||
|
||
return (
|
||
<Paper
|
||
sx={{
|
||
backgroundColor: settings.cfg.design
|
||
? quizThemes[settings.cfg.theme].isLight
|
||
? "#F2F3F7"
|
||
: "rgba(154,154,175, 0.2)"
|
||
: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
width: isMobile ? "min-content" : "auto",
|
||
display: "inline-flex",
|
||
flexWrap: "wrap",
|
||
marginTop: "20px",
|
||
p: "20px",
|
||
}}
|
||
>
|
||
<Box>
|
||
<span style={{ marginLeft: "25px", color: theme.palette.text.primary }}>От</span>
|
||
<DateCalendar
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: settings.cfg.design
|
||
? quizThemes[settings.cfg.theme].isLight
|
||
? "#F2F3F7"
|
||
: "rgba(154,154,175, 0.2)"
|
||
: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
borderRadius: "10px",
|
||
maxWidth: "250px",
|
||
pr: "30px",
|
||
"& input": { py: "11px", pl: "20px", lineHeight: "19px" },
|
||
"& fieldset": { borderColor: "#9A9AAF" },
|
||
},
|
||
}}
|
||
value={currentFrom}
|
||
onChange={(data) => onDateChange(data, 0)}
|
||
/>
|
||
</Box>
|
||
<Box>
|
||
<span style={{ marginLeft: "25px", color: theme.palette.text.primary }}>До</span>
|
||
<DateCalendar
|
||
minDate={today}
|
||
sx={{
|
||
"& .MuiInputBase-root": {
|
||
backgroundColor: settings.cfg.design
|
||
? quizThemes[settings.cfg.theme].isLight
|
||
? "#F2F3F7"
|
||
: "rgba(154,154,175, 0.2)"
|
||
: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
borderRadius: "10px",
|
||
maxWidth: "250px",
|
||
pr: "30px",
|
||
"& input": { py: "11px", pl: "20px", lineHeight: "19px" },
|
||
"& fieldset": { borderColor: "#9A9AAF" },
|
||
},
|
||
}}
|
||
value={currentTo}
|
||
onChange={(data) => onDateChange(data, 1)}
|
||
/>
|
||
</Box>
|
||
</Paper>
|
||
);
|
||
};
|