fix: post message queue doesn't work for modal/popup (#359)

* fix: set loaded to false when disable * fix: pass enabled * refactor: use state instead of ref * refactor: combine the useEffect
reearth · Nov 18, 2022 · abb4ed9 · abb4ed9
1 parent d025787
commit abb4ed9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/src/components/atoms/Plugin/PluginIFrame/hooks.ts b/src/components/atoms/Plugin/PluginIFrame/hooks.ts
@@ -14,12 +14,14 @@ export default function useHooks({
   ready,
   visible,
   type,
+  enabled,
   onRender,
 }: {
   ref?: ForwardedRef<Ref>;
   ready?: boolean;
   visible?: boolean;
   type?: string;
+  enabled?: boolean;
   onRender?: (type: string) => void;
 }) {
   const handleRender = useCallback(() => type && onRender?.(type), [type, onRender]);
@@ -33,6 +35,7 @@ export default function useHooks({
     reset,
   } = useIFrame({
     ready,
+    enabled,
     visible,
     onRender: handleRender,
   });

diff --git a/src/components/atoms/Plugin/PluginIFrame/index.tsx b/src/components/atoms/Plugin/PluginIFrame/index.tsx
@@ -48,7 +48,7 @@ const PluginIFrame: ForwardRefRenderFunction<Ref, Props> = (
     html,
     options,
     handleLoad,
-  } = useHooks({ ready, ref, visible, type, onRender });
+  } = useHooks({ ready, ref, visible, type, enabled, onRender });
 
   const children = (
     <>

diff --git a/src/components/atoms/Plugin/PluginIFrame/useIFrame.ts b/src/components/atoms/Plugin/PluginIFrame/useIFrame.ts
@@ -20,10 +20,12 @@ export type IFrameAPI = {
 
 export default function useIFrame({
   ready,
+  enabled,
   visible: iframeCanBeVisible,
   onRender,
 }: {
   ready?: boolean;
+  enabled?: boolean;
   visible?: boolean;
   onRender?: () => void;
 }) {
@@ -66,8 +68,8 @@ export default function useIFrame({
   }, [iframeCanBeVisible]);
 
   useEffect(() => {
-    if (!ready) setIFrameLoaded(false);
-  }, [ready]);
+    if (!ready || !enabled) setIFrameLoaded(false);
+  }, [ready, enabled]);
 
   return {
     ref,

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -1,5 +1,5 @@
 import { Options } from "quickjs-emscripten-sync";
-import { useCallback, useEffect, useMemo, useRef, MutableRefObject, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
 
 import type { API as IFrameAPI } from "@reearth/components/atoms/Plugin";
@@ -59,11 +59,11 @@ export default function ({
     extended: boolean | undefined,
   ) => void;
 }) {
-  const modalVisible = useRef<boolean>(false);
-  const popupVisible = useRef<boolean>(false);
   const externalRef = useRef<HTMLIFrameElement>(null);
 
   const [uiVisible, setUIVisibility] = useState<boolean>(!!visible);
+  const [modalVisible, setModalVisibility] = useState<boolean>(false);
+  const [popupVisible, setPopupVisibility] = useState<boolean>(false);
 
   const { staticExposed, isMarshalable, onPreInit, onDispose, onModalClose, onPopupClose } =
     useAPI({
@@ -86,9 +86,9 @@ export default function ({
 
   useEffect(() => {
     const visible = shownPluginModalInfo?.id === (widget?.id ?? block?.id);
-    if (modalVisible.current !== visible) {
-      modalVisible.current = visible;
-      if (!modalVisible.current) {
+    if (modalVisible !== visible) {
+      setModalVisibility(visible);
+      if (!visible) {
         onModalClose();
       }
     }
@@ -104,9 +104,9 @@ export default function ({
 
   useEffect(() => {
     const visible = shownPluginPopupInfo?.id === (widget?.id ?? block?.id);
-    if (popupVisible.current !== visible) {
-      popupVisible.current = visible;
-      if (!popupVisible.current) {
+    if (popupVisible !== visible) {
+      setPopupVisibility(visible);
+      if (!visible) {
         onPopupClose();
       }
     }
@@ -137,8 +137,8 @@ export default function ({
     src,
     isMarshalable,
     uiVisible,
-    modalVisible: modalVisible.current,
-    popupVisible: popupVisible.current,
+    modalVisible,
+    popupVisible,
     externalRef,
     exposed: staticExposed,
     onError,
@@ -171,8 +171,8 @@ export function useAPI({
   layer: Layer | undefined;
   block: Block | undefined;
   widget: Widget | undefined;
-  modalVisible?: MutableRefObject<boolean>;
-  popupVisible?: MutableRefObject<boolean>;
+  modalVisible?: boolean;
+  popupVisible?: boolean;
   externalRef: RefObject<HTMLIFrameElement> | undefined;
   onPluginModalShow?: (modalInfo?: PluginModalInfo) => void;
   onPluginPopupShow?: (popupInfo?: PluginPopupInfo) => void;
@@ -246,13 +246,14 @@ export function useAPI({
     event.current?.[1]("close");
     event.current?.[2]?.();
     event.current = undefined;
-    if (modalVisible?.current) {
+    if (modalVisible) {
       onPluginModalShow?.();
     }
-    if (popupVisible?.current) {
+    if (popupVisible) {
       onPluginPopupShow?.();
     }
-  }, [modalVisible, onPluginModalShow, popupVisible, onPluginPopupShow]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onPluginModalShow, onPluginPopupShow]);
 
   const isMarshalable = useCallback(
     (target: any) => defaultIsMarshalable(target) || !!ctx?.reearth.layers.isLayer(target),