From 8efcf35d41950cb5b3fade2031137dc5f1dbb9e8 Mon Sep 17 00:00:00 2001
From: KulikovskyIgor <ihor.kulikovskyi@eleks.com>
Date: Wed, 24 Oct 2018 18:01:16 +0300
Subject: [PATCH] Added functionality to paste a code and it would populate all
 inputs.

---
 components/ConfirmationCodeInput.js | 31 ++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js
index 17a707d..82dd2b4 100644
--- a/components/ConfirmationCodeInput.js
+++ b/components/ConfirmationCodeInput.js
@@ -32,7 +32,7 @@ const getInputSpaceStyle = (space, inputPosition) => {
 	return positions[inputPosition] || positions.default
 }
 
-const getBorderStyle = (cellBorderWidth, borderType) =>{
+const getBorderStyle = (cellBorderWidth, borderType) => {
 	const types = {
 		clear: {borderWidth: 0},
 		square: {borderWidth: cellBorderWidth},
@@ -129,12 +129,20 @@ export default class ConfirmationCodeInput extends Component {
 		}
 	}
 
-	_onInputCode = index => character => {
+	_onInputCode = index => _.debounce(character => {
+		if (character.length === this.props.codeLength) {
+			this._onPasteCode(index, character)
+		} else if (character.length === 1) {
+			this._onTypeCode(index, character)
+		}
+	}, 100)
+
+	_onTypeCode = (index, character) => {
 		const {codeLength, onFulfill} = this.props
 		let newCodeArr = _.clone(this.state.codeArr)
 		newCodeArr[index] = character
 
-		if (index == codeLength - 1) {
+		if (index === codeLength - 1) {
 			const code = newCodeArr.join('')
 			onFulfill(code)
 			this._blur(this.state.currentIndex)
@@ -150,6 +158,20 @@ export default class ConfirmationCodeInput extends Component {
 		})
 	}
 
+	_onPasteCode = (index, code) => {
+		const {codeLength, onFulfill} = this.props;
+		const newCodeArr = code.split('');
+		const newCurrentIndex = codeLength - 1;
+
+		this._blur(this.state.currentIndex)
+
+		this.setState(() => ({
+			codeArr: newCodeArr,
+			currentIndex: newCurrentIndex,
+		}))
+		onFulfill(code)
+	}
+
 	focus = () => this._setFocus(this.state.currentIndex)
 
 	blur = () => this._blur(this.state.currentIndex)
@@ -180,7 +202,7 @@ export default class ConfirmationCodeInput extends Component {
 				value={this.state.codeArr[id] ? this.state.codeArr[id].toString() : ''}
 				onChangeText={this._onInputCode(id)}
 				onKeyPress={this._onKeyPress}
-				maxLength={1}
+				maxLength={codeLength}
 			/>
 		))
 
@@ -201,4 +223,3 @@ const styles = StyleSheet.create({
 		padding: 0,
 	},
 })
-	
\ No newline at end of file