dual-input-component/dist/index.js

Single switchable component for email and phone number (web & react-native support)

"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.CustomInput=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _reactNativeWeb=require("react-native-web");var _FlagSelect=_interopRequireDefault(require("./SubComponent/SelectBox/FlagSelect"));var _lodash=_interopRequireDefault(require("lodash"));var _reactLottie=_interopRequireDefault(require("react-lottie"));var crossAnimationData=_interopRequireWildcard(require("../Input/lottieFiles/cross"));var tickAnimationData=_interopRequireWildcard(require("../Input/lottieFiles/tick"));var _lottieReactNative=_interopRequireDefault(require("lottie-react-native"));var alphabetRegex=new RegExp('[a-zA-Z]+');var numberRegex=new RegExp('[0-9]+$');var emailRegex=new RegExp('^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$');var phoneUtil=require('google-libphonenumber').PhoneNumberUtil.getInstance();var CustomInput=function(_React$Component){(0,_inherits2.default)(CustomInput,_React$Component);function CustomInput(props){var _this;(0,_classCallCheck2.default)(this,CustomInput);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(CustomInput).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"validationEmail",function(value){_this.setState({email:value},function(){_this.setState({errorState:false});if(_this.state.email!=='')_this.setState({errorState:false});if(emailRegex.test(_this.state.email)!==true)_this.setState({errorState:true});else _this.setState({errorState:false});if(_this.state.email==="")_this.setState({errorState:false});_this._onChange(_this.state.value,_this.state.isEmail);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"handlePhoneNumberValidation",function(number){if(number!==''&&number.toString().length!==1){var phoneNumber=phoneUtil.parseAndKeepRawInput(number,_this.state.countryCode);if(phoneUtil.isValidNumber(phoneNumber)){_this.setState({wrongFormatPhoneNumber:false});}else _this.setState({wrongFormatPhoneNumber:true});}var parsedObject={dialCode:"+".concat(_this.state.dialCode),phoneNumber:_this.state.value,parsedNumber:"+".concat(_this.state.dialCode).concat(_this.state.value)};_this._onChange(parsedObject,_this.state.isEmail);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"_onChange",function(value,isEmail){_this.props.onChange(value,isEmail);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"inputValidation",function(e){if(alphabetRegex.test(e.target.value)===true){if(_this.props.disableEmail===true)_this.setState({wrongFormatPhoneNumber:true,isNumber:true});else{_this.setState({value:e.target.value});if(!_this.props.disableAnimation){_this.initAnimation(0);setTimeout(function(){_this.setState({isEmail:true,isNumber:false,labelTitle:'Enter the Email'});},120);}else{_this.setState({isEmail:true,isNumber:false,labelTitle:'Enter the Email'});}}}else if(e.target.value===''){if(!_this.props.disableAnimation){if(!_this.props.disableEmail){_this.initAnimation(0);setTimeout(function(){return _this.setState({labelTitle:_this.props.disablePhoneNumber===false&&_this.props.disableEmail===false?'Enter Email or Phone Number':_this.props.disableEmail?'Enter the Phone Number':'Enter the Email',value:'',count:1,isEmail:_this.props.disablePhoneNumber?_this.props.disablePhoneNumber:CustomInput.defaultProps.disablePhoneNumber?true:false,isNumber:_this.props.disableEmail?_this.props.disableEmail:CustomInput.defaultProps.disableEmail?true:false,isFirstInputNumCheck:1,countryCode:_this.state.countryCode,dialCode:_this.props.disableEmail?_this.state.dialCode:phoneUtil.getCountryCodeForRegion(_this.state.countryCode)});},120);}else{_this.setState({labelTitle:_this.props.disablePhoneNumber===false&&_this.props.disableEmail===false?'Enter Email or Phone Number':_this.props.disableEmail?'Enter the Phone Number':'Enter the Email',value:'',count:1,isEmail:_this.props.disablePhoneNumber?_this.props.disablePhoneNumber:CustomInput.defaultProps.disablePhoneNumber?true:false,isNumber:_this.props.disableEmail?_this.props.disableEmail:CustomInput.defaultProps.disableEmail?true:false,isFirstInputNumCheck:1,countryCode:_this.state.countryCode,dialCode:_this.props.disableEmail?_this.state.dialCode:phoneUtil.getCountryCodeForRegion(_this.state.countryCode)});}}else{_this.setState({labelTitle:_this.props.disablePhoneNumber===false&&_this.props.disableEmail===false?'Enter Email or Phone Number':_this.props.disableEmail?'Enter the Phone Number':'Enter the Email',value:'',count:1,isEmail:_this.props.disablePhoneNumber?_this.props.disablePhoneNumber:CustomInput.defaultProps.disablePhoneNumber?true:false,isNumber:_this.props.disableEmail?_this.props.disableEmail:CustomInput.defaultProps.disableEmail?true:false,isFirstInputNumCheck:1,countryCode:_this.state.countryCode,dialCode:_this.props.disableEmail?_this.state.dialCode:phoneUtil.getCountryCodeForRegion(_this.state.countryCode)});}}else if(numberRegex.test(e.target.value[0])===true){if(_this.props.disablePhoneNumber===true)_this.setState({errorState:true,isEmail:true,value:e.target.value});else{_this.setState({dialCode:_this.state.dialCode});_this.setState({value:e.target.value,isEmail:false,isNumber:true,labelTitle:'Enter the Phone Number',errorState:false});}}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"handleKeyPress",function(e){if(e.keyCode===8){_this.setState({wrongFormatPhoneNumber:false});}if(e.keyCode===8){}if(e.keyCode===8&&e.target.value.length===1)_this.setState({errorState:false});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"setDialCode",function(dialCode,countryCode){if(!_lodash.default.isEmpty(_this.state.value))_this.setState({dialCode:dialCode,countryCode:countryCode},function(){_this.handlePhoneNumberValidation(_this.state.value);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"initAnimation",function(toValue){_reactNativeWeb.Animated.spring(_this.animatedValue,{toValue:toValue,speed:15}).start();});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)((0,_assertThisInitialized2.default)(_this)),"renderTicks",function(){if(_this.state.isEmail){if(emailRegex.test(_this.state.value)!==true)return _react.default.createElement(_reactNativeWeb.View,null);else{return _react.default.createElement(_reactNativeWeb.View,{style:{flex:_this.state.isEmail?0.18:0.27,justifyContent:'center',paddingLeft:0,borderColor:_this.state.color,borderBottomWidth:_this.state.borderBottomWidth,height:30}},_react.default.createElement(_reactLottie.default,{options:{loop:false,autoplay:true,animationData:tickAnimationData,rendererSettings:{preserveAspectRatio:'xMidYMid slice'}},height:20,width:_this.state.errorState||_this.state.wrongFormatPhoneNumber?20:55}));}}else{if(_this.state.value!==''&&_this.state.value.toString().length!==1){if(numberRegex.test(_this.state.value)===true){var phoneNumber=phoneUtil.parseAndKeepRawInput(_this.state.value,_this.state.countryCode);if(phoneUtil.isValidNumber(phoneNumber)){return _react.default.createElement(_reactNativeWeb.View,{style:{flex:_this.state.isEmail?0.18:0.27,justifyContent:'center',paddingLeft:0,borderColor:_this.state.color,borderBottomWidth:_this.state.borderBottomWidth,height:30}},_react.default.createElement(_reactLottie.default,{options:{loop:false,autoplay:true,animationData:tickAnimationData,rendererSettings:{preserveAspectRatio:'xMidYMid slice'}},height:20,width:_this.state.errorState||_this.state.wrongFormatPhoneNumber?20:55}));}else return _react.default.createElement(_reactNativeWeb.View,null);}}}});_this.state={value:'',email:'',wrongFormatPhoneNumber:false,countryCode:props.defaultCountry||'IN',isEmail:props.disableEmail?false:true,dialCode:phoneUtil.getCountryCodeForRegion(props.defaultCountry),color:'#DCDCDC',borderBottomWidth:1,isNumber:props.disablePhoneNumber?false:true,labelTitle:props.disablePhoneNumber===false&&props.disableEmail===false?'Enter Email or Phone Number':props.disableEmail?'Enter the Phone Number':'Enter the Email',errorState:false,count:1,isFirstInputNumCheck:1};if(props.disableEmail===true){_this.setState({isEmail:false,isNumber:true,labelTitle:'Enter the Phone number'});}if(props.disablePhoneNumber===true){_this.setState({isEmail:true,isNumber:false,labelTitle:'Enter the Email'});}if(!_this.props.disableAnimation)_this.animatedValue=new _reactNativeWeb.Animated.Value(0);return _this;}(0,_createClass2.default)(CustomInput,[{key:"render",value:function render(){var _this2=this;var _this$props=this.props,style=_this$props.style,labelStyle=_this$props.labelStyle,inputFieldStyle=_this$props.inputFieldStyle;var errorStyles=_reactNativeWeb.StyleSheet.flatten([this.props.labelStyle,styles.errorLabelStyle]);var animatedValues={marginLeft:0.0,opacity:0.0};if(!this.props.disableAnimation){animatedValues={marginLeft:this.animatedValue.interpolate({inputRange:[0,1],outputRange:[-8,0]}),opacity:this.animatedValue.interpolate({inputRange:[0,1],outputRange:[0,1]})};}return _react.default.createElement(_reactNativeWeb.View,{style:style},_react.default.createElement(_reactNativeWeb.View,{style:{width:'100%'}},!this.props.hideLabel?_react.default.createElement(_reactNativeWeb.View,{style:{marginVertical:2}},this.state.isEmail?_react.default.createElement(_reactNativeWeb.Text,{style:[labelStyle,{width:'100%'}]},this.state.labelTitle):_react.default.createElement(_reactNativeWeb.Text,{style:[labelStyle,{width:'100%'}]},this.state.labelTitle)):null,_react.default.createElement(_reactNativeWeb.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'center'}},this.state.isEmail?null:this.state.isNumber?_react.default.createElement(_reactNativeWeb.View,{style:{flex:-1,borderColor:this.state.color,borderBottomWidth:this.state.borderBottomWidth,height:30}},_react.default.createElement(_FlagSelect.default,{animatedInstance:this.animatedValue,initAnimation:this.initAnimation,countryMenuWidth:style.width,disableAnimation:this.props.disableAnimation,listItemStyle:this.props.listItemStyle,inputFieldStyle:this.props.inputFieldStyle,handleCode:this.setDialCode,color:this.state.color,wrongFormatPhoneNumber:this.state.wrongFormatPhoneNumber,defaultCountry:this.state.countryCode||this.props.defaultCountry})):null,_react.default.createElement(_reactNativeWeb.View,{style:{zIndex:-999,flex:1,borderColor:this.state.color,height:30}},_react.default.createElement(_reactNativeWeb.TextInput,{type:this.state.isEmail?'text':'number',autoCorrect:false,style:[inputFieldStyle,styles.textInputCommonStyle,{borderColor:this.state.color,borderBottomWidth:this.state.borderBottomWidth},{width:'100%'}],value:this.state.value,onFocus:function onFocus(){return _this2.setState({color:'#0098EF',borderBottomWidth:2});},onBlur:this.state.isEmail===false&&this.state.isNumber===false?function(){_this2.setState({color:'#DCDCDC',borderBottomWidth:1});}:this.state.isEmail?function(){_this2.setState({color:'#DCDCDC',borderBottomWidth:1},_this2.validationEmail(_this2.state.value));}:function(){_this2.setState({color:'#DCDCDC',borderBottomWidth:1},_this2.handlePhoneNumberValidation(_this2.state.value));},placeholder:this.props.disableEmail===false&&this.props.disablePhoneNumber===false?'Email or Phone Number':this.props.disableEmail?"Phone Number":"Email",onChange:function onChange(e){return _this2.inputValidation(e);},onKeyPress:this.handleKeyPress})),_reactNativeWeb.Platform.OS==='web'?this.state.errorState?_react.default.createElement(_reactNativeWeb.TouchableWithoutFeedback,{style:{flex:0.14,cursor:'none'}},_react.default.createElement(_reactNativeWeb.View,{style:{borderColor:this.state.color,borderBottomWidth:this.state.borderBottomWidth,height:30,justifyContent:'center'}},_react.default.createElement(_reactLottie.default,{options:{loop:false,autoplay:true,animationData:crossAnimationData,rendererSettings:{preserveAspectRatio:'xMidYMid slice'}},height:20,width:this.state.errorState||this.state.wrongFormatPhoneNumber?20:50}))):this.state.wrongFormatPhoneNumber?_react.default.createElement(_reactNativeWeb.View,{style:{flex:0.14,justifyContent:'center',borderColor:this.state.color,borderBottomWidth:this.state.borderBottomWidth,height:30}},_react.default.createElement(_reactLottie.default,{options:{loop:false,autoplay:true,animationData:crossAnimationData,rendererSettings:{preserveAspectRatio:'xMidYMid slice'}},height:20,width:this.state.errorState||this.state.wrongFormatPhoneNumber?20:50})):this.renderTicks():_react.default.createElement(_reactNativeWeb.View,{style:{flex:-1,justifyContent:'center',borderColor:this.state.color,borderBottomWidth:this.state.borderBottomWidth,height:30}},_react.default.createElement(_lottieReactNative.default,{source:require("../Input/lottieFiles/cross"),autoPlay:true})))));}}]);return CustomInput;}(_react.default.Component);exports.CustomInput=CustomInput;var styles=_reactNativeWeb.StyleSheet.create({textInputCommonStyle:{outline:'none',flex:1,height:30},errorLabelStyle:{fontSize:15,color:'red',paddingTop:2}});CustomInput.defaultProps={disableEmail:false,disablePhoneNumber:false,disableAnimation:false,labelTitle:'',defaultCountry:'',listItemStyle:{height:60},style:{width:200,backgroundColor:'white',alignItems:'center',justifyContent:'center'}};var _default=CustomInput;exports.default=_default;