fga-eps-mds#166 - Adjusting generic text input

Ronyell · Apr 12, 2018 · c131100 · c131100
1 parent fcc75ee
commit c131100
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/components/GenericField.js b/src/components/GenericField.js
@@ -9,34 +9,44 @@ export default class GenericField extends Component {
     super(props);
 
     this.state = {
-      validateMessage: true,
-      input: '',
+      text: '',
+      validateMessage: -1,
     };
   }
 
-  verificaTexto(texto) {
-    // arrumar essa validação para receber um Regex
-    const patt = RegExp(this.props.validorRegex);
-    console.warn(texto);
-    console.log('Resultado da regex: ', patt.test(texto));
-    if (patt.test(texto)) {
+  handleInput(newText) {
+    // const regexTest = /\w+/g;
+    console.warn('handleInput', newText);
+
+    this.setState({
+      text: newText.trim(),
+    },
+    // Callback from setState
+    () => { this.verificaTexto(newText, this.props.validorRegex); },
+    );
+  }
+
+  verificaTexto(text, regexTest) {
+    const isValid = regexTest.test(text);
+
+    // This is a needed workarround to make sure that 'isValid' has its true value
+    // DO NOT ERASE IF YOU DON'T KNOW A BETTER SOLUTION
+    console.debug(regexTest.test(text));
+
+    if (isValid) {
       console.warn('Valido');
-      this.setState({ input: texto });
-      this.setState({ validateMessage: true });
-      console.warn('Resultado do validateMessage: ', this.state.validateMessage);
+      this.setState({ validateMessage: 1 });
     } else {
       console.warn('Invalido');
-      this.setState({ validateMessage: false });
-      console.warn('Resultado do validateMessage: ', this.state.validateMessage);
+      this.setState({ validateMessage: 0 });
     }
-    return texto;
   }
 
   render() {
     // Provavelmente mudar isso para um Style diferente. User uma linha vermelha, nao sei.
     // Não usar uma msg.
     let p;
-    if (!this.state.validateMessage) {
+    if (this.state.validateMessage === 0) {
       p = <Text>{this.props.errorMessage}</Text>;
     } else {
       p = <Text />;
@@ -49,7 +59,8 @@ export default class GenericField extends Component {
         <TextInput
           style={styles.InputFieldStyle}
           placeholder={this.props.message}
-          onChangeText={text => this.verificaTexto(text)}
+          value={this.state.test}
+          onChangeText={text => this.handleInput(text)}
         />
 
       </View>
@@ -59,10 +70,8 @@ export default class GenericField extends Component {
 GenericField.propTypes = {
   header: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
-  icon: 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
@@ -247,22 +247,23 @@ export default class RegisterScreen extends React.Component {
     logInfo(FILE_NAME, 'render()',
       `State of register page: ${JSON.stringify(this.state, null, 2)}`);
 
-    // const passwordRegex1 = /^.{6,20}$/g;
-    const passwordRegex1 = /[\w+]/g;
+    // Testing regex list
+    const sixMoreWordCharRegex = /\w{6,}/g;
+
     return (
       <View style={styles.principal}>
         <Header />
         <KeyboardAvoidingView style={styles.content} behavior="padding">
           <ScrollView>
             <View style={{ paddingHorizontal: 15 }}>
 
-
               <GenericField
                 header="Genérico"
                 message="Componente de Input"
                 icon="chevrons-up"
-                validorRegex={passwordRegex1}
-                errorMessage="Senha inválida"
+                value=""
+                validorRegex={sixMoreWordCharRegex}
+                errorMessage="Está errado!"
               />
 
               <Text>CPF</Text>