fix(frontend): trigger empty messages input control

This commit is contained in:
yassinedorbozgithub 2024-10-01 16:47:32 +01:00
parent 4446d89834
commit 3907215cd2
4 changed files with 28 additions and 4 deletions

View File

@ -6,7 +6,7 @@
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import { Box, Grid, MenuItem, Typography } from "@mui/material";
import { Box, Grid, MenuItem, TextFieldProps, Typography } from "@mui/material";
import { FC, useEffect, useState } from "react";
import { RegisterOptions, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
@ -57,9 +57,15 @@ type PatternInputProps = {
onChange: (pattern: Pattern) => void;
block?: IBlockFull;
idx: number;
getInputProps?: (index: number) => TextFieldProps;
};
const PatternInput: FC<PatternInputProps> = ({ value, onChange, idx }) => {
const PatternInput: FC<PatternInputProps> = ({
value,
onChange,
idx,
getInputProps,
}) => {
const { t } = useTranslation();
const {
register,
@ -272,6 +278,7 @@ const PatternInput: FC<PatternInputProps> = ({ value, onChange, idx }) => {
) : null}
{typeof value === "string" && patternType === "text" ? (
<Input
{...(getInputProps ? getInputProps(idx) : null)}
label={t("label.text")}
value={value}
onChange={(e) => onChange(e.target.value)}

View File

@ -10,6 +10,7 @@ import AddIcon from "@mui/icons-material/Add";
import DeleteIcon from "@mui/icons-material/Delete";
import { Box, Button, Grid, IconButton, styled } from "@mui/material";
import { FC, Fragment, useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Pattern } from "@/types/block.types";
@ -37,6 +38,19 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>(
value.map((pattern) => createValueWithId(pattern)),
);
const {
register,
formState: { errors },
} = useFormContext<any>();
const getInputProps = (index: number) => {
return {
...register(`message.${index}`, {
required: t("message.text_is_required"),
}),
error: !!errors?.message?.[index],
helperText: errors?.message?.[index]?.message,
};
};
const addInput = () => {
setPatterns([...patterns, createValueWithId<Pattern>("")]);
};
@ -73,6 +87,7 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
idx={idx}
value={value}
onChange={updateInput(idx)}
getInputProps={getInputProps}
/>
</Fragment>
))

View File

@ -101,7 +101,8 @@
"attachment_not_found": "Attachment is not found",
"title_length_exceeded": "You have reached the maximum length",
"no_label_found": "No label found",
"code_is_required": "Language code is required"
"code_is_required": "Language code is required",
"text_is_required": "Text is required"
},
"menu": {
"terms": "Terms of Use",

View File

@ -102,7 +102,8 @@
"attachment_not_found": "La pièce jointe est introuvable",
"title_length_exceeded": "Vous avez atteint la longueur maximale",
"no_label_found": "Aucune étiquette trouvée",
"code_is_required": "Le code est requis"
"code_is_required": "Le code est requis",
"text_is_required": "Texte requis"
},
"menu": {
"terms": "Conditions d'utilisation",