93 lines
3.2 KiB
TypeScript
93 lines
3.2 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 { Paper, useTheme } from "@mui/material";
|
||
|
|
import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
|
||
|
|
|
||
|
|
type DateProps = {
|
||
|
|
currentQuestion: QuizQuestionDate;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ({ currentQuestion }: DateProps) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
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",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<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)}
|
||
|
|
/>
|
||
|
|
<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={currentTo}
|
||
|
|
onChange={(data) => onDateChange(data, 1)}
|
||
|
|
/>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
};
|