85 lines
No EOL
2.3 KiB
TypeScript
85 lines
No EOL
2.3 KiB
TypeScript
import React from 'react';
|
|
import {View, Text, TextInput, StyleSheet} from 'react-native';
|
|
import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
|
|
import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
|
|
|
|
interface InputProps {
|
|
label? : string,
|
|
outlined? : boolean,
|
|
placeholder?: string,
|
|
leftIcon?: any,
|
|
rightIcon?: any,
|
|
numLines?: number,
|
|
onChangeHandler?: (text: string)=>void,
|
|
secure?: boolean,
|
|
validate?: (e : NativeSyntheticEvent<TextInputEndEditingEventData>)=>void, // ob die line "gecheckt" werden soll
|
|
errorMessage? : any, //error msg
|
|
errorColor?: string,
|
|
bgColor?: string,
|
|
}
|
|
|
|
function Input({
|
|
label,
|
|
outlined,
|
|
placeholder,
|
|
leftIcon,
|
|
rightIcon,
|
|
numLines,
|
|
onChangeHandler,
|
|
secure,
|
|
validate,
|
|
errorMessage,
|
|
errorColor,
|
|
bgColor
|
|
} : InputProps) {
|
|
const containerBorder = outlined ? styles.outlined : styles.standard
|
|
if(numLines == undefined){
|
|
numLines = 1
|
|
}
|
|
return (
|
|
<View style={{padding:10}}>
|
|
<Text style={styles.label}>{label}</Text>
|
|
<View
|
|
style={[styles.container, containerBorder, {backgroundColor: bgColor ? bgColor : "white"}]}>
|
|
<View style={{paddingRight:10}}>{leftIcon}</View>
|
|
|
|
<TextInput secureTextEntry={secure} placeholder={
|
|
placeholder ? placeholder : label ? 'Enter ${label}' : ''
|
|
}
|
|
onChangeText={onChangeHandler}
|
|
onEndEditing={validate}
|
|
multiline={numLines > 1 ? true : false}
|
|
numberOfLines={numLines}
|
|
style={{flex: 4}}
|
|
/>
|
|
{rightIcon}
|
|
</View>
|
|
<Text style={{color: errorColor? errorColor: "red"}}>{errorMessage}</Text>
|
|
</View>
|
|
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
label: {
|
|
fontWeight: '500',
|
|
},
|
|
container: {
|
|
padding: 10,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: 'white'
|
|
},
|
|
outlined: {
|
|
borderColor: 'darkgrey',
|
|
borderRadius: 4,
|
|
borderWidth: 1,
|
|
},
|
|
standard: {
|
|
borderBottomColor: 'darkgrey',
|
|
borderBottomWidth: 1,
|
|
},
|
|
|
|
})
|
|
|
|
export default Input; |