116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
KeyboardAvoidingView,
|
|
TextInput,
|
|
} from 'react-native';
|
|
|
|
export default class PTextInput extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: ""
|
|
}
|
|
}
|
|
|
|
render() {
|
|
|
|
if (!this.props.visible) {
|
|
return false;
|
|
}
|
|
|
|
if (!this.props.placeholder){
|
|
return false;
|
|
}
|
|
|
|
if(!this.props.textChange){
|
|
return false;
|
|
}
|
|
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.component}
|
|
behavior={'padding'}
|
|
>
|
|
<View style={styles.layouts}>
|
|
<View style={styles.layout}>
|
|
<View style={styles.itemcontainer}>
|
|
<View style={styles.itemcontainerInner}>
|
|
<View style={styles.chocolate}>
|
|
<TextInput
|
|
style={styles.TextInput}
|
|
placeholder={this.props.placeholder}
|
|
underlineColorAndroid={"transparent"}
|
|
placeholderTextColor={"#AFAFAF"}
|
|
onChangeText={(val) => {
|
|
this.setState({ data: val });
|
|
this.props.textChange(val);
|
|
}}
|
|
value={this.state.data}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
component: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
paddingLeft: 7.5,
|
|
paddingRight: 7.5,
|
|
paddingTop: 7.5,
|
|
paddingBottom: 7.5,
|
|
},
|
|
|
|
layouts: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
},
|
|
|
|
layout: {
|
|
width: '100%',
|
|
height: 90,
|
|
},
|
|
|
|
itemcontainer: {
|
|
width: '100%',
|
|
height: '100%',
|
|
paddingTop: 7.5,
|
|
paddingBottom: 7.5,
|
|
paddingLeft: 7.5,
|
|
paddingRight: 7.5,
|
|
},
|
|
|
|
itemcontainerInner: {
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
chocolate: {
|
|
width: '100%',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
padding: 10,
|
|
overflow: 'hidden',
|
|
},
|
|
|
|
TextInput: {
|
|
color: '#181818',
|
|
fontSize: 14,
|
|
textAlign: 'left',
|
|
width: '100%',
|
|
},
|
|
|
|
}); |