60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import {
|
|
Image,
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Text,
|
|
TextInput,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
} from "react-native";
|
|
|
|
import { tr } from "@/lib/i18n";
|
|
import type { InputFieldProps } from "@/types/type";
|
|
|
|
export const InputField = ({
|
|
label,
|
|
labelStyles,
|
|
icon,
|
|
secureTextEntry = false,
|
|
containerStyles,
|
|
inputStyles,
|
|
iconStyles,
|
|
className,
|
|
...props
|
|
}: InputFieldProps) => (
|
|
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
|
<View className="my-2 w-full">
|
|
<Text
|
|
className={`text-lg font-JakartaSemiBold mb-3 text-black dark:text-white ${labelStyles}`}
|
|
>
|
|
{label}
|
|
</Text>
|
|
|
|
<View
|
|
className={`flex flex-row justify-start items-center relative bg-neutral-100 dark:bg-neutral-800 rounded-full border border-neutral-100 dark:border-neutral-800 focus:border-primary-500 ${containerStyles}`}
|
|
>
|
|
{icon && (
|
|
<Image
|
|
source={icon}
|
|
alt={tr("components.inputField.labelIconAlt", { label })}
|
|
className={`h-6 w-6 ml-4 mt-1 ${iconStyles}`}
|
|
/>
|
|
)}
|
|
|
|
<TextInput
|
|
className={`rounded-full p-4 font-JakartaSemiBold text-[15px] flex-1 text-left text-black dark:text-white ${inputStyles}`}
|
|
secureTextEntry={secureTextEntry}
|
|
autoCapitalize="none"
|
|
autoComplete="off"
|
|
placeholderTextColor="#a3a3a3"
|
|
selectionColor="#0286ff"
|
|
{...props}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</KeyboardAvoidingView>
|
|
);
|