diff --git a/src/App.tsx b/src/App.tsx index 4099bb3..06cbd06 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -57,7 +57,7 @@ function App() { }} onOpen={(dimensions) => { setFrameSize(dimensions); - open(dimensions); + open(); }} onResize={(dimensions) => { setFrameSize(dimensions); diff --git a/src/components/IframeGuard/index.tsx b/src/components/IframeGuard/index.tsx index 30e3b37..7e29b67 100644 --- a/src/components/IframeGuard/index.tsx +++ b/src/components/IframeGuard/index.tsx @@ -13,6 +13,7 @@ export const IframeGuard: FC = ({ }) => { const [isIframe, setIsIframe] = useState(false); const close = useLayoutStore((store) => store.close); + const hasMounted = useRef(false); useEffect(() => { @@ -24,7 +25,6 @@ export const IframeGuard: FC = ({ useEffect(() => { if (!hasMounted.current) { parentDispatch(WIDGET_IFRAME_IS_READY_ACTION); - close(); hasMounted.current = true; } }, [close]); diff --git a/src/store/layout.ts b/src/store/layout.ts index d31f80d..f5a2277 100644 --- a/src/store/layout.ts +++ b/src/store/layout.ts @@ -17,7 +17,7 @@ export enum LayoutState { interface LayoutStore { state: LayoutState; frameSize: WindowDimensions; - open: (dimensions: WindowDimensions) => void; + open: () => void; setFrameSize: (dimensions: WindowDimensions) => void; close: () => void; } @@ -28,24 +28,29 @@ const DEFAULT_FRAME_WIDTH = 400; const DEFAULT_FRAME_HEIGHT = 300; const FRAME_MARGIN_X = 48; -export const useLayoutStore = create()((set) => { +function getFrameSize(dimensions: WindowDimensions) { + return { + width: + dimensions.width - FRAME_MARGIN_X < DEFAULT_FRAME_WIDTH + ? dimensions.width - FRAME_MARGIN_X + : DEFAULT_FRAME_WIDTH, + height: DEFAULT_FRAME_HEIGHT, + }; +} + +export const useLayoutStore = create()((set, get) => { return { state: LayoutState.CLOSED, frameSize: { width: DEFAULT_FRAME_WIDTH, height: DEFAULT_FRAME_HEIGHT }, setFrameSize: (parentDimensions: WindowDimensions) => { - const frameSize = { - width: - parentDimensions.width - FRAME_MARGIN_X < DEFAULT_FRAME_WIDTH - ? parentDimensions.width - FRAME_MARGIN_X - : DEFAULT_FRAME_WIDTH, - height: DEFAULT_FRAME_HEIGHT, - }; + const frameSize = getFrameSize(parentDimensions); set({ frameSize }); parentDispatch(RESIZE_FRAME_ACTION(frameSize)); }, - open: (dimensions: WindowDimensions) => { + open: () => { clearTimeout(timeout); - parentDispatch(RESIZE_FRAME_ACTION(dimensions)); + const frameSize = get().frameSize; + parentDispatch(RESIZE_FRAME_ACTION(frameSize)); parentDispatch(EXPAND_WIDGET_ACTION); return set({ state: LayoutState.OPEN }); }, diff --git a/src/views/Views.tsx b/src/views/Views.tsx index 5f17a68..17e8ab4 100644 --- a/src/views/Views.tsx +++ b/src/views/Views.tsx @@ -14,7 +14,6 @@ export const Views: FC = () => { const layoutState = useLayoutStore((store) => store.state); const open = useLayoutStore((store) => store.open); const close = useLayoutStore((store) => store.close); - const frameSize = useLayoutStore((store) => store.frameSize); const { connect, disconnect, status, error } = useVoice(); @@ -24,7 +23,7 @@ export const Views: FC = () => { { - open(frameSize); + open(); }} />