mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-14 08:36:37 +03:00
Add validation
This commit is contained in:
parent
e505646f21
commit
46f34ba455
2 changed files with 96 additions and 7 deletions
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { Room } from "matrix-js-sdk/src";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { IDialogProps } from "./IDialogProps";
|
||||
|
@ -13,6 +13,7 @@ import exportConversationalHistory, {
|
|||
textForFormat,
|
||||
textForType,
|
||||
} from "../../../utils/exportUtils/exportUtils";
|
||||
import { IFieldState, IValidationResult } from "../elements/Validation";
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
room: Room;
|
||||
|
@ -22,10 +23,26 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
const [exportFormat, setExportFormat] = useState("HTML");
|
||||
const [exportType, setExportType] = useState("TIMELINE");
|
||||
const [includeAttachments, setAttachments] = useState(false);
|
||||
const [numberOfMessages, setNumberOfMessages] = useState<number | null>();
|
||||
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
|
||||
const [sizeLimit, setSizeLimit] = useState<number | null>(8);
|
||||
const [sizeLimitRef, messageCountRef] = [useRef<any>(), useRef<any>()];
|
||||
|
||||
const onExportClick = async () => {
|
||||
const isValidSize = await sizeLimitRef.current.validate({
|
||||
focused: false,
|
||||
});
|
||||
if (!isValidSize) {
|
||||
sizeLimitRef.current.validate({ focused: true });
|
||||
return;
|
||||
}
|
||||
if (exportType === exportTypes.LAST_N_MESSAGES) {
|
||||
const isValidNumberOfMessages =
|
||||
await messageCountRef.current.validate({ focused: false });
|
||||
if (!isValidNumberOfMessages) {
|
||||
messageCountRef.current.validate({ focused: true });
|
||||
return;
|
||||
}
|
||||
}
|
||||
await exportConversationalHistory(
|
||||
room,
|
||||
exportFormats[exportFormat],
|
||||
|
@ -38,6 +55,69 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const onValidateSize = async ({
|
||||
value,
|
||||
}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
|
||||
const parsedSize = parseFloat(value);
|
||||
const min = 1;
|
||||
const max = 4000;
|
||||
|
||||
if (isNaN(parsedSize)) {
|
||||
return { valid: false, feedback: _t("Size must be a number") };
|
||||
}
|
||||
|
||||
if (!(min <= parsedSize && parsedSize <= max)) {
|
||||
return {
|
||||
valid: false,
|
||||
feedback: _t(
|
||||
"Size can only be between %(min)s MB and %(max)s MB",
|
||||
{ min, max },
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
feedback: _t("Enter size between %(min)s MB and %(max)s MB", {
|
||||
min,
|
||||
max,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const onValidateNumberOfMessages = async ({
|
||||
value,
|
||||
}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
|
||||
const parsedSize = parseFloat(value);
|
||||
const min = 1;
|
||||
const max = 10 ** 8;
|
||||
|
||||
if (isNaN(parsedSize)) {
|
||||
return {
|
||||
valid: false,
|
||||
feedback: _t("Number of messages must be a number"),
|
||||
};
|
||||
}
|
||||
|
||||
if (!(min <= parsedSize && parsedSize <= max)) {
|
||||
return {
|
||||
valid: false,
|
||||
feedback: _t(
|
||||
"Number of messages can only be between %(min)s and %(max)s",
|
||||
{ min, max },
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
feedback: _t("Enter a number between %(min)s and %(max)s", {
|
||||
min,
|
||||
max,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
onFinished(false);
|
||||
};
|
||||
|
@ -54,23 +134,24 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
</option>
|
||||
);
|
||||
});
|
||||
|
||||
let MessageCount = null;
|
||||
if (exportType === exportTypes.LAST_N_MESSAGES) {
|
||||
MessageCount = (
|
||||
<Field
|
||||
element="input"
|
||||
type="number"
|
||||
value={numberOfMessages}
|
||||
ref={messageCountRef}
|
||||
onValidate={onValidateNumberOfMessages}
|
||||
label={_t("Number of messages")}
|
||||
onChange={(e) => {
|
||||
setNumberOfMessages(parseInt(e.target.value));
|
||||
}}
|
||||
type="number"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const sizePostFix = (<span title={_t("MB")}>{_t("MB")}</span>);
|
||||
const sizePostFix = <span title={_t("MB")}>{_t("MB")}</span>;
|
||||
|
||||
return (
|
||||
<BaseDialog
|
||||
|
@ -107,7 +188,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
>
|
||||
{exportTypeOptions}
|
||||
</Field>
|
||||
{ MessageCount }
|
||||
{MessageCount}
|
||||
|
||||
<span className="mx_ExportDialog_subheading">
|
||||
{_t("Size Limit")}
|
||||
|
@ -116,9 +197,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
|
|||
<Field
|
||||
type="number"
|
||||
autoComplete="off"
|
||||
onValidate={onValidateSize}
|
||||
element="input"
|
||||
ref={sizeLimitRef}
|
||||
value={sizeLimit}
|
||||
postfixComponent={sizePostFix}
|
||||
onChange={(e) => setSizeLimit(e.target.value)}
|
||||
onChange={(e) => setSizeLimit(parseInt(e.target.value))}
|
||||
/>
|
||||
|
||||
<StyledCheckbox
|
||||
|
|
|
@ -2255,6 +2255,11 @@
|
|||
"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.",
|
||||
"Size can only be between %(min)s MB and %(max)s MB": "Size can only be between %(min)s MB and %(max)s MB",
|
||||
"Enter size between %(min)s MB and %(max)s MB": "Enter size between %(min)s MB and %(max)s MB",
|
||||
"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",
|
||||
"Enter a number between %(min)s and %(max)s": "Enter a number between %(min)s and %(max)s",
|
||||
"Number of messages": "Number of messages",
|
||||
"MB": "MB",
|
||||
"Export Chat": "Export Chat",
|
||||
|
|
Loading…
Reference in a new issue