SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Number

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-12 16:13:27 +03:00
parent 4a13a02ddf
commit 28c43d662c
1 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -37,16 +37,14 @@ export const Number = ({ currentQuestion }: NumberProps) => {
}, },
1000 1000
); );
const { answer } = const answer = answers.find(
answers.find( ({ questionId }) => questionId === currentQuestion.content.id
({ questionId }) => questionId === currentQuestion.content.id )?.answer as string;
) ?? {};
const min = window.Number(currentQuestion.content.range.split("—")[0]); const min = window.Number(currentQuestion.content.range.split("—")[0]);
const max = window.Number(currentQuestion.content.range.split("—")[1]); const max = window.Number(currentQuestion.content.range.split("—")[1]);
useEffect(() => { useEffect(() => {
console.log("ans", currentQuestion.content.start);
if (answer) { if (answer) {
setMinRange(answer.split("—")[0]); setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]); setMaxRange(answer.split("—")[1]);
@ -76,8 +74,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
marginTop: "20px", marginTop: "20px",
}} }}
> >
<Slider
<Slider
value={ value={
currentQuestion.content.chooseRange currentQuestion.content.chooseRange
? answer?.split("—").length || 0 > 1 ? answer?.split("—").length || 0 > 1
@ -89,34 +86,35 @@ export const Number = ({ currentQuestion }: NumberProps) => {
max={max} max={max}
step={currentQuestion.content.step || 1} step={currentQuestion.content.step || 1}
sx={{ sx={{
marginBottom: "20px",
color: theme.palette.brightPurple.main, color: theme.palette.brightPurple.main,
padding: "0", padding: "0",
marginTop: "75px", marginTop: "75px",
"& .MuiSlider-valueLabel":{ "& .MuiSlider-valueLabel": {
background: theme.palette.brightPurple.main, background: theme.palette.brightPurple.main,
borderRadius: "8px", borderRadius: "8px",
width: "60px", width: "60px",
height: "36px" height: "36px",
}, },
"& .MuiSlider-valueLabel::before": { "& .MuiSlider-valueLabel::before": {
width: "6px", width: "6px",
height: "2px", height: "2px",
transform: "translate(-50%, 50%) rotate(90deg)", transform: "translate(-50%, 50%) rotate(90deg)",
bottom: "-5px" bottom: "-5px",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
height: "12px",
},
"& .MuiSlider-thumb": {
border: "3px #f2f3f7 solid",
height: "23px",
width: "23px",
},
"& .MuiSlider-track": {
height: "12px",
}, },
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid #9A9AAF`,
height: "12px"
},
"& .MuiSlider-thumb": {
border: "3px #f2f3f7 solid",
height: "23px",
width: "23px"
},
"& .MuiSlider-track": {
height: "12px"
}
}} }}
onChange={(_, value) => { onChange={(_, value) => {
const range = String(value).replace(",", "—"); const range = String(value).replace(",", "—");
@ -152,12 +150,13 @@ export const Number = ({ currentQuestion }: NumberProps) => {
}} }}
/> />
)} )}
{currentQuestion.content.chooseRange && ( {currentQuestion.content.chooseRange && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
gap: "15px", gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" }, "& .MuiFormControl-root": { width: "auto" },
}} }}
> >
@ -180,9 +179,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
"& .MuiInputBase-input": { textAlign: "center" }, "& .MuiInputBase-input": { textAlign: "center" },
}} }}
/> />
<Typography>до</Typography>
до
<CustomTextField <CustomTextField
placeholder="0" placeholder="0"
value={maxRange} value={maxRange}
@ -204,7 +201,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
/> />
</Box> </Box>
)} )}
</Box> </Box>
</Box> </Box>
); );