Fix generated code
This commit is contained in:
parent
cf9aec654d
commit
3bca49804d
|
@ -44,7 +44,12 @@ type PreviewState = {
|
||||||
height: string;
|
height: string;
|
||||||
};
|
};
|
||||||
theme: Theme;
|
theme: Theme;
|
||||||
floatingPopup: Record<string, string | boolean | undefined>;
|
floatingPopup: {
|
||||||
|
config: {
|
||||||
|
layout: BookerLayouts;
|
||||||
|
};
|
||||||
|
[key: string]: string | boolean | undefined | Record<string, string>;
|
||||||
|
};
|
||||||
elementClick: Record<string, string>;
|
elementClick: Record<string, string>;
|
||||||
palette: {
|
palette: {
|
||||||
brandColor: string;
|
brandColor: string;
|
||||||
|
@ -175,14 +180,16 @@ const Codes: Record<string, Record<string, (...args: any[]) => string>> = {
|
||||||
return code`
|
return code`
|
||||||
import Cal, { getCalApi } from "@calcom/embed-react";
|
import Cal, { getCalApi } from "@calcom/embed-react";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
function MyComponent() {
|
export default function MyApp() {
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
(async function () {
|
(async function () {
|
||||||
const cal = await getCalApi();
|
const cal = await getCalApi();
|
||||||
${uiInstructionCode}
|
${uiInstructionCode}
|
||||||
})();
|
})();
|
||||||
}, [])
|
}, [])
|
||||||
return <Cal calLink="${calLink}" style={{width:"${width}",height:"${height}",overflow:"scroll"}} />;
|
return <Cal calLink="${calLink}" ${
|
||||||
|
previewState.layout ? "config={{layout: '" + previewState.layout + "'}}" : ""
|
||||||
|
} style={{width:"${width}",height:"${height}",overflow:"scroll"}} />;
|
||||||
};`;
|
};`;
|
||||||
},
|
},
|
||||||
"floating-popup": ({
|
"floating-popup": ({
|
||||||
|
@ -205,7 +212,15 @@ function MyComponent() {
|
||||||
}, [])
|
}, [])
|
||||||
};`;
|
};`;
|
||||||
},
|
},
|
||||||
"element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
|
"element-click": ({
|
||||||
|
calLink,
|
||||||
|
uiInstructionCode,
|
||||||
|
previewState,
|
||||||
|
}: {
|
||||||
|
calLink: string;
|
||||||
|
uiInstructionCode: string;
|
||||||
|
previewState: PreviewState;
|
||||||
|
}) => {
|
||||||
return code`
|
return code`
|
||||||
import Cal, { getCalApi } from "@calcom/embed-react";
|
import Cal, { getCalApi } from "@calcom/embed-react";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
@ -216,15 +231,26 @@ function MyComponent() {
|
||||||
${uiInstructionCode}
|
${uiInstructionCode}
|
||||||
})();
|
})();
|
||||||
}, [])
|
}, [])
|
||||||
return <button data-cal-link="${calLink}" />;
|
return <button data-cal-link="${calLink}" ${`data-cal-config='${JSON.stringify({
|
||||||
|
layout: previewState.layout,
|
||||||
|
})}'`} />;
|
||||||
};`;
|
};`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
HTML: {
|
HTML: {
|
||||||
inline: ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
|
inline: ({
|
||||||
|
calLink,
|
||||||
|
uiInstructionCode,
|
||||||
|
previewState,
|
||||||
|
}: {
|
||||||
|
calLink: string;
|
||||||
|
uiInstructionCode: string;
|
||||||
|
previewState: PreviewState;
|
||||||
|
}) => {
|
||||||
return code`Cal("inline", {
|
return code`Cal("inline", {
|
||||||
elementOrSelector:"#my-cal-inline",
|
elementOrSelector:"#my-cal-inline",
|
||||||
calLink: "${calLink}"
|
calLink: "${calLink}",
|
||||||
|
layout: "${previewState.layout}"
|
||||||
});
|
});
|
||||||
|
|
||||||
${uiInstructionCode}`;
|
${uiInstructionCode}`;
|
||||||
|
@ -240,8 +266,22 @@ ${uiInstructionCode}`;
|
||||||
return code`Cal("floatingButton", ${floatingButtonArg});
|
return code`Cal("floatingButton", ${floatingButtonArg});
|
||||||
${uiInstructionCode}`;
|
${uiInstructionCode}`;
|
||||||
},
|
},
|
||||||
"element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
|
"element-click": ({
|
||||||
return code`// Important: Make sure to add \`data-cal-link="${calLink}"\` attribute to the element you want to open Cal on click
|
calLink,
|
||||||
|
uiInstructionCode,
|
||||||
|
previewState,
|
||||||
|
}: {
|
||||||
|
calLink: string;
|
||||||
|
uiInstructionCode: string;
|
||||||
|
previewState: PreviewState;
|
||||||
|
}) => {
|
||||||
|
return code`
|
||||||
|
// Important: Please add following attributes to the element you want to open Cal on click
|
||||||
|
// \`data-cal-link="${calLink}"\`
|
||||||
|
// \`data-cal-config='${JSON.stringify({
|
||||||
|
layout: previewState.layout,
|
||||||
|
})}'\`
|
||||||
|
|
||||||
${uiInstructionCode}`;
|
${uiInstructionCode}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -710,13 +750,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
height: "100%",
|
height: "100%",
|
||||||
},
|
},
|
||||||
theme: Theme.auto,
|
theme: Theme.auto,
|
||||||
|
layout: BookerLayouts.MONTH_VIEW,
|
||||||
floatingPopup: {},
|
floatingPopup: {},
|
||||||
elementClick: {},
|
elementClick: {},
|
||||||
hideEventTypeDetails: false,
|
hideEventTypeDetails: false,
|
||||||
palette: {
|
palette: {
|
||||||
brandColor: "#000000",
|
brandColor: "#000000",
|
||||||
},
|
},
|
||||||
layout: BookerLayouts.MONTH_VIEW,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
|
@ -778,8 +818,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
name: "ui",
|
name: "ui",
|
||||||
arg: {
|
arg: {
|
||||||
theme: previewState.theme,
|
theme: previewState.theme,
|
||||||
hideEventTypeDetails: previewState.hideEventTypeDetails,
|
|
||||||
layout: previewState.layout,
|
layout: previewState.layout,
|
||||||
|
hideEventTypeDetails: previewState.hideEventTypeDetails,
|
||||||
styles: {
|
styles: {
|
||||||
branding: {
|
branding: {
|
||||||
...previewState.palette,
|
...previewState.palette,
|
||||||
|
@ -1102,8 +1142,15 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setPreviewState((previewState) => {
|
setPreviewState((previewState) => {
|
||||||
|
const config = {
|
||||||
|
...previewState.floatingPopup.config,
|
||||||
|
layout: option.value,
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
...previewState,
|
...previewState,
|
||||||
|
floatingPopup: {
|
||||||
|
config,
|
||||||
|
},
|
||||||
layout: option.value,
|
layout: option.value,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user