2
0
Files
cal/calcom/packages/embeds/embed-react/src/Cal.tsx
2024-08-09 00:39:27 +02:00

65 lines
1.5 KiB
TypeScript

"use client";
import { useEffect, useRef } from "react";
import type { PrefillAndIframeAttrsConfig } from "@calcom/embed-core";
import useEmbed from "./useEmbed";
type CalProps = {
calOrigin?: string;
calLink: string;
initConfig?: {
debug?: boolean;
uiDebug?: boolean;
};
namespace?: string;
config?: PrefillAndIframeAttrsConfig;
embedJsUrl?: string;
} & React.HTMLAttributes<HTMLDivElement>;
const Cal = function Cal(props: CalProps) {
const { calLink, calOrigin, namespace = "", config, initConfig = {}, embedJsUrl, ...restProps } = props;
if (!calLink) {
throw new Error("calLink is required");
}
const initializedRef = useRef(false);
const Cal = useEmbed(embedJsUrl);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!Cal || initializedRef.current || !ref.current) {
return;
}
initializedRef.current = true;
const element = ref.current;
if (namespace) {
Cal("init", namespace, {
...initConfig,
origin: calOrigin,
});
Cal.ns[namespace]("inline", {
elementOrSelector: element,
calLink,
config,
});
} else {
Cal("init", {
...initConfig,
origin: calOrigin,
});
Cal("inline", {
elementOrSelector: element,
calLink,
config,
});
}
}, [Cal, calLink, config, namespace, calOrigin, initConfig]);
if (!Cal) {
return null;
}
return <div ref={ref} {...restProps} />;
};
export default Cal;