diff --git a/example/example.js b/example/example.js index cc0caa511..d1c1467c5 100644 --- a/example/example.js +++ b/example/example.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):"function"==typeof define&&define.amd?define(["react","react-dom","libphonenumber-js-utils"],t):"object"==typeof exports?exports.IntlTelInput=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):e.IntlTelInput=t(e.React,e.ReactDOM,e.intlTelInputUtils)}(function(){return"undefined"!=typeof window&&window?window:"undefined"!=typeof self&&self?self:this}(),function(n,r,o){return function(u){function e(e){for(var t,n,r=e[0],o=e[1],i=0,a=[];in.length)for(var o=0,i=0;ot?e.substr(0,t):e}),Z(Y(Y(d)),"removeEmptyDialCode",function(){var e=d.state.value;if("+"===e.charAt(0)){var t=h.getNumeric(e);t&&d.selectedCountryData.dialCode!==t||d.setState({value:""})}}),Z(Y(Y(d)),"handleUpDownKey",function(e){var t=d.flagDropDown.querySelectorAll(".highlight")[0],n=t?t.previousElementSibling:void 0,r=t?t.nextElementSibling:void 0,o=e===d.keys.UP?n:r;if(o){-1=d.keys.A&&e.which<=d.keys.Z||e.which===d.keys.SPACE)&&(t&&clearTimeout(t),d.query||(d.query=""),d.query+=String.fromCharCode(e.which),d.searchForCountry(d.query),t=setTimeout(function(){d.query=""},1e3))}),Z(Y(Y(d)),"handleDocumentClick",function(e){var t=e.target.getAttribute("class");(null===t||t&&-1===t.indexOf("country")&&-1===t.indexOf("selected-flag")&&-1===t.indexOf("iti-flag")&&-1===t.indexOf("iti-arrow"))&&(d.isOpening=!1),d.isOpening||d.toggleDropdown(!1),d.isOpening=!1}),Z(Y(Y(d)),"handleInputChange",function(e){var t=e.target.selectionStart,n=e.target.value,r=""===n?n:n.substring(0,t),o=d.props.format?d.formatNumber(e.target.value):e.target.value;t=h.getCursorPositionAfterFormating(r,n,o),void 0!==d.props.value?d.setState({cursorPosition:t},function(){d.updateFlagFromNumber(o),d.notifyPhoneNumberChange(o)}):d.setState({value:o,cursorPosition:t},function(){d.updateFlagFromNumber(o),d.notifyPhoneNumberChange(o)})}),Z(Y(Y(d)),"changeHighlightCountry",function(e,t){d.setState({showDropdown:e,highlightedCountry:t})}),Z(Y(Y(d)),"loadUtils",function(){window.intlTelInputUtils&&d.utilsScriptDeferred.resolve()}),Z(Y(Y(d)),"autoCountryLoaded",function(){"auto"===d.tempCountry&&(d.tempCountry=d.autoCountry,d.autoCountryDeferred.resolve())}),d.wrapperClass={},d.autoCountry="",d.tempCountry="",d.startedLoadingAutoCountry=!1,d.deferreds=[],d.autoCountryDeferred=new u.a.Deferred,d.utilsScriptDeferred=new u.a.Deferred,d.isOpening=!1,d.isMobile="undefined"!=typeof navigator&&X.test(navigator.userAgent),d.preferredCountries=[],d.countries=[],d.countryCodes={},d.windowLoaded=!1,d.keys={UP:38,DOWN:40,ENTER:13,ESC:27,PLUS:43,A:65,Z:90,SPACE:32,TAB:9},d.query="",d.selectedCountryData={},d.state={showDropdown:!1,highlightedCountry:0,value:e.value||e.defaultValue,disabled:e.disabled,readonly:!1,offsetTop:0,outerHeight:0,placeholder:"",title:"",countryCode:"us",dialCode:"",cursorPosition:(e.value||e.defaultValue).length},d}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&J(e,t)}(r,i["Component"]),W(r,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=null;return void 0!==e.value&&t.value!==e.value&&(n={value:e.value}),e.disabled&&t.disabled!==e.disabled&&(n={disabled:e.disabled}),n}}]),W(r,[{key:"componentDidMount",value:function(){var e=this;this.autoHideDialCode=this.props.autoHideDialCode,this.allowDropdown=this.props.allowDropdown,this.nationalMode=this.props.nationalMode,this.dropdownContainer="",this.nationalMode&&(this.autoHideDialCode=!1),this.props.separateDialCode&&(this.autoHideDialCode=!1,this.nationalMode=!1,this.allowDropdown=!0),this.processCountryData.call(this),this.tempCountry=this.getTempCountry(this.props.defaultCountry),"complete"===document.readyState?this.windowLoaded=!0:window.addEventListener("load",function(){e.windowLoaded=!0}),this.generateMarkup(),this.setInitialState(),this.initRequests(),this.deferreds.push(this.autoCountryDeferred.promise()),this.deferreds.push(this.utilsScriptDeferred.promise()),u.a.when(this.deferreds).done(function(){e.setInitialState()}),document.addEventListener("keydown",this.handleDocumentKeyDown)}},{key:"shouldComponentUpdate",value:function(e,t){return t.showDropdown?(document.addEventListener("keydown",this.handleDocumentKeyDown),this.bindDocumentClick()):(document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindDocumentClick()),!0}},{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.updateFlagFromNumber(this.props.value),"function"==typeof this.props.customPlaceholder&&e.customPlaceholder!==this.props.customPlaceholder&&this.updatePlaceholder(this.props)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keydown",this.handleDocumentKeyDown),window.removeEventListener("scroll",this.handleWindowScroll),this.unbindDocumentClick()}},{key:"render",value:function(){this.wrapperClass[this.props.css[0]]=!0;var e=this.props.css[1],t=Object.assign({},this.props.style||{});this.wrapperClass.expanded=this.state.showDropdown;var n=s()(this.wrapperClass),r=this.selectedCountryData?"".concat(this.selectedCountryData.name,": +").concat(this.selectedCountryData.dialCode):"Unknown",o=void 0!==this.props.value?this.props.value:this.state.value;return p.a.createElement("div",{className:n,style:t},p.a.createElement(L,{refCallback:this.setFlagDropdownRef,allowDropdown:this.allowDropdown,dropdownContainer:this.dropdownContainer,separateDialCode:this.props.separateDialCode,dialCode:this.state.dialCode,clickSelectedFlag:this.clickSelectedFlag,setFlag:this.setFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.showDropdown,inputTop:this.state.offsetTop,inputOuterHeight:this.state.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.highlightedCountry,titleTip:r}),p.a.createElement(z,{refCallback:this.setTelRef,handleInputChange:this.handleInputChange,handleOnBlur:this.handleOnBlur,className:e,disabled:this.state.disabled,readonly:this.state.readonly,fieldName:this.props.fieldName,fieldId:this.props.fieldId,value:o,placeholder:void 0!==this.props.placeholder?this.props.placeholder:this.state.placeholder,autoFocus:this.props.autoFocus,autoComplete:this.props.autoComplete,inputProps:this.props.telInputProps,cursorPosition:this.state.cursorPosition}))}}]),r}();$.defaultProps={css:["intl-tel-input",""],fieldName:"",fieldId:"",defaultValue:"",countriesData:null,allowDropdown:!0,autoHideDialCode:!0,autoPlaceholder:!0,customPlaceholder:null,excludeCountries:[],formatOnInit:!0,separateDialCode:!1,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",noCountryDataHandler:null,onlyCountries:[],preferredCountries:["us","gb"],onPhoneNumberChange:null,onPhoneNumberBlur:null,onSelectFlag:null,disabled:!1,autoFocus:!1,useMobileFullscreenDropdown:!0,autoComplete:"off",telInputProps:{},format:!1,onFlagClick:null};t.default=$},function(e,t,n){},function(e,t,n){"use strict";var o=n(11);function a(){}var i=null,u={};function l(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("Promise constructor's argument is not a function");this._h=0,this._i=0,this._j=null,this._k=null,e!==a&&p(e,this)}function s(e,t){for(;3===e._i;)e=e._j;if(l._l&&l._l(e),0===e._i)return 0===e._h?(e._h=1,void(e._k=t)):1===e._h?(e._h=2,void(e._k=[e._k,t])):void e._k.push(t);var n,r;n=e,r=t,o(function(){var e=1===n._i?r.onFulfilled:r.onRejected;if(null!==e){var t=function(e,t){try{return e(t)}catch(e){return i=e,u}}(e,n._j);t===u?f(r.promise,i):c(r.promise,t)}else 1===n._i?c(r.promise,n._j):f(r.promise,n._j)})}function c(e,t){if(t===e)return f(e,new TypeError("A promise cannot be resolved with itself."));if(t&&("object"==typeof t||"function"==typeof t)){var n=function(e){try{return e.then}catch(e){return i=e,u}}(t);if(n===u)return f(e,i);if(n===e.then&&t instanceof l)return e._i=3,e._j=t,void r(e);if("function"==typeof n)return void p(n.bind(t),e)}e._i=1,e._j=t,r(e)}function f(e,t){e._i=2,e._j=t,l._m&&l._m(e,t),r(e)}function r(e){if(1===e._h&&(s(e,e._k),e._k=null),2===e._h){for(var t=0;t"):r.innerHTML+="".concat(t,"
"),r.scrollTop=r.scrollHeight}var m=function(e){function o(e){var t,n,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),n=this,d(f(f(t=!(r=s(o).call(this,e))||"object"!==p(r)&&"function"!=typeof r?f(n):r)),"blurHandler",function(e,t,n,r,o,i,a){y(t,n,r,o,i,a.type)}),t.state={phone1:"",phone2:""},t.changePhone1=t.changeHandler.bind(f(f(t)),"phone1"),t.changePhone2=t.changeHandler.bind(f(f(t)),"phone2"),t.blurHandler1=t.blurHandler.bind(f(f(t)),"phone1"),t.blurHandler2=t.blurHandler.bind(f(f(t)),"phone2"),t.selectFlagHandler1=t.selectFlagHandler.bind(f(f(t)),"phone1"),t.selectFlagHandler2=t.selectFlagHandler.bind(f(f(t)),"phone2"),t}var t,n,r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}(o,i["Component"]),t=o,(n=[{key:"changeHandler",value:function(e,t,n,r,o,i){y(t,n,r,o,i),this.setState(d({},e,n))}},{key:"selectFlagHandler",value:function(e,t,n,r,o){y(t,n,r,o),this.setState(d({},e,t))}},{key:"render",value:function(){return a.a.createElement("div",null,a.a.createElement(u.default,{onPhoneNumberChange:this.changePhone1,onPhoneNumberBlur:this.blurHandler1,onSelectFlag:this.selectFlagHandler1,defaultCountry:"auto",value:this.state.phone1,geoIpLookup:h,css:["intl-tel-input","form-control"],format:!0}),a.a.createElement("div",null,"Phone Number:",this.state.phone1),a.a.createElement(u.default,{onPhoneNumberChange:this.changePhone2,onPhoneNumberBlur:this.blurHandler2,onSelectFlag:this.selectFlagHandler2,defaultCountry:"jp",value:this.state.phone2,css:["intl-tel-input","form-control"]}),a.a.createElement("div",null,"Phone Number:",this.state.phone2),a.a.createElement("hr",null),a.a.createElement("div",{id:"debug",className:"code pre-scrollable"}))}}])&&l(t.prototype,n),r&&l(t,r),o}();o.a.render(a.a.createElement(m,null),document.getElementById("root"))},function(e,t){e.exports=o}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):"function"==typeof define&&define.amd?define(["react","react-dom","libphonenumber-js-utils"],t):"object"==typeof exports?exports.IntlTelInput=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):e.IntlTelInput=t(e.React,e.ReactDOM,e.intlTelInputUtils)}(function(){return"undefined"!=typeof window&&window?window:"undefined"!=typeof self&&self?self:this}(),function(n,r,o){return function(u){function e(e){for(var t,n,r=e[0],o=e[1],i=0,a=[];in.length)for(var o=0,i=0;ot?e.substr(0,t):e}),Z(Y(Y(d)),"removeEmptyDialCode",function(){var e=d.state.value;if("+"===e.charAt(0)){var t=h.getNumeric(e);t&&d.selectedCountryData.dialCode!==t||d.setState({value:""})}}),Z(Y(Y(d)),"handleUpDownKey",function(e){var t=d.flagDropDown.querySelectorAll(".highlight")[0],n=t?t.previousElementSibling:void 0,r=t?t.nextElementSibling:void 0,o=e===d.keys.UP?n:r;if(o){-1=d.keys.A&&e.which<=d.keys.Z||e.which===d.keys.SPACE)&&(t&&clearTimeout(t),d.query||(d.query=""),d.query+=String.fromCharCode(e.which),d.searchForCountry(d.query),t=setTimeout(function(){d.query=""},1e3))}),Z(Y(Y(d)),"handleDocumentClick",function(e){var t=e.target.getAttribute("class");(null===t||t&&-1===t.indexOf("country")&&-1===t.indexOf("selected-flag")&&-1===t.indexOf("iti-flag")&&-1===t.indexOf("iti-arrow"))&&(d.isOpening=!1),d.isOpening||d.toggleDropdown(!1),d.isOpening=!1}),Z(Y(Y(d)),"handleInputChange",function(e){var t=d.cursorUpdate(e),n=t.cursorPosition,r=t.value;void 0!==d.props.value?d.setState({cursorPosition:n},function(){d.updateFlagFromNumber(r),d.notifyPhoneNumberChange(r)}):d.setState({value:r,cursorPosition:n},function(){d.updateFlagFromNumber(r),d.notifyPhoneNumberChange(r)})}),Z(Y(Y(d)),"cursorUpdate",function(e){var t=e.target,n=t.selectionStart,r=t.value,o=""===r?r:r.substring(0,n),i=d.props.format?d.formatNumber(t.value):t.value;return i=d.props.formatFull?d.formatFullNumber(t.value):i,{cursorPosition:n=h.getCursorPositionAfterFormating(o,r,i),value:i}}),Z(Y(Y(d)),"changeHighlightCountry",function(e,t){d.setState({showDropdown:e,highlightedCountry:t})}),Z(Y(Y(d)),"loadUtils",function(){window.intlTelInputUtils&&d.utilsScriptDeferred.resolve()}),Z(Y(Y(d)),"autoCountryLoaded",function(){"auto"===d.tempCountry&&(d.tempCountry=d.autoCountry,d.autoCountryDeferred.resolve())}),d.wrapperClass={},d.autoCountry="",d.tempCountry="",d.startedLoadingAutoCountry=!1,d.deferreds=[],d.autoCountryDeferred=new u.a.Deferred,d.utilsScriptDeferred=new u.a.Deferred,d.isOpening=!1,d.isMobile="undefined"!=typeof navigator&&X.test(navigator.userAgent),d.preferredCountries=[],d.countries=[],d.countryCodes={},d.windowLoaded=!1,d.keys={UP:38,DOWN:40,ENTER:13,ESC:27,PLUS:43,A:65,Z:90,SPACE:32,TAB:9},d.query="",d.selectedCountryData={},d.state={showDropdown:!1,highlightedCountry:0,value:e.value||e.defaultValue,disabled:e.disabled,readonly:!1,offsetTop:0,outerHeight:0,placeholder:"",title:"",countryCode:"us",dialCode:"",cursorPosition:(e.value||e.defaultValue).length},d}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&J(e,t)}(r,i["Component"]),W(r,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=null;return void 0!==e.value&&t.value!==e.value&&(n={value:e.value}),e.disabled&&t.disabled!==e.disabled&&(n={disabled:e.disabled}),n}}]),W(r,[{key:"componentDidMount",value:function(){var e=this;this.autoHideDialCode=this.props.autoHideDialCode,this.allowDropdown=this.props.allowDropdown,this.nationalMode=this.props.nationalMode,this.dropdownContainer="",this.nationalMode&&(this.autoHideDialCode=!1),this.props.separateDialCode&&(this.autoHideDialCode=!1,this.nationalMode=!1,this.allowDropdown=!0),this.processCountryData.call(this),this.tempCountry=this.getTempCountry(this.props.defaultCountry),"complete"===document.readyState?this.windowLoaded=!0:window.addEventListener("load",function(){e.windowLoaded=!0}),this.generateMarkup(),this.setInitialState(),this.initRequests(),this.deferreds.push(this.autoCountryDeferred.promise()),this.deferreds.push(this.utilsScriptDeferred.promise()),u.a.when(this.deferreds).done(function(){e.setInitialState()}),document.addEventListener("keydown",this.handleDocumentKeyDown)}},{key:"shouldComponentUpdate",value:function(e,t){return t.showDropdown?(document.addEventListener("keydown",this.handleDocumentKeyDown),this.bindDocumentClick()):(document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindDocumentClick()),!0}},{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.updateFlagFromNumber(this.props.value),"function"==typeof this.props.customPlaceholder&&e.customPlaceholder!==this.props.customPlaceholder&&this.updatePlaceholder(this.props)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keydown",this.handleDocumentKeyDown),window.removeEventListener("scroll",this.handleWindowScroll),this.unbindDocumentClick()}},{key:"render",value:function(){this.wrapperClass[this.props.css[0]]=!0;var e=this.props.css[1],t=Object.assign({},this.props.style||{});this.wrapperClass.expanded=this.state.showDropdown;var n=s()(this.wrapperClass),r=this.selectedCountryData?"".concat(this.selectedCountryData.name,": +").concat(this.selectedCountryData.dialCode):"Unknown",o=void 0!==this.props.value?this.props.value:this.state.value;return p.a.createElement("div",{className:n,style:t},p.a.createElement(L,{refCallback:this.setFlagDropdownRef,allowDropdown:this.allowDropdown,dropdownContainer:this.dropdownContainer,separateDialCode:this.props.separateDialCode,dialCode:this.state.dialCode,clickSelectedFlag:this.clickSelectedFlag,setFlag:this.setFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.showDropdown,inputTop:this.state.offsetTop,inputOuterHeight:this.state.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.highlightedCountry,titleTip:r}),p.a.createElement(z,{refCallback:this.setTelRef,handleInputChange:this.handleInputChange,handleOnBlur:this.handleOnBlur,className:e,disabled:this.state.disabled,readonly:this.state.readonly,fieldName:this.props.fieldName,fieldId:this.props.fieldId,value:o,placeholder:void 0!==this.props.placeholder?this.props.placeholder:this.state.placeholder,autoFocus:this.props.autoFocus,autoComplete:this.props.autoComplete,inputProps:this.props.telInputProps,cursorPosition:this.state.cursorPosition}))}}]),r}();$.defaultProps={css:["intl-tel-input",""],fieldName:"",fieldId:"",defaultValue:"",countriesData:null,allowDropdown:!0,autoHideDialCode:!0,autoPlaceholder:!0,customPlaceholder:null,excludeCountries:[],formatOnInit:!0,separateDialCode:!1,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",noCountryDataHandler:null,onlyCountries:[],preferredCountries:["us","gb"],onPhoneNumberChange:null,onPhoneNumberBlur:null,onSelectFlag:null,disabled:!1,autoFocus:!1,useMobileFullscreenDropdown:!0,autoComplete:"off",telInputProps:{},format:!1,formatFull:!1,onFlagClick:null};t.default=$},function(e,t,n){},function(e,t,n){"use strict";var o=n(11);function a(){}var i=null,u={};function l(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("Promise constructor's argument is not a function");this._h=0,this._i=0,this._j=null,this._k=null,e!==a&&p(e,this)}function s(e,t){for(;3===e._i;)e=e._j;if(l._l&&l._l(e),0===e._i)return 0===e._h?(e._h=1,void(e._k=t)):1===e._h?(e._h=2,void(e._k=[e._k,t])):void e._k.push(t);var n,r;n=e,r=t,o(function(){var e=1===n._i?r.onFulfilled:r.onRejected;if(null!==e){var t=function(e,t){try{return e(t)}catch(e){return i=e,u}}(e,n._j);t===u?f(r.promise,i):c(r.promise,t)}else 1===n._i?c(r.promise,n._j):f(r.promise,n._j)})}function c(e,t){if(t===e)return f(e,new TypeError("A promise cannot be resolved with itself."));if(t&&("object"==typeof t||"function"==typeof t)){var n=function(e){try{return e.then}catch(e){return i=e,u}}(t);if(n===u)return f(e,i);if(n===e.then&&t instanceof l)return e._i=3,e._j=t,void r(e);if("function"==typeof n)return void p(n.bind(t),e)}e._i=1,e._j=t,r(e)}function f(e,t){e._i=2,e._j=t,l._m&&l._m(e,t),r(e)}function r(e){if(1===e._h&&(s(e,e._k),e._k=null),2===e._h){for(var t=0;t"):r.innerHTML+="".concat(t,"
"),r.scrollTop=r.scrollHeight}var m=function(e){function o(e){var t,n,r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),n=this,d(f(f(t=!(r=s(o).call(this,e))||"object"!==p(r)&&"function"!=typeof r?f(n):r)),"blurHandler",function(e,t,n,r,o,i,a){y(t,n,r,o,i,a.type)}),t.state={phone1:"",phone2:"",phone3:"",phoneNumber3:""},t.changePhone1=t.changeHandler.bind(f(f(t)),"phone1","phoneNumber1"),t.changePhone2=t.changeHandler.bind(f(f(t)),"phone2","phoneNumber2"),t.changePhone3=t.changeHandler.bind(f(f(t)),"phone3","phoneNumber3"),t.blurHandler1=t.blurHandler.bind(f(f(t)),"phone1"),t.blurHandler2=t.blurHandler.bind(f(f(t)),"phone2"),t.blurHandler3=t.blurHandler.bind(f(f(t)),"phone3"),t.selectFlagHandler1=t.selectFlagHandler.bind(f(f(t)),"phone1"),t.selectFlagHandler2=t.selectFlagHandler.bind(f(f(t)),"phone2"),t.selectFlagHandler3=t.selectFlagHandler.bind(f(f(t)),"phone3"),t}var t,n,r;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}(o,i["Component"]),t=o,(n=[{key:"changeHandler",value:function(e,t,n,r,o,i,a){var u;y(n,r,o,i,a),this.setState((d(u={},e,r),d(u,t,i),u))}},{key:"selectFlagHandler",value:function(e,t,n,r,o){y(t,n,r,o),this.setState(d({},e,t))}},{key:"render",value:function(){return a.a.createElement("div",null,a.a.createElement(u.default,{onPhoneNumberChange:this.changePhone1,onPhoneNumberBlur:this.blurHandler1,onSelectFlag:this.selectFlagHandler1,defaultCountry:"auto",value:this.state.phone1,geoIpLookup:h,css:["intl-tel-input","form-control"],format:!0}),a.a.createElement("div",null,"Phone Number:",this.state.phone1),a.a.createElement(u.default,{onPhoneNumberChange:this.changePhone2,onPhoneNumberBlur:this.blurHandler2,onSelectFlag:this.selectFlagHandler2,defaultCountry:"jp",value:this.state.phone2,css:["intl-tel-input","form-control"]}),a.a.createElement("div",null,"Phone Number:",this.state.phone2),a.a.createElement(u.default,{onPhoneNumberChange:this.changePhone3,onPhoneNumberBlur:this.blurHandler3,onSelectFlag:this.selectFlagHandler3,defaultCountry:"auto",value:this.state.phoneNumber3,geoIpLookup:h,css:["intl-tel-input","form-control"],formatFull:!0}),a.a.createElement("div",null,"Phone Number:",this.state.phone3),a.a.createElement("hr",null),a.a.createElement("div",{id:"debug",className:"code pre-scrollable"}))}}])&&l(t.prototype,n),r&&l(t,r),o}();o.a.render(a.a.createElement(m,null),document.getElementById("root"))},function(e,t){e.exports=o}])}); \ No newline at end of file diff --git a/example/main.js b/example/main.js index fa8e1f35c..7aac7fe74 100644 --- a/example/main.js +++ b/example/main.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):"function"==typeof define&&define.amd?define(["react","react-dom","libphonenumber-js-utils"],t):"object"==typeof exports?exports.IntlTelInput=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):e.IntlTelInput=t(e.React,e.ReactDOM,e.intlTelInputUtils)}(function(){return"undefined"!=typeof window&&window?window:"undefined"!=typeof self&&self?self:this}(),function(n,o,r){return function(l){function e(e){for(var t,n,o=e[0],r=e[1],a=0,i=[];an.length)for(var r=0,a=0;rt?e.substr(0,t):e}),Z(Y(Y(p)),"removeEmptyDialCode",function(){var e=p.state.value;if("+"===e.charAt(0)){var t=h.getNumeric(e);t&&p.selectedCountryData.dialCode!==t||p.setState({value:""})}}),Z(Y(Y(p)),"handleUpDownKey",function(e){var t=p.flagDropDown.querySelectorAll(".highlight")[0],n=t?t.previousElementSibling:void 0,o=t?t.nextElementSibling:void 0,r=e===p.keys.UP?n:o;if(r){-1=p.keys.A&&e.which<=p.keys.Z||e.which===p.keys.SPACE)&&(t&&clearTimeout(t),p.query||(p.query=""),p.query+=String.fromCharCode(e.which),p.searchForCountry(p.query),t=setTimeout(function(){p.query=""},1e3))}),Z(Y(Y(p)),"handleDocumentClick",function(e){var t=e.target.getAttribute("class");(null===t||t&&-1===t.indexOf("country")&&-1===t.indexOf("selected-flag")&&-1===t.indexOf("iti-flag")&&-1===t.indexOf("iti-arrow"))&&(p.isOpening=!1),p.isOpening||p.toggleDropdown(!1),p.isOpening=!1}),Z(Y(Y(p)),"handleInputChange",function(e){var t=e.target.selectionStart,n=e.target.value,o=""===n?n:n.substring(0,t),r=p.props.format?p.formatNumber(e.target.value):e.target.value;t=h.getCursorPositionAfterFormating(o,n,r),void 0!==p.props.value?p.setState({cursorPosition:t},function(){p.updateFlagFromNumber(r),p.notifyPhoneNumberChange(r)}):p.setState({value:r,cursorPosition:t},function(){p.updateFlagFromNumber(r),p.notifyPhoneNumberChange(r)})}),Z(Y(Y(p)),"changeHighlightCountry",function(e,t){p.setState({showDropdown:e,highlightedCountry:t})}),Z(Y(Y(p)),"loadUtils",function(){window.intlTelInputUtils&&p.utilsScriptDeferred.resolve()}),Z(Y(Y(p)),"autoCountryLoaded",function(){"auto"===p.tempCountry&&(p.tempCountry=p.autoCountry,p.autoCountryDeferred.resolve())}),p.wrapperClass={},p.autoCountry="",p.tempCountry="",p.startedLoadingAutoCountry=!1,p.deferreds=[],p.autoCountryDeferred=new l.a.Deferred,p.utilsScriptDeferred=new l.a.Deferred,p.isOpening=!1,p.isMobile="undefined"!=typeof navigator&&$.test(navigator.userAgent),p.preferredCountries=[],p.countries=[],p.countryCodes={},p.windowLoaded=!1,p.keys={UP:38,DOWN:40,ENTER:13,ESC:27,PLUS:43,A:65,Z:90,SPACE:32,TAB:9},p.query="",p.selectedCountryData={},p.state={showDropdown:!1,highlightedCountry:0,value:e.value||e.defaultValue,disabled:e.disabled,readonly:!1,offsetTop:0,outerHeight:0,placeholder:"",title:"",countryCode:"us",dialCode:"",cursorPosition:(e.value||e.defaultValue).length},p}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&J(e,t)}(o,a["Component"]),W(o,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=null;return void 0!==e.value&&t.value!==e.value&&(n={value:e.value}),e.disabled&&t.disabled!==e.disabled&&(n={disabled:e.disabled}),n}}]),W(o,[{key:"componentDidMount",value:function(){var e=this;this.autoHideDialCode=this.props.autoHideDialCode,this.allowDropdown=this.props.allowDropdown,this.nationalMode=this.props.nationalMode,this.dropdownContainer="",this.nationalMode&&(this.autoHideDialCode=!1),this.props.separateDialCode&&(this.autoHideDialCode=!1,this.nationalMode=!1,this.allowDropdown=!0),this.processCountryData.call(this),this.tempCountry=this.getTempCountry(this.props.defaultCountry),"complete"===document.readyState?this.windowLoaded=!0:window.addEventListener("load",function(){e.windowLoaded=!0}),this.generateMarkup(),this.setInitialState(),this.initRequests(),this.deferreds.push(this.autoCountryDeferred.promise()),this.deferreds.push(this.utilsScriptDeferred.promise()),l.a.when(this.deferreds).done(function(){e.setInitialState()}),document.addEventListener("keydown",this.handleDocumentKeyDown)}},{key:"shouldComponentUpdate",value:function(e,t){return t.showDropdown?(document.addEventListener("keydown",this.handleDocumentKeyDown),this.bindDocumentClick()):(document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindDocumentClick()),!0}},{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.updateFlagFromNumber(this.props.value),"function"==typeof this.props.customPlaceholder&&e.customPlaceholder!==this.props.customPlaceholder&&this.updatePlaceholder(this.props)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keydown",this.handleDocumentKeyDown),window.removeEventListener("scroll",this.handleWindowScroll),this.unbindDocumentClick()}},{key:"render",value:function(){this.wrapperClass[this.props.css[0]]=!0;var e=this.props.css[1],t=Object.assign({},this.props.style||{});this.wrapperClass.expanded=this.state.showDropdown;var n=s()(this.wrapperClass),o=this.selectedCountryData?"".concat(this.selectedCountryData.name,": +").concat(this.selectedCountryData.dialCode):"Unknown",r=void 0!==this.props.value?this.props.value:this.state.value;return f.a.createElement("div",{className:n,style:t},f.a.createElement(L,{refCallback:this.setFlagDropdownRef,allowDropdown:this.allowDropdown,dropdownContainer:this.dropdownContainer,separateDialCode:this.props.separateDialCode,dialCode:this.state.dialCode,clickSelectedFlag:this.clickSelectedFlag,setFlag:this.setFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.showDropdown,inputTop:this.state.offsetTop,inputOuterHeight:this.state.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.highlightedCountry,titleTip:o}),f.a.createElement(z,{refCallback:this.setTelRef,handleInputChange:this.handleInputChange,handleOnBlur:this.handleOnBlur,className:e,disabled:this.state.disabled,readonly:this.state.readonly,fieldName:this.props.fieldName,fieldId:this.props.fieldId,value:r,placeholder:void 0!==this.props.placeholder?this.props.placeholder:this.state.placeholder,autoFocus:this.props.autoFocus,autoComplete:this.props.autoComplete,inputProps:this.props.telInputProps,cursorPosition:this.state.cursorPosition}))}}]),o}();Q.defaultProps={css:["intl-tel-input",""],fieldName:"",fieldId:"",defaultValue:"",countriesData:null,allowDropdown:!0,autoHideDialCode:!0,autoPlaceholder:!0,customPlaceholder:null,excludeCountries:[],formatOnInit:!0,separateDialCode:!1,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",noCountryDataHandler:null,onlyCountries:[],preferredCountries:["us","gb"],onPhoneNumberChange:null,onPhoneNumberBlur:null,onSelectFlag:null,disabled:!1,autoFocus:!1,useMobileFullscreenDropdown:!0,autoComplete:"off",telInputProps:{},format:!1,onFlagClick:null};t.default=Q},function(e,t,n){},,,,,,,,,,,,,,,function(e,t){e.exports=r}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):"function"==typeof define&&define.amd?define(["react","react-dom","libphonenumber-js-utils"],t):"object"==typeof exports?exports.IntlTelInput=t(require("react"),require("react-dom"),require("libphonenumber-js-utils")):e.IntlTelInput=t(e.React,e.ReactDOM,e.intlTelInputUtils)}(function(){return"undefined"!=typeof window&&window?window:"undefined"!=typeof self&&self?self:this}(),function(n,o,r){return function(l){function e(e){for(var t,n,o=e[0],r=e[1],a=0,i=[];an.length)for(var r=0,a=0;rt?e.substr(0,t):e}),Z(Y(Y(p)),"removeEmptyDialCode",function(){var e=p.state.value;if("+"===e.charAt(0)){var t=h.getNumeric(e);t&&p.selectedCountryData.dialCode!==t||p.setState({value:""})}}),Z(Y(Y(p)),"handleUpDownKey",function(e){var t=p.flagDropDown.querySelectorAll(".highlight")[0],n=t?t.previousElementSibling:void 0,o=t?t.nextElementSibling:void 0,r=e===p.keys.UP?n:o;if(r){-1=p.keys.A&&e.which<=p.keys.Z||e.which===p.keys.SPACE)&&(t&&clearTimeout(t),p.query||(p.query=""),p.query+=String.fromCharCode(e.which),p.searchForCountry(p.query),t=setTimeout(function(){p.query=""},1e3))}),Z(Y(Y(p)),"handleDocumentClick",function(e){var t=e.target.getAttribute("class");(null===t||t&&-1===t.indexOf("country")&&-1===t.indexOf("selected-flag")&&-1===t.indexOf("iti-flag")&&-1===t.indexOf("iti-arrow"))&&(p.isOpening=!1),p.isOpening||p.toggleDropdown(!1),p.isOpening=!1}),Z(Y(Y(p)),"handleInputChange",function(e){var t=p.cursorUpdate(e),n=t.cursorPosition,o=t.value;void 0!==p.props.value?p.setState({cursorPosition:n},function(){p.updateFlagFromNumber(o),p.notifyPhoneNumberChange(o)}):p.setState({value:o,cursorPosition:n},function(){p.updateFlagFromNumber(o),p.notifyPhoneNumberChange(o)})}),Z(Y(Y(p)),"cursorUpdate",function(e){var t=e.target,n=t.selectionStart,o=t.value,r=""===o?o:o.substring(0,n),a=p.props.format?p.formatNumber(t.value):t.value;return a=p.props.formatFull?p.formatFullNumber(t.value):a,{cursorPosition:n=h.getCursorPositionAfterFormating(r,o,a),value:a}}),Z(Y(Y(p)),"changeHighlightCountry",function(e,t){p.setState({showDropdown:e,highlightedCountry:t})}),Z(Y(Y(p)),"loadUtils",function(){window.intlTelInputUtils&&p.utilsScriptDeferred.resolve()}),Z(Y(Y(p)),"autoCountryLoaded",function(){"auto"===p.tempCountry&&(p.tempCountry=p.autoCountry,p.autoCountryDeferred.resolve())}),p.wrapperClass={},p.autoCountry="",p.tempCountry="",p.startedLoadingAutoCountry=!1,p.deferreds=[],p.autoCountryDeferred=new l.a.Deferred,p.utilsScriptDeferred=new l.a.Deferred,p.isOpening=!1,p.isMobile="undefined"!=typeof navigator&&$.test(navigator.userAgent),p.preferredCountries=[],p.countries=[],p.countryCodes={},p.windowLoaded=!1,p.keys={UP:38,DOWN:40,ENTER:13,ESC:27,PLUS:43,A:65,Z:90,SPACE:32,TAB:9},p.query="",p.selectedCountryData={},p.state={showDropdown:!1,highlightedCountry:0,value:e.value||e.defaultValue,disabled:e.disabled,readonly:!1,offsetTop:0,outerHeight:0,placeholder:"",title:"",countryCode:"us",dialCode:"",cursorPosition:(e.value||e.defaultValue).length},p}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&J(e,t)}(o,a["Component"]),W(o,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=null;return void 0!==e.value&&t.value!==e.value&&(n={value:e.value}),e.disabled&&t.disabled!==e.disabled&&(n={disabled:e.disabled}),n}}]),W(o,[{key:"componentDidMount",value:function(){var e=this;this.autoHideDialCode=this.props.autoHideDialCode,this.allowDropdown=this.props.allowDropdown,this.nationalMode=this.props.nationalMode,this.dropdownContainer="",this.nationalMode&&(this.autoHideDialCode=!1),this.props.separateDialCode&&(this.autoHideDialCode=!1,this.nationalMode=!1,this.allowDropdown=!0),this.processCountryData.call(this),this.tempCountry=this.getTempCountry(this.props.defaultCountry),"complete"===document.readyState?this.windowLoaded=!0:window.addEventListener("load",function(){e.windowLoaded=!0}),this.generateMarkup(),this.setInitialState(),this.initRequests(),this.deferreds.push(this.autoCountryDeferred.promise()),this.deferreds.push(this.utilsScriptDeferred.promise()),l.a.when(this.deferreds).done(function(){e.setInitialState()}),document.addEventListener("keydown",this.handleDocumentKeyDown)}},{key:"shouldComponentUpdate",value:function(e,t){return t.showDropdown?(document.addEventListener("keydown",this.handleDocumentKeyDown),this.bindDocumentClick()):(document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindDocumentClick()),!0}},{key:"componentDidUpdate",value:function(e){this.props.value!==e.value&&this.updateFlagFromNumber(this.props.value),"function"==typeof this.props.customPlaceholder&&e.customPlaceholder!==this.props.customPlaceholder&&this.updatePlaceholder(this.props)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keydown",this.handleDocumentKeyDown),window.removeEventListener("scroll",this.handleWindowScroll),this.unbindDocumentClick()}},{key:"render",value:function(){this.wrapperClass[this.props.css[0]]=!0;var e=this.props.css[1],t=Object.assign({},this.props.style||{});this.wrapperClass.expanded=this.state.showDropdown;var n=s()(this.wrapperClass),o=this.selectedCountryData?"".concat(this.selectedCountryData.name,": +").concat(this.selectedCountryData.dialCode):"Unknown",r=void 0!==this.props.value?this.props.value:this.state.value;return f.a.createElement("div",{className:n,style:t},f.a.createElement(L,{refCallback:this.setFlagDropdownRef,allowDropdown:this.allowDropdown,dropdownContainer:this.dropdownContainer,separateDialCode:this.props.separateDialCode,dialCode:this.state.dialCode,clickSelectedFlag:this.clickSelectedFlag,setFlag:this.setFlag,countryCode:this.state.countryCode,isMobile:this.isMobile,handleSelectedFlagKeydown:this.handleSelectedFlagKeydown,changeHighlightCountry:this.changeHighlightCountry,countries:this.countries,showDropdown:this.state.showDropdown,inputTop:this.state.offsetTop,inputOuterHeight:this.state.outerHeight,preferredCountries:this.preferredCountries,highlightedCountry:this.state.highlightedCountry,titleTip:o}),f.a.createElement(z,{refCallback:this.setTelRef,handleInputChange:this.handleInputChange,handleOnBlur:this.handleOnBlur,className:e,disabled:this.state.disabled,readonly:this.state.readonly,fieldName:this.props.fieldName,fieldId:this.props.fieldId,value:r,placeholder:void 0!==this.props.placeholder?this.props.placeholder:this.state.placeholder,autoFocus:this.props.autoFocus,autoComplete:this.props.autoComplete,inputProps:this.props.telInputProps,cursorPosition:this.state.cursorPosition}))}}]),o}();Q.defaultProps={css:["intl-tel-input",""],fieldName:"",fieldId:"",defaultValue:"",countriesData:null,allowDropdown:!0,autoHideDialCode:!0,autoPlaceholder:!0,customPlaceholder:null,excludeCountries:[],formatOnInit:!0,separateDialCode:!1,defaultCountry:"",geoIpLookup:null,nationalMode:!0,numberType:"MOBILE",noCountryDataHandler:null,onlyCountries:[],preferredCountries:["us","gb"],onPhoneNumberChange:null,onPhoneNumberBlur:null,onSelectFlag:null,disabled:!1,autoFocus:!1,useMobileFullscreenDropdown:!0,autoComplete:"off",telInputProps:{},format:!1,formatFull:!1,onFlagClick:null};t.default=Q},function(e,t,n){},,,,,,,,,,,,,,,function(e,t){e.exports=r}])}); \ No newline at end of file diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index 5b228f183..b482b5f6e 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -1177,21 +1177,7 @@ class IntlTelInputApp extends Component { // Either notify phoneNumber changed if component is controlled // or udpate the state and notify change if component is uncontrolled handleInputChange = e => { - let cursorPosition = e.target.selectionStart; - const previousValue = e.target.value; - const previousStringBeforeCursor = - previousValue === '' - ? previousValue - : previousValue.substring(0, cursorPosition); - const value = this.props.format - ? this.formatNumber(e.target.value) - : e.target.value; - - cursorPosition = utils.getCursorPositionAfterFormating( - previousStringBeforeCursor, - previousValue, - value - ); + const { cursorPosition, value } = this.cursorUpdate(e); if (this.props.value !== undefined) { this.setState( @@ -1217,6 +1203,33 @@ class IntlTelInputApp extends Component { } }; + cursorUpdate = ({ target }) => { + let cursorPosition = target.selectionStart; + const previousValue = target.value; + const previousStringBeforeCursor = + previousValue === '' + ? previousValue + : previousValue.substring(0, cursorPosition); + let value = this.props.format + ? this.formatNumber(target.value) + : target.value; + + value = this.props.formatFull + ? this.formatFullNumber(target.value) + : value; + + cursorPosition = utils.getCursorPositionAfterFormating( + previousStringBeforeCursor, + previousValue, + value + ); + + return { + cursorPosition, + value, + }; + }; + changeHighlightCountry = (showDropdown, selectedIndex) => { this.setState({ showDropdown, @@ -1337,6 +1350,7 @@ IntlTelInputApp.propTypes = { useMobileFullscreenDropdown: PropTypes.bool, telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types format: PropTypes.bool, + formatFull: PropTypes.bool, onFlagClick: PropTypes.func, }; @@ -1388,6 +1402,7 @@ IntlTelInputApp.defaultProps = { telInputProps: {}, // always format the number format: false, + formatFull: false, onFlagClick: null, }; diff --git a/src/example.js b/src/example.js index 4f36a16eb..c8d2bcb56 100644 --- a/src/example.js +++ b/src/example.js @@ -31,23 +31,29 @@ class DemoComponent extends Component { this.state = { phone1: '', phone2: '', + phone3: '', + phoneNumber3: '', }; - this.changePhone1 = this.changeHandler.bind(this, 'phone1'); - this.changePhone2 = this.changeHandler.bind(this, 'phone2'); + this.changePhone1 = this.changeHandler.bind(this, 'phone1', 'phoneNumber1'); + this.changePhone2 = this.changeHandler.bind(this, 'phone2', 'phoneNumber2'); + this.changePhone3 = this.changeHandler.bind(this, 'phone3', 'phoneNumber3'); this.blurHandler1 = this.blurHandler.bind(this, 'phone1'); this.blurHandler2 = this.blurHandler.bind(this, 'phone2'); + this.blurHandler3 = this.blurHandler.bind(this, 'phone3'); this.selectFlagHandler1 = this.selectFlagHandler.bind(this, 'phone1'); this.selectFlagHandler2 = this.selectFlagHandler.bind(this, 'phone2'); + this.selectFlagHandler3 = this.selectFlagHandler.bind(this, 'phone3'); } blurHandler = (name, isValid, value, countryData, number, ext, event) => { log(isValid, value, countryData, number, ext, event.type); }; - changeHandler(name, isValid, value, countryData, number, ext) { + changeHandler(name, nameNumber, isValid, value, countryData, number, ext) { log(isValid, value, countryData, number, ext); this.setState({ [name]: value, + [nameNumber]: number, }); } @@ -90,11 +96,28 @@ class DemoComponent extends Component { value={this.state.phone2} css={['intl-tel-input', 'form-control']} /> +
Phone Number: {this.state.phone2}
+ + +
+ Phone Number: + {this.state.phone3} +
+