Move export dialog to async-components

src/utils/exportUtils/Exporter.ts

@@ -22,7 +22,6 @@ import { decryptFile } from "../DecryptFile";
 import { mediaFromContent } from "../../customisations/Media";
 import { formatFullDateNoDay } from "../../DateUtils";
 import { Direction, MatrixClient } from "matrix-js-sdk";
-import { MutableRefObject } from "react";
 import JSZip from "jszip";
 import { saveAs } from "file-saver";
 import { _t } from "../../languageHandler";
@@ -41,7 +40,7 @@ export default abstract class Exporter {
         protected room: Room,
         protected exportType: ExportType,
         protected exportOptions: IExportOptions,
-        protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        protected setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
         if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
             exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
@@ -60,7 +59,7 @@ export default abstract class Exporter {
 
     protected updateProgress(progress: string, log = true, show = true): void {
         if (log) console.log(progress);
-        if (show && this.exportProgressRef.current) this.exportProgressRef.current.innerText = progress;
+        if (show) this.setProgressText(progress);
     }
 
     protected addFile(filePath: string, blob: Blob): void {

src/utils/exportUtils/HtmlExport.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject } from "react";
+import React from "react";
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -47,9 +47,9 @@ export default class HTMLExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
         this.avatars = new Map<string, boolean>();
         this.permalinkCreator = new RoomPermalinkCreator(this.room);
         this.totalSize = 0;

src/utils/exportUtils/JSONExport.ts

@@ -32,9 +32,9 @@ export default class JSONExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
     }
 
     protected createJSONString(): string {

src/utils/exportUtils/PlainTextExport.ts

@@ -33,9 +33,9 @@ export default class PlainTextExporter extends Exporter {
         room: Room,
         exportType: ExportType,
         exportOptions: IExportOptions,
-        exportProgressRef: MutableRefObject<HTMLParagraphElement>,
+        setProgressText: React.Dispatch<React.SetStateAction<string>>,
     ) {
-        super(room, exportType, exportOptions, exportProgressRef);
+        super(room, exportType, exportOptions, setProgressText);
         this.totalSize = 0;
         this.mediaOmitText = !this.exportOptions.attachmentsIncluded
             ? _t("Media omitted")

src/utils/exportUtils/exportCSS.ts

@@ -101,28 +101,16 @@ const getExportCSS = async (): Promise<string> => {
     from {bottom: 30px; opacity: 1;}
     to {bottom: 0; opacity: 0;}
   }
-  
-  .mx_MFileBody_info .mx_MFileBody_info_icon img.mx_export_attach_icon {
-    content: '';
-    background-color: ${theme == 'light' ? "#ffffff": "inherit"};
-    width: 13px;
-    height: 15px;
-    position: absolute;
-    top: 8px;
-    left: 9px;
-  }
-  
+
   * {
     scroll-behavior: smooth !important;
   }
   
-  
   .mx_Export_EventWrapper:target {
     background: ${theme == 'light' ? "white" : "#15191E"};
     animation: mx_event_highlight_animation 2s linear;
   }
   
-  
   @keyframes mx_event_highlight_animation {
     0%,100% {
       background: ${theme == 'light' ? "white" : "#15191E"};
@@ -131,26 +119,16 @@ const getExportCSS = async (): Promise<string> => {
       background: ${theme == 'light' ? "#e3e2df" : "#21262c"};
     }
   }
-  
+
   .mx_ReplyThread_Export {
     margin-top: -5px;
     margin-bottom: 5px;
   }
-  
-  .mx_RedactedBody img.mx_export_trash_icon {
-    height: 14px;
-    width: 14px;
-    background-color: ${theme == 'light' ? "#ffffff": "inherit"};
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 0;
-  }
 
   .mx_RedactedBody {
     padding-left: unset;
   }
-  
+
   img {
     white-space: nowrap;
     overflow: hidden;