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