File size: 2,542 Bytes
b9fe2b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import { Button } from '@/components/ui/button';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Textarea } from '@/components/ui/textarea';
import { PlusCircle, Trash2 } from 'lucide-react';
import { useFieldArray } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { INextOperatorForm } from '../../interface';
const MessageForm = ({ form }: INextOperatorForm) => {
const { t } = useTranslation();
const { fields, append, remove } = useFieldArray({
name: 'messages',
control: form.control,
});
return (
<Form {...form}>
<form
className="space-y-6"
onSubmit={(e) => {
e.preventDefault();
}}
>
<FormItem>
<FormLabel>{t('flow.msg')}</FormLabel>
<div className="space-y-4">
{fields.map((field, index) => (
<div key={field.id} className="flex items-start gap-2">
<FormField
control={form.control}
name={`messages.${index}`}
render={({ field }) => (
<FormItem className="flex-1">
<FormControl>
<Textarea
{...field}
placeholder={t('flow.messagePlaceholder')}
rows={5}
/>
</FormControl>
</FormItem>
)}
/>
{fields.length > 1 && (
<Button
variant="ghost"
size="icon"
type="button"
onClick={() => remove(index)}
className="cursor-pointer text-colors-text-functional-danger"
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
))}
<Button
type="button"
variant="outline"
onClick={() => append(' ')} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
className="w-full mt-4"
>
<PlusCircle className="mr-2 h-4 w-4" />
{t('flow.addMessage')}
</Button>
</div>
<FormMessage />
</FormItem>
</form>
</Form>
);
};
export default MessageForm;
|