1 | import React, { PropTypes, Component } from 'react';
|
2 | import {
|
3 | Animated,
|
4 | Easing,
|
5 | Text,
|
6 | TextInput,
|
7 | TouchableWithoutFeedback,
|
8 | View,
|
9 | StyleSheet,
|
10 | } from 'react-native';
|
11 |
|
12 | import BaseInput from './BaseInput';
|
13 |
|
14 | const PADDING = 16;
|
15 |
|
16 | export default class Kohana extends BaseInput {
|
17 |
|
18 | static propTypes = {
|
19 | |
20 |
|
21 |
|
22 |
|
23 |
|
24 | iconClass: PropTypes.func.isRequired,
|
25 | |
26 |
|
27 |
|
28 | iconName: PropTypes.string.isRequired,
|
29 | |
30 |
|
31 |
|
32 | iconColor: PropTypes.string,
|
33 | };
|
34 |
|
35 | static defaultProps = {
|
36 | easing: Easing.bezier(0.2, 1, 0.3, 1),
|
37 | };
|
38 |
|
39 | render() {
|
40 | const {
|
41 | iconClass: Icon,
|
42 | iconColor,
|
43 | iconName,
|
44 | label,
|
45 | style: containerStyle,
|
46 | inputStyle,
|
47 | labelStyle,
|
48 | } = this.props;
|
49 | const { focusedAnim, value } = this.state;
|
50 |
|
51 | return (
|
52 | <View style={[styles.container, containerStyle]} onLayout={this._onLayout}>
|
53 | <TouchableWithoutFeedback onPress={this._focus}>
|
54 | <Animated.View style={{
|
55 | justifyContent: 'center',
|
56 | padding: PADDING,
|
57 | marginLeft: focusedAnim.interpolate({
|
58 | inputRange: [0, 1],
|
59 | outputRange: [-40, 0],
|
60 | }),
|
61 | }}>
|
62 | <Icon
|
63 | name={iconName}
|
64 | color={iconColor}
|
65 | size={25}
|
66 | />
|
67 | </Animated.View>
|
68 | </TouchableWithoutFeedback>
|
69 | <TouchableWithoutFeedback onPress={this._focus}>
|
70 | <Animated.View style={{
|
71 | position: 'absolute',
|
72 | top: PADDING,
|
73 | left: focusedAnim.interpolate({
|
74 | inputRange: [0, 1],
|
75 | outputRange: [PADDING, 80],
|
76 | }),
|
77 | opacity: focusedAnim.interpolate({
|
78 | inputRange: [0, 1],
|
79 | outputRange: [1, 0],
|
80 | }),
|
81 | }}>
|
82 | <Text style={[styles.label, labelStyle]}>
|
83 | {label}
|
84 | </Text>
|
85 | </Animated.View>
|
86 | </TouchableWithoutFeedback>
|
87 | <TextInput
|
88 | ref="input"
|
89 | {...this.props}
|
90 | style={[styles.textInput, inputStyle]}
|
91 | value={value}
|
92 | onBlur={this._onBlur}
|
93 | onFocus={this._onFocus}
|
94 | onChange={this._onChange}
|
95 | underlineColorAndroid={'transparent'}
|
96 | />
|
97 | </View>
|
98 | );
|
99 | }
|
100 | }
|
101 |
|
102 | const styles = StyleSheet.create({
|
103 | container: {
|
104 | flex: 1,
|
105 | flexDirection: 'row',
|
106 | backgroundColor: 'white',
|
107 | overflow: 'hidden',
|
108 | },
|
109 | label: {
|
110 | fontSize: 18,
|
111 | fontFamily: 'Arial',
|
112 | fontWeight: 'bold',
|
113 | color: '#D2D2D2',
|
114 | },
|
115 | textInput: {
|
116 | flex: 1,
|
117 | paddingHorizontal: PADDING,
|
118 | paddingVertical: 0,
|
119 | color: 'black',
|
120 | fontSize: 18,
|
121 | },
|
122 | });
|