fga-eps-mds#166 - New styles for generic input

Co-authored-by: Matheus Oliveira <matheus_oliveira30@hotmail.com> Co-authored-by: Gustavo Sabino <gustavo.sabino.contact@gmail.com>
Ronyell · Apr 19, 2018 · a9ea8be · a9ea8be
1 parent 2e89a90
commit a9ea8be
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/src/Styles/GeneralStyles.js b/src/Styles/GeneralStyles.js
@@ -4,6 +4,23 @@ const { height } = Dimensions.get('window');
 const { width } = Dimensions.get('window');
 
 const styles = {
+
+  genericViewSection: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 10,
+    marginTop: 1,
+    backgroundColor: '#FAFAFA',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    borderRadius: 7,
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: 'gray',
+  },
+  genericInputBox: {
+    marginBotom: 10,
+  },
   bigButton: {
     paddingVertical: 20,
     borderWidth: 1,

diff --git a/src/components/GenericField.js b/src/components/GenericField.js
@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text, View, TextInput } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
 import styles from '../Styles/GeneralStyles';
 
 export default class GenericField extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      styleInUse: styles.InputFieldStyle,
+      styleInUse: styles.genericViewSection,
       errorTextArea: <Text />,
       text: '',
     };
@@ -22,12 +23,12 @@ export default class GenericField extends Component {
 
   handleValidText() {
     this.setState({ errorTextArea: <Text /> });
-    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#80FF80', borderWidth: 2 }] });
+    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#80FF80', backgroundColor: '#d1ffd1', borderWidth: 2 }] });
   }
 
   handleInvalidText() {
     this.setState({ errorTextArea: <Text>{this.props.errorMessage}</Text> });
-    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', borderWidth: 2 }] });
+    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', backgroundColor: '#ffd6d6', borderWidth: 2 }] });
   }
 
   validateText(text, regexTest) {
@@ -45,6 +46,9 @@ export default class GenericField extends Component {
       // setStateValue is the function in props at the component creation
       this.props.setStateValue(this.state.text);
       this.handleValidText();
+    } else if (!isTextValid && text === '') {
+      // This case is for empty text
+      this.setState({ styleInUse: styles.genericViewSection });
     } else {
       console.warn('Invalido');
       this.handleInvalidText();
@@ -55,15 +59,19 @@ export default class GenericField extends Component {
     return (
       <View>
         <Text> {this.props.header.toUpperCase().trim()} </Text>
-        <TextInput
-          style={this.state.styleInUse}
-          placeholder={this.props.placeholderMessage.trim()}
-          value={this.state.test}
-          onChangeText={text => this.handleInput(text)}
-        />
+        <View style={this.state.styleInUse}>
+          <FontAwesome name="user-circle" style={styles.icon} size={26} color="black" />
+          <TextInput
+            style={styles.InputStyle}
+            placeholder={this.props.placeholderMessage.trim()}
+            placeholderTextColor="#565454"
+            value={this.state.test}
+            underlineColorAndroid="transparent"
+            onChangeText={text => this.handleInput(text)}
+          />
+        </View>
 
         {this.state.errorTextArea}
-
       </View>
     );
   }