Get Code text on every update of Field ttdung11t2#59

Author: quangtuandev

README.md

@@ -93,7 +93,7 @@ Prop       | Type    | Default    | Description
 `codeInputStyle`    | style object   |        | custom style for code input
 `containerStyle`    | style object   |        | custom style for code input container
 `onFulfill`         | function |              | callback function called when fulfilling code. If `compareWithCode` is null -> return `(code)` in callback, else return `(isValid, code)`. **Required**
-
+`onCodeChange`      | function |              | Get Code text on every update of Field
 ## functions
 clear input:
 ```javascript

components/ConfirmationCodeInput.js

@@ -19,6 +19,7 @@ export default class ConfirmationCodeInput extends Component {
     codeInputStyle: TextInput.propTypes.style,
     containerStyle: View.propTypes.style,
     onFulfill: PropTypes.func,
+    onCodeChange: PropTypes.func,
   };
 
   static defaultProps = {
@@ -32,7 +33,8 @@ export default class ConfirmationCodeInput extends Component {
     inactiveColor: 'rgba(255, 255, 255, 0.2)',
     space: 8,
     compareWithCode: '',
-    ignoreCase: false
+    ignoreCase: false,
+    onCodeChange: (code) => null
   };
 
   constructor(props) {
@@ -193,13 +195,20 @@ export default class ConfirmationCodeInput extends Component {
   _onKeyPress(e) {
     if (e.nativeEvent.key === 'Backspace') {
       const { currentIndex } = this.state;
+      let newCodeArr = _.clone(this.state.codeArr);
       const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+      for (const i in newCodeArr) {
+        if (i >= nextIndex) {
+          newCodeArr[i] = '';
+        }
+      }
+      this.props.onCodeChange(newCodeArr.join(''))
       this._setFocus(nextIndex);
     }
   }
 
   _onInputCode(character, index) {
-    const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
+    const { codeLength, onFulfill, compareWithCode, ignoreCase, onCodeChange } = this.props;
     let newCodeArr = _.clone(this.state.codeArr);
     newCodeArr[index] = character;
 
@@ -223,7 +232,7 @@ export default class ConfirmationCodeInput extends Component {
         codeArr: newCodeArr,
         currentIndex: prevState.currentIndex + 1
       };
-    });
+    }, () => { onCodeChange(newCodeArr.join('')) });
   }
 
   render() {

example/src/components/ConfirmationCodeInput.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, TextInput, StyleSheet, Dimensions } from 'react-native';
 import _ from 'lodash';
@@ -19,6 +19,7 @@ export default class ConfirmationCodeInput extends Component {
     codeInputStyle: TextInput.propTypes.style,
     containerStyle: View.propTypes.style,
     onFulfill: PropTypes.func,
+    onCodeChange: PropTypes.func,
   };
 
   static defaultProps = {
@@ -32,7 +33,8 @@ export default class ConfirmationCodeInput extends Component {
     inactiveColor: 'rgba(255, 255, 255, 0.2)',
     space: 8,
     compareWithCode: '',
-    ignoreCase: false
+    ignoreCase: false,
+    onCodeChange: (code) => null
   };
 
   constructor(props) {
@@ -193,13 +195,20 @@ export default class ConfirmationCodeInput extends Component {
   _onKeyPress(e) {
     if (e.nativeEvent.key === 'Backspace') {
       const { currentIndex } = this.state;
-      const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0; 
+      let newCodeArr = _.clone(this.state.codeArr);
+      const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+      for (const i in newCodeArr) {
+        if (i >= nextIndex) {
+          newCodeArr[i] = '';
+        }
+      }
+      this.props.onCodeChange(newCodeArr.join(''))
       this._setFocus(nextIndex);
     }
   }
 
   _onInputCode(character, index) {
-    const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
+    const { codeLength, onFulfill, compareWithCode, ignoreCase, onCodeChange } = this.props;
     let newCodeArr = _.clone(this.state.codeArr);
     newCodeArr[index] = character;
 
@@ -223,7 +232,7 @@ export default class ConfirmationCodeInput extends Component {
         codeArr: newCodeArr,
         currentIndex: prevState.currentIndex + 1
       };
-    });
+    }, () => { onCodeChange(newCodeArr.join('')) });
   }
 
   render() {

example/src/index.js

@@ -8,7 +8,6 @@ import {
   Text,
   View,
   ScrollView,
-  TextInput,
   Alert
 } from 'react-native';
 
@@ -103,6 +102,7 @@ class example extends Component {
               size={30}
               inputPosition='left'
               onFulfill={(code) => this._onFulfill(code)}
+              onCodeChange={(code) => { this.state.code = code }}
             />
           </View>
 
@@ -121,9 +121,9 @@ class example extends Component {
               onFulfill={(isValid) => this._onFinishCheckingCode1(isValid)}
               containerStyle={{ marginTop: 30 }}
               codeInputStyle={{ borderWidth: 1.5 }}
+              onCodeChange={(code) => { this.state.code = code }}
             />
           </View>
-  
           <View style={styles.inputWrapper3}>
             <Text style={styles.inputLabel3}>CIRCLE CONFIRMATION CODE</Text>
             <CodeInput
@@ -135,6 +135,7 @@ class example extends Component {
               autoFocus={false}
               codeInputStyle={{ fontWeight: '800' }}
               onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}
+              onCodeChange={(code) => { this.state.code = code }}
             />
           </View>
         </ScrollView>