mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 03:01:29 +03:00
Add warning modal during export
This commit is contained in:
parent
d46fe678b0
commit
d8f763664b
2 changed files with 52 additions and 4 deletions
|
@ -18,6 +18,8 @@ import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
|
||||||
import JSONExporter from "../../../utils/exportUtils/JSONExport";
|
import JSONExporter from "../../../utils/exportUtils/JSONExport";
|
||||||
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
|
import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
|
||||||
import { useStateCallback } from "../../../hooks/useStateCallback";
|
import { useStateCallback } from "../../../hooks/useStateCallback";
|
||||||
|
import Modal from "../../../Modal";
|
||||||
|
import QuestionDialog from "./QuestionDialog";
|
||||||
|
|
||||||
interface IProps extends IDialogProps {
|
interface IProps extends IDialogProps {
|
||||||
room: Room;
|
room: Room;
|
||||||
|
@ -27,13 +29,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
||||||
const [exportFormat, setExportFormat] = useState("HTML");
|
const [exportFormat, setExportFormat] = useState("HTML");
|
||||||
const [exportType, setExportType] = useState("TIMELINE");
|
const [exportType, setExportType] = useState("TIMELINE");
|
||||||
const [includeAttachments, setAttachments] = useState(false);
|
const [includeAttachments, setAttachments] = useState(false);
|
||||||
|
const [isExporting, setExporting] = useState(false);
|
||||||
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
|
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
|
||||||
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
|
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
|
||||||
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
|
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
|
||||||
const [Exporter, setExporter] = useStateCallback(
|
const [Exporter, setExporter] = useStateCallback(
|
||||||
null,
|
null,
|
||||||
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
|
async (Exporter: HTMLExporter | PlainTextExporter | JSONExporter) => {
|
||||||
await Exporter?.export();
|
await Exporter?.export().then(() => setExporting(false));
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -93,6 +96,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setExporting(true);
|
||||||
await startExport();
|
await startExport();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -160,8 +164,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCancel = async () => {
|
const onCancel = async () => {
|
||||||
|
if (isExporting) {
|
||||||
|
const { finished } = Modal.createTrackedDialog(
|
||||||
|
"Warning",
|
||||||
|
"",
|
||||||
|
QuestionDialog,
|
||||||
|
{
|
||||||
|
title: _t("Warning"),
|
||||||
|
description: (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
{_t(`Are you sure you want to stop exporting your data?
|
||||||
|
If you do, you'll need to start over.`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
danger: true,
|
||||||
|
button: _t("Yes"),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const [proceed] = await finished;
|
||||||
|
if (!proceed) return;
|
||||||
await Exporter?.cancelExport();
|
await Exporter?.cancelExport();
|
||||||
onFinished(false);
|
setExporting(false);
|
||||||
|
setExporter(null);
|
||||||
|
} else onFinished(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
|
const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
|
||||||
|
@ -195,7 +222,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
||||||
|
|
||||||
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
|
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
|
||||||
|
|
||||||
return (
|
const ExportSettings = (
|
||||||
<BaseDialog
|
<BaseDialog
|
||||||
title={_t("Export Chat")}
|
title={_t("Export Chat")}
|
||||||
className="mx_ExportDialog"
|
className="mx_ExportDialog"
|
||||||
|
@ -259,10 +286,29 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
||||||
<DialogButtons
|
<DialogButtons
|
||||||
primaryButton={_t("Export")}
|
primaryButton={_t("Export")}
|
||||||
onPrimaryButtonClick={onExportClick}
|
onPrimaryButtonClick={onExportClick}
|
||||||
|
onCancel={() => onFinished(false)}
|
||||||
|
/>
|
||||||
|
</BaseDialog>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ExportProgress = (
|
||||||
|
<BaseDialog
|
||||||
|
title={_t("Exporting you data...")}
|
||||||
|
className="mx_ExportDialog"
|
||||||
|
contentId="mx_Dialog_content"
|
||||||
|
onFinished={onFinished}
|
||||||
|
fixedWidth={true}
|
||||||
|
>
|
||||||
|
<DialogButtons
|
||||||
|
primaryButton={_t("Cancel")}
|
||||||
|
primaryButtonClass="danger"
|
||||||
|
hasCancel={false}
|
||||||
onCancel={onCancel}
|
onCancel={onCancel}
|
||||||
/>
|
/>
|
||||||
</BaseDialog>
|
</BaseDialog>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return isExporting ? ExportProgress : ExportSettings;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ExportDialog;
|
export default ExportDialog;
|
||||||
|
|
|
@ -2259,6 +2259,7 @@
|
||||||
"Number of messages must be a number": "Number of messages must be a number",
|
"Number of messages must be a number": "Number of messages must be a number",
|
||||||
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
|
"Number of messages can only be between %(min)s and %(max)s": "Number of messages can only be between %(min)s and %(max)s",
|
||||||
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
|
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
|
||||||
|
"Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.": "Are you sure you want to stop exporting your data? \n If you do, you'll need to start over.",
|
||||||
"Number of messages": "Number of messages",
|
"Number of messages": "Number of messages",
|
||||||
"MB": "MB",
|
"MB": "MB",
|
||||||
"Export Chat": "Export Chat",
|
"Export Chat": "Export Chat",
|
||||||
|
@ -2267,6 +2268,7 @@
|
||||||
"Size Limit": "Size Limit",
|
"Size Limit": "Size Limit",
|
||||||
"Include Attachments": "Include Attachments",
|
"Include Attachments": "Include Attachments",
|
||||||
"Export": "Export",
|
"Export": "Export",
|
||||||
|
"Exporting you data...": "Exporting you data...",
|
||||||
"Feedback sent": "Feedback sent",
|
"Feedback sent": "Feedback sent",
|
||||||
"Rate %(brand)s": "Rate %(brand)s",
|
"Rate %(brand)s": "Rate %(brand)s",
|
||||||
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
|
"Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
|
||||||
|
|
Loading…
Reference in a new issue