71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { View, TextInput, Text, Dimensions } from "react-native";
|
|
|
|
type Props = {
|
|
label?: string;
|
|
placeholder?: string;
|
|
onChange?: (val: string) => void;
|
|
info?: string;
|
|
itemLeft?: React.ReactNode;
|
|
itemRight?: React.ReactNode;
|
|
error?: boolean;
|
|
errorText?: string;
|
|
required?: boolean;
|
|
type: 'default' | 'visible-password' | 'numeric'
|
|
round?: boolean
|
|
width?: number
|
|
};
|
|
|
|
|
|
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
|
|
const lebar = Dimensions.get("window").width;
|
|
|
|
if (itemLeft != undefined || itemRight != undefined) {
|
|
return (
|
|
<View style={{ marginBottom: 10 }}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
|
|
{label}
|
|
{required && (<Text style={Styles.cError}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30]}>
|
|
{itemRight != undefined ? itemRight : itemLeft}
|
|
<TextInput
|
|
placeholder={placeholder}
|
|
keyboardType={type}
|
|
onChangeText={onChange}
|
|
style={{ width: width && lebar * width / 100 }}
|
|
/>
|
|
</View>
|
|
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, Styles.cGray]}>{info}</Text>)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<View style={[Styles.mb10]}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[Styles.mb05, error && Styles.cError]}>
|
|
{label}
|
|
{required && (<Text style={Styles.cError}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<TextInput
|
|
placeholder={placeholder}
|
|
keyboardType={type}
|
|
style={[Styles.inputRoundForm, error && { borderColor: "red" }, round && Styles.round30]}
|
|
onChangeText={onChange}
|
|
/>
|
|
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, , Styles.cGray]}>{info}</Text>)}
|
|
</View>
|
|
)
|
|
} |