rename widget components dimensions prop to dialogDimensions

This commit is contained in:
nflnkr 2024-05-13 16:41:10 +03:00
parent aebf66eba4
commit 2375f81b48
4 changed files with 20 additions and 16 deletions

@ -1,14 +1,12 @@
import lightTheme from "@/utils/themes/light"; import lightTheme from "@/utils/themes/light";
import { Box, ThemeProvider, Typography } from "@mui/material"; import { Box, ThemeProvider, Typography } from "@mui/material";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { BannerWidget as Widget } from "./widgets"; import { ContainerWidget as Widget } from "./widgets";
const widgetProps: ConstructorParameters<typeof Widget>[0] = { const widgetProps: ConstructorParameters<typeof Widget>[0] = {
quizId: "3c49550d-8c77-4788-bc2d-42586a261514", quizId: "3c49550d-8c77-4788-bc2d-42586a261514",
position: "bottomleft", selector: "#widget-container",
pulsation: true,
rounded: true,
}; };
export default function WidgetDev() { export default function WidgetDev() {
@ -32,6 +30,12 @@ export default function WidgetDev() {
> >
<Lorem /> <Lorem />
<Box id="widget-button"></Box> <Box id="widget-button"></Box>
<Box
id="widget-container"
sx={{
height: "500px",
}}
></Box>
<Lorem /> <Lorem />
<Lorem /> <Lorem />
<Lorem /> <Lorem />

@ -12,7 +12,7 @@ const WIDGET_DEFAULT_HEIGHT = "80%";
interface Props { interface Props {
quizId: string; quizId: string;
fixedSide?: "left" | "right"; fixedSide?: "left" | "right";
dimensions?: { width: string; height: string; }; dialogDimensions?: { width: string; height: string; };
/** /**
* Открыть квиз через X секунд, 0 - сразу * Открыть квиз через X секунд, 0 - сразу
*/ */
@ -31,7 +31,7 @@ export default function OpenQuizButton({
quizId, quizId,
fixedSide, fixedSide,
autoShowQuizTime = null, autoShowQuizTime = null,
dimensions, dialogDimensions,
hideOnMobile, hideOnMobile,
openOnLeaveAttempt, openOnLeaveAttempt,
buttonFlash = false, buttonFlash = false,
@ -128,8 +128,8 @@ export default function OpenQuizButton({
quizId={quizId} quizId={quizId}
onClose={() => setIsQuizShown(false)} onClose={() => setIsQuizShown(false)}
paperSx={{ paperSx={{
width: dimensions?.width ?? WIDGET_DEFAULT_WIDTH, width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT, height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
}} }}
/> />
</ThemeProvider> </ThemeProvider>

@ -9,7 +9,7 @@ const WIDGET_DEFAULT_HEIGHT = "80%";
interface Props { interface Props {
quizId: string; quizId: string;
dimensions?: { width: string; height: string; }; dialogDimensions?: { width: string; height: string; };
/** /**
* Открыть квиз через X секунд, 0 - сразу * Открыть квиз через X секунд, 0 - сразу
*/ */
@ -20,7 +20,7 @@ interface Props {
export default function QuizPopup({ export default function QuizPopup({
quizId, quizId,
dimensions, dialogDimensions,
autoShowQuizTime = null, autoShowQuizTime = null,
hideOnMobile = false, hideOnMobile = false,
openOnLeaveAttempt = false, openOnLeaveAttempt = false,
@ -70,8 +70,8 @@ export default function QuizPopup({
quizId={quizId} quizId={quizId}
onClose={() => setIsQuizShown(false)} onClose={() => setIsQuizShown(false)}
paperSx={{ paperSx={{
width: dimensions?.width ?? WIDGET_DEFAULT_WIDTH, width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT, height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
}} }}
/> />
); );

@ -17,7 +17,7 @@ interface Props {
position: "left" | "right"; position: "left" | "right";
buttonBackgroundColor?: string; buttonBackgroundColor?: string;
buttonTextColor?: string; buttonTextColor?: string;
dimensions?: { width: string; height: string; }; dialogDimensions?: { width: string; height: string; };
fullScreen?: boolean; fullScreen?: boolean;
buttonFlash?: boolean; buttonFlash?: boolean;
/** /**
@ -36,7 +36,7 @@ export default function QuizSideButton({
position, position,
buttonBackgroundColor, buttonBackgroundColor,
buttonTextColor, buttonTextColor,
dimensions, dialogDimensions,
fullScreen = false, fullScreen = false,
buttonFlash = false, buttonFlash = false,
autoOpenTime = 0, autoOpenTime = 0,
@ -87,9 +87,9 @@ export default function QuizSideButton({
bottom: PADDING, bottom: PADDING,
right: position === "right" ? PADDING : undefined, right: position === "right" ? PADDING : undefined,
left: position === "left" ? PADDING : undefined, left: position === "left" ? PADDING : undefined,
width: dimensions?.width ?? WIDGET_DEFAULT_WIDTH, width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
maxWidth: `calc(100% - ${PADDING * 2}px)`, maxWidth: `calc(100% - ${PADDING * 2}px)`,
height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT, height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
maxHeight: `calc(100% - ${PADDING * 2}px)`, maxHeight: `calc(100% - ${PADDING * 2}px)`,
}, },
(isMobile || fullScreen) && { (isMobile || fullScreen) && {