Merge pull request #32 from hasithaWalpola/master

Add an boolean property to clear the OTP Input fields
tttstudios · Dec 30, 2019 · afbee61 · afbee61 · hasithaWalpola · Dec 30, 2019
2 parents 7cc7b68 + 0025335
commit afbee61
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/index.js b/index.js
@@ -15,6 +15,7 @@ export default class OTPInputView extends Component {
         code: PropTypes.string,
         secureTextEntry: PropTypes.bool,
         keyboardType: PropTypes.string,
+        clearInputs: PropTypes.bool
     }
 
     static defaultProps = {
@@ -24,7 +25,8 @@ export default class OTPInputView extends Component {
         onCodeFilled: null,
         autoFocusOnLoad: true,
         secureTextEntry: false,
-        keyboardType: "number-pad"
+        keyboardType: "number-pad",
+        clearInputs: false
     }
 
     fields = []
@@ -174,10 +176,19 @@ export default class OTPInputView extends Component {
         })
     }
 
+
+    clearAllFields = () => {
+        const { clearInputs, code } = this.props;
+        if (clearInputs && code === "") {
+            this.setState({ digits: code })
+        }
+    }
+
     renderOneInputField = (_, index) => {
         const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, keyboardType } = this.props
         const { defaultTextFieldStyle } = styles
         const { selectedIndex, digits } = this.state
+        const { clearInputs } = this.props
         return (
             <View pointerEvents="none" key={index + "view"}>
                 <TextInput
@@ -188,7 +199,7 @@ export default class OTPInputView extends Component {
                         this.handleChangeText(index, text)
                     }}
                     onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key) }}
-                    value={digits[index]}
+                    value={ !clearInputs ? digits[index]: "" }
                     keyboardType={keyboardType}
                     textContentType={isAutoFillSupported ? "oneTimeCode" : "none"}
                     key={index}
@@ -206,7 +217,7 @@ export default class OTPInputView extends Component {
     }
 
     render() {
-        const { pinCount, style } = this.props
+        const { pinCount, style, clearInputs } = this.props
         const digits = this.getDigits()
         return (
             <View
@@ -215,8 +226,13 @@ export default class OTPInputView extends Component {
                 <TouchableWithoutFeedback
                     style={{ width: '100%', height: '100%' }}
                     onPress={() => {
-                        let filledPinCount = digits.filter((digit) => { return (digit !== null && digit !== undefined) }).length
-                        this.focusField(Math.min(filledPinCount, pinCount - 1))
+                        if (!clearInputs) {
+                            let filledPinCount = digits.filter((digit) => { return (digit !== null && digit !== undefined) }).length
+                            this.focusField(Math.min(filledPinCount, pinCount - 1))
+                        } else {
+                            this.clearAllFields();
+                            this.focusField(0)
+                        }
                     }}
                 >
                     <View