UNPKG

react-telephone-input

Version:

React component for entering and validating international telephone numbers

3 lines (2 loc) 10.2 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("cramda")),r=e(require("react-tiny-virtual-list")),n=e(require("debounce")),o=e(require("lodash.memoize")),a=require("react"),i=e(require("classnames")),s=e(require("react-click-outside")),l=e(require("country-telephone-data"));function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var d=t.first,p=t.tail;function c(e,t,r){if(void 0===r&&(r=!1),!e||0===e.length)return"+";if(e&&e.length<2||!t||!r)return"+"+e;var n=t.split("").reduce((function(e,t){return 0===e.remainingText.length?e:"."!==t?{formattedText:e.formattedText+t,remainingText:e.remainingText}:{formattedText:e.formattedText+d(e.remainingText),remainingText:p(e.remainingText)}}),{formattedText:"",remainingText:e.split("")});return n.formattedText+n.remainingText.join("")}var h=t.find,f=t.propEq,m=t.startsWith,g=l.allCountries,C=l.allCountryCodes;function y(e,t){var r,n=t.onlyCountries,o=h(f("iso2",t.defaultCountry),g)||n[0],a=e.substr(0,4);return""===e.trim()?o:(r=n.reduce((function(t,r){if(C[a]&&C[a][0]===r.iso2)return r;if(C[a]&&C[a][0]===t.iso2)return t;if(m(r.dialCode,e)){if(r.dialCode.length>t.dialCode.length)return r;if(r.dialCode.length===t.dialCode.length&&r.priority<t.priority)return r}return t}),{dialCode:"",priority:10001}))&&r.name?r:o}var w,v=t.find,D=t.propEq,_=t.equals,b=t.findIndex,I=t.startsWith,S=l.allCountries,x=l.iso2Lookup;w="undefined"==typeof document||Boolean(document.createElement("input").setSelectionRange);var N=function(e){var t,s;function l(t){var s;(s=e.call(this,t)||this).numberInputRef=null,s._cursorToEnd=function(e){void 0===e&&(e=!1);var t=s.numberInputRef;if(e)s._fillDialCode();else if(t&&t.focus(),w&&t){var r=t.value.length;t.setSelectionRange(r,r)}},s.handleFlagDropdownClick=function(e){if(!s.props.disabled){e.preventDefault();var t=s.state.preferredCountries,r=s.props.onlyCountries,n=b(D("iso2",s.state.selectedCountry.iso2),t.concat(r));s.setState({showDropDown:!s.state.showDropDown,highlightCountryIndex:n})}},s.handleInput=function(e){var t="+",r=s.state.selectedCountry,n=s.state.freezeSelection;if(e.target.value!==s.state.formattedNumber){if(e.preventDefault&&(e.preventDefault(),e.nativeEvent.preventDefault()),e.target.value&&e.target.value.length>0){var o=e.target.value.replace(/\D/g,"");(!s.state.freezeSelection||r.dialCode.length>o.length)&&(r=y(o.substring(0,6),s.props),n=!1),t=c(o,r&&r.format?r.format:null,s.props.autoFormat)}var a=e.target.selectionStart||0,i=s.state.formattedNumber,l=t.length-i.length,u=r.dialCode.length>0?r:s.state.selectedCountry;s.setState({formattedNumber:t,freezeSelection:n,selectedCountry:u},(function(){w&&(1===a&&2===t.length&&(a+=1),l>0&&(a-=l),a>0&&i.length>=t.length&&s.numberInputRef&&s.numberInputRef.setSelectionRange(a,a)),s.props.onChange&&s.props.onChange(t,u)}))}},s.handleInputClick=function(){s.setState({showDropDown:!1})},s.handleFlagItemClick=function(e){var t=s.state.selectedCountry,r=v((function(t){return t.iso2===e.iso2}),s.props.onlyCountries);if(r&&t.iso2!==r.iso2){var n=c(function(e,t,r){var n=RegExp("^("+e.dialCode+")"),o=r.match(n),a=r.replace(n,t.dialCode);return null===o&&a===r?t.dialCode+r:a}(t,r,s.state.formattedNumber.replace(/\D/g,"")),r.format,s.props.autoFormat);s.setState({showDropDown:!1,selectedCountry:r,freezeSelection:!0,formattedNumber:n},(function(){s._cursorToEnd(),s.props.onChange&&s.props.onChange(n,r)}))}else s.setState({showDropDown:!1})},s.handleInputFocus=function(){"function"==typeof s.props.onFocus&&s.props.onFocus(s.state.formattedNumber,s.state.selectedCountry),s._fillDialCode()},s._fillDialCode=function(){s.numberInputRef&&"+"===s.numberInputRef.value&&s.setState({formattedNumber:"+"+s.state.selectedCountry.dialCode})},s._getHighlightCountryIndex=function(e){var t=s.state,r=t.highlightCountryIndex+e;return r<0||r>=s.props.onlyCountries.length+t.preferredCountries.length?r-e:r},s._searchCountry=o((function(e){return e&&0!==e.length?s.props.onlyCountries.filter((function(t){return!!t.name&&I(e.toLowerCase(),t.name.toLowerCase())}),u(s))[0]:null})),s.searchCountry=function(){var e=s.props.onlyCountries,t=s._searchCountry(s.state.queryString)||e[0],r=b(D("iso2",t.iso2),s.props.onlyCountries)+s.state.preferredCountries.length;s.setState({queryString:"",highlightCountryIndex:r})},s.handleKeydown=function(e){var t=s.props.onlyCountries;if(s.state.showDropDown&&!e.metaKey&&!e.altKey){e.preventDefault&&(e.preventDefault(),e.nativeEvent.preventDefault());var r=function(e){var t=s._getHighlightCountryIndex(e);s.setState({highlightCountryIndex:t})};switch(e.which){case 40:r(1);break;case 38:r(-1);break;case 13:s.handleFlagItemClick(s.state.preferredCountries.concat(t)[s.state.highlightCountryIndex]);break;case 27:s.setState({showDropDown:!1},s._cursorToEnd);break;default:(e.which>=65&&e.which<=90||32===e.which)&&s.setState({queryString:s.state.queryString+String.fromCharCode(e.which)},s.state.debouncedQueryStingSearcher)}}},s.handleInputKeyDown=function(e){13===e.which&&"function"==typeof s.props.onEnterKeyPress&&s.props.onEnterKeyPress(e)},s.handleClickOutside=function(){s.state.showDropDown&&s.setState({showDropDown:!1})},s.getCountryDropDownList=function(){var e=s.state,t=e.highlightCountryIndex,n=e.preferredCountries.concat(s.props.onlyCountries);return a.createElement(r,{width:window.innerWidth-20<400?window.innerWidth-20:400,height:300,itemCount:n.length,itemSize:40,style:s.props.listStyle,className:"country-list",scrollToIndex:t,scrollToAlignment:"center",renderItem:function(e){var t=e.index,r=e.style,o=n[t],l=i(s.props.listItemClassName,{preferred:b(D("iso2",o.iso2),s.state.preferredCountries)>=0,highlight:s.state.highlightCountryIndex===t}),d="flag "+o.iso2;return a.createElement("div",{key:"flag_no_"+t,"data-flag-key":"flag_no_"+t,className:l,"data-dial-code":o.dialCode,"data-country-code":o.iso2,onClick:s.handleFlagItemClick.bind(u(s),o),style:r,title:o.name+" - "+o.dialCode,"data-test-id":"src_reacttelephoneinput_test_id_0"},a.createElement("div",{className:d,style:s.getFlagStyle(),"data-test-id":"src_reacttelephoneinput_test_id_1"}),a.createElement("span",{className:"country-name","data-test-id":"src_reacttelephoneinput_test_id_2"},o.name),a.createElement("span",{className:"dial-code","data-test-id":"src_reacttelephoneinput_test_id_3"},"+"+o.dialCode))}})},s.getFlagStyle=function(){return s.props.flagsImagePath?{backgroundImage:"url("+s.props.flagsImagePath+")"}:{}},s.handleInputBlur=function(){"function"==typeof s.props.onBlur&&s.props.onBlur(s.state.formattedNumber,s.state.selectedCountry)},s.handleFlagKeyDown=function(e){40===e.which&&!1===s.state.showDropDown&&s.handleFlagDropdownClick(e)};var l=t.preferredCountries.map((function(e){return Object.prototype.hasOwnProperty.call(x,e)?S[x[e]]:null})).filter((function(e){return null!==e}));return s.state={firstCall:!0,preferredCountries:l,showDropDown:!1,queryString:"",freezeSelection:!1,debouncedQueryStingSearcher:n(s.searchCountry,600),formattedNumber:"",highlightCountryIndex:0},s}s=e,(t=l).prototype=Object.create(s.prototype),t.prototype.constructor=t,t.__proto__=s;var d=l.prototype;return d.componentDidMount=function(){this._cursorToEnd(!0)},d.shouldComponentUpdate=function(e,t){return!_(e,this.props)||!_(t,this.state)},l.getDerivedStateFromProps=function(e,t){var r,n=e.onlyCountries,o=t.preferredCountries,a=t.selectedCountry;if(t.showDropDown)return t;var i=y((r=e.value?e.value:e.initialValue&&t.firstCall?e.initialValue:null===e.value?"":t&&t.formattedNumber&&t.formattedNumber.length>0?t.formattedNumber:"").replace(/\D/g,""),e);return a&&i.dialCode===a.dialCode&&(i=a),{firstCall:!1,selectedCountry:i,highlightCountryIndex:b(D("iso2",i.iso2),o.concat(n)),formattedNumber:c(r.replace(/\D/g,""),i&&i.format?i.format:null,e.autoFormat)}},d.render=function(){var e=this,t=this.props.isValid,r=this.state.selectedCountry,n=i({arrow:!0,up:this.state.showDropDown}),o=i({"form-control":!0,"invalid-number":!t(this.state.formattedNumber.replace(/\D/g,""))}),s=i({"flag-dropdown":!0,"open-dropdown":this.state.showDropDown}),l="flag "+r.iso2,u=this.props.buttonProps,d=this.props.inputProps;return d&&this.props.inputId&&(d.id=this.props.inputId),a.createElement("div",{className:i("react-tel-input",this.props.classNames,this.props.className),"data-test-id":"src_reacttelephoneinput_test_id_4"},a.createElement("div",{className:s,onKeyDown:this.handleKeydown,"data-test-id":"src_reacttelephoneinput_test_id_6"},a.createElement("button",Object.assign({onClick:this.handleFlagDropdownClick,className:"selected-flag",title:r.name+": + "+r.dialCode,"data-test-id":"src_reacttelephoneinput_test_id_7",onKeyDown:this.handleFlagKeyDown,type:"button"},u),a.createElement("div",{className:l,style:this.getFlagStyle(),"data-test-id":"src_reacttelephoneinput_test_id_8"},a.createElement("div",{className:n,"data-test-id":"src_reacttelephoneinput_test_id_9"}))),this.state.showDropDown?this.getCountryDropDownList():""),a.createElement("input",Object.assign({onChange:this.handleInput,onClick:this.handleInputClick,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onKeyDown:this.handleInputKeyDown,value:this.state.formattedNumber,ref:function(t){e.numberInputRef=t},type:"tel",className:o,autoComplete:this.props.autoComplete,pattern:this.props.pattern,required:this.props.required,placeholder:this.props.placeholder,disabled:this.props.disabled},d,{"data-test-id":"src_reacttelephoneinput_test_id_5"})))},l}(a.Component);N.defaultProps={autoFormat:!0,onlyCountries:S,defaultCountry:S[0].iso2,isValid:function(e){return t.any((function(r){return t.startsWith(r.dialCode,e)||t.startsWith(e,r.dialCode)}),l.allCountries)},flagsImagePath:"flags.png",onEnterKeyPress:function(){},preferredCountries:[],disabled:!1,placeholder:"+1 (702) 123-4567",autoComplete:"tel",required:!1,inputProps:{},buttonProps:{},listItemClassName:"country",listStyle:{zIndex:20,backgroundColor:"white"}};var E=s(N);exports.ReactTelephoneInput=N,exports.default=E; //# sourceMappingURL=react-telephone-input.cjs.production.min.js.map