OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Move export dialog to async-components

pull/21833/head
Jaiwanth 2021-08-14 00:03:02 +05:30
parent 7207329c15
commit 31c9e5962c
7 changed files with 28 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/views/dialogs/ExportDialog.tsx → src/async-components/views/dialogs/ExportDialog.tsx
View File

@ -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<IProps> = ({ room, onFinished }) => {
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
const sizeLimitRef = useRef<Field>();
const messageCountRef = useRef<Field>();
const exportProgressRef = useRef<HTMLParagraphElement>();
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<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
exportProgressRef,
setExportProgressText,
),
);
break;
@ -88,7 +88,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
exportProgressRef,
setExportProgressText,
),
);
break;
@ -98,7 +98,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
room,
ExportType[exportType],
exportOptions,
exportProgressRef,
setExportProgressText,
),
);
break;
@ -368,8 +368,8 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
{ isExporting ? (
<div className="mx_ExportDialog_progress">
<Spinner w={24} h={24} />
<p ref={exportProgressRef}>
{ _t("Processing...") }
<p>
{ exportProgressText }
</p>
<DialogButtons
primaryButton={_t("Cancel")}

3
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@ -234,8 +234,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ 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,
});

5
src/utils/exportUtils/Exporter.ts
View File

@ -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 {

6
src/utils/exportUtils/HtmlExport.tsx
View File

@ -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;

4
src/utils/exportUtils/JSONExport.ts
View File

@ -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 {

4
src/utils/exportUtils/PlainTextExport.ts
View File

@ -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")

22
src/utils/exportUtils/exportCSS.ts
View File

@ -102,27 +102,15 @@ const getExportCSS = async (): Promise<string> => {
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"};
@ -137,16 +125,6 @@ const getExportCSS = async (): Promise<string> => {
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;
}