dios.one
88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { TextInput, View, Text, StyleSheet, Pressable } from 'react-native';
|
|
import { colors, fonts, borderRadius, spacing } from '../utils/theme';
|
|
|
|
export default function Input({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
placeholder,
|
|
secureTextEntry = false,
|
|
autoCapitalize = 'none',
|
|
keyboardType = 'default',
|
|
multiline = false,
|
|
rightIcon,
|
|
onRightIconPress,
|
|
style,
|
|
}) {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
{label && <Text style={styles.label}>{label}</Text>}
|
|
<View style={styles.inputRow}>
|
|
<TextInput
|
|
style={[styles.input, multiline && styles.multiline, rightIcon && styles.inputWithIcon]}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textMuted}
|
|
secureTextEntry={secureTextEntry}
|
|
autoCapitalize={autoCapitalize}
|
|
keyboardType={keyboardType}
|
|
multiline={multiline}
|
|
selectionColor={colors.primary}
|
|
/>
|
|
{rightIcon && (
|
|
<Pressable style={styles.iconBtn} onPress={onRightIconPress} hitSlop={8}>
|
|
<Text style={styles.iconText}>{rightIcon}</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
label: {
|
|
color: colors.textSecondary,
|
|
fontSize: fonts.sizes.sm,
|
|
fontWeight: fonts.weights.medium,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
inputRow: {
|
|
position: 'relative',
|
|
},
|
|
input: {
|
|
backgroundColor: colors.surface,
|
|
borderRadius: borderRadius.md,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.md,
|
|
color: colors.text,
|
|
fontSize: fonts.sizes.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
inputWithIcon: {
|
|
paddingRight: 48,
|
|
},
|
|
multiline: {
|
|
minHeight: 100,
|
|
textAlignVertical: 'top',
|
|
},
|
|
iconBtn: {
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
width: 48,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
iconText: {
|
|
fontSize: 20,
|
|
color: colors.primary,
|
|
},
|
|
});
|