commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.3k Packages Projects Releases Wiki Activity

fix: Flicker b/w Dark and Light theme (#16042)

Browse Source
This commit is contained in:
Hariom Balhara
2024-08-29 13:14:12 -07:00
committed by GitHub
parent ad5d645347
commit 1a0448910b
5 changed files with 117 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/embed/Embed.tsx
+36 -6
View File
@@ -575,15 +575,23 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true);
const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true);
const defaultConfig = {
layout: BookerLayouts.MONTH_VIEW,
};
const [previewState, setPreviewState] = useState<PreviewState>({
inline: {
width: "100%",
height: "100%",
},
config: defaultConfig,
} as PreviewState["inline"],
theme: Theme.auto,
layout: BookerLayouts.MONTH_VIEW,
floatingPopup: {},
elementClick: {},
layout: defaultConfig.layout,
floatingPopup: {
config: defaultConfig,
} as PreviewState["floatingPopup"],
elementClick: {
config: defaultConfig,
} as PreviewState["elementClick"],
hideEventTypeDetails: false,
palette: {
brandColor: "#000000",
@@ -707,11 +715,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
const FloatingPopupPositionOptions = [
{
value: "bottom-right",
value: "bottom-right" as const,
label: "Bottom right",
},
{
value: "bottom-left",
value: "bottom-left" as const,
label: "Bottom left",
},
];
@@ -941,6 +949,27 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
setPreviewState((previewState) => {
return {
...previewState,
inline: {
...previewState.inline,
config: {
...(previewState.inline.config ?? {}),
theme: option.value,
},
},
floatingPopup: {
...previewState.floatingPopup,
config: {
...(previewState.floatingPopup.config ?? {}),
theme: option.value,
},
},
elementClick: {
...previewState.elementClick,
config: {
...(previewState.elementClick.config ?? {}),
theme: option.value,
},
},
theme: option.value,
};
});
@@ -1005,6 +1034,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
return {
...previewState,
floatingPopup: {
...previewState.floatingPopup,
config,
},
layout: option.value,
packages/features/embed/lib/EmbedCodes.tsx
+32 -21
View File
@@ -23,12 +23,12 @@ export const Codes = {
}: {
calLink: string;
uiInstructionCode: string;
previewState: PreviewState;
previewState: PreviewState["inline"];
embedCalOrigin: string;
namespace: string;
}) => {
const width = getDimension(previewState.inline.width);
const height = getDimension(previewState.inline.height);
const width = getDimension(previewState.width);
const height = getDimension(previewState.height);
const namespaceProp = `${namespace ? `namespace="${namespace}"` : ""}`;
const argumentForGetCalApi = getArgumentForGetCalApi(namespace);
return code`
@@ -44,22 +44,31 @@ export const Codes = {
return <Cal ${namespaceProp}
calLink="${calLink}"
style={{width:"${width}",height:"${height}",overflow:"scroll"}}
${previewState.layout ? `config={{layout: '${previewState.layout}'}}` : ""}
config={${JSON.stringify(previewState.config)}}
${doWeNeedCalOriginProp(embedCalOrigin) ? ` calOrigin="${embedCalOrigin}"` : ""}
${IS_SELF_HOSTED ? `embedJsUrl="${embedLibUrl}"` : ""}
/>;
};`;
},
"floating-popup": ({
floatingButtonArg,
calLink,
uiInstructionCode,
previewState,
embedCalOrigin,
namespace,
}: {
floatingButtonArg: string;
calLink: string;
embedCalOrigin: string;
uiInstructionCode: string;
namespace: string;
previewState: PreviewState["floatingPopup"];
}) => {
const argumentForGetCalApi = getArgumentForGetCalApi(namespace);
const floatingButtonArg = JSON.stringify({
calLink,
...(doWeNeedCalOriginProp(embedCalOrigin) ? { calOrigin: embedCalOrigin } : null),
...previewState,
});
return code`
import { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";
@@ -82,7 +91,7 @@ export const Codes = {
}: {
calLink: string;
uiInstructionCode: string;
previewState: PreviewState;
previewState: PreviewState["elementClick"];
embedCalOrigin: string;
namespace: string;
}) => {
@@ -100,9 +109,7 @@ export const Codes = {
return <button data-cal-namespace="${namespace}"
data-cal-link="${calLink}"
${doWeNeedCalOriginProp(embedCalOrigin) ? ` data-cal-origin="${embedCalOrigin}"` : ""}
${`data-cal-config='${JSON.stringify({
layout: previewState.layout,
})}'`}
${`data-cal-config='${JSON.stringify(previewState.config)}'`}
>Click me</button>;
};`;
},
@@ -116,31 +123,37 @@ export const Codes = {
}: {
calLink: string;
uiInstructionCode: string;
previewState: PreviewState;
previewState: PreviewState["inline"];
namespace: string;
}) => {
return code`${getApiNameForVanillaJsSnippet({ namespace, mainApiName: "Cal" })}("inline", {
elementOrSelector:"#my-cal-inline",
calLink: "${calLink}",
layout: "${previewState.layout}"
elementOrSelector:"#my-cal-inline",
config: ${JSON.stringify(previewState.config)},
calLink: "${calLink}",
});
${uiInstructionCode}`;
},
"floating-popup": ({
floatingButtonArg,
calLink,
uiInstructionCode,
previewState,
namespace,
}: {
floatingButtonArg: string;
calLink: string;
uiInstructionCode: string;
previewState: PreviewState["floatingPopup"];
namespace: string;
}) => {
const floatingButtonArg = JSON.stringify({
calLink,
...previewState,
});
return code`${getApiNameForVanillaJsSnippet({
namespace,
mainApiName: "Cal",
})}("floatingButton", ${floatingButtonArg});
})}("floatingButton", ${floatingButtonArg});
${uiInstructionCode}`;
},
"element-click": ({
@@ -151,16 +164,14 @@ export const Codes = {
}: {
calLink: string;
uiInstructionCode: string;
previewState: PreviewState;
previewState: PreviewState["elementClick"];
namespace: string;
}) => {
return code`
// Important: Please add the following attributes to the element that should trigger the calendar to open upon clicking.
// \`data-cal-link="${calLink}"\`
// data-cal-namespace="${namespace}"
// \`data-cal-config='${JSON.stringify({
layout: previewState.layout,
})}'\`
// \`data-cal-config='${JSON.stringify(previewState.config)}'\`
${uiInstructionCode}`;
},
packages/features/embed/lib/EmbedTabs.tsx
+15 -19
View File
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TextArea } from "@calcom/ui";
import type { EmbedFramework, EmbedType, PreviewState } from "../types";
import { Codes, doWeNeedCalOriginProp } from "./EmbedCodes";
import { Codes } from "./EmbedCodes";
import { embedLibUrl, EMBED_PREVIEW_HTML_URL } from "./constants";
import { getApiNameForReactSnippet, getApiNameForVanillaJsSnippet } from "./getApiName";
import { getDimension } from "./getDimension";
@@ -199,32 +199,28 @@ const getEmbedTypeSpecificString = ({
if (!frameworkCodes[embedType]) {
throw new Error(`Code not available for framework:${embedFramework} and embedType:${embedType}`);
}
const codeGeneratorInput = {
calLink,
uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
embedCalOrigin,
namespace,
};
if (embedType === "inline") {
return frameworkCodes[embedType]({
calLink,
uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
previewState,
embedCalOrigin,
namespace,
...codeGeneratorInput,
previewState: previewState.inline,
});
} else if (embedType === "floating-popup") {
const floatingButtonArg = {
calLink,
...(doWeNeedCalOriginProp(embedCalOrigin) ? { calOrigin: embedCalOrigin } : null),
...previewState.floatingPopup,
};
return frameworkCodes[embedType]({
namespace,
floatingButtonArg: JSON.stringify(floatingButtonArg),
uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
...codeGeneratorInput,
previewState: previewState.floatingPopup,
});
} else if (embedType === "element-click") {
return frameworkCodes[embedType]({
namespace,
calLink,
uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
previewState,
embedCalOrigin,
...codeGeneratorInput,
previewState: previewState.elementClick,
});
}
return "";
packages/features/embed/types/index.d.ts
Vendored
+31 -11
View File
@@ -1,20 +1,40 @@
import type { Brand } from "@calcom/types/utils";
import type { tabs } from "../lib/EmbedTabs";
import type { useEmbedTypes } from "../lib/hooks";
export type EmbedType = "inline" | "floating-popup" | "element-click" | "email";
type EmbedConfig = {
layout?: BookerLayouts;
theme?: Theme;
};
export type PreviewState = {
inline: {
width: string;
height: string;
};
inline: Brand<
{
width: string;
height: string;
config?: EmbedConfig;
},
"inline"
>;
theme: Theme;
floatingPopup: {
config?: {
layout: BookerLayouts;
};
[key: string]: string | boolean | undefined | Record<string, string>;
};
elementClick: Record<string, string>;
floatingPopup: Brand<
{
config?: EmbedConfig;
hideButtonIcon?: boolean;
buttonPosition?: "bottom-left" | "bottom-right";
buttonColor?: string;
buttonTextColor?: string;
},
"floating-popup"
>;
elementClick: Brand<
{
config?: EmbedConfig;
},
"element-click"
>;
palette: {
brandColor: string;
};
packages/types/utils.d.ts
Vendored
+3
View File
@@ -15,3 +15,6 @@ export type ValuesType<T extends ReadonlyArray<unknown> | ArrayLike<unknown> | R
: T extends object
? T[keyof T]
: never;
declare const brand: unique symbol;
export type Brand<T, TBrand> = T & { [brand]: TBrand };