Skip to content

Commit 0060ea8

Browse files
committed
Get Code text on every update of Field ttdung11t2#59
1 parent 4237663 commit 0060ea8

File tree

4 files changed

+30
-11
lines changed

4 files changed

+30
-11
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Prop | Type | Default | Description
9393
`codeInputStyle` | style object | | custom style for code input
9494
`containerStyle` | style object | | custom style for code input container
9595
`onFulfill` | function | | callback function called when fulfilling code. If `compareWithCode` is null -> return `(code)` in callback, else return `(isValid, code)`. **Required**
96-
96+
`onCodeChange` | function | | Get Code text on every update of Field
9797
## functions
9898
clear input:
9999
```javascript

components/ConfirmationCodeInput.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default class ConfirmationCodeInput extends Component {
1919
codeInputStyle: TextInput.propTypes.style,
2020
containerStyle: View.propTypes.style,
2121
onFulfill: PropTypes.func,
22+
onCodeChange: PropTypes.func,
2223
};
2324

2425
static defaultProps = {
@@ -32,7 +33,8 @@ export default class ConfirmationCodeInput extends Component {
3233
inactiveColor: 'rgba(255, 255, 255, 0.2)',
3334
space: 8,
3435
compareWithCode: '',
35-
ignoreCase: false
36+
ignoreCase: false,
37+
onCodeChange: (code) => null
3638
};
3739

3840
constructor(props) {
@@ -193,13 +195,20 @@ export default class ConfirmationCodeInput extends Component {
193195
_onKeyPress(e) {
194196
if (e.nativeEvent.key === 'Backspace') {
195197
const { currentIndex } = this.state;
198+
let newCodeArr = _.clone(this.state.codeArr);
196199
const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
200+
for (const i in newCodeArr) {
201+
if (i >= nextIndex) {
202+
newCodeArr[i] = '';
203+
}
204+
}
205+
this.props.onCodeChange(newCodeArr.join(''))
197206
this._setFocus(nextIndex);
198207
}
199208
}
200209

201210
_onInputCode(character, index) {
202-
const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
211+
const { codeLength, onFulfill, compareWithCode, ignoreCase, onCodeChange } = this.props;
203212
let newCodeArr = _.clone(this.state.codeArr);
204213
newCodeArr[index] = character;
205214

@@ -223,7 +232,7 @@ export default class ConfirmationCodeInput extends Component {
223232
codeArr: newCodeArr,
224233
currentIndex: prevState.currentIndex + 1
225234
};
226-
});
235+
}, () => { onCodeChange(newCodeArr.join('')) });
227236
}
228237

229238
render() {

example/src/components/ConfirmationCodeInput.js

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { View, TextInput, StyleSheet, Dimensions } from 'react-native';
44
import _ from 'lodash';
@@ -19,6 +19,7 @@ export default class ConfirmationCodeInput extends Component {
1919
codeInputStyle: TextInput.propTypes.style,
2020
containerStyle: View.propTypes.style,
2121
onFulfill: PropTypes.func,
22+
onCodeChange: PropTypes.func,
2223
};
2324

2425
static defaultProps = {
@@ -32,7 +33,8 @@ export default class ConfirmationCodeInput extends Component {
3233
inactiveColor: 'rgba(255, 255, 255, 0.2)',
3334
space: 8,
3435
compareWithCode: '',
35-
ignoreCase: false
36+
ignoreCase: false,
37+
onCodeChange: (code) => null
3638
};
3739

3840
constructor(props) {
@@ -193,13 +195,20 @@ export default class ConfirmationCodeInput extends Component {
193195
_onKeyPress(e) {
194196
if (e.nativeEvent.key === 'Backspace') {
195197
const { currentIndex } = this.state;
196-
const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
198+
let newCodeArr = _.clone(this.state.codeArr);
199+
const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
200+
for (const i in newCodeArr) {
201+
if (i >= nextIndex) {
202+
newCodeArr[i] = '';
203+
}
204+
}
205+
this.props.onCodeChange(newCodeArr.join(''))
197206
this._setFocus(nextIndex);
198207
}
199208
}
200209

201210
_onInputCode(character, index) {
202-
const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
211+
const { codeLength, onFulfill, compareWithCode, ignoreCase, onCodeChange } = this.props;
203212
let newCodeArr = _.clone(this.state.codeArr);
204213
newCodeArr[index] = character;
205214

@@ -223,7 +232,7 @@ export default class ConfirmationCodeInput extends Component {
223232
codeArr: newCodeArr,
224233
currentIndex: prevState.currentIndex + 1
225234
};
226-
});
235+
}, () => { onCodeChange(newCodeArr.join('')) });
227236
}
228237

229238
render() {

example/src/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
Text,
99
View,
1010
ScrollView,
11-
TextInput,
1211
Alert
1312
} from 'react-native';
1413

@@ -103,6 +102,7 @@ class example extends Component {
103102
size={30}
104103
inputPosition='left'
105104
onFulfill={(code) => this._onFulfill(code)}
105+
onCodeChange={(code) => { this.state.code = code }}
106106
/>
107107
</View>
108108

@@ -121,9 +121,9 @@ class example extends Component {
121121
onFulfill={(isValid) => this._onFinishCheckingCode1(isValid)}
122122
containerStyle={{ marginTop: 30 }}
123123
codeInputStyle={{ borderWidth: 1.5 }}
124+
onCodeChange={(code) => { this.state.code = code }}
124125
/>
125126
</View>
126-
127127
<View style={styles.inputWrapper3}>
128128
<Text style={styles.inputLabel3}>CIRCLE CONFIRMATION CODE</Text>
129129
<CodeInput
@@ -135,6 +135,7 @@ class example extends Component {
135135
autoFocus={false}
136136
codeInputStyle={{ fontWeight: '800' }}
137137
onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}
138+
onCodeChange={(code) => { this.state.code = code }}
138139
/>
139140
</View>
140141
</ScrollView>

0 commit comments

Comments
 (0)