mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-18 14:44:58 +08:00
Move export dialog to async-components
This commit is contained in:
Jaiwanth
parent
7207329c15
commit
31c9e5962c
@ -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")}
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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")
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user