| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108 |
1x
4x
4x
1x
1x
| import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Dimensions } from 'react-native';
import ViewPropTypes from '../config/ViewPropTypes';
const SCREEN_WIDTH = Dimensions.get('window').width;
class Input extends Component {
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
clear() {
this.input.clear();
}
render() {
const {
containerStyle,
icon,
iconContainerStyle,
inputStyle,
displayError,
errorStyle,
errorMessage,
...attributes
} = this.props;
return (
<View>
<View
style={[
styles.container,
{ width: SCREEN_WIDTH - 100, height: 40 },
containerStyle,
]}
>
{icon &&
<View
style={[styles.iconContainer, { height: 40 }, iconContainerStyle]}
>
{icon}
</View>}
<TextInput
ref={input => (this.input = input)}
underlineColorAndroid="transparent"
style={[
styles.input,
{ width: SCREEN_WIDTH - 100, height: 40 },
inputStyle,
]}
{...attributes}
/>
</View>
{displayError &&
<Text style={[styles.error, errorStyle && errorStyle]}>
{errorMessage || 'Error!'}
</Text>}
</View>
);
}
}
Input.propTypes = {
containerStyle: ViewPropTypes.style,
icon: PropTypes.object,
iconContainerStyle: ViewPropTypes.style,
inputStyle: PropTypes.object,
displayError: PropTypes.bool,
errorStyle: PropTypes.object,
errorMessage: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: 'rgba(171, 189, 219, 1)',
alignItems: 'center',
},
iconContainer: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 15,
},
input: {
alignSelf: 'center',
color: 'black',
fontSize: 18,
marginLeft: 10,
},
error: {
color: '#FF2D00',
margin: 5,
fontSize: 12,
},
});
export default Input;
|