55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import { FormControl, FormLabel, Input, Textarea } from '@chakra-ui/react';
|
|
import React from 'react'
|
|
import { Controller } from 'react-hook-form';
|
|
import { TiWarning } from 'react-icons/ti';
|
|
|
|
const FormField = ({
|
|
label,
|
|
control,
|
|
name,
|
|
type = "text",
|
|
errors,
|
|
isRequired,
|
|
arabic,
|
|
...props
|
|
}) => (
|
|
// <FormControl isInvalid={errors[name]}>
|
|
// <FormControl isRequired={isRequired}>
|
|
<FormControl >
|
|
<FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
|
|
<Controller
|
|
control={control}
|
|
name={name}
|
|
defaultValue=""
|
|
render={({ field }) => {
|
|
return type === "textarea" ? (
|
|
<Textarea
|
|
focusBorderColor="forestGreen.400"
|
|
size={"sm"}
|
|
{...field}
|
|
{...props}
|
|
placeholder={label}
|
|
textAlign={arabic ? "right" : "left"}
|
|
/>
|
|
) : (
|
|
<Input
|
|
focusBorderColor="forestGreen.300"
|
|
size={"sm"}
|
|
type={type}
|
|
{...field}
|
|
{...props}
|
|
placeholder={label}
|
|
textAlign={arabic ? "right" : "left"}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
{errors[name] && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " /> {errors[name].message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
);
|
|
|
|
export default FormField |