From 31c9e5962cc52cc1e4672a81ddb4b0a618d83a44 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Sat, 14 Aug 2021 00:03:02 +0530 Subject: [PATCH] Move export dialog to async-components --- .../views/dialogs/ExportDialog.tsx | 30 +++++++++---------- .../views/right_panel/RoomSummaryCard.tsx | 3 +- src/utils/exportUtils/Exporter.ts | 5 ++-- src/utils/exportUtils/HtmlExport.tsx | 6 ++-- src/utils/exportUtils/JSONExport.ts | 4 +-- src/utils/exportUtils/PlainTextExport.ts | 4 +-- src/utils/exportUtils/exportCSS.ts | 28 ++--------------- 7 files changed, 28 insertions(+), 52 deletions(-) rename src/{components => async-components}/views/dialogs/ExportDialog.tsx (93%) diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx similarity index 93% rename from src/components/views/dialogs/ExportDialog.tsx rename to src/async-components/views/dialogs/ExportDialog.tsx index f474bcdb70..b61d7975bf 100644 --- a/src/components/views/dialogs/ExportDialog.tsx +++ b/src/async-components/views/dialogs/ExportDialog.tsx @@ -17,27 +17,27 @@ limitations under the License. import React, { useRef, useState } from "react"; import { Room } from "matrix-js-sdk/src"; import { _t } from "../../../languageHandler"; -import { IDialogProps } from "./IDialogProps"; -import BaseDialog from "./BaseDialog"; -import DialogButtons from "../elements/DialogButtons"; -import Field from "../elements/Field"; -import StyledRadioGroup from "../elements/StyledRadioGroup"; -import StyledCheckbox from "../elements/StyledCheckbox"; +import { IDialogProps } from "../../../components/views/dialogs/IDialogProps"; +import BaseDialog from "../../../components/views/dialogs/BaseDialog"; +import DialogButtons from "../../../components/views/elements/DialogButtons"; +import Field from "../../../components/views/elements/Field"; +import StyledRadioGroup from "../../../components/views/elements/StyledRadioGroup"; +import StyledCheckbox from "../../../components/views/elements/StyledCheckbox"; import { ExportFormat, ExportType, textForFormat, textForType, } from "../../../utils/exportUtils/exportUtils"; -import withValidation, { IFieldState, IValidationResult } from "../elements/Validation"; +import withValidation, { IFieldState, IValidationResult } from "../../../components/views/elements/Validation"; import HTMLExporter from "../../../utils/exportUtils/HtmlExport"; import JSONExporter from "../../../utils/exportUtils/JSONExport"; import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport"; import { useStateCallback } from "../../../hooks/useStateCallback"; import Exporter from "../../../utils/exportUtils/Exporter"; -import Spinner from "../elements/Spinner"; +import Spinner from "../../../components/views/elements/Spinner"; import Modal from "../../../Modal"; -import InfoDialog from "./InfoDialog"; +import InfoDialog from "../../../components/views/dialogs/InfoDialog"; interface IProps extends IDialogProps { room: Room; @@ -52,7 +52,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { const [sizeLimit, setSizeLimit] = useState(8); const sizeLimitRef = useRef(); const messageCountRef = useRef(); - const exportProgressRef = useRef(); + const [exportProgressText, setExportProgressText] = useState("Processing..."); const [displayCancel, setCancelWarning] = useState(false); const [exportCancelled, setExportCancelled] = useState(false); const [exportSuccessful, setExportSuccessful] = useState(false); @@ -78,7 +78,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, ExportType[exportType], exportOptions, - exportProgressRef, + setExportProgressText, ), ); break; @@ -88,7 +88,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, ExportType[exportType], exportOptions, - exportProgressRef, + setExportProgressText, ), ); break; @@ -98,7 +98,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { room, ExportType[exportType], exportOptions, - exportProgressRef, + setExportProgressText, ), ); break; @@ -368,8 +368,8 @@ const ExportDialog: React.FC = ({ room, onFinished }) => { { isExporting ? (
-

- { _t("Processing...") } +

+ { exportProgressText }

= ({ room, onClose }) => { }; const onRoomExportClick = async () => { - const { default: ExportDialog } = await import("../dialogs/ExportDialog"); - + const { default: ExportDialog } = await import("../../../async-components/views/dialogs/ExportDialog"); Modal.createTrackedDialog('export room dialog', '', ExportDialog, { room, }); diff --git a/src/utils/exportUtils/Exporter.ts b/src/utils/exportUtils/Exporter.ts index 0151836792..7254bdc3a4 100644 --- a/src/utils/exportUtils/Exporter.ts +++ b/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, + protected setProgressText: React.Dispatch>, ) { 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 { diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index 3608cff1f2..39fa762596 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/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, + setProgressText: React.Dispatch>, ) { - super(room, exportType, exportOptions, exportProgressRef); + super(room, exportType, exportOptions, setProgressText); this.avatars = new Map(); this.permalinkCreator = new RoomPermalinkCreator(this.room); this.totalSize = 0; diff --git a/src/utils/exportUtils/JSONExport.ts b/src/utils/exportUtils/JSONExport.ts index a2273ad918..fe9b81fd0a 100644 --- a/src/utils/exportUtils/JSONExport.ts +++ b/src/utils/exportUtils/JSONExport.ts @@ -32,9 +32,9 @@ export default class JSONExporter extends Exporter { room: Room, exportType: ExportType, exportOptions: IExportOptions, - exportProgressRef: MutableRefObject, + setProgressText: React.Dispatch>, ) { - super(room, exportType, exportOptions, exportProgressRef); + super(room, exportType, exportOptions, setProgressText); } protected createJSONString(): string { diff --git a/src/utils/exportUtils/PlainTextExport.ts b/src/utils/exportUtils/PlainTextExport.ts index 23ed6c7bbd..c95866ce9b 100644 --- a/src/utils/exportUtils/PlainTextExport.ts +++ b/src/utils/exportUtils/PlainTextExport.ts @@ -33,9 +33,9 @@ export default class PlainTextExporter extends Exporter { room: Room, exportType: ExportType, exportOptions: IExportOptions, - exportProgressRef: MutableRefObject, + setProgressText: React.Dispatch>, ) { - super(room, exportType, exportOptions, exportProgressRef); + super(room, exportType, exportOptions, setProgressText); this.totalSize = 0; this.mediaOmitText = !this.exportOptions.attachmentsIncluded ? _t("Media omitted") diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts index f19bc1004b..67795830a2 100644 --- a/src/utils/exportUtils/exportCSS.ts +++ b/src/utils/exportUtils/exportCSS.ts @@ -101,28 +101,16 @@ const getExportCSS = async (): Promise => { 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 => { 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;