Update ConfirmationCodeInput.js

✨🐛Add support for pasting and fix onFullfill call on backspace on last element ttdung11t2#30 from A-Tokyo (ttdung11t2#30)

Author: jasonwiener

components/ConfirmationCodeInput.js

@@ -1,6 +1,12 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, StyleSheet, Dimensions, ViewPropTypes } from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  Dimensions,
+  ViewPropTypes,
+} from 'react-native';
 import _ from 'lodash';
 
 // if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
@@ -22,9 +28,8 @@ export default class ConfirmationCodeInput extends Component {
     codeInputStyle: TextInput.propTypes.style,
     containerStyle: viewPropTypes.style,
     onFulfill: PropTypes.func,
-    onCodeChange: PropTypes.func,
   };
-  
+
   static defaultProps = {
     codeLength: 5,
     inputPosition: 'center',
@@ -38,45 +43,51 @@ export default class ConfirmationCodeInput extends Component {
     compareWithCode: '',
     ignoreCase: false,
   };
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
       codeArr: new Array(this.props.codeLength).fill(''),
-      currentIndex: 0
+      currentIndex: 0,
     };
-    
+
     this.codeInputRefs = [];
   }
-  
+
   componentDidMount() {
     const { compareWithCode, codeLength, inputPosition } = this.props;
     if (compareWithCode && compareWithCode.length !== codeLength) {
-      console.error("Invalid props: compareWith length is not equal to codeLength");
+      console.error(
+        'Invalid props: compareWith length is not equal to codeLength'
+      );
     }
-    
-    if (_.indexOf(['center', 'left', 'right', 'full-width'], inputPosition) === -1) {
-      console.error('Invalid input position. Must be in: center, left, right, full');
+
+    if (
+      _.indexOf(['center', 'left', 'right', 'full-width'], inputPosition) === -1
+    ) {
+      console.error(
+        'Invalid input position. Must be in: center, left, right, full'
+      );
     }
   }
-  
+
   clear() {
     this.setState({
       codeArr: new Array(this.props.codeLength).fill(''),
-      currentIndex: 0
+      currentIndex: 0,
     });
     this._setFocus(0);
   }
-  
+
   _setFocus(index) {
     this.codeInputRefs[index].focus();
   }
-  
+
   _blur(index) {
     this.codeInputRefs[index].blur();
   }
-  
+
   _onFocus(index) {
     let newCodeArr = _.clone(this.state.codeArr);
     const currentEmptyIndex = _.findIndex(newCodeArr, c => !c);
@@ -88,155 +99,182 @@ export default class ConfirmationCodeInput extends Component {
         newCodeArr[i] = '';
       }
     }
-    
+
     this.setState({
       codeArr: newCodeArr,
-      currentIndex: index
-    })
+      currentIndex: index,
+    });
   }
-  
+
   _isMatchingCode(code, compareWithCode, ignoreCase = false) {
     if (ignoreCase) {
       return code.toLowerCase() == compareWithCode.toLowerCase();
     }
     return code == compareWithCode;
   }
-  
+
   _getContainerStyle(size, position) {
     switch (position) {
       case 'left':
         return {
           justifyContent: 'flex-start',
-          height: size
+          height: size,
         };
       case 'center':
         return {
           justifyContent: 'center',
-          height: size
+          height: size,
         };
       case 'right':
         return {
           justifyContent: 'flex-end',
-          height: size
+          height: size,
         };
       default:
         return {
           justifyContent: 'space-between',
-          height: size
-        }
+          height: size,
+        };
     }
   }
-  
+
   _getInputSpaceStyle(space) {
     const { inputPosition } = this.props;
     switch (inputPosition) {
       case 'left':
         return {
-          marginRight: space
+          marginRight: space,
         };
       case 'center':
         return {
-          marginRight: space/2,
-          marginLeft: space/2
+          marginRight: space / 2,
+          marginLeft: space / 2,
         };
       case 'right':
         return {
-          marginLeft: space
+          marginLeft: space,
         };
       default:
         return {
           marginRight: 0,
-          marginLeft: 0
+          marginLeft: 0,
         };
     }
   }
-  
+
   _getClassStyle(className, active) {
     const { cellBorderWidth, activeColor, inactiveColor, space } = this.props;
     let classStyle = {
       ...this._getInputSpaceStyle(space),
-      color: activeColor
+      color: activeColor,
     };
-    
+
     switch (className) {
       case 'clear':
         return _.merge(classStyle, { borderWidth: 0 });
       case 'border-box':
         return _.merge(classStyle, {
           borderWidth: cellBorderWidth,
-          borderColor: (active ? activeColor : inactiveColor)
+          borderColor: active ? activeColor : inactiveColor,
         });
       case 'border-circle':
         return _.merge(classStyle, {
           borderWidth: cellBorderWidth,
           borderRadius: 50,
-          borderColor: (active ? activeColor : inactiveColor)
+          borderColor: active ? activeColor : inactiveColor,
         });
       case 'border-b':
         return _.merge(classStyle, {
           borderBottomWidth: cellBorderWidth,
-          borderColor: (active ? activeColor : inactiveColor),
+          borderColor: active ? activeColor : inactiveColor,
         });
       case 'border-b-t':
         return _.merge(classStyle, {
           borderTopWidth: cellBorderWidth,
           borderBottomWidth: cellBorderWidth,
-          borderColor: (active ? activeColor : inactiveColor)
+          borderColor: active ? activeColor : inactiveColor,
         });
       case 'border-l-r':
         return _.merge(classStyle, {
           borderLeftWidth: cellBorderWidth,
           borderRightWidth: cellBorderWidth,
-          borderColor: (active ? activeColor : inactiveColor)
+          borderColor: active ? activeColor : inactiveColor,
         });
       default:
         return className;
     }
   }
-  
+
   _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, onCodeChange } = this.props;
+
+  /** synthesizes the input characters based on the keyboard type removing invalid characters */
+  _synthesizeInput = characters => {
+    const { keyboardType } = this.props;
+    if (keyboardType === 'numeric') {
+      return characters.replace(/\D/g, '');
+    }
+    return characters;
+  };
+
+  _onInputCode(baseCharacters, baseIndex) {
+    const {
+      codeLength,
+      onFulfill,
+      compareWithCode,
+      ignoreCase,
+      keyboardType,
+    } = this.props;
+
+    const characters = this._synthesizeInput(baseCharacters).substring(
+      0,
+      codeLength - baseIndex
+    );
+
     let newCodeArr = _.clone(this.state.codeArr);
-    newCodeArr[index] = character;
-    
-    if (index == codeLength - 1) {
-      const code = newCodeArr.join('');
-      
+    for (
+      let i = baseIndex, j = 0;
+      i < codeLength && j < characters.length;
+      i++, j++
+    ) {
+      newCodeArr[i] = characters[j];
+    }
+
+    /** caret position */
+    let index = baseIndex + characters.length - 1;
+
+    /** constructed plain code */
+    const code = newCodeArr.join('');
+    if (index === codeLength - 1 && code.length === codeLength) {
       if (compareWithCode) {
-        const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase);
+        const isMatching = this._isMatchingCode(
+          code,
+          compareWithCode,
+          ignoreCase
+        );
         onFulfill(isMatching, code);
         !isMatching && this.clear();
       } else {
         onFulfill(code);
       }
       this._blur(this.state.currentIndex);
     } else {
-      this._setFocus(this.state.currentIndex + 1);
+      this._setFocus(index + 1);
     }
-    
+
     this.setState(prevState => {
       return {
         codeArr: newCodeArr,
-        currentIndex: prevState.currentIndex + 1
+        currentIndex: index + 1,
       };
-    }, () => { onCodeChange(newCodeArr.join('')) });
+    });
   }
-  
+
   render() {
     const {
       codeLength,
@@ -246,14 +284,14 @@ export default class ConfirmationCodeInput extends Component {
       autoFocus,
       className,
       size,
-      activeColor
+      activeColor,
     } = this.props;
-    
+
     const initialCodeInputStyle = {
       width: size,
-      height: size
+      height: size,
     };
-    
+
     let codeInputs = [];
     for (let i = 0; i < codeLength; i++) {
       const id = i;
@@ -262,10 +300,10 @@ export default class ConfirmationCodeInput extends Component {
           key={id}
           ref={ref => (this.codeInputRefs[id] = ref)}
           style={[
-            styles.codeInput, 
-            initialCodeInputStyle, 
+            styles.codeInput,
+            initialCodeInputStyle,
             this._getClassStyle(className, this.state.currentIndex == id),
-            codeInputStyle
+            codeInputStyle,
           ]}
           underlineColorAndroid="transparent"
           selectionColor={activeColor}
@@ -274,16 +312,23 @@ export default class ConfirmationCodeInput extends Component {
           {...this.props}
           autoFocus={autoFocus && id == 0}
           onFocus={() => this._onFocus(id)}
-          value={this.state.codeArr[id] ? this.state.codeArr[id].toString() : ''}
+          value={
+            this.state.codeArr[id] ? this.state.codeArr[id].toString() : ''
+          }
           onChangeText={text => this._onInputCode(text, id)}
-          onKeyPress={(e) => this._onKeyPress(e)}
-          maxLength={1}
+          onKeyPress={e => this._onKeyPress(e)}
         />
-      )
+      );
     }
-    
+
     return (
-      <View style={[styles.container, this._getContainerStyle(size, inputPosition), containerStyle]}>
+      <View
+        style={[
+          styles.container,
+          this._getContainerStyle(size, inputPosition),
+          containerStyle,
+        ]}
+      >
         {codeInputs}
       </View>
     );
@@ -294,11 +339,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
-    marginTop: 20
+    marginTop: 20,
   },
   codeInput: {
     backgroundColor: 'transparent',
     textAlign: 'center',
-    padding: 0
-  }
+    padding: 0,
+  },
 });