Skip to content

Commit 520ebd6

Browse files
committed
created Sae
1 parent 37a3235 commit 520ebd6

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

Example/TextInputEffectsExample.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
22
import {
33
ScrollView,
44
StyleSheet,
5+
Text,
6+
View,
57
} from 'react-native';
68

79
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
@@ -16,13 +18,28 @@ import {
1618
Hideo,
1719
Kohana,
1820
Makiko,
21+
Sae,
1922
} from 'react-native-textinput-effects';
2023

2124
export default class TextInputEffectsExample extends Component {
2225

2326
render() {
2427
return (
2528
<ScrollView style={styles.container} keyboardDismissMode={'on-drag'}>
29+
<View style={[styles.card, { backgroundColor: '#8781bd' }]}>
30+
<Text style={styles.title}>Sae</Text>
31+
<Sae
32+
label={'Email Address'}
33+
iconClass={FontAwesomeIcon}
34+
iconName={'pencil'}
35+
iconColor={'white'}
36+
/>
37+
<Sae
38+
style={styles.input}
39+
label={'Invitation Code'}
40+
iconClass={FontAwesomeIcon}
41+
/>
42+
</View>
2643
<Kaede
2744
style={styles.input}
2845
label={'Number'}
@@ -93,7 +110,17 @@ const styles = StyleSheet.create({
93110
paddingTop: 24,
94111
backgroundColor: '#F9F7F6',
95112
},
113+
card: {
114+
height: 180,
115+
},
96116
input: {
97117
marginTop: 4,
98118
},
119+
title: {
120+
textAlign: 'center',
121+
color: 'white',
122+
fontSize: 20,
123+
fontWeight: 'bold',
124+
opacity: 0.8,
125+
},
99126
});

lib/Sae.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { PropTypes, Component } from 'react';
2+
import {
3+
Animated,
4+
Text,
5+
TextInput,
6+
TouchableWithoutFeedback,
7+
View,
8+
StyleSheet,
9+
} from 'react-native';
10+
11+
import BaseInput from './BaseInput';
12+
13+
const LABEL_HEIGHT = 24;
14+
const PADDING = 16;
15+
16+
export default class Sae extends BaseInput {
17+
18+
static propTypes = {
19+
height: PropTypes.number,
20+
/*
21+
* This is the icon component you are importing from react-native-vector-icons.
22+
* import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
23+
* iconClass={FontAwesomeIcon}
24+
*/
25+
iconClass: PropTypes.func.isRequired,
26+
/*
27+
* Passed to react-native-vector-icons library as name prop
28+
*/
29+
iconName: PropTypes.string,
30+
/*
31+
* Passed to react-native-vector-icons library as color prop.
32+
* This is also used as border color.
33+
*/
34+
iconColor: PropTypes.string,
35+
};
36+
37+
static defaultProps = {
38+
iconColor: 'white',
39+
height: 48,
40+
animationDuration: 300,
41+
iconName: 'pencil',
42+
};
43+
44+
render() {
45+
const {
46+
iconClass,
47+
iconColor,
48+
iconName,
49+
label,
50+
style: containerStyle,
51+
height: inputHeight,
52+
inputStyle,
53+
labelStyle,
54+
} = this.props;
55+
const {
56+
width,
57+
focusedAnim,
58+
value,
59+
} = this.state;
60+
const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
61+
62+
return (
63+
<View
64+
style={[containerStyle, styles.container, {
65+
height: inputHeight + PADDING,
66+
}]}
67+
onLayout={this._onLayout}
68+
>
69+
<TouchableWithoutFeedback onPress={this._focus}>
70+
<Animated.View style={{
71+
position: 'absolute',
72+
bottom: focusedAnim.interpolate({
73+
inputRange: [0, 1],
74+
outputRange: [0, LABEL_HEIGHT + PADDING],
75+
}),
76+
}}>
77+
<Animated.Text style={[styles.label, labelStyle, {
78+
fontSize: focusedAnim.interpolate({
79+
inputRange: [0, 1],
80+
outputRange: [18, 12],
81+
}),
82+
}]}>
83+
{label}
84+
</Animated.Text>
85+
</Animated.View>
86+
</TouchableWithoutFeedback>
87+
<TextInput
88+
ref="input"
89+
{...this.props}
90+
style={[styles.textInput, inputStyle, {
91+
width,
92+
height: inputHeight,
93+
}]}
94+
value={value}
95+
onBlur={this._onBlur}
96+
onChange={this._onChange}
97+
onFocus={this._onFocus}
98+
/>
99+
<AnimatedIcon
100+
name={iconName}
101+
color={iconColor}
102+
style={{
103+
position: 'absolute',
104+
bottom: 0,
105+
right: focusedAnim.interpolate({
106+
inputRange: [0, 1],
107+
outputRange: [0, width + PADDING],
108+
}),
109+
transform: [{
110+
rotate: focusedAnim.interpolate({
111+
inputRange: [0, 1],
112+
outputRange: ['0deg', '-90deg'],
113+
}),
114+
}],
115+
fontSize: 20,
116+
backgroundColor: 'transparent',
117+
}}
118+
/>
119+
{/* bottom border */}
120+
<Animated.View
121+
style={{
122+
position: 'absolute',
123+
bottom: 0,
124+
right: 0,
125+
height: 2,
126+
width: focusedAnim.interpolate({
127+
inputRange: [0, 1],
128+
outputRange: [0, width],
129+
}),
130+
backgroundColor: iconColor,
131+
}}
132+
/>
133+
</View>
134+
);
135+
}
136+
}
137+
138+
const styles = StyleSheet.create({
139+
container: {
140+
overflow: 'hidden',
141+
marginHorizontal: PADDING,
142+
},
143+
label: {
144+
backgroundColor: 'transparent',
145+
fontFamily: 'Arial',
146+
fontWeight: 'bold',
147+
color: '#7771ab',
148+
},
149+
textInput: {
150+
position: 'absolute',
151+
bottom: 0,
152+
left: 0,
153+
color: 'white',
154+
fontSize: 18,
155+
},
156+
});

lib/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Akira from './Akira';
77
import Hideo from './Hideo';
88
import Kohana from './Kohana';
99
import Makiko from './Makiko';
10+
import Sae from './Sae';
1011

1112
export {
1213
Kaede,
@@ -18,4 +19,5 @@ export {
1819
Hideo,
1920
Kohana,
2021
Makiko,
22+
Sae,
2123
};

0 commit comments

Comments
 (0)