2022-05-18 04:11:06 +00:00
|
|
|
/* eslint-disable prefer-const */
|
2022-03-31 08:45:47 +00:00
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
|
|
|
|
import useEmbed from "./useEmbed";
|
|
|
|
|
2022-06-09 05:05:18 +00:00
|
|
|
type CalProps = {
|
2022-04-14 02:47:34 +00:00
|
|
|
calOrigin?: string;
|
2022-03-31 08:45:47 +00:00
|
|
|
calLink: string;
|
2022-10-14 10:10:54 +00:00
|
|
|
initConfig?: {
|
|
|
|
debug?: boolean;
|
|
|
|
uiDebug?: boolean;
|
|
|
|
};
|
2022-03-31 08:45:47 +00:00
|
|
|
config?: any;
|
|
|
|
embedJsUrl?: string;
|
2022-06-09 05:05:18 +00:00
|
|
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
|
|
|
|
|
|
const Cal = function Cal(props: CalProps) {
|
2022-10-14 10:10:54 +00:00
|
|
|
const { calLink, calOrigin, config, initConfig = {}, embedJsUrl, ...restProps } = props;
|
2022-04-25 04:33:00 +00:00
|
|
|
if (!calLink) {
|
|
|
|
throw new Error("calLink is required");
|
|
|
|
}
|
|
|
|
const initializedRef = useRef(false);
|
2022-03-31 08:45:47 +00:00
|
|
|
const Cal = useEmbed(embedJsUrl);
|
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
2022-04-25 04:33:00 +00:00
|
|
|
if (!Cal || initializedRef.current) {
|
2022-03-31 08:45:47 +00:00
|
|
|
return;
|
|
|
|
}
|
2022-04-25 04:33:00 +00:00
|
|
|
initializedRef.current = true;
|
2022-04-14 02:47:34 +00:00
|
|
|
const element = ref.current;
|
2022-10-14 10:10:54 +00:00
|
|
|
Cal("init", {
|
|
|
|
...initConfig,
|
|
|
|
origin: calOrigin,
|
|
|
|
});
|
2022-03-31 08:45:47 +00:00
|
|
|
Cal("inline", {
|
2022-04-14 02:47:34 +00:00
|
|
|
elementOrSelector: element,
|
2022-03-31 08:45:47 +00:00
|
|
|
calLink,
|
|
|
|
config,
|
|
|
|
});
|
2022-10-14 10:10:54 +00:00
|
|
|
}, [Cal, calLink, config, calOrigin, initConfig]);
|
2022-03-31 08:45:47 +00:00
|
|
|
|
|
|
|
if (!Cal) {
|
2022-10-14 10:10:54 +00:00
|
|
|
return null;
|
2022-03-31 08:45:47 +00:00
|
|
|
}
|
|
|
|
|
2022-07-23 00:39:50 +00:00
|
|
|
return <div ref={ref} {...restProps} />;
|
2022-06-09 05:05:18 +00:00
|
|
|
};
|
|
|
|
export default Cal;
|