120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { Dimensions, Platform, TextInput, View } from "react-native";
|
|
import Text from "./Text";
|
|
|
|
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
|
|
bg?: string
|
|
value?: string
|
|
disable?: boolean
|
|
multiline?: boolean
|
|
mb?: boolean
|
|
focus?: boolean
|
|
};
|
|
|
|
|
|
export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg, multiline, mb = true, focus }: Props) {
|
|
const lebar = Dimensions.get("window").width;
|
|
const { colors } = useTheme();
|
|
|
|
if (itemLeft != undefined || itemRight != undefined) {
|
|
return (
|
|
<View style={[mb && Styles.mb10]}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[{ marginBottom: 5, textTransform: "capitalize", color: colors.text }, error && { color: colors.error }]}>
|
|
{label}
|
|
{required && (<Text style={{ color: colors.error }}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<View style={[
|
|
Styles.inputRoundForm,
|
|
itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
|
|
multiline && { alignItems: 'flex-end' },
|
|
round && Styles.round30,
|
|
{
|
|
backgroundColor: bg == "transparent" ? "transparent" : colors.input,
|
|
},
|
|
error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
|
|
Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
|
|
{ alignItems: 'center' },
|
|
multiline
|
|
? { alignItems: "flex-end" }
|
|
: { alignItems: "center" },
|
|
]}>
|
|
{itemRight != undefined ? itemRight : itemLeft}
|
|
<TextInput
|
|
editable={!disable}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
keyboardType={type}
|
|
onChangeText={onChange}
|
|
placeholderTextColor={colors.dimmed}
|
|
multiline={multiline}
|
|
numberOfLines={3}
|
|
style={[
|
|
Styles.mh05,
|
|
multiline && { height: '100%', maxHeight: 100 },
|
|
{ width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
|
|
Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
|
|
]}
|
|
/>
|
|
</View>
|
|
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<View style={[Styles.mb10]}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[Styles.mb05, error && { color: colors.error }, { color: colors.text }]}>
|
|
{label}
|
|
{required && (<Text style={{ color: colors.error }}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<TextInput
|
|
value={value}
|
|
placeholder={placeholder}
|
|
keyboardType={type}
|
|
editable={!disable}
|
|
style={[
|
|
Styles.inputRoundForm,
|
|
Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 },
|
|
error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
|
|
round && Styles.round30,
|
|
{
|
|
backgroundColor: bg == "transparent" ? "transparent" : colors.input,
|
|
},
|
|
{ color: colors.text },
|
|
multiline && { height: 150, textAlignVertical: 'top' }
|
|
]}
|
|
onChangeText={onChange}
|
|
placeholderTextColor={colors.dimmed}
|
|
multiline={multiline}
|
|
numberOfLines={multiline ? 5 : undefined}
|
|
/>
|
|
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
|
|
</View>
|
|
)
|
|
}
|