From 8a65d543ed3fdf0b2afafb3e8e248a14d21c0547 Mon Sep 17 00:00:00 2001 From: Pujan Shah Date: Sun, 18 Aug 2019 17:17:11 +0530 Subject: [PATCH 1/5] Get Code text on every update --- components/ConfirmationCodeInput.js | 15 ++++++++++++--- .../src/components/ConfirmationCodeInput.js | 19 ++++++++++++++----- example/src/index.js | 5 +++-- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 239c85a..4996c58 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -22,6 +22,7 @@ export default class ConfirmationCodeInput extends Component { codeInputStyle: TextInput.propTypes.style, containerStyle: viewPropTypes.style, onFulfill: PropTypes.func, + onCodeChange: PropTypes.func }; static defaultProps = { @@ -35,7 +36,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) { @@ -196,13 +198,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; @@ -226,7 +235,7 @@ export default class ConfirmationCodeInput extends Component { codeArr: newCodeArr, currentIndex: prevState.currentIndex + 1 }; - }); + }, () => { onCodeChange(newCodeArr.join('')) }); } render() { diff --git a/example/src/components/ConfirmationCodeInput.js b/example/src/components/ConfirmationCodeInput.js index c9876a2..f402801 100644 --- a/example/src/components/ConfirmationCodeInput.js +++ b/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() { diff --git a/example/src/index.js b/example/src/index.js index af5f74b..6144275 100644 --- a/example/src/index.js +++ b/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 }} /> @@ -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 }} /> - CIRCLE CONFIRMATION CODE this._onFinishCheckingCode2(isValid, code)} + onCodeChange={(code) => { this.state.code = code }} /> From c5e43d3b94d0c8ea25262e00925ccbea0723fff4 Mon Sep 17 00:00:00 2001 From: Pujan Shah Date: Sun, 18 Aug 2019 18:20:23 +0530 Subject: [PATCH 2/5] updated code text on clear function --- example/src/components/ConfirmationCodeInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/example/src/components/ConfirmationCodeInput.js b/example/src/components/ConfirmationCodeInput.js index f402801..772e9a8 100644 --- a/example/src/components/ConfirmationCodeInput.js +++ b/example/src/components/ConfirmationCodeInput.js @@ -68,6 +68,7 @@ export default class ConfirmationCodeInput extends Component { } _setFocus(index) { + this.props.onCodeChange(new Array(this.props.codeLength).fill('').join('')) this.codeInputRefs[index].focus(); } From c821b190525b4b06f8af84c0452e73cc770f9bc3 Mon Sep 17 00:00:00 2001 From: Pujan Shah Date: Sun, 18 Aug 2019 18:21:49 +0530 Subject: [PATCH 3/5] Get Code text on every update --- components/ConfirmationCodeInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 4996c58..1bf1ec4 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -71,6 +71,7 @@ export default class ConfirmationCodeInput extends Component { } _setFocus(index) { + this.props.onCodeChange(new Array(this.props.codeLength).fill('').join('')) this.codeInputRefs[index].focus(); } From 85a20eaaa236bd37a24e5c715269b8f8869ccb10 Mon Sep 17 00:00:00 2001 From: Pujan Shah Date: Sun, 18 Aug 2019 18:28:35 +0530 Subject: [PATCH 4/5] Update README.md --- README.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 799fe11..8e7af9f 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ A react-native confirmation code input for both IOS and Android ## Installation ```sh -npm install react-native-confirmation-code-input --save +npm install git+https://github.com/PujanShah22/react-native-confirmation-code-input.git ``` ## Usage @@ -43,6 +43,7 @@ render() { size={30} inputPosition='left' onFulfill={(code) => this._onFulfill(code)} + onCodeChange={(code) => { this.state.code = code }} /> this._onFinishCheckingCode1(isValid)} containerStyle={{ marginTop: 30 }} codeInputStyle={{ borderWidth: 1.5 }} + onCodeChange={(code) => { this.state.code = code }} /> this._onFinishCheckingCode2(isValid, code)} + onCodeChange={(code) => { this.state.code = code }} /> ) } @@ -104,16 +107,9 @@ this.refs.refName.clear(); ref="refName" /> ``` -## Example -See [EXAMPLE](example) -```sh -git clone https://github.com/ttdung11t2/react-native-confirmation-code-input.git -cd react-native-confirmation-code-input/example -npm install -react-native run-ios / react-native run-android -``` + ## License react-native-confirmation-code-input is released under the MIT license. See [LICENSE](LICENSE) for details. -Any question or support will welcome. \ No newline at end of file +Any question or support will welcome. From f971e402947d52cd079a8ce9787c3426c293fe2d Mon Sep 17 00:00:00 2001 From: Pujan Shah Date: Sun, 18 Aug 2019 18:30:31 +0530 Subject: [PATCH 5/5] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 8e7af9f..3f1fdf3 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,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 | | callback function called when updating code. ## functions clear input: