53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { ComponentProps } from "react";
|
|
import { Controller } from "react-hook-form";
|
|
import { View } from "react-native";
|
|
import ErrorText from "./error-text";
|
|
import { Input, InputField } from "./input";
|
|
import { ThemedText } from "./themed-text";
|
|
|
|
interface FormInputProps {
|
|
name: string;
|
|
control: any;
|
|
label?: string;
|
|
className?: string;
|
|
inputProps?: ComponentProps<typeof Input>;
|
|
fieldProps?: ComponentProps<typeof InputField>;
|
|
}
|
|
|
|
const FormInput = ({
|
|
name,
|
|
control,
|
|
inputProps,
|
|
fieldProps,
|
|
label,
|
|
className,
|
|
}: FormInputProps) => {
|
|
return (
|
|
<View className={className}>
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={(renderProps) => (
|
|
<View>
|
|
{label && (
|
|
<ThemedText className="font-semibold mb-1">{label}</ThemedText>
|
|
)}
|
|
<Input isInvalid={!!renderProps.fieldState.error} {...inputProps}>
|
|
<InputField
|
|
onChangeText={renderProps.field.onChange}
|
|
value={renderProps.field.value}
|
|
{...fieldProps}
|
|
/>
|
|
</Input>
|
|
{!!renderProps.fieldState.error && (
|
|
<ErrorText>{renderProps.fieldState.error.message}</ErrorText>
|
|
)}
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default FormInput;
|