diff --git a/README.md b/README.md
index 799fe11..21c95ca 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ render() {
inputPosition='left'
onFulfill={(code) => this._onFulfill(code)}
/>
-
+
-
+
return `(code)` in callback, else return `(isValid, code)`. **Required**
## functions
@@ -99,7 +100,7 @@ clear input:
```javascript
this.refs.refName.clear();
...
-
@@ -115,5 +116,5 @@ 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.
diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js
index 239c85a..c18c1ef 100644
--- a/components/ConfirmationCodeInput.js
+++ b/components/ConfirmationCodeInput.js
@@ -22,8 +22,9 @@ export default class ConfirmationCodeInput extends Component {
codeInputStyle: TextInput.propTypes.style,
containerStyle: viewPropTypes.style,
onFulfill: PropTypes.func,
+ getCurrentCode: PropTypes.func,
};
-
+
static defaultProps = {
codeLength: 5,
inputPosition: 'center',
@@ -37,29 +38,29 @@ export default class ConfirmationCodeInput extends Component {
compareWithCode: '',
ignoreCase: false
};
-
+
constructor(props) {
super(props);
-
+
this.state = {
codeArr: new Array(this.props.codeLength).fill(''),
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");
}
-
+
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(''),
@@ -67,18 +68,20 @@ export default class ConfirmationCodeInput extends Component {
});
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);
+ const { getCurrentCode } = this.props;
+
if (currentEmptyIndex !== -1 && currentEmptyIndex < index) {
return this._setFocus(currentEmptyIndex);
}
@@ -87,20 +90,22 @@ export default class ConfirmationCodeInput extends Component {
newCodeArr[i] = '';
}
}
-
+
+ getCurrentCode(newCodeArr.join(''));
+
this.setState({
codeArr: newCodeArr,
currentIndex: index
})
}
-
+
_isMatchingCode(code, compareWithCode, ignoreCase = false) {
if (ignoreCase) {
return code.toLowerCase() == compareWithCode.toLowerCase();
}
return code == compareWithCode;
}
-
+
_getContainerStyle(size, position) {
switch (position) {
case 'left':
@@ -125,7 +130,7 @@ export default class ConfirmationCodeInput extends Component {
}
}
}
-
+
_getInputSpaceStyle(space) {
const { inputPosition } = this.props;
switch (inputPosition) {
@@ -149,14 +154,14 @@ export default class ConfirmationCodeInput extends Component {
};
}
}
-
+
_getClassStyle(className, active) {
const { cellBorderWidth, activeColor, inactiveColor, space } = this.props;
let classStyle = {
...this._getInputSpaceStyle(space),
color: activeColor
};
-
+
switch (className) {
case 'clear':
return _.merge(classStyle, { borderWidth: 0 });
@@ -192,7 +197,7 @@ export default class ConfirmationCodeInput extends Component {
return className;
}
}
-
+
_onKeyPress(e) {
if (e.nativeEvent.key === 'Backspace') {
const { currentIndex } = this.state;
@@ -200,15 +205,15 @@ export default class ConfirmationCodeInput extends Component {
this._setFocus(nextIndex);
}
}
-
+
_onInputCode(character, index) {
const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props;
let newCodeArr = _.clone(this.state.codeArr);
newCodeArr[index] = character;
-
+
if (index == codeLength - 1) {
const code = newCodeArr.join('');
-
+
if (compareWithCode) {
const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase);
onFulfill(isMatching, code);
@@ -220,7 +225,7 @@ export default class ConfirmationCodeInput extends Component {
} else {
this._setFocus(this.state.currentIndex + 1);
}
-
+
this.setState(prevState => {
return {
codeArr: newCodeArr,
@@ -228,7 +233,7 @@ export default class ConfirmationCodeInput extends Component {
};
});
}
-
+
render() {
const {
codeLength,
@@ -240,12 +245,12 @@ export default class ConfirmationCodeInput extends Component {
size,
activeColor
} = this.props;
-
+
const initialCodeInputStyle = {
width: size,
height: size
};
-
+
let codeInputs = [];
for (let i = 0; i < codeLength; i++) {
const id = i;
@@ -254,8 +259,8 @@ 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
]}
@@ -273,7 +278,7 @@ export default class ConfirmationCodeInput extends Component {
/>
)
}
-
+
return (
{codeInputs}
diff --git a/index.d.ts b/index.d.ts
index 3473a5d..851c221 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -20,6 +20,7 @@ declare module "react-native-confirmation-code-input" {
codeInputStyle?: any,
containerStyle?: any;
onFulfill: Function;
+ getCurrentCode?: Function;
}
export default class CodeInput extends React.Component { }