51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TextInput } from 'react-native';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './formInput.styles';
|
|
import { FormInputProps } from './formInput.props';
|
|
|
|
export const FormInput: React.FC<FormInputProps> = ({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
placeholder,
|
|
required = false,
|
|
multiline = false,
|
|
keyboardType = 'default',
|
|
leftIcon,
|
|
rightIcon,
|
|
containerStyle,
|
|
inputContainerStyle,
|
|
inputStyle,
|
|
...rest
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={[styles.container, containerStyle]}>
|
|
{label ? (
|
|
<Text style={styles.label}>
|
|
{label}
|
|
{required && <Text style={styles.required}>*</Text>}
|
|
</Text>
|
|
) : null}
|
|
<View style={[styles.inputWrapper, inputContainerStyle]}>
|
|
{leftIcon ? <View style={styles.leftIconWrapper}>{leftIcon}</View> : null}
|
|
<TextInput
|
|
style={[styles.input, multiline && styles.multilineInput, inputStyle]}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textMuted}
|
|
multiline={multiline}
|
|
numberOfLines={multiline ? 4 : 1}
|
|
keyboardType={keyboardType}
|
|
{...rest}
|
|
/>
|
|
{rightIcon ? <View style={styles.rightIconWrapper}>{rightIcon}</View> : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|