From 8242f9958016496b4968353d96ef442d7b725e8c Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Mon, 13 May 2024 16:41:41 +0300
Subject: [PATCH] add container widget param: show button on mobile instead of
 quiz

---
 src/widgets/container/ContainerWidget.tsx | 30 +++++++++----------
 src/widgets/container/QuizContainer.tsx   | 35 +++++++++++++++++++++++
 2 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 src/widgets/container/QuizContainer.tsx

diff --git a/src/widgets/container/ContainerWidget.tsx b/src/widgets/container/ContainerWidget.tsx
index ee056b6..8efc41d 100644
--- a/src/widgets/container/ContainerWidget.tsx
+++ b/src/widgets/container/ContainerWidget.tsx
@@ -1,29 +1,27 @@
-import QuizAnswerer from "@/components/QuizAnswerer";
+import { ComponentPropsWithoutRef } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { pollForSelector } from "../shared/pollForSelector";
+import QuizContainer from "./QuizContainer";
 
 
+type Props = ComponentPropsWithoutRef<typeof QuizContainer>;
+
 export class ContainerWidget {
     root: Root | undefined;
 
-    constructor({ selector, quizId, selectorPollingTimeLimit = 60 }: {
-        quizId: string;
+    constructor(props: Props & {
         selector: string;
         /**
          * In seconds, null - polling disabled
          */
         selectorPollingTimeLimit?: number | null;
     }) {
+        const { selector, selectorPollingTimeLimit = 60 } = props;
+
         const element = document.querySelector(selector);
         if (element) {
             this.root = createRoot(element);
-            this.root.render(
-                <QuizAnswerer
-                    quizId={quizId}
-                    changeFaviconAndTitle={false}
-                    disableGlobalCss
-                />
-            );
+            this.render(props);
 
             return;
         }
@@ -35,16 +33,14 @@ export class ContainerWidget {
 
         pollForSelector(selector, selectorPollingTimeLimit, (element) => {
             this.root = createRoot(element);
-            this.root.render(
-                <QuizAnswerer
-                    quizId={quizId}
-                    changeFaviconAndTitle={false}
-                    disableGlobalCss
-                />
-            );
+            this.render(props);
         });
     }
 
+    render(props: Props) {
+        this.root?.render(<QuizContainer {...props} />);
+    }
+
     destroy() {
         if (this.root) this.root.unmount();
     }
diff --git a/src/widgets/container/QuizContainer.tsx b/src/widgets/container/QuizContainer.tsx
new file mode 100644
index 0000000..3d6f267
--- /dev/null
+++ b/src/widgets/container/QuizContainer.tsx
@@ -0,0 +1,35 @@
+import QuizAnswerer from "@/components/QuizAnswerer";
+import { Box, useMediaQuery } from "@mui/material";
+import { ComponentPropsWithoutRef } from "react";
+import OpenQuizButton from "../button/OpenQuizButton";
+
+
+type Props = ComponentPropsWithoutRef<typeof OpenQuizButton> & {
+    quizId: string;
+    showButtonOnMobile?: boolean;
+    dimensions?: { width: string; height: string; };
+};
+
+export default function QuizContainer(props: Props) {
+    const { quizId, dimensions, showButtonOnMobile = false } = props;
+    const isMobile = useMediaQuery("(max-width: 600px)");
+
+    return showButtonOnMobile && isMobile ? (
+        <OpenQuizButton {...props} />
+    ) : (
+        <Box
+            sx={{
+                width: dimensions?.width ?? "100%",
+                maxWidth: "100%",
+                height: dimensions?.height ?? "100%",
+                maxHeight: "100%",
+            }}
+        >
+            <QuizAnswerer
+                quizId={quizId}
+                changeFaviconAndTitle={false}
+                disableGlobalCss
+            />
+        </Box>
+    );
+}