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 { }