From 5cf22b4e354b6bdebc49dfe594fbed0df67696e6 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Wed, 6 Jun 2018 21:17:30 +0200 Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8Add=20support=20for=20pasting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ConfirmationCodeInput.js | 197 ++++++++++++++++++---------- 1 file changed, 125 insertions(+), 72 deletions(-) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 239c85a..5f79d7d 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -1,6 +1,12 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { View, TextInput, StyleSheet, Dimensions, ViewPropTypes } from 'react-native'; +import { + View, + TextInput, + StyleSheet, + Dimensions, + ViewPropTypes, +} from 'react-native'; import _ from 'lodash'; // if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44) @@ -23,7 +29,7 @@ export default class ConfirmationCodeInput extends Component { containerStyle: viewPropTypes.style, onFulfill: PropTypes.func, }; - + static defaultProps = { codeLength: 5, inputPosition: 'center', @@ -35,47 +41,53 @@ export default class ConfirmationCodeInput extends Component { inactiveColor: 'rgba(255, 255, 255, 0.2)', space: 8, compareWithCode: '', - ignoreCase: false + ignoreCase: false, }; - + constructor(props) { super(props); - + this.state = { codeArr: new Array(this.props.codeLength).fill(''), - currentIndex: 0 + 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"); + 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'); + + 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(''), - currentIndex: 0 + currentIndex: 0, }); 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); @@ -87,112 +99,112 @@ export default class ConfirmationCodeInput extends Component { newCodeArr[i] = ''; } } - + this.setState({ codeArr: newCodeArr, - currentIndex: index - }) + currentIndex: index, + }); } - + _isMatchingCode(code, compareWithCode, ignoreCase = false) { if (ignoreCase) { return code.toLowerCase() == compareWithCode.toLowerCase(); } return code == compareWithCode; } - + _getContainerStyle(size, position) { switch (position) { case 'left': return { justifyContent: 'flex-start', - height: size + height: size, }; case 'center': return { justifyContent: 'center', - height: size + height: size, }; case 'right': return { justifyContent: 'flex-end', - height: size + height: size, }; default: return { justifyContent: 'space-between', - height: size - } + height: size, + }; } } - + _getInputSpaceStyle(space) { const { inputPosition } = this.props; switch (inputPosition) { case 'left': return { - marginRight: space + marginRight: space, }; case 'center': return { - marginRight: space/2, - marginLeft: space/2 + marginRight: space / 2, + marginLeft: space / 2, }; case 'right': return { - marginLeft: space + marginLeft: space, }; default: return { marginRight: 0, - marginLeft: 0 + marginLeft: 0, }; } } - + _getClassStyle(className, active) { const { cellBorderWidth, activeColor, inactiveColor, space } = this.props; let classStyle = { ...this._getInputSpaceStyle(space), - color: activeColor + color: activeColor, }; - + switch (className) { case 'clear': return _.merge(classStyle, { borderWidth: 0 }); case 'border-box': return _.merge(classStyle, { borderWidth: cellBorderWidth, - borderColor: (active ? activeColor : inactiveColor) + borderColor: active ? activeColor : inactiveColor, }); case 'border-circle': return _.merge(classStyle, { borderWidth: cellBorderWidth, borderRadius: 50, - borderColor: (active ? activeColor : inactiveColor) + borderColor: active ? activeColor : inactiveColor, }); case 'border-b': return _.merge(classStyle, { borderBottomWidth: cellBorderWidth, - borderColor: (active ? activeColor : inactiveColor), + borderColor: active ? activeColor : inactiveColor, }); case 'border-b-t': return _.merge(classStyle, { borderTopWidth: cellBorderWidth, borderBottomWidth: cellBorderWidth, - borderColor: (active ? activeColor : inactiveColor) + borderColor: active ? activeColor : inactiveColor, }); case 'border-l-r': return _.merge(classStyle, { borderLeftWidth: cellBorderWidth, borderRightWidth: cellBorderWidth, - borderColor: (active ? activeColor : inactiveColor) + borderColor: active ? activeColor : inactiveColor, }); default: return className; } } - + _onKeyPress(e) { if (e.nativeEvent.key === 'Backspace') { const { currentIndex } = this.state; @@ -200,17 +212,51 @@ export default class ConfirmationCodeInput extends Component { this._setFocus(nextIndex); } } - - _onInputCode(character, index) { - const { codeLength, onFulfill, compareWithCode, ignoreCase } = this.props; + + /** synthesizes the input characters based on the keyboard type removing invalid characters */ + _synthesizeInput = characters => { + const { keyboardType } = this.props; + if (keyboardType === 'numeric') { + return characters.replace(/\D/g, ''); + } + return characters; + }; + + _onInputCode(baseCharacters, baseIndex) { + const { + codeLength, + onFulfill, + compareWithCode, + ignoreCase, + keyboardType, + } = this.props; + + const characters = this._synthesizeInput(baseCharacters).substring( + 0, + codeLength - baseIndex + ); + let newCodeArr = _.clone(this.state.codeArr); - newCodeArr[index] = character; - - if (index == codeLength - 1) { - const code = newCodeArr.join(''); - + for ( + let i = baseIndex, j = 0; + i < codeLength && j < characters.length; + i++, j++ + ) { + newCodeArr[i] = characters[j]; + } + + /** caret position */ + let index = baseIndex + characters.length - 1; + + /** constructed plain code */ + const code = newCodeArr.join(''); + if (index === codeLength - 1 && code.length === codeLength) { if (compareWithCode) { - const isMatching = this._isMatchingCode(code, compareWithCode, ignoreCase); + const isMatching = this._isMatchingCode( + code, + compareWithCode, + ignoreCase + ); onFulfill(isMatching, code); !isMatching && this.clear(); } else { @@ -218,17 +264,17 @@ export default class ConfirmationCodeInput extends Component { } this._blur(this.state.currentIndex); } else { - this._setFocus(this.state.currentIndex + 1); + this._setFocus(index + 1); } - + this.setState(prevState => { return { codeArr: newCodeArr, - currentIndex: prevState.currentIndex + 1 + currentIndex: index + 1, }; }); } - + render() { const { codeLength, @@ -238,14 +284,14 @@ export default class ConfirmationCodeInput extends Component { autoFocus, className, size, - activeColor + activeColor, } = this.props; - + const initialCodeInputStyle = { width: size, - height: size + height: size, }; - + let codeInputs = []; for (let i = 0; i < codeLength; i++) { const id = i; @@ -254,10 +300,10 @@ 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 + codeInputStyle, ]} underlineColorAndroid="transparent" selectionColor={activeColor} @@ -266,16 +312,23 @@ export default class ConfirmationCodeInput extends Component { {...this.props} autoFocus={autoFocus && id == 0} onFocus={() => this._onFocus(id)} - value={this.state.codeArr[id] ? this.state.codeArr[id].toString() : ''} + value={ + this.state.codeArr[id] ? this.state.codeArr[id].toString() : '' + } onChangeText={text => this._onInputCode(text, id)} - onKeyPress={(e) => this._onKeyPress(e)} - maxLength={1} + onKeyPress={e => this._onKeyPress(e)} /> - ) + ); } - + return ( - + {codeInputs} ); @@ -286,11 +339,11 @@ const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', - marginTop: 20 + marginTop: 20, }, codeInput: { backgroundColor: 'transparent', textAlign: 'center', - padding: 0 - } + padding: 0, + }, }); From beffeebafcce2c9518eca17bcc070948120001e8 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Wed, 6 Jun 2018 21:19:31 +0200 Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=90=9BFix=20onFullfill=20call=20on=20?= =?UTF-8?q?backspace=20on=20last=20elem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ConfirmationCodeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 5f79d7d..0420bea 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -240,7 +240,7 @@ export default class ConfirmationCodeInput extends Component { for ( let i = baseIndex, j = 0; i < codeLength && j < characters.length; - i++, j++ + i++ , j++ ) { newCodeArr[i] = characters[j]; } From 6862923906b437f3cd473195000a1a1165dfb6c7 Mon Sep 17 00:00:00 2001 From: Tokyo Date: Wed, 6 Jun 2018 21:33:20 +0200 Subject: [PATCH 3/9] :zap: reduce bundle size significantly by uninstalling lodash and using only the needed parts --- .gitignore | 2 + components/ConfirmationCodeInput.js | 25 ++--- package-lock.json | 147 ++++++++++++++++++++++++++++ package.json | 5 +- 4 files changed, 167 insertions(+), 12 deletions(-) create mode 100644 package-lock.json diff --git a/.gitignore b/.gitignore index 91048aa..3257651 100644 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,5 @@ typings/ # OSX .DS_Store +# Editors +.vscode diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 0420bea..3a64a1d 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -7,7 +7,10 @@ import { Dimensions, ViewPropTypes, } from 'react-native'; -import _ from 'lodash'; +import clone from 'lodash.clone'; +import findIndex from 'lodash.findindex'; +import indexOf from 'lodash.indexof'; +import merge from 'lodash.merge'; // if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44) const viewPropTypes = ViewPropTypes || View.propTypes; @@ -64,7 +67,7 @@ export default class ConfirmationCodeInput extends Component { } if ( - _.indexOf(['center', 'left', 'right', 'full-width'], inputPosition) === -1 + indexOf(['center', 'left', 'right', 'full-width'], inputPosition) === -1 ) { console.error( 'Invalid input position. Must be in: center, left, right, full' @@ -89,8 +92,8 @@ export default class ConfirmationCodeInput extends Component { } _onFocus(index) { - let newCodeArr = _.clone(this.state.codeArr); - const currentEmptyIndex = _.findIndex(newCodeArr, c => !c); + let newCodeArr = clone(this.state.codeArr); + const currentEmptyIndex = findIndex(newCodeArr, c => !c); if (currentEmptyIndex !== -1 && currentEmptyIndex < index) { return this._setFocus(currentEmptyIndex); } @@ -171,31 +174,31 @@ export default class ConfirmationCodeInput extends Component { switch (className) { case 'clear': - return _.merge(classStyle, { borderWidth: 0 }); + return merge(classStyle, { borderWidth: 0 }); case 'border-box': - return _.merge(classStyle, { + return merge(classStyle, { borderWidth: cellBorderWidth, borderColor: active ? activeColor : inactiveColor, }); case 'border-circle': - return _.merge(classStyle, { + return merge(classStyle, { borderWidth: cellBorderWidth, borderRadius: 50, borderColor: active ? activeColor : inactiveColor, }); case 'border-b': - return _.merge(classStyle, { + return merge(classStyle, { borderBottomWidth: cellBorderWidth, borderColor: active ? activeColor : inactiveColor, }); case 'border-b-t': - return _.merge(classStyle, { + return merge(classStyle, { borderTopWidth: cellBorderWidth, borderBottomWidth: cellBorderWidth, borderColor: active ? activeColor : inactiveColor, }); case 'border-l-r': - return _.merge(classStyle, { + return merge(classStyle, { borderLeftWidth: cellBorderWidth, borderRightWidth: cellBorderWidth, borderColor: active ? activeColor : inactiveColor, @@ -236,7 +239,7 @@ export default class ConfirmationCodeInput extends Component { codeLength - baseIndex ); - let newCodeArr = _.clone(this.state.codeArr); + let newCodeArr = clone(this.state.codeArr); for ( let i = baseIndex, j = 0; i < codeLength && j < characters.length; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0a3c657 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,147 @@ +{ + "name": "react-native-confirmation-code-input", + "version": "1.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "0.4.23" + } + }, + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.18" + } + }, + "iconv-lite": { + "version": "0.4.23", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", + "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", + "requires": { + "safer-buffer": "2.1.2" + } + }, + "is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" + }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "1.7.3", + "whatwg-fetch": "2.0.4" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" + }, + "lodash.clone": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz", + "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=" + }, + "lodash.findindex": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.findindex/-/lodash.findindex-4.6.0.tgz", + "integrity": "sha1-oyRd7mH7m24GJLU1ElYku2nBEQY=" + }, + "lodash.indexof": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/lodash.indexof/-/lodash.indexof-4.0.5.tgz", + "integrity": "sha1-U3FK3Czd1u2HY4+JOqm2wk4x7zw=" + }, + "lodash.merge": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz", + "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==" + }, + "loose-envify": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", + "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", + "requires": { + "js-tokens": "3.0.2" + } + }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "0.1.12", + "is-stream": "1.1.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "2.0.6" + } + }, + "prop-types": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", + "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" + }, + "ua-parser-js": { + "version": "0.7.18", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", + "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==" + }, + "whatwg-fetch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", + "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" + } + } +} diff --git a/package.json b/package.json index d7b2aa8..4594448 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,10 @@ "pin-code-input" ], "dependencies": { - "lodash": "^4.17.4", + "lodash.clone": "^4.5.0", + "lodash.findindex": "^4.6.0", + "lodash.indexof": "^4.0.5", + "lodash.merge": "^4.6.1", "prop-types": "^15.5.10" }, "homepage": "https://github.com/ttdung11t2/react-native-confirmation-code-input.git", From fcb7065a5bada0cd30607fe87f6e82edea65cee7 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Fri, 17 Aug 2018 16:21:23 +0100 Subject: [PATCH 4/9] Update .gitignore --- .gitignore | 3 --- 1 file changed, 3 deletions(-) diff --git a/.gitignore b/.gitignore index 3257651..b93bf30 100644 --- a/.gitignore +++ b/.gitignore @@ -65,6 +65,3 @@ typings/ # OSX .DS_Store - -# Editors -.vscode From fa0b85028104d2af80a73e32e7f2924254783731 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Fri, 17 Aug 2018 16:22:03 +0100 Subject: [PATCH 5/9] Update .gitignore From 3ce106e6833173ef5b41bd86279a4bdacb5bc0a2 Mon Sep 17 00:00:00 2001 From: Tokyo Date: Tue, 13 Oct 2020 22:39:10 +0200 Subject: [PATCH 6/9] :arrow_up: upgrade deps --- package-lock.json | 126 ++++++++-------------------------------------- package.json | 4 +- 2 files changed, 22 insertions(+), 108 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0a3c657..77cbd02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,64 +4,10 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "asap": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" - }, - "core-js": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" - }, - "encoding": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", - "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", - "requires": { - "iconv-lite": "0.4.23" - } - }, - "fbjs": { - "version": "0.8.16", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", - "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", - "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.18" - } - }, - "iconv-lite": { - "version": "0.4.23", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", - "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", - "requires": { - "safer-buffer": "2.1.2" - } - }, - "is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" - }, - "isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "requires": { - "node-fetch": "1.7.3", - "whatwg-fetch": "2.0.4" - } - }, "js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "lodash.clone": { "version": "4.5.0", @@ -79,25 +25,16 @@ "integrity": "sha1-U3FK3Czd1u2HY4+JOqm2wk4x7zw=" }, "lodash.merge": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz", - "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==" + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, "loose-envify": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", - "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "requires": { - "js-tokens": "3.0.2" - } - }, - "node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", "requires": { - "encoding": "0.1.12", - "is-stream": "1.1.0" + "js-tokens": "^3.0.0 || ^4.0.0" } }, "object-assign": { @@ -105,43 +42,20 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, - "promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "requires": { - "asap": "2.0.6" - } - }, "prop-types": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", - "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" } }, - "safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" - }, - "setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" - }, - "ua-parser-js": { - "version": "0.7.18", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", - "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==" - }, - "whatwg-fetch": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", - "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } } diff --git a/package.json b/package.json index 4594448..c3ac39f 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,8 @@ "lodash.clone": "^4.5.0", "lodash.findindex": "^4.6.0", "lodash.indexof": "^4.0.5", - "lodash.merge": "^4.6.1", - "prop-types": "^15.5.10" + "lodash.merge": "^4.6.2", + "prop-types": "^15.7.2" }, "homepage": "https://github.com/ttdung11t2/react-native-confirmation-code-input.git", "bugs": { From 7a109a0c503cd35ea3ff5dbdbddc10bd2e772f5d Mon Sep 17 00:00:00 2001 From: Tokyo Date: Tue, 13 Oct 2020 22:40:32 +0200 Subject: [PATCH 7/9] :sparkles: add contributors --- package.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/package.json b/package.json index c3ac39f..6730fbf 100644 --- a/package.json +++ b/package.json @@ -36,5 +36,17 @@ "url": "https://github.com/ttdung11t2/react-native-confirmation-code-input.git" }, "author": "Dung Tran ", + "contributors": [ + { + "name": "Dung Tran", + "email": "ttdung001@gmail.com", + "url": "https://github.com/ttdung11t2" + }, + { + "name": "Ahmed Tarek", + "email": "ahmed.tokyo1@gmail.com", + "url": "https://github.com/A-Tokyo" + } + ], "license": "MIT" } From cf79cc20b42d9e1eba8c158f7aca7e9aa0227a9d Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Mon, 1 Feb 2021 15:50:21 +0200 Subject: [PATCH 8/9] Update components/ConfirmationCodeInput.js --- components/ConfirmationCodeInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index 8103cb8..beddd92 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -240,6 +240,7 @@ export default class ConfirmationCodeInput extends Component { compareWithCode, ignoreCase, keyboardType, + onCodeChange, } = this.props; const characters = this._synthesizeInput(baseCharacters).substring( From 225be6cdcef14baa9fb67595553014fd40d14271 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Mon, 1 Feb 2021 15:50:27 +0200 Subject: [PATCH 9/9] Update components/ConfirmationCodeInput.js --- components/ConfirmationCodeInput.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/ConfirmationCodeInput.js b/components/ConfirmationCodeInput.js index beddd92..3872987 100644 --- a/components/ConfirmationCodeInput.js +++ b/components/ConfirmationCodeInput.js @@ -284,7 +284,11 @@ export default class ConfirmationCodeInput extends Component { codeArr: newCodeArr, currentIndex: index + 1, }; - }, () => { onCodeChange(newCodeArr.join('')) }); + }, () => { + if (onCodeChange) { + onCodeChange(newCodeArr.join('')) + } + }); } render() {