embed-provider.tsxβ’2.34 kB
import React, { createContext, useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';
type EmbeddingState = {
isEmbedded: boolean;
hideSideNav: boolean;
prefix: string;
hideLogoInBuilder: boolean;
disableNavigationInBuilder: boolean;
hideFolders: boolean;
hideFlowNameInBuilder: boolean;
hideExportAndImportFlow: boolean;
sdkVersion?: string;
predefinedConnectionName?: string;
fontUrl?: string;
fontFamily?: string;
useDarkBackground: boolean;
hideHomeButtonInBuilder: boolean;
emitHomeButtonClickedEvent: boolean;
};
const defaultState: EmbeddingState = {
isEmbedded: false,
hideSideNav: false,
hideLogoInBuilder: false,
prefix: '',
disableNavigationInBuilder: false,
hideFolders: false,
hideFlowNameInBuilder: false,
hideExportAndImportFlow: false,
useDarkBackground: window.opener !== null,
hideHomeButtonInBuilder: false,
emitHomeButtonClickedEvent: false,
};
const EmbeddingContext = createContext<{
embedState: EmbeddingState;
setEmbedState: React.Dispatch<React.SetStateAction<EmbeddingState>>;
}>({
embedState: defaultState,
setEmbedState: () => {},
});
export const useEmbedding = () => useContext(EmbeddingContext);
export const useNewWindow = () => {
const { embedState } = useEmbedding();
const navigate = useNavigate();
if (embedState.isEmbedded) {
return (route: string, searchParams?: string) =>
navigate({
pathname: route,
search: searchParams,
});
} else {
return (route: string, searchParams?: string) =>
window.open(
`${route}${searchParams ? '?' + searchParams : ''}`,
'_blank',
'noopener noreferrer',
);
}
};
type EmbeddingProviderProps = {
children: React.ReactNode;
};
const EmbeddingProvider = ({ children }: EmbeddingProviderProps) => {
const [state, setState] = useState<EmbeddingState>(defaultState);
return (
<EmbeddingContext.Provider
value={{ embedState: state, setEmbedState: setState }}
>
<div
className={cn({
'bg-black/80 h-screen w-screen': state.useDarkBackground,
})}
>
{children}
</div>
</EmbeddingContext.Provider>
);
};
EmbeddingProvider.displayName = 'EmbeddingProvider';
export { EmbeddingProvider };