Do not trigger modal actions when not visible (#562)

Right now we're running useEffect block which runs getExportCanvasPreview on every state update, even if the modal is not visible (eg: when moving the mouse around!). This puts the modal code in its own component so that it doesn't trigger useEffect when not visible.

The code isn't very elegant as we're forwarding all the props, there's likely a better way to handle it (if anyone is interested, PR would be appreciated), but at least now it no longer double renders the scene.

Fixes #559

src/components/ExportDialog.tsx

@@ -28,7 +28,7 @@ type ExportCB = (
   scale?: number,
 ) => void;
 
-export function ExportDialog({
+function ExportModal({
   elements,
   appState,
   exportPadding = 10,
@@ -37,6 +37,7 @@ export function ExportDialog({
   onExportToPng,
   onExportToClipboard,
   onExportToBackend,
+  onCloseRequest,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
@@ -46,10 +47,10 @@ export function ExportDialog({
   onExportToPng: ExportCB;
   onExportToClipboard: ExportCB;
   onExportToBackend: ExportCB;
+  onCloseRequest: () => void;
 }) {
   const { t } = useTranslation();
   const someElementIsSelected = elements.some(element => element.isSelected);
-  const [modalIsShown, setModalIsShown] = useState(false);
   const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
@@ -76,7 +77,6 @@ export function ExportDialog({
       previewNode?.removeChild(canvas);
     };
   }, [
-    modalIsShown,
     exportedElements,
     exportBackground,
     exportPadding,
@@ -84,25 +84,10 @@ export function ExportDialog({
     scale,
   ]);
 
-  function handleClose() {
-    setModalIsShown(false);
-    setExportSelected(someElementIsSelected);
-  }
-
   return (
-    <>
-      <ToolButton
-        onClick={() => setModalIsShown(true)}
-        icon={exportFile}
-        type="button"
-        aria-label="Show export dialog"
-        title={t("buttons.export")}
-      />
-      {modalIsShown && (
-        <Modal maxWidth={640} onCloseRequest={handleClose}>
     <div className="ExportDialog__dialog">
       <Island padding={4}>
-              <button className="ExportDialog__close" onClick={handleClose}>
+        <button className="ExportDialog__close" onClick={onCloseRequest}>
           ╳
         </button>
         <h2>{t("buttons.export")}</h2>
@@ -122,9 +107,7 @@ export function ExportDialog({
                 icon={clipboard}
                 title={t("buttons.copyToClipboard")}
                 aria-label={t("buttons.copyToClipboard")}
-                      onClick={() =>
-                        onExportToClipboard(exportedElements, scale)
-                      }
+                onClick={() => onExportToClipboard(exportedElements, scale)}
               />
             )}
             <ToolButton
@@ -174,9 +157,7 @@ export function ExportDialog({
                   <input
                     type="checkbox"
                     checked={exportSelected}
-                          onChange={e =>
-                            setExportSelected(e.currentTarget.checked)
-                          }
+                    onChange={e => setExportSelected(e.currentTarget.checked)}
                   />{" "}
                   {t("labels.onlySelected")}
                 </label>
@@ -186,6 +167,53 @@ export function ExportDialog({
         </div>
       </Island>
     </div>
+  );
+}
+
+export function ExportDialog({
+  elements,
+  appState,
+  exportPadding = 10,
+  actionManager,
+  syncActionResult,
+  onExportToPng,
+  onExportToClipboard,
+  onExportToBackend,
+}: {
+  appState: AppState;
+  elements: readonly ExcalidrawElement[];
+  exportPadding?: number;
+  actionManager: ActionsManagerInterface;
+  syncActionResult: UpdaterFn;
+  onExportToPng: ExportCB;
+  onExportToClipboard: ExportCB;
+  onExportToBackend: ExportCB;
+}) {
+  const { t } = useTranslation();
+  const [modalIsShown, setModalIsShown] = useState(false);
+
+  return (
+    <>
+      <ToolButton
+        onClick={() => setModalIsShown(true)}
+        icon={exportFile}
+        type="button"
+        aria-label="Show export dialog"
+        title={t("buttons.export")}
+      />
+      {modalIsShown && (
+        <Modal maxWidth={640} onCloseRequest={() => setModalIsShown(false)}>
+          <ExportModal
+            elements={elements}
+            appState={appState}
+            exportPadding={exportPadding}
+            actionManager={actionManager}
+            syncActionResult={syncActionResult}
+            onExportToPng={onExportToPng}
+            onExportToClipboard={onExportToClipboard}
+            onExportToBackend={onExportToBackend}
+            onCloseRequest={() => setModalIsShown(false)}
+          />
         </Modal>
       )}
     </>