1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { Text, View, TextInput, Animated, Easing, Platform, StyleSheet, } from 'react-native';
|
14 | import { renderNode, patchWebProps } from '../helpers';
|
15 | import { fonts, withTheme } from '../config';
|
16 | import Icon from '../icons/Icon';
|
17 | const renderText = (content, defaultProps, style) => renderNode(Text, content, Object.assign(Object.assign({}, defaultProps), { style: StyleSheet.flatten([style, defaultProps && defaultProps.style]) }));
|
18 | class Input extends React.Component {
|
19 | constructor() {
|
20 | super(...arguments);
|
21 | this.shakeAnimationValue = new Animated.Value(0);
|
22 | this.shake = () => {
|
23 | const { shakeAnimationValue } = this;
|
24 | shakeAnimationValue.setValue(0);
|
25 |
|
26 |
|
27 | Animated.timing(shakeAnimationValue, {
|
28 | duration: 375,
|
29 | toValue: 3,
|
30 | easing: Easing.bounce,
|
31 | useNativeDriver: true,
|
32 | }).start();
|
33 | };
|
34 | }
|
35 | focus() {
|
36 | this.input.focus();
|
37 | }
|
38 | blur() {
|
39 | this.input.blur();
|
40 | }
|
41 | clear() {
|
42 | this.input.clear();
|
43 | }
|
44 | isFocused() {
|
45 | return this.input.isFocused();
|
46 | }
|
47 | setNativeProps(nativeProps) {
|
48 | this.input.setNativeProps(nativeProps);
|
49 | }
|
50 | render() {
|
51 | var _a, _b, _c, _d, _e;
|
52 | const _f = this.props, { containerStyle, disabled, disabledInputStyle, inputContainerStyle, leftIcon, leftIconContainerStyle, rightIcon, rightIconContainerStyle, InputComponent = TextInput, inputStyle, errorProps, errorStyle, errorMessage, label, labelStyle, labelProps, theme, renderErrorMessage = true, style } = _f, attributes = __rest(_f, ["containerStyle", "disabled", "disabledInputStyle", "inputContainerStyle", "leftIcon", "leftIconContainerStyle", "rightIcon", "rightIconContainerStyle", "InputComponent", "inputStyle", "errorProps", "errorStyle", "errorMessage", "label", "labelStyle", "labelProps", "theme", "renderErrorMessage", "style"]);
|
53 | const translateX = this.shakeAnimationValue.interpolate({
|
54 | inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
|
55 | outputRange: [0, -15, 0, 15, 0, -15, 0],
|
56 | });
|
57 | const hideErrorMessage = !renderErrorMessage && !errorMessage;
|
58 | return (<View style={StyleSheet.flatten([styles.container, containerStyle])}>
|
59 | {renderText(label, Object.assign({ style: labelStyle }, labelProps), Object.assign({ fontSize: 16, color: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey3 }, Platform.select({
|
60 | android: Object.assign({}, fonts.android.bold),
|
61 | default: {
|
62 | fontWeight: 'bold',
|
63 | },
|
64 | })))}
|
65 |
|
66 | <Animated.View style={StyleSheet.flatten([
|
67 | {
|
68 | flexDirection: 'row',
|
69 | borderBottomWidth: 1,
|
70 | alignItems: 'center',
|
71 | borderColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey3,
|
72 | },
|
73 | inputContainerStyle,
|
74 | { transform: [{ translateX }] },
|
75 | ])}>
|
76 | {leftIcon && (<View style={StyleSheet.flatten([
|
77 | styles.iconContainer,
|
78 | leftIconContainerStyle,
|
79 | ])}>
|
80 | {renderNode(Icon, leftIcon)}
|
81 | </View>)}
|
82 |
|
83 | <InputComponent testID="RNE__Input__text-input" underlineColorAndroid="transparent" editable={!disabled} ref={(ref) => {
|
84 | this.input = ref;
|
85 | }} style={StyleSheet.flatten([
|
86 | {
|
87 | color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.black,
|
88 | fontSize: 18,
|
89 | flex: 1,
|
90 | minHeight: 40,
|
91 | },
|
92 | inputStyle,
|
93 | disabled && styles.disabledInput,
|
94 | disabled && disabledInputStyle,
|
95 | style,
|
96 | ])} placeholderTextColor={(_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.grey3} {...patchWebProps(attributes)}/>
|
97 |
|
98 | {rightIcon && (<View style={StyleSheet.flatten([
|
99 | styles.iconContainer,
|
100 | rightIconContainerStyle,
|
101 | ])}>
|
102 | {renderNode(Icon, rightIcon)}
|
103 | </View>)}
|
104 | </Animated.View>
|
105 |
|
106 | <Text {...errorProps} style={StyleSheet.flatten([
|
107 | {
|
108 | margin: 5,
|
109 | fontSize: 12,
|
110 | color: (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.error,
|
111 | },
|
112 | errorStyle && errorStyle,
|
113 | hideErrorMessage && {
|
114 | height: 0,
|
115 | margin: 0,
|
116 | padding: 0,
|
117 | },
|
118 | ])}>
|
119 | {errorMessage}
|
120 | </Text>
|
121 | </View>);
|
122 | }
|
123 | }
|
124 | const styles = StyleSheet.create({
|
125 | container: {
|
126 | width: '100%',
|
127 | paddingHorizontal: 10,
|
128 | },
|
129 | disabledInput: {
|
130 | opacity: 0.5,
|
131 | },
|
132 | iconContainer: {
|
133 | height: 40,
|
134 | justifyContent: 'center',
|
135 | alignItems: 'center',
|
136 | paddingRight: 4,
|
137 | marginVertical: 4,
|
138 | },
|
139 | });
|
140 | export { Input };
|
141 | export default withTheme(Input, 'Input');
|
142 |
|
\ | No newline at end of file |