Finish dialog implementation of export settings

res/css/_components.scss

@@ -75,6 +75,7 @@
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
+@import "./views/dialogs/_ExportDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
 @import "./views/dialogs/_ForwardDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";

res/css/views/dialogs/_ExportDialog.scss

@@ -0,0 +1,22 @@
+.mx_ExportDialog_subheading {
+    font-size: $font-16px;
+    display: block;
+    font-family: $font-family;
+    font-weight: 600;
+    color: $primary-fg-color;
+    margin-top: 18px;
+    margin-bottom: 12px;
+}
+
+.mx_ExportDialog .mx_RadioButton > .mx_RadioButton_content {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.mx_ExportDialog .mx_Field {
+    width: 256px;
+}
+
+.mx_ExportDialog .mx_Field_postfix {
+    padding: 9px 10px;
+}

src/components/views/dialogs/ExportDialog.tsx

@@ -4,10 +4,14 @@ import { _t } from "../../../languageHandler";
 import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import Dropdown from "../elements/Dropdown";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
 import exportConversationalHistory, {
     exportFormats,
     exportTypes,
+    textForFormat,
+    textForType,
 } from "../../../utils/exportUtils/exportUtils";
 
 interface IProps extends IDialogProps {
@@ -15,18 +19,21 @@ interface IProps extends IDialogProps {
 }
 
 const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
-    const [format, setFormat] = useState("HTML");
+    const [exportFormat, setExportFormat] = useState("HTML");
+    const [exportType, setExportType] = useState("TIMELINE");
+    const [includeAttachments, setAttachments] = useState(false);
+    const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
+    const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+
     const onExportClick = async () => {
         await exportConversationalHistory(
             room,
-            exportFormats.PLAIN_TEXT,
+            exportFormats[exportFormat],
-            exportTypes.START_DATE,
+            exportTypes[exportType],
             {
-                startDate: parseInt(
+                numberOfMessages,
-                    new Date("2021.05.20").getTime().toFixed(0),
+                attachmentsIncluded: includeAttachments,
-                ),
+                maxSize: sizeLimit * 1024 * 1024,
-                attachmentsIncluded: true,
-                maxSize: 7 * 1024 * 1024, // 7 MB
             },
         );
     };
@@ -35,15 +42,40 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         onFinished(false);
     };
 
-    const options = Object.keys(exportFormats).map(key => {
+    const exportFormatOptions = Object.keys(exportFormats).map((format) => ({
-        return <div key={key}>
+        value: format,
-            { exportFormats[key] }
+        label: textForFormat(format),
-        </div>
+    }));
-    })
+
+    const exportTypeOptions = Object.keys(exportTypes).map((type) => {
+        return (
+            <option key={type} value={type}>
+                {textForType(type)}
+            </option>
+        );
+    });
+
+    let MessageCount = null;
+    if (exportType === exportTypes.LAST_N_MESSAGES) {
+        MessageCount = (
+            <Field
+                element="input"
+                value={numberOfMessages}
+                label={_t("Number of messages")}
+                onChange={(e) => {
+                    setNumberOfMessages(parseInt(e.target.value));
+                }}
+                type="number"
+            />
+        );
+    }
+
+    const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
 
     return (
         <BaseDialog
             title={_t("Export Chat")}
+            className="mx_ExportDialog"
             contentId="mx_Dialog_content"
             hasCancel={true}
             onFinished={onFinished}
@@ -55,13 +87,48 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 )}
             </p>
 
-            <Dropdown
+            <span className="mx_ExportDialog_subheading">{_t("Format")}</span>
-                onOptionChange={(key: string) => { setFormat(key) }}
+
-                value={format}
+            <StyledRadioGroup
-                label={_t("Export formats")}
+                name="feedbackRating"
+                value={exportFormat}
+                onChange={(key) => setExportFormat(key)}
+                definitions={exportFormatOptions}
+            />
+
+            <span className="mx_ExportDialog_subheading">{_t("Messages")}</span>
+
+            <Field
+                element="select"
+                value={exportType}
+                onChange={(e) => {
+                    setExportType(e.target.value);
+                }}
             >
-                { options }
+                {exportTypeOptions}
-            </Dropdown>
+            </Field>
+            { MessageCount }
+
+            <span className="mx_ExportDialog_subheading">
+                {_t("Size Limit")}
+            </span>
+
+            <Field
+                type="number"
+                autoComplete="off"
+                value={sizeLimit}
+                postfixComponent={sizePostFix}
+                onChange={(e) => setSizeLimit(e.target.value)}
+            />
+
+            <StyledCheckbox
+                checked={includeAttachments}
+                onChange={(e) =>
+                    setAttachments((e.target as HTMLInputElement).checked)
+                }
+            >
+                {_t("Include Attachments")}
+            </StyledCheckbox>
 
             <DialogButtons
                 primaryButton={_t("Export")}

src/components/views/elements/Field.tsx

@@ -77,7 +77,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
     // The element to create. Defaults to "input".
     element?: "input";
     // The input's value. This is a controlled component, so the value is required.
-    value: string;
+    value: string | number;
 }
 
 interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {

src/i18n/strings/en_EN.json

@@ -735,6 +735,12 @@
     "Invite to %(spaceName)s": "Invite to %(spaceName)s",
     "Share your public space": "Share your public space",
     "Unknown App": "Unknown App",
+    "HTML": "HTML",
+    "JSON": "JSON",
+    "Plain Text": "Plain Text",
+    "From the beginning": "From the beginning",
+    "For a number of messages": "For a number of messages",
+    "Current Timeline": "Current Timeline",
     "Media omitted": "Media omitted",
     "Media omitted - file size limit exceeded": "Media omitted - file size limit exceeded",
     "%(creatorName)s created this room.": "%(creatorName)s created this room.",
@@ -2249,8 +2255,13 @@
     "There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
     "Update community": "Update community",
     "An error has occurred.": "An error has occurred.",
+    "Number of messages": "Number of messages",
+    "MB": "MB",
     "Export Chat": "Export Chat",
     "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
+    "Format": "Format",
+    "Size Limit": "Size Limit",
+    "Include Attachments": "Include Attachments",
     "Export": "Export",
     "Feedback sent": "Feedback sent",
     "Rate %(brand)s": "Rate %(brand)s",

src/utils/exportUtils/exportUtils.ts

@@ -4,26 +4,41 @@ import HTMLExporter from "./HtmlExport";
 import JSONExporter from "./JSONExport";
 import PlainTextExporter from "./PlainTextExport";
 
-_t("HTML");
-_t("JSON");
-_t("Plain Text");
-
 export enum exportFormats {
     HTML = "HTML",
     JSON = "JSON",
-    PLAIN_TEXT = "Plain Text",
+    PLAIN_TEXT = "PLAIN_TEXT",
 }
 
-_t("Current Timeline");
-_t("From the beginning")
-_t("From a specific date")
-_t("Last n messages");
-
 export enum exportTypes {
-    TIMELINE = "Current Timeline",
+    TIMELINE = "TIMELINE",
-    BEGINNING = "From the beginning",
+    BEGINNING = "BEGINNING",
-    START_DATE = "From a specific date",
+    // START_DATE = "START_DATE",
-    LAST_N_MESSAGES = "Last n messages",
+    LAST_N_MESSAGES = "LAST_N_MESSAGES",
+}
+
+export const textForFormat = (format: string) => {
+    switch (format) {
+        case exportFormats.HTML:
+            return _t("HTML");
+        case exportFormats.JSON:
+            return _t("JSON");
+        case exportFormats.PLAIN_TEXT:
+            return _t("Plain Text");
+    }
+}
+
+export const textForType = (type: string) => {
+    switch (type) {
+        case exportTypes.BEGINNING:
+            return _t("From the beginning");
+        case exportTypes.LAST_N_MESSAGES:
+            return _t("For a number of messages");
+        case exportTypes.TIMELINE:
+            return _t("Current Timeline");
+        // case exportTypes.START_DATE:
+        //     return _t("From a specific date");
+    }
 }
 
 export interface exportOptions {