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 LABEL_HEIGHT = 24;
|
15 | const PADDING = 16;
|
16 |
|
17 | export default class Isao extends BaseInput {
|
18 |
|
19 | static propTypes = {
|
20 | |
21 |
|
22 |
|
23 | passiveColor: PropTypes.string,
|
24 | |
25 |
|
26 |
|
27 | activeColor: PropTypes.string,
|
28 | height: PropTypes.number,
|
29 | };
|
30 |
|
31 | static defaultProps = {
|
32 | activeColor: 'red',
|
33 | passiveColor: 'white',
|
34 | height: 48,
|
35 | easing: Easing.bezier(0.2, 1, 0.3, 1),
|
36 | };
|
37 |
|
38 | render() {
|
39 | const {
|
40 | label,
|
41 | style: containerStyle,
|
42 | height: inputHeight,
|
43 | inputStyle,
|
44 | labelStyle,
|
45 | activeColor,
|
46 | passiveColor,
|
47 | } = this.props;
|
48 | const {
|
49 | width,
|
50 | focusedAnim,
|
51 | value,
|
52 | } = this.state;
|
53 |
|
54 | return (
|
55 | <View style={[containerStyle, { height: inputHeight + LABEL_HEIGHT }]} onLayout={this._onLayout}>
|
56 | <View style={[styles.inputContainer, {
|
57 | height: inputHeight,
|
58 | borderBottomColor: passiveColor,
|
59 | }]}>
|
60 | <TextInput
|
61 | ref="input"
|
62 | {...this.props}
|
63 | style={[styles.textInput, inputStyle, {
|
64 | width,
|
65 | height: inputHeight,
|
66 | }]}
|
67 | value={value}
|
68 | onBlur={this._onBlur}
|
69 | onChange={this._onChange}
|
70 | onFocus={this._onFocus}
|
71 | underlineColorAndroid={'transparent'}
|
72 | />
|
73 | </View>
|
74 | <TouchableWithoutFeedback onPress={this._focus}>
|
75 | <View style={{
|
76 | height: LABEL_HEIGHT,
|
77 | width,
|
78 | }}>
|
79 | {}
|
80 | <Animated.Text style={[styles.label, labelStyle, {
|
81 | width,
|
82 | opacity: focusedAnim.interpolate({
|
83 | inputRange: [0, 1],
|
84 | outputRange: [1, 0],
|
85 | }),
|
86 | bottom: focusedAnim.interpolate({
|
87 | inputRange: [0, 1],
|
88 | outputRange: [0, LABEL_HEIGHT],
|
89 | }),
|
90 | color: passiveColor,
|
91 | }]}>
|
92 | {label}
|
93 | </Animated.Text>
|
94 | {}
|
95 | <Animated.Text style={[styles.label, labelStyle, {
|
96 | opacity: focusedAnim.interpolate({
|
97 | inputRange: [0, 1],
|
98 | outputRange: [0, 1],
|
99 | }),
|
100 | bottom: focusedAnim.interpolate({
|
101 | inputRange: [0, 1],
|
102 | outputRange: [LABEL_HEIGHT * -1, 0],
|
103 | }),
|
104 | color: activeColor,
|
105 | }]}>
|
106 | {label}
|
107 | </Animated.Text>
|
108 | </View>
|
109 | </TouchableWithoutFeedback>
|
110 | <Animated.View
|
111 | style={[styles.border, {
|
112 | height: focusedAnim.interpolate({
|
113 | inputRange: [0, 1],
|
114 | outputRange: [0, 8],
|
115 | }),
|
116 | width,
|
117 | backgroundColor: activeColor,
|
118 | }]}
|
119 | />
|
120 | </View>
|
121 | );
|
122 | }
|
123 | }
|
124 |
|
125 | const styles = StyleSheet.create({
|
126 | inputContainer: {
|
127 | borderBottomWidth: 2,
|
128 | },
|
129 | labelContainer: {
|
130 | paddingLeft: PADDING,
|
131 | height: LABEL_HEIGHT,
|
132 | },
|
133 | label: {
|
134 | position: 'absolute',
|
135 | height: LABEL_HEIGHT,
|
136 | left: PADDING,
|
137 | paddingTop: 4,
|
138 | backgroundColor: 'transparent',
|
139 | fontFamily: 'Arial',
|
140 | fontSize: 14,
|
141 | fontWeight: 'bold',
|
142 | },
|
143 | textInput: {
|
144 | paddingHorizontal: PADDING,
|
145 | color: '#afb3b8',
|
146 | fontSize: 18,
|
147 | fontWeight: 'bold',
|
148 | padding: 0,
|
149 | },
|
150 | border: {
|
151 | position: 'absolute',
|
152 | bottom: LABEL_HEIGHT,
|
153 | left: 0,
|
154 | right: 0,
|
155 | },
|
156 | });
|