react-native-otp-inputs - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

 # Changelog
 
-<a name="3.2.0"></a>
-## 3.2.0 (2019-06-13)
+<a name="3.3.0"></a>
+## 3.3.0 (2019-07-25)
 
@@ -10,2 +10,4 @@ ### Added
 - ✨ Add testIDPrefix prop [[c2a00f6](https://github.com/dsznajder/react-native-otp-inputs/commit/c2a00f6222b4e0cd79d612a484e08bfb684ddae8)]
+- ✨ RTL support and Placeholder support. ([#75](https://github.com/dsznajder/react-native-otp-inputs/issues/75)) [[e417b13](https://github.com/dsznajder/react-native-otp-inputs/commit/e417b1369df9df00099a5b047382eb4da08fd226)]
+- ✨ Add reset method [[69e0146](https://github.com/dsznajder/react-native-otp-inputs/commit/69e0146a7e3353fac49d18b1712e5536d6dd4d8a)]
 - ✅ Fix tests [[f413a26](https://github.com/dsznajder/react-native-otp-inputs/commit/f413a26f364ca7e67e604d2df17b2815c7448c39)]
@@ -20,2 +22,41 @@
 - 📝 Update README [[3f0b3da](https://github.com/dsznajder/react-native-otp-inputs/commit/3f0b3dab76bcbb3190b3dc3a7820581fb58cf54b)]
+-  Bump react-native from 0.59.8 to 0.59.9 [[6b7e823](https://github.com/dsznajder/react-native-otp-inputs/commit/6b7e823c0a241d613fe18c1cee55154f561f869f)]
+-  Bump typescript from 3.4.5 to 3.5.2 [[ee80a2e](https://github.com/dsznajder/react-native-otp-inputs/commit/ee80a2e1c490188d391d999b69cbbc2ed6c64684)]
+-  Bump @types/jest from 24.0.13 to 24.0.14 [[abc0b0f](https://github.com/dsznajder/react-native-otp-inputs/commit/abc0b0f467f07a3e3a77737850e53de7903eae0b)]
+-  Bump release-it from 12.2.1 to 12.3.0 [[3b15819](https://github.com/dsznajder/react-native-otp-inputs/commit/3b15819b712f825ec3ab873b848c974ca690411a)]
+-  Bump tslint from 5.16.0 to 5.17.0 [[1d748b9](https://github.com/dsznajder/react-native-otp-inputs/commit/1d748b9286d8b92408c347d1e891e3bdd78b2cac)]
+-  Bump @types/react-native from 0.57.60 to 0.57.63 [[1ddb6b7](https://github.com/dsznajder/react-native-otp-inputs/commit/1ddb6b7f9fc59c5ff9e55d7009a45921245797bc)]
+-  Bump @types/jest from 24.0.14 to 24.0.15 [[43c200f](https://github.com/dsznajder/react-native-otp-inputs/commit/43c200fdf837ab916bccb78e36766b081c7ebe6f)]
+-  Bump husky from 2.3.0 to 2.4.1 [[2222b93](https://github.com/dsznajder/react-native-otp-inputs/commit/2222b93a04cd150902c8d782197785d1a7f3718a)]
+-  Bump @types/react from 16.8.18 to 16.8.20 [[042f1a0](https://github.com/dsznajder/react-native-otp-inputs/commit/042f1a0e0a113c01ae43fc547f86f2a4dce3ac09)]
+-  Bump @types/react-test-renderer from 16.8.1 to 16.8.2 [[1ba4b0b](https://github.com/dsznajder/react-native-otp-inputs/commit/1ba4b0bc2a22b959ed19834458343ccb1fd1c7f8)]
+-  Bump @react-native-community/bob from 0.4.1 to 0.5.0 [[385c9cb](https://github.com/dsznajder/react-native-otp-inputs/commit/385c9cbce164175dc83d16a44c11e11a871c44b1)]
+-  Bump @types/react from 16.8.20 to 16.8.22 [[1239233](https://github.com/dsznajder/react-native-otp-inputs/commit/1239233184dfc03bcd91b6550f256fe39b60233e)]
+-  Bump tslint from 5.17.0 to 5.18.0 [[e3ed24d](https://github.com/dsznajder/react-native-otp-inputs/commit/e3ed24d27c29152dfa62d91165a3bc2b0c17db12)]
+-  Bump react-test-renderer from 16.8.3 to 16.8.6 [[0974a97](https://github.com/dsznajder/react-native-otp-inputs/commit/0974a97ee022eed45526cd4542f15ef93ed820b0)]
+-  Bump husky from 2.4.1 to 2.5.0 [[e549d9c](https://github.com/dsznajder/react-native-otp-inputs/commit/e549d9ca227b6a2b065e6b811688c42b2e5ce12c)]
+-  Bump @types/react-native from 0.57.63 to 0.57.64 [[d3eb14f](https://github.com/dsznajder/react-native-otp-inputs/commit/d3eb14f2be249a7252e813a7523ff507f1911998)]
+-  Bump husky from 2.5.0 to 2.7.0 [[343577f](https://github.com/dsznajder/react-native-otp-inputs/commit/343577ffbb871af4e9e5ed653c3b6e362ac262c0)]
+-  Bump @react-native-community/bob from 0.5.0 to 0.6.0 [[577da22](https://github.com/dsznajder/react-native-otp-inputs/commit/577da22d2e1de5d1869d27883bb712ca62f6f947)]
+-  Bump husky from 2.7.0 to 3.0.0 [[05b0c0a](https://github.com/dsznajder/react-native-otp-inputs/commit/05b0c0a88193f13ab80da7982db83c0a44be1073)]
+-  Bump @react-native-community/bob from 0.6.0 to 0.6.1 [[bb04102](https://github.com/dsznajder/react-native-otp-inputs/commit/bb041028ae035fc79c92d74ea848529724b1b315)]
+-  Bump @types/react-native from 0.57.64 to 0.57.65 [[a91362b](https://github.com/dsznajder/react-native-otp-inputs/commit/a91362b7d4130102794cdc2dc94b26a0382251a1)]
+-  Bump react-native from 0.59.9 to 0.59.10 [[c2589a6](https://github.com/dsznajder/react-native-otp-inputs/commit/c2589a60ae7c0756a4694785b70751f5b6cb1e4d)]
+-  Bump react and react-native [[7fb809a](https://github.com/dsznajder/react-native-otp-inputs/commit/7fb809a5298aac67ca00f63e9fe94f2057aa5875)]
+-  Bump @types/react from 16.8.22 to 16.8.23 [[1aa86cd](https://github.com/dsznajder/react-native-otp-inputs/commit/1aa86cd509029d04cb9a561184c06c98a00abc23)]
+-  Bump @babel/core from 7.4.5 to 7.5.0 [[4d88545](https://github.com/dsznajder/react-native-otp-inputs/commit/4d8854508e1110a4a0b3e2c7f4668c1dd8adfd12)]
+-  Bump metro-react-native-babel-preset from 0.54.1 to 0.55.0 [[beb4c47](https://github.com/dsznajder/react-native-otp-inputs/commit/beb4c47cecb776d07f640e5958e06e1b3551413b)]
+-  Bump release-it from 12.3.0 to 12.3.2 [[68e1929](https://github.com/dsznajder/react-native-otp-inputs/commit/68e19295fa5be0404d0db7a60b4a1b0e23ef3820)]
+-  Bump @types/react-native from 0.57.65 to 0.60.0 [[1d5ee1e](https://github.com/dsznajder/react-native-otp-inputs/commit/1d5ee1e5b091f8af10a92482c18abec0d05fe9c7)]
+-  Bump typescript from 3.5.2 to 3.5.3 [[123e508](https://github.com/dsznajder/react-native-otp-inputs/commit/123e5080ac661000352cc3b636f0abc64b9bf1e8)]
+-  Bump @babel/core from 7.5.0 to 7.5.4 [[9402649](https://github.com/dsznajder/react-native-otp-inputs/commit/94026492c0b37f95048ca19d4b0196c55bf233df)]
+-  Bump react-native from 0.60.0 to 0.60.3 [[0c61c98](https://github.com/dsznajder/react-native-otp-inputs/commit/0c61c9804d31c43b35aa77953fc3bcbd9ff7dc0a)]
+-  Bump release-it from 12.3.2 to 12.3.3 [[83343ec](https://github.com/dsznajder/react-native-otp-inputs/commit/83343ece20895f846be6900ec918cdf5c053e3c7)]
+-  Bump @types/react-native from 0.60.0 to 0.60.1 [[ab9da88](https://github.com/dsznajder/react-native-otp-inputs/commit/ab9da88597fd51451ad5381ffa0ce98fd0dbf010)]
+-  Bump @types/react-native from 0.60.1 to 0.60.2 [[4f6cf7f](https://github.com/dsznajder/react-native-otp-inputs/commit/4f6cf7ff7659884e9bd71fb717502724ef737195)]
+-  Bump @babel/core from 7.5.4 to 7.5.5 [[e5bce21](https://github.com/dsznajder/react-native-otp-inputs/commit/e5bce216db2aa768d9283e9dc714c13f73bb368f)]
+-  Bump react-native from 0.60.3 to 0.60.4 [[f0a6e1b](https://github.com/dsznajder/react-native-otp-inputs/commit/f0a6e1b3b540762b9a6c22396f80624ccbf1054e)]
+-  Bump husky from 3.0.0 to 3.0.1 [[4841f0c](https://github.com/dsznajder/react-native-otp-inputs/commit/4841f0cbee816c96886e9df6b1d06cc8e5335cf9)]
+-  Bump @types/react-test-renderer from 16.8.2 to 16.8.3 ([#76](https://github.com/dsznajder/react-native-otp-inputs/issues/76)) [[0c52317](https://github.com/dsznajder/react-native-otp-inputs/commit/0c52317524da4df78c88f99ecd7141b805f7c66f)]
+-  Bump release-it from 12.3.3 to 12.3.4 [[d278825](https://github.com/dsznajder/react-native-otp-inputs/commit/d2788250389a0ef699321b62b5fc2f92facdb9ae)]
 
@@ -22,0 +63,0 @@

lib/module/index.js

@@ -1,2 +0,2 @@
-import _objectSpread from"@babel/runtime/helpers/objectSpread";import _regeneratorRuntime from"@babel/runtime/regenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/damiansznajder/Projects/private/otp-inputs/src/index.tsx";import React,{PureComponent}from'react';import{Clipboard,Keyboard,Text,View}from'react-native';import OtpInput from'./OtpInput';import defaultStyles from'./defaultStyles';var MINIMAL_INDEX=0;var OtpInputs=function(_PureComponent){_inherits(OtpInputs,_PureComponent);function OtpInputs(props){var _this;_classCallCheck(this,OtpInputs);_this=_possibleConstructorReturn(this,_getPrototypeOf(OtpInputs).call(this,props));_this._listenOnCopiedText=function _callee(){var copiedText;return _regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.next=2;return _regeneratorRuntime.awrap(Clipboard.getString());case 2:copiedText=_context.sent;if(copiedText&&copiedText.length===_this.props.numberOfInputs&&copiedText!==_this.state.otpCode.join('')&&copiedText!==_this.state.previousCopiedText){_this._handleAfterOtpAction(copiedText.split(''),_this.props.numberOfInputs,true);}case 4:case"end":return _context.stop();}}});};_this._handleAfterOtpAction=function(otpCode,indexToFocus,fromClipboard){var _this$props=_this.props,handleChange=_this$props.handleChange,numberOfInputs=_this$props.numberOfInputs;handleChange(otpCode.join(''));_this.setState(_objectSpread({otpCode:otpCode},fromClipboard&&{previousCopiedText:otpCode.join('')}));if(indexToFocus===numberOfInputs){return Keyboard.dismiss();}if(indexToFocus>=MINIMAL_INDEX&&indexToFocus<numberOfInputs){_this._focusInput(indexToFocus);}};_this._updateText=function(event,index){var text=event.nativeEvent.text;if(text){var otpArray=_this.state.otpCode;otpArray[index]=text[text.length-1];_this._handleAfterOtpAction(otpArray,index+1);}};_this._handleBackspace=function(event,index){if(event.nativeEvent.key==='Backspace'){var _this$props2=_this.props,handleChange=_this$props2.handleChange,numberOfInputs=_this$props2.numberOfInputs;var _otpCode=_this.state.otpCode;_otpCode[index]='';handleChange(_otpCode.join(''));_this.setState({otpCode:_otpCode});if(index>MINIMAL_INDEX&&index<numberOfInputs){_this._focusInput(index-1);}}};_this._focusInput=function(index){_this.inputs[index].current.focus();};_this._renderInputs=function(){var _this$props3=_this.props,autoCapitalize=_this$props3.autoCapitalize,clearTextOnFocus=_this$props3.clearTextOnFocus,errorMessage=_this$props3.errorMessage,focusedBorderColor=_this$props3.focusedBorderColor,focusStyles=_this$props3.focusStyles,inputContainerStyles=_this$props3.inputContainerStyles,inputStyles=_this$props3.inputStyles,inputTextErrorColor=_this$props3.inputTextErrorColor,keyboardType=_this$props3.keyboardType,numberOfInputs=_this$props3.numberOfInputs,secureTextEntry=_this$props3.secureTextEntry,selectTextOnFocus=_this$props3.selectTextOnFocus,testIDPrefix=_this$props3.testIDPrefix,unfocusedBorderColor=_this$props3.unfocusedBorderColor;var otpCode=_this.state.otpCode;var iterationArray=Array(numberOfInputs).fill(0);return iterationArray.map(function(_,index){return React.createElement(OtpInput,{autoCapitalize:autoCapitalize,clearTextOnFocus:clearTextOnFocus,containerStyles:inputContainerStyles,focusStyles:focusStyles,error:!!errorMessage,focusedBorderColor:focusedBorderColor,handleBackspace:function handleBackspace(event){return _this._handleBackspace(event,index);},inputStyles:inputStyles,key:index,secureTextEntry:secureTextEntry,keyboardType:keyboardType,ref:_this.inputs[index],selectTextOnFocus:selectTextOnFocus,textErrorColor:inputTextErrorColor,unfocusedBorderColor:unfocusedBorderColor,updateText:function updateText(event){return _this._updateText(event,index);},value:otpCode[index],testID:testIDPrefix+"-"+index,__source:{fileName:_jsxFileName,lineNumber:185}});});};var inputs=[];for(var index=0;index<_this.props.numberOfInputs;index++){inputs[index]=React.createRef();}_this._interval=null;_this.inputs=inputs;_this.state={loading:false,previousCopiedText:'',otpCode:[]};return _this;}_createClass(OtpInputs,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this._listenOnCopiedText();this._interval=setInterval(function(){_this2._listenOnCopiedText();},1000);}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this._interval);}},{key:"render",value:function render(){var _this$props4=this.props,containerStyles=_this$props4.containerStyles,errorMessage=_this$props4.errorMessage,errorMessageContainerStyles=_this$props4.errorMessageContainerStyles,errorMessageTextStyles=_this$props4.errorMessageTextStyles,inputsContainerStyles=_this$props4.inputsContainerStyles;return React.createElement(View,{style:[defaultStyles.container,containerStyles],__source:{fileName:_jsxFileName,lineNumber:220}},errorMessage&&React.createElement(View,{style:[defaultStyles.errorMessageContainer,errorMessageContainerStyles],__source:{fileName:_jsxFileName,lineNumber:222}},React.createElement(Text,{testID:"errorText",style:errorMessageTextStyles,__source:{fileName:_jsxFileName,lineNumber:223}},errorMessage)),React.createElement(View,{style:[defaultStyles.inputsContainer,inputsContainerStyles],__source:{fileName:_jsxFileName,lineNumber:228}},this._renderInputs()));}}]);return OtpInputs;}(PureComponent);OtpInputs.defaultProps={autoCapitalize:'none',clearTextOnFocus:false,focusedBorderColor:'#0000ff',handleChange:console.log,inputTextErrorColor:'#ff0000',keyboardType:'phone-pad',numberOfInputs:4,secureTextEntry:false,selectTextOnFocus:true,unfocusedBorderColor:'#a0a0a0',testIDPrefix:'otpInput'};export{OtpInputs as default};
+import _objectSpread from"@babel/runtime/helpers/objectSpread";import _regeneratorRuntime from"@babel/runtime/regenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/damiansznajder/Projects/private/otp-inputs/src/index.tsx";import React,{PureComponent}from'react';import{Clipboard,Keyboard,Text,View}from'react-native';import OtpInput from'./OtpInput';import defaultStyles from'./defaultStyles';var MINIMAL_INDEX=0;var OtpInputs=function(_PureComponent){_inherits(OtpInputs,_PureComponent);function OtpInputs(props){var _this;_classCallCheck(this,OtpInputs);_this=_possibleConstructorReturn(this,_getPrototypeOf(OtpInputs).call(this,props));_this._listenOnCopiedText=function _callee(){var numberOfInputs,_this$state,otpCode,previousCopiedText,copiedText;return _regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:numberOfInputs=_this.props.numberOfInputs;_this$state=_this.state,otpCode=_this$state.otpCode,previousCopiedText=_this$state.previousCopiedText;_context.next=4;return _regeneratorRuntime.awrap(Clipboard.getString());case 4:copiedText=_context.sent;if(copiedText&&copiedText.length===numberOfInputs&&copiedText!==otpCode.join('')&&copiedText!==previousCopiedText){_this._handleAfterOtpAction(copiedText.split(''),numberOfInputs,true);}case 6:case"end":return _context.stop();}}});};_this._handleAfterOtpAction=function(otpCode,indexToFocus,fromClipboard){var _this$props=_this.props,handleChange=_this$props.handleChange,numberOfInputs=_this$props.numberOfInputs;handleChange(otpCode.join(''));_this.setState(_objectSpread({otpCode:otpCode},fromClipboard&&{previousCopiedText:otpCode.join('')}));if(indexToFocus===numberOfInputs){return Keyboard.dismiss();}if(indexToFocus>=MINIMAL_INDEX&&indexToFocus<numberOfInputs){_this._focusInput(indexToFocus);}};_this._updateText=function(event,index){var text=event.nativeEvent.text;if(text){var otpArray=_this.state.otpCode;otpArray[index]=text[text.length-1];_this._handleAfterOtpAction(otpArray,index+1);}};_this._handleBackspace=function(event,index){if(event.nativeEvent.key==='Backspace'){var _this$props2=_this.props,handleChange=_this$props2.handleChange,numberOfInputs=_this$props2.numberOfInputs;var _otpCode=_this.state.otpCode;_otpCode[index]='';handleChange(_otpCode.join(''));_this.setState({otpCode:_otpCode});if(index>MINIMAL_INDEX&&index<numberOfInputs){_this._focusInput(index-1);}}};_this._focusInput=function(index){_this.inputs[index].current.focus();};_this._renderInputs=function(){var _this$props3=_this.props,autoCapitalize=_this$props3.autoCapitalize,clearTextOnFocus=_this$props3.clearTextOnFocus,errorMessage=_this$props3.errorMessage,focusedBorderColor=_this$props3.focusedBorderColor,focusStyles=_this$props3.focusStyles,inputContainerStyles=_this$props3.inputContainerStyles,inputStyles=_this$props3.inputStyles,inputTextErrorColor=_this$props3.inputTextErrorColor,keyboardType=_this$props3.keyboardType,numberOfInputs=_this$props3.numberOfInputs,secureTextEntry=_this$props3.secureTextEntry,selectTextOnFocus=_this$props3.selectTextOnFocus,testIDPrefix=_this$props3.testIDPrefix,unfocusedBorderColor=_this$props3.unfocusedBorderColor,isRTL=_this$props3.isRTL,placeholder=_this$props3.placeholder;var otpCode=_this.state.otpCode;var iterationArray=Array(numberOfInputs).fill(0);return iterationArray.map(function(_,index){var inputIndex=index;if(isRTL){inputIndex=numberOfInputs-1-index;}return React.createElement(OtpInput,{autoCapitalize:autoCapitalize,clearTextOnFocus:clearTextOnFocus,containerStyles:inputContainerStyles,focusStyles:focusStyles,error:!!errorMessage,focusedBorderColor:focusedBorderColor,handleBackspace:function handleBackspace(event){return _this._handleBackspace(event,inputIndex);},placeholder:placeholder.toString(),inputStyles:inputStyles,key:inputIndex,secureTextEntry:secureTextEntry,keyboardType:keyboardType,ref:_this.inputs[inputIndex],selectTextOnFocus:selectTextOnFocus,textErrorColor:inputTextErrorColor,unfocusedBorderColor:unfocusedBorderColor,updateText:function updateText(event){return _this._updateText(event,inputIndex);},value:otpCode[inputIndex],testID:testIDPrefix+"-"+inputIndex,__source:{fileName:_jsxFileName,lineNumber:212}});});};var inputs=[];for(var index=0;index<_this.props.numberOfInputs;index++){inputs[index]=React.createRef();}_this._interval=undefined;_this.inputs=inputs;_this.state={loading:false,previousCopiedText:'',otpCode:[]};return _this;}_createClass(OtpInputs,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this._listenOnCopiedText();this._interval=setInterval(function(){_this2._listenOnCopiedText();},1000);}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this._interval);}},{key:"reset",value:function reset(){this.setState({otpCode:[]});}},{key:"render",value:function render(){var _this$props4=this.props,containerStyles=_this$props4.containerStyles,errorMessage=_this$props4.errorMessage,errorMessageContainerStyles=_this$props4.errorMessageContainerStyles,errorMessageTextStyles=_this$props4.errorMessageTextStyles,inputsContainerStyles=_this$props4.inputsContainerStyles;return React.createElement(View,{style:[defaultStyles.container,containerStyles],__source:{fileName:_jsxFileName,lineNumber:251}},errorMessage&&React.createElement(View,{style:[defaultStyles.errorMessageContainer,errorMessageContainerStyles],__source:{fileName:_jsxFileName,lineNumber:253}},React.createElement(Text,{testID:"errorText",style:errorMessageTextStyles,__source:{fileName:_jsxFileName,lineNumber:259}},errorMessage)),React.createElement(View,{style:[defaultStyles.inputsContainer,inputsContainerStyles],__source:{fileName:_jsxFileName,lineNumber:264}},this._renderInputs()));}}]);return OtpInputs;}(PureComponent);OtpInputs.defaultProps={autoCapitalize:'none',clearTextOnFocus:false,focusedBorderColor:'#0000ff',handleChange:console.log,inputTextErrorColor:'#ff0000',keyboardType:'phone-pad',numberOfInputs:4,secureTextEntry:false,selectTextOnFocus:true,unfocusedBorderColor:'#a0a0a0',testIDPrefix:'otpInput',isRTL:false,placeholder:''};export{OtpInputs as default};
 //# sourceMappingURL=index.js.map

lib/module/OtpInput.js

@@ -1,2 +0,2 @@
-import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/damiansznajder/Projects/private/otp-inputs/src/OtpInput.tsx";import React,{PureComponent}from'react';import{Platform,TextInput,View}from'react-native';import defaultStyles from'./defaultStyles';var majorVersionIOS=parseInt(""+Platform.Version,10);var isOTPSupported=Platform.OS==='ios'&&majorVersionIOS>=12;var OtpInput=function(_PureComponent){_inherits(OtpInput,_PureComponent);function OtpInput(){var _getPrototypeOf2;var _this;_classCallCheck(this,OtpInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(OtpInput)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={isFocused:false};_this._onFocus=function(){return _this.setState({isFocused:true});};_this._onBlur=function(){return _this.setState({isFocused:false});};_this.input=React.createRef();_this.focus=function(){_this.input.current.focus();};return _this;}_createClass(OtpInput,[{key:"render",value:function render(){var _this$props=this.props,clearTextOnFocus=_this$props.clearTextOnFocus,containerStyles=_this$props.containerStyles,focusStyles=_this$props.focusStyles,error=_this$props.error,focusedBorderColor=_this$props.focusedBorderColor,handleBackspace=_this$props.handleBackspace,inputStyles=_this$props.inputStyles,keyboardType=_this$props.keyboardType,secureTextEntry=_this$props.secureTextEntry,selectTextOnFocus=_this$props.selectTextOnFocus,testID=_this$props.testID,textErrorColor=_this$props.textErrorColor,unfocusedBorderColor=_this$props.unfocusedBorderColor,updateText=_this$props.updateText,value=_this$props.value;return React.createElement(View,{style:[defaultStyles.otpContainer,containerStyles,this.state.isFocused&&focusStyles,{borderColor:this.state.isFocused?focusedBorderColor:unfocusedBorderColor}],__source:{fileName:_jsxFileName,lineNumber:74}},React.createElement(TextInput,{clearTextOnFocus:clearTextOnFocus,keyboardType:keyboardType,maxLength:1,onBlur:this._onBlur,onChange:updateText,onFocus:this._onFocus,onKeyPress:handleBackspace,ref:this.input,secureTextEntry:secureTextEntry,selectTextOnFocus:selectTextOnFocus,style:[defaultStyles.otpInput,inputStyles,error&&{color:textErrorColor}],testID:testID,textContentType:isOTPSupported?'oneTimeCode':'none',underlineColorAndroid:"transparent",value:value,__source:{fileName:_jsxFileName,lineNumber:82}}));}}]);return OtpInput;}(PureComponent);export{OtpInput as default};
+import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/damiansznajder/Projects/private/otp-inputs/src/OtpInput.tsx";import React,{PureComponent}from'react';import{Platform,TextInput,View}from'react-native';import defaultStyles from'./defaultStyles';var majorVersionIOS=parseInt(""+Platform.Version,10);var isOTPSupported=Platform.OS==='ios'&&majorVersionIOS>=12;var OtpInput=function(_PureComponent){_inherits(OtpInput,_PureComponent);function OtpInput(){var _getPrototypeOf2;var _this;_classCallCheck(this,OtpInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(OtpInput)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={isFocused:false};_this._onFocus=function(){return _this.setState({isFocused:true});};_this._onBlur=function(){return _this.setState({isFocused:false});};_this.input=React.createRef();_this.focus=function(){_this.input.current.focus();};return _this;}_createClass(OtpInput,[{key:"render",value:function render(){var _this$props=this.props,clearTextOnFocus=_this$props.clearTextOnFocus,containerStyles=_this$props.containerStyles,focusStyles=_this$props.focusStyles,error=_this$props.error,focusedBorderColor=_this$props.focusedBorderColor,handleBackspace=_this$props.handleBackspace,inputStyles=_this$props.inputStyles,keyboardType=_this$props.keyboardType,secureTextEntry=_this$props.secureTextEntry,selectTextOnFocus=_this$props.selectTextOnFocus,testID=_this$props.testID,textErrorColor=_this$props.textErrorColor,unfocusedBorderColor=_this$props.unfocusedBorderColor,updateText=_this$props.updateText,value=_this$props.value,placeholder=_this$props.placeholder;return React.createElement(View,{style:[defaultStyles.otpContainer,containerStyles,this.state.isFocused&&focusStyles,{borderColor:this.state.isFocused?focusedBorderColor:unfocusedBorderColor}],__source:{fileName:_jsxFileName,lineNumber:76}},React.createElement(TextInput,{clearTextOnFocus:clearTextOnFocus,keyboardType:keyboardType,maxLength:1,onBlur:this._onBlur,onChange:updateText,onFocus:this._onFocus,onKeyPress:handleBackspace,ref:this.input,placeholder:placeholder,secureTextEntry:secureTextEntry,selectTextOnFocus:selectTextOnFocus,style:[defaultStyles.otpInput,inputStyles,error&&{color:textErrorColor}],testID:testID,textContentType:isOTPSupported?'oneTimeCode':'none',underlineColorAndroid:"transparent",value:value,__source:{fileName:_jsxFileName,lineNumber:84}}));}}]);return OtpInput;}(PureComponent);export{OtpInput as default};
 //# sourceMappingURL=OtpInput.js.map

lib/typescript/index.d.ts

@@ -24,2 +24,4 @@ import { PureComponent, ReactNode, RefObject } from 'react';
     unfocusedBorderColor: string;
+    isRTL: boolean;
+    placeholder: string;
 }
@@ -48,2 +50,4 @@ interface State {
         testIDPrefix: string;
+        isRTL: boolean;
+        placeholder: string;
     };
@@ -55,2 +59,3 @@ inputs: RefObject<OtpInput>[];
     componentWillUnmount(): void;
+    reset(): void;
     private _listenOnCopiedText;
@@ -57,0 +62,0 @@ private _handleAfterOtpAction;

lib/typescript/OtpInput.d.ts

@@ -20,2 +20,3 @@ import { PureComponent, RefObject } from 'react';
     value?: string;
+    placeholder?: string;
 }
@@ -22,0 +23,0 @@ interface State {

package.json

@@ -5,3 +5,4 @@ {
   "contributors": [
-    "Michał Kantor <[e-mail]>"
+    "Michał Kantor <[e-mail]>",
+    "Vishal Rawat <[e-mail]>"
   ],
@@ -13,3 +14,3 @@ "description": "One-time password inputs built in pure JS for React-Native",
   "repository": "https://github.com/dsznajder/react-native-otp-inputs",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "lib/module/index.js",
@@ -51,19 +52,19 @@ "scripts": {
   "devDependencies": {
-    "@babel/core": "7.4.5",
+    "@babel/core": "7.5.5",
     "@babel/preset-typescript": "7.3.3",
-    "@react-native-community/bob": "0.4.1",
-    "@types/jest": "24.0.13",
-    "@types/react": "16.8.18",
-    "@types/react-native": "0.57.60",
-    "@types/react-test-renderer": "16.8.1",
-    "husky": "2.3.0",
+    "@react-native-community/bob": "0.6.1",
+    "@types/jest": "24.0.15",
+    "@types/react": "16.8.23",
+    "@types/react-native": "0.60.2",
+    "@types/react-test-renderer": "16.8.3",
+    "husky": "3.0.1",
     "jest": "24.8.0",
-    "metro-react-native-babel-preset": "0.54.1",
-    "react": "16.8.3",
-    "react-native": "0.59.8",
-    "react-test-renderer": "16.8.3",
-    "release-it": "12.2.1",
+    "metro-react-native-babel-preset": "0.55.0",
+    "react": "16.8.6",
+    "react-native": "0.60.4",
+    "react-test-renderer": "16.8.6",
+    "release-it": "12.3.4",
     "rimraf": "2.6.3",
-    "tslint": "5.16.0",
-    "typescript": "3.4.5"
+    "tslint": "5.18.0",
+    "typescript": "3.5.3"
   },
@@ -70,0 +71,0 @@ "husky": {

README.md

@@ -68,2 +68,4 @@ # react-native-otp-inputs
 | testIDPrefix                | string         | false       | otpInput-\${inputIndex}                                                                                    | Prefix that will be applied as a testID for each input         |
+| isRTL                | boolean         | false       | false                                                                                    | Defines if the app is currently in RTL (preferably pass {I18nManager.isRTL}). Keeps the OTP boxes in LTR alignment.         |
+| placeholder                | string         | false       | none                                                                                    | Placeholder for the input boxes.         |
 
@@ -70,0 +72,0 @@ ### Contributions

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72307

increased by15.48%

Lines of code

526

increased by9.36%

Number of lines in readme file

76

increased by2.7%

No dependency changes