Merge pull request #174 from Ronyell/T173-GenericField

T173 generic field
fga-eps-mds · Apr 28, 2018 · 4b51bca · 4b51bca
2 parents 5537e00 + cf8fcdc
commit 4b51bca
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 1 deletion.
diff --git a/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap b/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap
@@ -33,6 +33,14 @@ exports[`Testing RegisterScreen renders as expected 1`] = `
           }
         }
       >
+        <GenericField
+          errorMessage="Está errado!"
+          header="Genérico"
+          icon="chevrons-up"
+          placeholderMessage="Componente de Input"
+          regexInput={/\\\\w\\{6,\\}/}
+          setStateValue={[Function]}
+        />
         <Text
           accessible={true}
           allowFontScaling={true}

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -16,4 +16,4 @@ merenda_mais:
      echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
      echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
      npm start
-     "
+     "
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
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Text, View, TextInput } from 'react-native';
+import styles from '../Styles/GeneralStyles';
+
+export default class GenericField extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      styleInUse: styles.InputFieldStyle,
+      errorTextArea: <Text />,
+      text: '',
+      validValue: -1,
+    };
+  }
+
+  handleInput(newText) {
+    this.setState({ text: newText.trim() }, () => {
+      this.validateText(this.state.text, this.props.validorRegex);
+    });
+  }
+
+  handleUpdate() {
+    if (this.state.validValue) {
+      this.setState({ errorTextArea: <Text /> });
+      this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#80FF80', borderWidth: 2 }] });
+    } else {
+      this.setState({ errorTextArea: <Text>{this.props.errorMessage}</Text> });
+      this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', borderWidth: 2 }] });
+    }
+  }
+
+  validateText(text, regexTest) {
+    if (regexTest.global) {
+      console.warn('validateText()', 'Regexp using global flag! The results may be wrong.');
+    } else {
+      // Do nothing
+    }
+
+    const isValid = regexTest.test(text);
+
+    if (isValid) {
+      console.warn('Valido');
+      this.setState({ validValue: true }, () => {
+        this.handleUpdate();
+      });
+    } else {
+      console.warn('Invalido');
+      this.setState({ validValue: false }, () => {
+        this.handleUpdate();
+      });
+    }
+  }
+
+  render() {
+    return (
+      <View>
+        <Text> {this.props.header.toUpperCase()} </Text>
+        <TextInput
+          style={this.state.styleInUse}
+          placeholder={this.props.message}
+          value={this.state.test}
+          onChangeText={text => this.handleInput(text)}
+        />
+
+        {this.state.errorTextArea}
+
+      </View>
+    );
+  }
+}
+
+GenericField.propTypes = {
+  header: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  validorRegex: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string.isRequired,
+};
+
+// export default GenericField;
diff --git a/src/screens/RegisterScreen.js b/src/screens/RegisterScreen.js
@@ -33,6 +33,7 @@ import CpfField from '../components/CpfField';
 import NameField from '../components/NameField';
 import EmailField from '../components/EmailField';
 import PasswordField from '../components/PasswordField';
+import GenericField from '../components/GenericField';
 import PhoneField from '../components/PhoneField';
 import DropdownComponent from '../components/DropdownComponent';
 import MunicipalDistrict from '../components/MunicipalDistrict';
@@ -119,6 +120,7 @@ export default class RegisterScreen extends React.Component {
     super(props);
 
     this.state = {
+      teste: '',
       email: '',
       name: '',
       password: '',
@@ -246,13 +248,26 @@ export default class RegisterScreen extends React.Component {
     logInfo(FILE_NAME, 'render()',
       `State of register page: ${JSON.stringify(this.state, null, 2)}`);
 
+    // Testing regex list
+    const sixMoreWordCharRegex = /\w{6,}/;
+
     return (
       <View style={styles.principal}>
         <Header />
         <KeyboardAvoidingView style={styles.content} behavior="padding">
           <ScrollView>
             <View style={{ paddingHorizontal: 15 }}>
 
+              <GenericField
+                header="Genérico"
+                placeholderMessage="Componente de Input"
+                icon="chevrons-up"
+                setStateValue={newValue => this.setState({ teste: newValue })}
+                onChange={console.warn('OnChange', this.state.teste)}
+                regexInput={sixMoreWordCharRegex}
+                errorMessage="Está errado!"
+              />
+
               <Text>CPF</Text>
               <CpfField
                 value={this.state.profile.cpf}