SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

use QuizDialog in side widget

Browse Source 
add QuizDialog close button
This commit is contained in:
nflnkr 2024-05-03 22:30:38 +03:00
parent 82b6d37080
commit 79674fedbb
2 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/widgets/QuizDialog.tsx
View File

@ -1,28 +1,52 @@
import QuizAnswerer from "@/components/QuizAnswerer";
import { Dialog } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import { Dialog, IconButton, Slide, SlideProps, SxProps, Theme } from "@mui/material";
import { forwardRef } from "react";
const SlideTransition = forwardRef<unknown, SlideProps>((props, ref) => {
return (
<Slide direction="up" ref={ref} {...props} />
);
});
interface Props {
open?: boolean;
quizId: string;
paperSx?: SxProps<Theme>;
hideBackdrop?: boolean;
disableScrollLock?: boolean;
onClose?: () => void;
}
export default function QuizDialog({ open = true, quizId, onClose }: Props) {
export default function QuizDialog({
open = true,
quizId,
paperSx = [],
hideBackdrop,
disableScrollLock,
onClose
}: Props) {
return (
<Dialog
open={open}
onClose={onClose}
keepMounted
hideBackdrop={hideBackdrop}
disableScrollLock={disableScrollLock}
TransitionComponent={SlideTransition}
PaperProps={{
sx: {
backgroundColor: "transparent",
width: "calc(min(100%, max(70%, 700px)))",
height: "80%",
maxWidth: "100%",
m: "16px",
}
sx: [
{
backgroundColor: "transparent",
width: "calc(min(100%, max(70%, 700px)))",
height: "80%",
maxWidth: "100%",
m: "16px",
},
...(Array.isArray(paperSx) ? paperSx : [paperSx])
]
}}
>
<QuizAnswerer
@ -30,6 +54,25 @@ export default function QuizDialog({ open = true, quizId, onClose }: Props) {
changeFaviconAndTitle={false}
disableGlobalCss
/>
<IconButton
onClick={onClose}
sx={{
position: "absolute",
zIndex: 10,
top: 0,
right: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
borderTopRightRadius: "4px",
borderTopLeftRadius: 0,
borderBottomLeftRadius: "4px",
borderBottomRightRadius: 0,
"&:hover": {
backgroundColor: "rgba(0, 0, 0, 0.7)",
},
}}
>
<CloseIcon sx={{ color: "white" }} />
</IconButton>
</Dialog>
);
}

99
src/widgets/side/QuizSideButton.tsx
View File

@ -1,8 +1,8 @@
import { QuizAnswerer } from "@/index";
import lightTheme from "@/utils/themes/light";
import { Box, Button, Grow, ThemeProvider } from "@mui/material";
import { Button, ThemeProvider } from "@mui/material";
import { useState } from "react";
import { createPortal } from "react-dom";
import QuizDialog from "../QuizDialog";
const PADDING = 10;
@ -10,65 +10,54 @@ const PADDING = 10;
interface Props {
quizId: string;
position: "left" | "right";
buttonColor?: string;
buttonBackgroundColor?: string;
}
export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
return createPortal(
<ThemeProvider theme={lightTheme}>
{isQuizShown ? (
<Grow in={true}>
<Box
sx={[
{
position: "fixed",
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
},
position === "left" && {
bottom: PADDING,
left: PADDING,
},
position === "right" && {
bottom: PADDING,
right: PADDING,
},
]}
>
<QuizAnswerer
quizId={quizId}
changeFaviconAndTitle={false}
disableGlobalCss
/>
</Box>
</Grow>
) : (
<Button
className="pena-quiz-widget-button"
variant="contained"
onClick={() => setIsQuizShown(true)}
sx={[
{
position: "fixed",
height: "70px",
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
color: buttonColor,
},
position === "left" && {
bottom: PADDING,
left: PADDING,
},
position === "right" && {
bottom: PADDING,
right: PADDING,
},
]}
>
Пройти квиз
</Button>
)}
<QuizDialog
open={isQuizShown}
quizId={quizId}
onClose={() => setIsQuizShown(false)}
hideBackdrop
disableScrollLock
paperSx={{
position: "absolute",
bottom: PADDING,
right: position === "right" ? PADDING : undefined,
left: position === "left" ? PADDING : undefined,
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
m: 0,
}}
/>
<Button
className="pena-quiz-widget-button"
variant="contained"
onClick={() => setIsQuizShown(true)}
sx={[
{
display: isQuizShown ? "none" : "block",
position: "fixed",
height: "70px",
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
backgroundColor: buttonBackgroundColor,
},
position === "left" && {
bottom: PADDING,
left: PADDING,
},
position === "right" && {
bottom: PADDING,
right: PADDING,
},
]}
>
Пройти квиз
</Button>
</ThemeProvider>,
document.body
);