rename widget components dimensions prop to dialogDimensions
This commit is contained in:
parent
aebf66eba4
commit
2375f81b48
@ -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) && {
|
||||||
|
Loading…
Reference in New Issue
Block a user