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 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 { interface Props {
open?: boolean; open?: boolean;
quizId: string; quizId: string;
paperSx?: SxProps<Theme>;
hideBackdrop?: boolean;
disableScrollLock?: boolean;
onClose?: () => void; onClose?: () => void;
} }
export default function QuizDialog({ open = true, quizId, onClose }: Props) { export default function QuizDialog({
open = true,
quizId,
paperSx = [],
hideBackdrop,
disableScrollLock,
onClose
}: Props) {
return ( return (
<Dialog <Dialog
open={open} open={open}
onClose={onClose} onClose={onClose}
keepMounted keepMounted
hideBackdrop={hideBackdrop}
disableScrollLock={disableScrollLock}
TransitionComponent={SlideTransition}
PaperProps={{ PaperProps={{
sx: { sx: [
backgroundColor: "transparent", {
width: "calc(min(100%, max(70%, 700px)))", backgroundColor: "transparent",
height: "80%", width: "calc(min(100%, max(70%, 700px)))",
maxWidth: "100%", height: "80%",
m: "16px", maxWidth: "100%",
} m: "16px",
},
...(Array.isArray(paperSx) ? paperSx : [paperSx])
]
}} }}
> >
<QuizAnswerer <QuizAnswerer
@ -30,6 +54,25 @@ export default function QuizDialog({ open = true, quizId, onClose }: Props) {
changeFaviconAndTitle={false} changeFaviconAndTitle={false}
disableGlobalCss 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> </Dialog>
); );
} }

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

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