react-telephone-input - npm Package Compare versions

Comparing version 4.4.4 to 4.4.5

es/ReactTelephoneInput.js

@@ -5,25 +5,25 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var some = require('lodash/some');
-var find = require('lodash/find');
-var reduce = require('lodash/reduce');
-var map = require('lodash/map');
-var filter = require('lodash/filter');
-var findIndex = require('lodash/findIndex');
-var first = require('lodash/first');
-var tail = require('lodash/tail');
-var debounce = require('lodash/debounce');
-var memoize = require('lodash/memoize');
-var assign = require('lodash/assign');
-var isEqual = require('lodash/isEqual');
+var some = require("lodash/some");
+var find = require("lodash/find");
+var reduce = require("lodash/reduce");
+var map = require("lodash/map");
+var filter = require("lodash/filter");
+var findIndex = require("lodash/findIndex");
+var first = require("lodash/first");
+var tail = require("lodash/tail");
+var debounce = require("lodash/debounce");
+var memoize = require("lodash/memoize");
+var assign = require("lodash/assign");
+var isEqual = require("lodash/isEqual");
 // import lodash string methods
-var trim = require('lodash/trim');
-var startsWith = require('lodash/startsWith');
-var PropTypes = require('prop-types');
-var createReactClass = require('create-react-class');
+var trim = require("lodash/trim");
+var startsWith = require("lodash/startsWith");
+var PropTypes = require("prop-types");
+var createReactClass = require("create-react-class");
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var onClickOutside = require('react-onclickoutside').default;
-var classNames = require('classnames');
-var countryData = require('country-telephone-data');
+var React = require("react");
+var ReactDOM = require("react-dom");
+var onClickOutside = require("react-onclickoutside").default;
+var classNames = require("classnames");
+var countryData = require("country-telephone-data");
 var allCountries = countryData.allCountries;
@@ -33,4 +33,4 @@ var iso2Lookup = countryData.iso2Lookup;
 
-if (typeof document !== 'undefined') {
-    var isModernBrowser = Boolean(document.createElement('input').setSelectionRange);
+if (typeof document !== "undefined") {
+    var isModernBrowser = Boolean(document.createElement("input").setSelectionRange);
 } else {
@@ -55,3 +55,3 @@ var isModernBrowser = true;
     if (!text || text.length === 0) {
-        return '+';
+        return "+";
     }
@@ -62,3 +62,3 @@
     if (text && text.length < 2 || !pattern || !autoFormat) {
-        return '+' + text;
+        return "+" + text;
     }
@@ -71,3 +71,3 @@
 
-        if (character !== '.') {
+        if (character !== ".") {
             return {
@@ -83,4 +83,4 @@ formattedText: acc.formattedText + character,
         };
-    }, { formattedText: '', remainingText: text.split('') });
-    return formattedObject.formattedText + formattedObject.remainingText.join('');
+    }, { formattedText: "", remainingText: text.split("") });
+    return formattedObject.formattedText + formattedObject.remainingText.join("");
 }
@@ -96,3 +96,3 @@
 export function replaceCountryCode(currentSelectedCountry, nextSelectedCountry, number) {
-    var dialCodeRegex = RegExp('^(' + currentSelectedCountry.dialCode + ')');
+    var dialCodeRegex = RegExp("^(" + currentSelectedCountry.dialCode + ")");
     var newNumber = number.replace(dialCodeRegex, nextSelectedCountry.dialCode);
@@ -109,3 +109,3 @@
 export var ReactTelephoneInput = createReactClass({
-    displayName: 'ReactTelephoneInput',
+    displayName: "ReactTelephoneInput",
     getInitialState: function getInitialState() {
@@ -118,6 +118,6 @@ var preferredCountries = this.props.preferredCountries.map(function (iso2) {
 
-        return assign({}, {
+        return Object.assign({}, {
             preferredCountries: preferredCountries,
             showDropDown: false,
-            queryString: '',
+            queryString: "",
             freezeSelection: false,
@@ -154,8 +154,8 @@ debouncedQueryStingSearcher: debounce(this.searchCountry, 300)
             isValid: isNumberValid,
-            flagsImagePath: 'flags.png',
+            flagsImagePath: "flags.png",
             onEnterKeyPress: function onEnterKeyPress() {},
             preferredCountries: [],
             disabled: false,
-            placeholder: '[phone]',
-            autoComplete: 'tel',
+            placeholder: "[phone]",
+            autoComplete: "tel",
             required: false,
@@ -166,3 +166,3 @@ inputProps: {}
     getNumber: function getNumber() {
-        return this.state.formattedNumber !== '+' ? this.state.formattedNumber : '';
+        return this.state.formattedNumber !== "+" ? this.state.formattedNumber : "";
     },
@@ -173,3 +173,3 @@ getValue: function getValue() {
     componentDidMount: function componentDidMount() {
-        document.addEventListener('keydown', this.handleKeydown);
+        document.addEventListener("keydown", this.handleKeydown);
 
@@ -185,3 +185,3 @@ this._cursorToEnd(true);
     componentWillUnmount: function componentWillUnmount() {
-        document.removeEventListener('keydown', this.handleKeydown);
+        document.removeEventListener("keydown", this.handleKeydown);
     },
@@ -249,3 +249,3 @@ scrollTo: function scrollTo(country, middle) {
         var inputNumberForCountries = inputNumber.substr(0, 4);
-        if (trim(inputNumber) !== '') {
+        if (trim(inputNumber) !== "") {
             var bestGuess = reduce(this.props.onlyCountries, function (selectedCountry, country) {
@@ -273,3 +273,3 @@ // if the country dialCode exists WITH area code
                 return selectedCountry;
-            }, { dialCode: '', priority: 10001 }, this);
+            }, { dialCode: "", priority: 10001 }, this);
         } else {
@@ -286,3 +286,3 @@ return secondBestGuess;
     getElement: function getElement(index) {
-        return ReactDOM.findDOMNode(this.refs['flag_no_' + index]);
+        return ReactDOM.findDOMNode(this.refs["flag_no_" + index]);
     },
@@ -310,3 +310,3 @@ handleFlagDropdownClick: function handleFlagDropdownClick(e) {
     handleInput: function handleInput(event) {
-        var formattedNumber = '+',
+        var formattedNumber = "+",
             newSelectedCountry = this.state.selectedCountry,
@@ -329,3 +329,3 @@ freezeSelection = this.state.freezeSelection;
             // before entering the number in new format, lets check if the dial code now matches some other country
-            var inputNumber = event.target.value.replace(/\D/g, '');
+            var inputNumber = event.target.value.replace(/\D/g, "");
 
@@ -379,3 +379,3 @@ // we don't need to send the whole number to guess the country... only the first 6 characters are enough
         if (currentSelectedCountry.iso2 !== nextSelectedCountry.iso2) {
-            var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, this.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
+            var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, this.state.formattedNumber.replace(/\D/g, "") // let's convert formatted number to just numbers for easy find/replace
             );
@@ -402,3 +402,3 @@
         // trigger parent component's onFocus handler
-        if (typeof this.props.onFocus === 'function') {
+        if (typeof this.props.onFocus === "function") {
             this.props.onFocus(this.state.formattedNumber, this.state.selectedCountry);
@@ -419,13 +419,13 @@ }
         } else if (this.props.value) {
-            // just cleared the value
-            inputNumber = '';
+            // just clear the value
+            inputNumber = "";
         } else if (this.state && this.state.formattedNumber && this.state.formattedNumber.length > 0) {
             inputNumber = this.state.formattedNumber;
         } else {
-            inputNumber = '';
+            inputNumber = "";
         }
 
-        var selectedCountryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
+        var selectedCountryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, ""));
         var selectedCountryGuessIndex = findIndex(allCountries, selectedCountryGuess);
-        var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, this.props.autoFormat);
+        var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ""), selectedCountryGuess ? selectedCountryGuess.format : null, this.props.autoFormat);
 
@@ -440,5 +440,5 @@ return {
         // if the input is blank, insert dial code of the selected country
-        if (this.refs.numberInput.value === '+') {
+        if (this.refs.numberInput && this.refs.numberInput.value === "+") {
             this.setState({
-                formattedNumber: '+' + this.state.selectedCountry.dialCode
+                formattedNumber: "+" + this.state.selectedCountry.dialCode
             });
@@ -475,3 +475,3 @@ }
         this.setState({
-            queryString: '',
+            queryString: "",
             highlightCountryIndex: probableCandidateIndex
@@ -545,16 +545,16 @@ });
 
-            var inputFlagClasses = 'flag ' + country.iso2;
+            var inputFlagClasses = "flag " + country.iso2;
 
             return React.createElement(
-                'li',
+                "li",
                 {
-                    ref: 'flag_no_' + index,
-                    key: 'flag_no_' + index,
-                    'data-flag-key': 'flag_no_' + index,
+                    ref: "flag_no_" + index,
+                    key: "flag_no_" + index,
+                    "data-flag-key": "flag_no_" + index,
                     className: itemClasses,
-                    'data-dial-code': '1',
-                    'data-country-code': country.iso2,
+                    "data-dial-code": "1",
+                    "data-country-code": country.iso2,
                     onClick: self.handleFlagItemClick.bind(self, country)
                 },
-                React.createElement('div', {
+                React.createElement("div", {
                     className: inputFlagClasses,
@@ -564,10 +564,10 @@ style: self.getFlagStyle()
                 React.createElement(
-                    'span',
-                    { className: 'country-name' },
+                    "span",
+                    { className: "country-name" },
                     country.name
                 ),
                 React.createElement(
-                    'span',
-                    { className: 'dial-code' },
-                    '+' + country.dialCode
+                    "span",
+                    { className: "dial-code" },
+                    "+" + country.dialCode
                 )
@@ -577,3 +577,3 @@ );
 
-        var dashedLi = React.createElement('li', { key: 'dashes', className: 'divider' });
+        var dashedLi = React.createElement("li", { key: "dashes", className: "divider" });
         // let's insert a dashed line in between preffered countries and the rest
@@ -583,8 +583,8 @@ countryDropDownList.splice(this.state.preferredCountries.length, 0, dashedLi);
         var dropDownClasses = classNames({
-            'country-list': true,
+            "country-list": true,
             hide: !this.state.showDropDown
         });
         return React.createElement(
-            'ul',
-            { ref: 'flagDropdownList', className: dropDownClasses },
+            "ul",
+            { ref: "flagDropdownList", className: dropDownClasses },
             countryDropDownList
@@ -597,7 +597,7 @@ );
             height: 11,
-            backgroundImage: 'url(' + this.props.flagsImagePath + ')'
+            backgroundImage: "url(" + this.props.flagsImagePath + ")"
         };
     },
     handleInputBlur: function handleInputBlur() {
-        if (typeof this.props.onBlur === 'function') {
+        if (typeof this.props.onBlur === "function") {
             this.props.onBlur(this.state.formattedNumber, this.state.selectedCountry);
@@ -612,12 +612,12 @@ }
         var inputClasses = classNames({
-            'form-control': true,
-            'invalid-number': !this.props.isValid(this.state.formattedNumber.replace(/\D/g, ''))
+            "form-control": true,
+            "invalid-number": !this.props.isValid(this.state.formattedNumber.replace(/\D/g, ""))
         });
 
         var flagViewClasses = classNames({
-            'flag-dropdown': true,
-            'open-dropdown': this.state.showDropDown
+            "flag-dropdown": true,
+            "open-dropdown": this.state.showDropDown
         });
 
-        var inputFlagClasses = 'flag ' + this.state.selectedCountry.iso2;
+        var inputFlagClasses = "flag " + this.state.selectedCountry.iso2;
         var otherProps = this.props.inputProps;
@@ -627,8 +627,10 @@ if (this.props.inputId) {
         }
+
+        console.log();
         return React.createElement(
-            'div',
+            "div",
             {
-                className: classNames('react-tel-input', this.props.classNames, this.props.className)
+                className: classNames("react-tel-input", this.props.classNames, this.props.className)
             },
-            React.createElement('input', _extends({
+            React.createElement("input", _extends({
                 onChange: this.handleInput,
@@ -640,4 +642,4 @@ onClick: this.handleInputClick,
                 value: this.state.formattedNumber,
-                ref: 'numberInput',
-                type: 'tel',
+                ref: "numberInput",
+                type: "tel",
                 className: inputClasses,
@@ -651,5 +653,5 @@ autoComplete: this.props.autoComplete,
             React.createElement(
-                'div',
+                "div",
                 {
-                    ref: 'flagDropDownButton',
+                    ref: "flagDropDownButton",
                     className: flagViewClasses,
@@ -659,11 +661,11 @@ onKeyDown: this.handleKeydown
                 React.createElement(
-                    'div',
+                    "div",
                     {
-                        ref: 'selectedFlag',
+                        ref: "selectedFlag",
                         onClick: this.handleFlagDropdownClick,
-                        className: 'selected-flag',
-                        title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+                        className: "selected-flag",
+                        title: this.state.selectedCountry.name + ": + " + this.state.selectedCountry.dialCode
                     },
                     React.createElement(
-                        'div',
+                        "div",
                         {
@@ -673,6 +675,6 @@ className: inputFlagClasses,
                         },
-                        React.createElement('div', { className: arrowClasses })
+                        React.createElement("div", { className: arrowClasses })
                     )
                 ),
-                this.state.showDropDown ? this.getCountryDropDownList() : ''
+                this.state.showDropDown ? this.getCountryDropDownList() : ""
             )
@@ -679,0 +681,0 @@ );

lib/ReactTelephoneInput.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -12,25 +12,25 @@ exports.__esModule = true;
 
-var some = require('lodash/some');
-var find = require('lodash/find');
-var reduce = require('lodash/reduce');
-var map = require('lodash/map');
-var filter = require('lodash/filter');
-var findIndex = require('lodash/findIndex');
-var first = require('lodash/first');
-var tail = require('lodash/tail');
-var debounce = require('lodash/debounce');
-var memoize = require('lodash/memoize');
-var assign = require('lodash/assign');
-var isEqual = require('lodash/isEqual');
+var some = require("lodash/some");
+var find = require("lodash/find");
+var reduce = require("lodash/reduce");
+var map = require("lodash/map");
+var filter = require("lodash/filter");
+var findIndex = require("lodash/findIndex");
+var first = require("lodash/first");
+var tail = require("lodash/tail");
+var debounce = require("lodash/debounce");
+var memoize = require("lodash/memoize");
+var assign = require("lodash/assign");
+var isEqual = require("lodash/isEqual");
 // import lodash string methods
-var trim = require('lodash/trim');
-var startsWith = require('lodash/startsWith');
-var PropTypes = require('prop-types');
-var createReactClass = require('create-react-class');
+var trim = require("lodash/trim");
+var startsWith = require("lodash/startsWith");
+var PropTypes = require("prop-types");
+var createReactClass = require("create-react-class");
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var onClickOutside = require('react-onclickoutside').default;
-var classNames = require('classnames');
-var countryData = require('country-telephone-data');
+var React = require("react");
+var ReactDOM = require("react-dom");
+var onClickOutside = require("react-onclickoutside").default;
+var classNames = require("classnames");
+var countryData = require("country-telephone-data");
 var allCountries = countryData.allCountries;
@@ -40,4 +40,4 @@ var iso2Lookup = countryData.iso2Lookup;
 
-if (typeof document !== 'undefined') {
-    var isModernBrowser = Boolean(document.createElement('input').setSelectionRange);
+if (typeof document !== "undefined") {
+    var isModernBrowser = Boolean(document.createElement("input").setSelectionRange);
 } else {
@@ -62,3 +62,3 @@ var isModernBrowser = true;
     if (!text || text.length === 0) {
-        return '+';
+        return "+";
     }
@@ -69,3 +69,3 @@
     if (text && text.length < 2 || !pattern || !autoFormat) {
-        return '+' + text;
+        return "+" + text;
     }
@@ -78,3 +78,3 @@
 
-        if (character !== '.') {
+        if (character !== ".") {
             return {
@@ -90,4 +90,4 @@ formattedText: acc.formattedText + character,
         };
-    }, { formattedText: '', remainingText: text.split('') });
-    return formattedObject.formattedText + formattedObject.remainingText.join('');
+    }, { formattedText: "", remainingText: text.split("") });
+    return formattedObject.formattedText + formattedObject.remainingText.join("");
 }
@@ -103,3 +103,3 @@
 function replaceCountryCode(currentSelectedCountry, nextSelectedCountry, number) {
-    var dialCodeRegex = RegExp('^(' + currentSelectedCountry.dialCode + ')');
+    var dialCodeRegex = RegExp("^(" + currentSelectedCountry.dialCode + ")");
     var newNumber = number.replace(dialCodeRegex, nextSelectedCountry.dialCode);
@@ -116,3 +116,3 @@
 var ReactTelephoneInput = exports.ReactTelephoneInput = createReactClass({
-    displayName: 'ReactTelephoneInput',
+    displayName: "ReactTelephoneInput",
     getInitialState: function getInitialState() {
@@ -125,6 +125,6 @@ var preferredCountries = this.props.preferredCountries.map(function (iso2) {
 
-        return assign({}, {
+        return Object.assign({}, {
             preferredCountries: preferredCountries,
             showDropDown: false,
-            queryString: '',
+            queryString: "",
             freezeSelection: false,
@@ -161,8 +161,8 @@ debouncedQueryStingSearcher: debounce(this.searchCountry, 300)
             isValid: isNumberValid,
-            flagsImagePath: 'flags.png',
+            flagsImagePath: "flags.png",
             onEnterKeyPress: function onEnterKeyPress() {},
             preferredCountries: [],
             disabled: false,
-            placeholder: '[phone]',
-            autoComplete: 'tel',
+            placeholder: "[phone]",
+            autoComplete: "tel",
             required: false,
@@ -173,3 +173,3 @@ inputProps: {}
     getNumber: function getNumber() {
-        return this.state.formattedNumber !== '+' ? this.state.formattedNumber : '';
+        return this.state.formattedNumber !== "+" ? this.state.formattedNumber : "";
     },
@@ -180,3 +180,3 @@ getValue: function getValue() {
     componentDidMount: function componentDidMount() {
-        document.addEventListener('keydown', this.handleKeydown);
+        document.addEventListener("keydown", this.handleKeydown);
 
@@ -192,3 +192,3 @@ this._cursorToEnd(true);
     componentWillUnmount: function componentWillUnmount() {
-        document.removeEventListener('keydown', this.handleKeydown);
+        document.removeEventListener("keydown", this.handleKeydown);
     },
@@ -256,3 +256,3 @@ scrollTo: function scrollTo(country, middle) {
         var inputNumberForCountries = inputNumber.substr(0, 4);
-        if (trim(inputNumber) !== '') {
+        if (trim(inputNumber) !== "") {
             var bestGuess = reduce(this.props.onlyCountries, function (selectedCountry, country) {
@@ -280,3 +280,3 @@ // if the country dialCode exists WITH area code
                 return selectedCountry;
-            }, { dialCode: '', priority: 10001 }, this);
+            }, { dialCode: "", priority: 10001 }, this);
         } else {
@@ -293,3 +293,3 @@ return secondBestGuess;
     getElement: function getElement(index) {
-        return ReactDOM.findDOMNode(this.refs['flag_no_' + index]);
+        return ReactDOM.findDOMNode(this.refs["flag_no_" + index]);
     },
@@ -317,3 +317,3 @@ handleFlagDropdownClick: function handleFlagDropdownClick(e) {
     handleInput: function handleInput(event) {
-        var formattedNumber = '+',
+        var formattedNumber = "+",
             newSelectedCountry = this.state.selectedCountry,
@@ -336,3 +336,3 @@ freezeSelection = this.state.freezeSelection;
             // before entering the number in new format, lets check if the dial code now matches some other country
-            var inputNumber = event.target.value.replace(/\D/g, '');
+            var inputNumber = event.target.value.replace(/\D/g, "");
 
@@ -386,3 +386,3 @@ // we don't need to send the whole number to guess the country... only the first 6 characters are enough
         if (currentSelectedCountry.iso2 !== nextSelectedCountry.iso2) {
-            var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, this.state.formattedNumber.replace(/\D/g, '') // let's convert formatted number to just numbers for easy find/replace
+            var newNumber = replaceCountryCode(currentSelectedCountry, nextSelectedCountry, this.state.formattedNumber.replace(/\D/g, "") // let's convert formatted number to just numbers for easy find/replace
             );
@@ -409,3 +409,3 @@
         // trigger parent component's onFocus handler
-        if (typeof this.props.onFocus === 'function') {
+        if (typeof this.props.onFocus === "function") {
             this.props.onFocus(this.state.formattedNumber, this.state.selectedCountry);
@@ -426,13 +426,13 @@ }
         } else if (this.props.value) {
-            // just cleared the value
-            inputNumber = '';
+            // just clear the value
+            inputNumber = "";
         } else if (this.state && this.state.formattedNumber && this.state.formattedNumber.length > 0) {
             inputNumber = this.state.formattedNumber;
         } else {
-            inputNumber = '';
+            inputNumber = "";
         }
 
-        var selectedCountryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
+        var selectedCountryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, ""));
         var selectedCountryGuessIndex = findIndex(allCountries, selectedCountryGuess);
-        var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, this.props.autoFormat);
+        var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ""), selectedCountryGuess ? selectedCountryGuess.format : null, this.props.autoFormat);
 
@@ -447,5 +447,5 @@ return {
         // if the input is blank, insert dial code of the selected country
-        if (this.refs.numberInput.value === '+') {
+        if (this.refs.numberInput && this.refs.numberInput.value === "+") {
             this.setState({
-                formattedNumber: '+' + this.state.selectedCountry.dialCode
+                formattedNumber: "+" + this.state.selectedCountry.dialCode
             });
@@ -482,3 +482,3 @@ }
         this.setState({
-            queryString: '',
+            queryString: "",
             highlightCountryIndex: probableCandidateIndex
@@ -552,16 +552,16 @@ });
 
-            var inputFlagClasses = 'flag ' + country.iso2;
+            var inputFlagClasses = "flag " + country.iso2;
 
             return React.createElement(
-                'li',
+                "li",
                 {
-                    ref: 'flag_no_' + index,
-                    key: 'flag_no_' + index,
-                    'data-flag-key': 'flag_no_' + index,
+                    ref: "flag_no_" + index,
+                    key: "flag_no_" + index,
+                    "data-flag-key": "flag_no_" + index,
                     className: itemClasses,
-                    'data-dial-code': '1',
-                    'data-country-code': country.iso2,
+                    "data-dial-code": "1",
+                    "data-country-code": country.iso2,
                     onClick: self.handleFlagItemClick.bind(self, country)
                 },
-                React.createElement('div', {
+                React.createElement("div", {
                     className: inputFlagClasses,
@@ -571,10 +571,10 @@ style: self.getFlagStyle()
                 React.createElement(
-                    'span',
-                    { className: 'country-name' },
+                    "span",
+                    { className: "country-name" },
                     country.name
                 ),
                 React.createElement(
-                    'span',
-                    { className: 'dial-code' },
-                    '+' + country.dialCode
+                    "span",
+                    { className: "dial-code" },
+                    "+" + country.dialCode
                 )
@@ -584,3 +584,3 @@ );
 
-        var dashedLi = React.createElement('li', { key: 'dashes', className: 'divider' });
+        var dashedLi = React.createElement("li", { key: "dashes", className: "divider" });
         // let's insert a dashed line in between preffered countries and the rest
@@ -590,8 +590,8 @@ countryDropDownList.splice(this.state.preferredCountries.length, 0, dashedLi);
         var dropDownClasses = classNames({
-            'country-list': true,
+            "country-list": true,
             hide: !this.state.showDropDown
         });
         return React.createElement(
-            'ul',
-            { ref: 'flagDropdownList', className: dropDownClasses },
+            "ul",
+            { ref: "flagDropdownList", className: dropDownClasses },
             countryDropDownList
@@ -604,7 +604,7 @@ );
             height: 11,
-            backgroundImage: 'url(' + this.props.flagsImagePath + ')'
+            backgroundImage: "url(" + this.props.flagsImagePath + ")"
         };
     },
     handleInputBlur: function handleInputBlur() {
-        if (typeof this.props.onBlur === 'function') {
+        if (typeof this.props.onBlur === "function") {
             this.props.onBlur(this.state.formattedNumber, this.state.selectedCountry);
@@ -619,12 +619,12 @@ }
         var inputClasses = classNames({
-            'form-control': true,
-            'invalid-number': !this.props.isValid(this.state.formattedNumber.replace(/\D/g, ''))
+            "form-control": true,
+            "invalid-number": !this.props.isValid(this.state.formattedNumber.replace(/\D/g, ""))
         });
 
         var flagViewClasses = classNames({
-            'flag-dropdown': true,
-            'open-dropdown': this.state.showDropDown
+            "flag-dropdown": true,
+            "open-dropdown": this.state.showDropDown
         });
 
-        var inputFlagClasses = 'flag ' + this.state.selectedCountry.iso2;
+        var inputFlagClasses = "flag " + this.state.selectedCountry.iso2;
         var otherProps = this.props.inputProps;
@@ -634,8 +634,10 @@ if (this.props.inputId) {
         }
+
+        console.log();
         return React.createElement(
-            'div',
+            "div",
             {
-                className: classNames('react-tel-input', this.props.classNames, this.props.className)
+                className: classNames("react-tel-input", this.props.classNames, this.props.className)
             },
-            React.createElement('input', _extends({
+            React.createElement("input", _extends({
                 onChange: this.handleInput,
@@ -647,4 +649,4 @@ onClick: this.handleInputClick,
                 value: this.state.formattedNumber,
-                ref: 'numberInput',
-                type: 'tel',
+                ref: "numberInput",
+                type: "tel",
                 className: inputClasses,
@@ -658,5 +660,5 @@ autoComplete: this.props.autoComplete,
             React.createElement(
-                'div',
+                "div",
                 {
-                    ref: 'flagDropDownButton',
+                    ref: "flagDropDownButton",
                     className: flagViewClasses,
@@ -666,11 +668,11 @@ onKeyDown: this.handleKeydown
                 React.createElement(
-                    'div',
+                    "div",
                     {
-                        ref: 'selectedFlag',
+                        ref: "selectedFlag",
                         onClick: this.handleFlagDropdownClick,
-                        className: 'selected-flag',
-                        title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+                        className: "selected-flag",
+                        title: this.state.selectedCountry.name + ": + " + this.state.selectedCountry.dialCode
                     },
                     React.createElement(
-                        'div',
+                        "div",
                         {
@@ -680,6 +682,6 @@ className: inputFlagClasses,
                         },
-                        React.createElement('div', { className: arrowClasses })
+                        React.createElement("div", { className: arrowClasses })
                     )
                 ),
-                this.state.showDropDown ? this.getCountryDropDownList() : ''
+                this.state.showDropDown ? this.getCountryDropDownList() : ""
             )
@@ -686,0 +688,0 @@ );

package.json

 {
     "name": "react-telephone-input",
-    "version": "4.4.4",
+    "version": "4.4.5",
     "description":
@@ -5,0 +5,0 @@ "React component for entering and validating international telephone numbers",

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

76922

increased by0.14%

Lines of code

2020

increased by0.1%

No dependency changes