73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { Box, Skeleton, useMediaQuery, useTheme } from "@mui/material";
|
|
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
|
|
import { lazy, Suspense, useCallback } from "react";
|
|
import { DraggableList } from "./DraggableList";
|
|
import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
|
|
|
|
const BranchingMap = lazy(() =>
|
|
import("./BranchingMap").then((module) => ({ default: module.BranchingMap })),
|
|
);
|
|
interface Props {
|
|
openBranchingPage: boolean;
|
|
setOpenBranchingPage: (a: boolean) => void;
|
|
widthMain: number;
|
|
}
|
|
|
|
export const QuestionSwitchWindowTool = ({
|
|
openBranchingPage,
|
|
setOpenBranchingPage,
|
|
widthMain,
|
|
}: Props) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
|
|
const openBranchingPageHC = useCallback(() => {
|
|
if (!openBranchingPage) {
|
|
deleteTimeoutedQuestions();
|
|
}
|
|
setOpenBranchingPage(!openBranchingPage);
|
|
}, [openBranchingPage, setOpenBranchingPage]);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
marginBottom: isMobile ? "25px" : "30px",
|
|
}}
|
|
>
|
|
<Box sx={{ width: isTablet ? "100%" : "796px" }}>
|
|
{openBranchingPage ? (
|
|
<Suspense
|
|
fallback={
|
|
<Skeleton
|
|
sx={{
|
|
maxWidth: "796px",
|
|
width: "100%",
|
|
height: isMobile ? "357px" : "521px",
|
|
transform: "none",
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<BranchingMap />
|
|
</Suspense>
|
|
) : (
|
|
<DraggableList
|
|
openBranchingPage={openBranchingPage}
|
|
setOpenBranchingPage={openBranchingPageHC}
|
|
/>
|
|
)}
|
|
</Box>
|
|
{openBranchingPage && (
|
|
<SwitchBranchingPanel
|
|
openBranchingPage={openBranchingPage}
|
|
setOpenBranchingPage={openBranchingPageHC}
|
|
widthMain={widthMain}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|