54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
|
|
import { CustomInputProps } from './customInput.props';
|
|
import { getStyles } from './customInput.styles';
|
|
import { useAppTheme } from '@theme';
|
|
|
|
export const CustomInput: React.FC<CustomInputProps> = ({
|
|
label,
|
|
isPassword = false,
|
|
rightActionText,
|
|
onRightActionPress,
|
|
error,
|
|
secureTextEntry,
|
|
style,
|
|
...rest
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const [isSecure, setIsSecure] = useState(isPassword);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{label && (
|
|
<View style={styles.labelRow}>
|
|
<Text style={styles.label}>{label}</Text>
|
|
</View>
|
|
)}
|
|
<View style={[styles.inputContainer, error ? { borderColor: colors.error } : null, style]}>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholderTextColor={colors.placeholder}
|
|
secureTextEntry={isPassword ? isSecure : secureTextEntry}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
{...rest}
|
|
/>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
|
{isPassword && (
|
|
<TouchableOpacity onPress={() => setIsSecure(!isSecure)} activeOpacity={0.7}>
|
|
<Text style={styles.rightAction}>{isSecure ? 'Show' : 'Hide'}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
{rightActionText && onRightActionPress && (
|
|
<TouchableOpacity onPress={onRightActionPress} activeOpacity={0.7}>
|
|
<Text style={styles.rightAction}>{rightActionText}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
{error && <Text style={styles.errorText}>{error}</Text>}
|
|
</View>
|
|
);
|
|
};
|