fix: preview block
This commit is contained in:
IlyaDoronin
parent
afdf281631
commit
8c125e4d21
@ -1,130 +1,132 @@
|
||||
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
||||
import { Box, IconButton } from "@mui/material";
|
||||
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
|
||||
import { useLayoutEffect, useRef } from "react";
|
||||
import { Rnd } from "react-rnd";
|
||||
import QuizPreviewLayout from "./QuizPreviewLayout";
|
||||
import ResizeIcon from "./ResizeIcon";
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
|
||||
|
||||
const DRAG_PARENT_MARGIN = 25;
|
||||
const NAVBAR_HEIGHT = 81;
|
||||
const DRAG_PARENT_BOTTOM_MARGIN = 65;
|
||||
const DRAG_PARENT_MARGIN = 0;
|
||||
const NAVBAR_HEIGHT = 0;
|
||||
const DRAG_PARENT_BOTTOM_MARGIN = 0;
|
||||
|
||||
interface RndPositionAndSize {
|
||||
x: number;
|
||||
y: number;
|
||||
width: string;
|
||||
height: string;
|
||||
x: number;
|
||||
y: number;
|
||||
width: string;
|
||||
height: string;
|
||||
}
|
||||
|
||||
export default function QuizPreview() {
|
||||
const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
|
||||
const rndParentRef = useRef<HTMLDivElement>(null);
|
||||
const rndRef = useRef<Rnd | null>(null);
|
||||
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ x: 0, y: 0, width: "340", height: "480" });
|
||||
const isFirstShowRef = useRef<boolean>(true);
|
||||
const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
|
||||
const rndParentRef = useRef<HTMLDivElement>(null);
|
||||
const rndRef = useRef<Rnd | null>(null);
|
||||
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: "340",
|
||||
height: "480",
|
||||
});
|
||||
const isFirstShowRef = useRef<boolean>(true);
|
||||
|
||||
useLayoutEffect(function stickPreviewToBottomRight() {
|
||||
const rnd = rndRef.current;
|
||||
const rndSelfElement = rnd?.getSelfElement();
|
||||
if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
|
||||
useLayoutEffect(
|
||||
function stickPreviewToBottomRight() {
|
||||
const rnd = rndRef.current;
|
||||
const rndSelfElement = rnd?.getSelfElement();
|
||||
if (
|
||||
!rnd ||
|
||||
!rndSelfElement ||
|
||||
!rndParentRef.current ||
|
||||
!isFirstShowRef.current
|
||||
)
|
||||
return;
|
||||
|
||||
const rndParentRect = rndParentRef.current.getBoundingClientRect();
|
||||
const rndRect = rndSelfElement.getBoundingClientRect();
|
||||
const rndParentRect = rndParentRef.current.getBoundingClientRect();
|
||||
const rndRect = rndSelfElement.getBoundingClientRect();
|
||||
|
||||
const x = rndParentRect.width - rndRect.width;
|
||||
const y = rndParentRect.height - rndRect.height;
|
||||
const x = rndParentRect.width - rndRect.width;
|
||||
const y = rndParentRect.height - rndRect.height;
|
||||
|
||||
rnd.updatePosition({ x, y });
|
||||
rndPositionAndSizeRef.current.x = x;
|
||||
rndPositionAndSizeRef.current.y = y;
|
||||
rnd.updatePosition({ x, y });
|
||||
rndPositionAndSizeRef.current.x = x;
|
||||
rndPositionAndSizeRef.current.y = y;
|
||||
|
||||
isFirstShowRef.current = false;
|
||||
}, [isPreviewShown]);
|
||||
isFirstShowRef.current = false;
|
||||
},
|
||||
[isPreviewShown]
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={rndParentRef}
|
||||
sx={{
|
||||
position: "fixed",
|
||||
top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
|
||||
left: DRAG_PARENT_MARGIN,
|
||||
bottom: DRAG_PARENT_BOTTOM_MARGIN,
|
||||
right: DRAG_PARENT_MARGIN,
|
||||
// backgroundColor: "rgba(0, 100, 0, 0.2)",
|
||||
pointerEvents: "none",
|
||||
zIndex: 100,
|
||||
}}
|
||||
return (
|
||||
<Box
|
||||
ref={rndParentRef}
|
||||
sx={{
|
||||
position: "fixed",
|
||||
top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
|
||||
left: DRAG_PARENT_MARGIN,
|
||||
bottom: DRAG_PARENT_BOTTOM_MARGIN,
|
||||
right: DRAG_PARENT_MARGIN,
|
||||
// backgroundColor: "rgba(0, 100, 0, 0.2)",
|
||||
pointerEvents: "none",
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{isPreviewShown && (
|
||||
<Rnd
|
||||
minHeight={20}
|
||||
minWidth={20}
|
||||
bounds="parent"
|
||||
ref={rndRef}
|
||||
dragHandleClassName="quiz-preview-draghandle"
|
||||
default={{
|
||||
x: rndPositionAndSizeRef.current.x,
|
||||
y: rndPositionAndSizeRef.current.y,
|
||||
width: rndPositionAndSizeRef.current.width,
|
||||
height: rndPositionAndSizeRef.current.height,
|
||||
}}
|
||||
onResizeStop={(e, direction, ref, delta, position) => {
|
||||
rndPositionAndSizeRef.current.x = position.x;
|
||||
rndPositionAndSizeRef.current.y = position.y;
|
||||
rndPositionAndSizeRef.current.width = ref.style.width;
|
||||
rndPositionAndSizeRef.current.height = ref.style.height;
|
||||
}}
|
||||
onDragStop={(e, d) => {
|
||||
rndPositionAndSizeRef.current.x = d.x;
|
||||
rndPositionAndSizeRef.current.y = d.y;
|
||||
}}
|
||||
onDragStart={(e, d) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
enableResizing={{
|
||||
topLeft: isPreviewShown,
|
||||
}}
|
||||
resizeHandleComponent={{
|
||||
topLeft: <ResizeIcon />,
|
||||
}}
|
||||
resizeHandleStyles={{
|
||||
topLeft: {
|
||||
top: "-1px",
|
||||
left: "-1px",
|
||||
},
|
||||
}}
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
{isPreviewShown &&
|
||||
<Rnd
|
||||
minHeight={300}
|
||||
minWidth={340}
|
||||
bounds="parent"
|
||||
ref={rndRef}
|
||||
dragHandleClassName="quiz-preview-draghandle"
|
||||
default={{
|
||||
x: rndPositionAndSizeRef.current.x,
|
||||
y: rndPositionAndSizeRef.current.y,
|
||||
width: rndPositionAndSizeRef.current.width,
|
||||
height: rndPositionAndSizeRef.current.height
|
||||
}}
|
||||
onResizeStop={(e, direction, ref, delta, position) => {
|
||||
rndPositionAndSizeRef.current.x = position.x;
|
||||
rndPositionAndSizeRef.current.y = position.y;
|
||||
rndPositionAndSizeRef.current.width = ref.style.width;
|
||||
rndPositionAndSizeRef.current.height = ref.style.height;
|
||||
}}
|
||||
onDragStop={(e, d) => {
|
||||
rndPositionAndSizeRef.current.x = d.x;
|
||||
rndPositionAndSizeRef.current.y = d.y;
|
||||
}}
|
||||
onDragStart={(e, d) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
enableResizing={{
|
||||
topLeft: isPreviewShown,
|
||||
}}
|
||||
resizeHandleComponent={{
|
||||
topLeft: <ResizeIcon />
|
||||
}}
|
||||
resizeHandleStyles={{
|
||||
topLeft: {
|
||||
top: "-1px",
|
||||
left: "-1px",
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
<QuizPreviewLayout />
|
||||
<IconButton
|
||||
className="quiz-preview-draghandle"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: -54,
|
||||
right: 46,
|
||||
cursor: "move",
|
||||
}}
|
||||
>
|
||||
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
||||
</IconButton>
|
||||
</Rnd>
|
||||
}
|
||||
<IconButton
|
||||
onClick={toggleQuizPreview}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: -54,
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon sx={{ height: "30px", width: "30px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
<QuizPreviewLayout />
|
||||
</Rnd>
|
||||
)}
|
||||
<IconButton
|
||||
onClick={toggleQuizPreview}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: -54,
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
<VisibilityIcon sx={{ height: "30px", width: "30px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
|
||||
import { questionStore } from "@root/questions";
|
||||
import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
|
||||
import {
|
||||
decrementCurrentQuestionIndex,
|
||||
incrementCurrentQuestionIndex,
|
||||
useQuizPreviewStore,
|
||||
} from "@root/quizPreview";
|
||||
import { DefiniteQuestionType } from "model/questionTypes/shared";
|
||||
import { FC, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
@ -17,117 +21,143 @@ import Text from "./QuizPreviewQuestionTypes/Text";
|
||||
import Variant from "./QuizPreviewQuestionTypes/Variant";
|
||||
import Varimg from "./QuizPreviewQuestionTypes/Varimg";
|
||||
|
||||
|
||||
const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
|
||||
variant: Variant,
|
||||
images: Images,
|
||||
varimg: Varimg,
|
||||
emoji: Emoji,
|
||||
text: Text,
|
||||
select: Select,
|
||||
date: Date,
|
||||
number: Number,
|
||||
file: File,
|
||||
page: Page,
|
||||
rating: Rating,
|
||||
variant: Variant,
|
||||
images: Images,
|
||||
varimg: Varimg,
|
||||
emoji: Emoji,
|
||||
text: Text,
|
||||
select: Select,
|
||||
date: Date,
|
||||
number: Number,
|
||||
file: File,
|
||||
page: Page,
|
||||
rating: Rating,
|
||||
};
|
||||
|
||||
export default function QuizPreviewLayout() {
|
||||
const quizId = useParams().quizId ?? 0;
|
||||
const listQuestions = questionStore(state => state.listQuestions);
|
||||
const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex);
|
||||
const quizId = useParams().quizId ?? 0;
|
||||
const listQuestions = questionStore((state) => state.listQuestions);
|
||||
const currentQuizStep = useQuizPreviewStore(
|
||||
(state) => state.currentQuestionIndex
|
||||
);
|
||||
|
||||
const quizQuestions = listQuestions[quizId] ?? [];
|
||||
const nonDeletedQuizQuestions = quizQuestions.filter(question => !question.deleted);
|
||||
const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
|
||||
const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
|
||||
const quizQuestions = listQuestions[quizId] ?? [];
|
||||
const nonDeletedQuizQuestions = quizQuestions.filter(
|
||||
(question) => !question.deleted
|
||||
);
|
||||
const maxCurrentQuizStep =
|
||||
nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
|
||||
const currentProgress = Math.floor(
|
||||
(currentQuizStep / maxCurrentQuizStep) * 100
|
||||
);
|
||||
|
||||
const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
|
||||
const QuestionComponent = currentQuestion
|
||||
? QuestionPreviewComponentByType[currentQuestion.type as DefiniteQuestionType]
|
||||
: null;
|
||||
const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
|
||||
const QuestionComponent = currentQuestion
|
||||
? QuestionPreviewComponentByType[
|
||||
currentQuestion.type as DefiniteQuestionType
|
||||
]
|
||||
: null;
|
||||
|
||||
const questionElement = QuestionComponent
|
||||
? <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
|
||||
: null;
|
||||
const questionElement = QuestionComponent ? (
|
||||
<QuestionComponent key={currentQuestion.id} question={currentQuestion} />
|
||||
) : null;
|
||||
|
||||
useEffect(function resetCurrentQuizStep() {
|
||||
if (currentQuizStep > maxCurrentQuizStep) {
|
||||
decrementCurrentQuestionIndex();
|
||||
}
|
||||
}, [currentQuizStep, maxCurrentQuizStep]);
|
||||
useEffect(
|
||||
function resetCurrentQuizStep() {
|
||||
if (currentQuizStep > maxCurrentQuizStep) {
|
||||
decrementCurrentQuestionIndex();
|
||||
}
|
||||
},
|
||||
[currentQuizStep, maxCurrentQuizStep]
|
||||
);
|
||||
|
||||
return (
|
||||
<Paper sx={{
|
||||
height: "100%",
|
||||
return (
|
||||
<Paper
|
||||
className="quiz-preview-draghandle"
|
||||
sx={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
borderRadius: "12px",
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
p: "16px",
|
||||
whiteSpace: "break-spaces",
|
||||
overflowY: "auto",
|
||||
flexGrow: 1,
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
{questionElement}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "auto",
|
||||
p: "16px",
|
||||
display: "flex",
|
||||
borderTop: "1px solid #E3E3E3",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
borderRadius: "12px",
|
||||
pointerEvents: "auto",
|
||||
}}>
|
||||
<Box sx={{
|
||||
p: "16px",
|
||||
whiteSpace: "break-spaces",
|
||||
overflowY: "auto",
|
||||
flexGrow: 1,
|
||||
}}>
|
||||
{questionElement}
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mt: "auto",
|
||||
p: "16px",
|
||||
display: "flex",
|
||||
borderTop: "1px solid #E3E3E3",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 1,
|
||||
}}>
|
||||
<Typography>
|
||||
{nonDeletedQuizQuestions.length > 0
|
||||
? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
|
||||
: "Нет вопросов"
|
||||
}
|
||||
</Typography>
|
||||
{nonDeletedQuizQuestions.length > 0 &&
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={currentProgress}
|
||||
sx={{
|
||||
"&.MuiLinearProgress-colorPrimary": {
|
||||
backgroundColor: "fadePurple.main",
|
||||
},
|
||||
"& .MuiLinearProgress-barColorPrimary": {
|
||||
backgroundColor: "brightPurple.main",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
<Box sx={{
|
||||
ml: 2,
|
||||
display: "flex",
|
||||
gap: 1,
|
||||
}}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={decrementCurrentQuestionIndex}
|
||||
disabled={currentQuizStep === 0}
|
||||
sx={{ px: 1, minWidth: 0 }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
|
||||
disabled={currentQuizStep >= maxCurrentQuizStep}
|
||||
>Далее</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{nonDeletedQuizQuestions.length > 0
|
||||
? `Вопрос ${currentQuizStep + 1} из ${
|
||||
nonDeletedQuizQuestions.length
|
||||
}`
|
||||
: "Нет вопросов"}
|
||||
</Typography>
|
||||
{nonDeletedQuizQuestions.length > 0 && (
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={currentProgress}
|
||||
sx={{
|
||||
"&.MuiLinearProgress-colorPrimary": {
|
||||
backgroundColor: "fadePurple.main",
|
||||
},
|
||||
"& .MuiLinearProgress-barColorPrimary": {
|
||||
backgroundColor: "brightPurple.main",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
ml: 2,
|
||||
display: "flex",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={decrementCurrentQuestionIndex}
|
||||
disabled={currentQuizStep === 0}
|
||||
sx={{ px: 1, minWidth: 0 }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
|
||||
disabled={currentQuizStep >= maxCurrentQuizStep}
|
||||
>
|
||||
Далее
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user