react-telephone-input - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

package.json

 {
   "name": "react-telephone-input",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "React component for entering and validating international telephone numbers. Inspired from the awesome jquery plugin for the same - https://github.com/Bluefieldscom/intl-tel-input.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -27,3 +27,9 @@ Reactjs Component for International Telephone Input
 - You will need to copy flags.png from example/src folder to see the flag icons for each country.
+- Set the flagImagePath using the prop flagImagePath
+```
+<ReactTelephoneInput defaultCountry='in' flagImagePath='/path/to/images/flags.png'>
+```
+The default value for flagImagePath is 'flags.png'
 
+
 ## Features
@@ -30,0 +36,0 @@ * Automatically format the number as the user types

src/index.js

@@ -96,2 +96,3 @@ 'use strict';
             isValid: isNumberValid,
+            flagsImagePath: 'flags.png',
             onEnterKeyPress: function () {}
@@ -106,2 +107,7 @@ };
     },
+    setFlagPathForFlagCssClass() {
+        var node = document.createElement('style');
+        node.innerHTML = `.flag{background:url(${this.props.flagsImagePath})`;
+        document.body.appendChild(node);
+    },
     componentDidMount() {
@@ -111,3 +117,3 @@ document.addEventListener('keydown', this.handleKeydown);
         this._cursorToEnd();
-
+        this.setFlagPathForFlagCssClass();
         if(typeof this.props.onChange === 'function') {
@@ -243,3 +249,2 @@ this.props.onChange(this.state.formattedNumber);
     handleInput(event) {
-
         var formattedNumber = '+', newSelectedCountry = this.state.selectedCountry, freezeSelection = this.state.freezeSelection;
@@ -304,16 +309,21 @@
         var nextSelectedCountry = findWhere(this.props.onlyCountries, country);
-        var newNumber = this.state.formattedNumber.replace(currentSelectedCountry.dialCode, nextSelectedCountry.dialCode);
-        var formattedNumber = this.formatNumber(newNumber.replace(/\D/g, ''), nextSelectedCountry.format);
 
-        this.setState({
-            showDropDown: false,
-            selectedCountry: nextSelectedCountry,
-            freezeSelection: true,
-            formattedNumber: formattedNumber
-        }, function() {
-            this._cursorToEnd();
-            if(this.props.onChange) {
-                this.props.onChange(formattedNumber);
-            }
-        });
+        // tiny optimization
+        if(currentSelectedCountry.iso2 !== nextSelectedCountry.iso2) {
+            // TODO - the below replacement is a bug. It will replace stuff from middle too
+            var newNumber = this.state.formattedNumber.replace(currentSelectedCountry.dialCode, nextSelectedCountry.dialCode);
+            var formattedNumber = this.formatNumber(newNumber.replace(/\D/g, ''), nextSelectedCountry.format);
+
+            this.setState({
+                showDropDown: false,
+                selectedCountry: nextSelectedCountry,
+                freezeSelection: true,
+                formattedNumber: formattedNumber
+            }, function() {
+                this._cursorToEnd();
+                if(this.props.onChange) {
+                    this.props.onChange(formattedNumber);
+                }
+            });
+        }
     },
@@ -326,14 +336,2 @@ handleInputFocus() {
     },
-    _findIndexOfCountry(allTheCountries, countryToFind, startIndex) {
-        if(!startIndex) {
-            startIndex = 0;
-        }
-
-        for(var i = startIndex; i < allTheCountries.length; i++) {
-            if(allTheCountries[i].iso2 === countryToFind.iso2) {
-                return i;
-            }
-        }
-        return -1;
-    },
     _getHighlightCountryIndex(direction) {
@@ -362,4 +360,4 @@ // had to write own function because underscore does not have findIndex. lodash has it
     searchCountry() {
-        var probableCandidate = this._searchCountry(this.state.queryString) || this.props.onlyCountries[0];
-        var probableCandidateIndex = findIndex(this.props.onlyCountries, probableCandidate) + this.state.preferredCountries.length;
+        const probableCandidate = this._searchCountry(this.state.queryString) || this.props.onlyCountries[0];
+        const probableCandidateIndex = findIndex(this.props.onlyCountries, probableCandidate) + this.state.preferredCountries.length;
 
@@ -418,20 +416,13 @@ this.scrollTo(this.getElement(probableCandidateIndex), true);
     },
-    handleBlur() {
-        this.setState({
-            showDropDown: false
-        });
-    },
     handleClickOutside() {
         if(this.state.showDropDown) {
-            this.handleBlur();
+            this.setState({
+                showDropDown: false
+            });
         }
     },
     getCountryDropDownList() {
-        var dropDownClasses = classNames({
-            'country-list': true,
-            'hide': !this.state.showDropDown
-        });
 
-        var countryDropDownList = map(this.state.preferredCountries.concat(this.props.onlyCountries), function(country, index) {
-            var itemClasses = classNames({
+        var countryDropDownList = map([this.state.preferredCountries, ...this.props.onlyCountries], function(country, index) {
+            let itemClasses = classNames({
                 country: true,
@@ -459,6 +450,10 @@ preferred: country.iso2 === 'us' || country.iso2 === 'gb',
 
-        var dashedLi = (<li key={"dashes"} className="divider" />);
+        const dashedLi = (<li key={"dashes"} className="divider" />);
         // let's insert a dashed line in between preffered countries and the rest
         countryDropDownList.splice(this.state.preferredCountries.length, 0, dashedLi);
 
+        const dropDownClasses = classNames({
+            'country-list': true,
+            'hide': !this.state.showDropDown
+        });
         return (
@@ -465,0 +460,0 @@ <ul ref="flagDropdownList" className={dropDownClasses}>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1456257

increased by570.34%

Number of package files

21

increased by23.53%

Lines of code

35237

increased by1386.79%

Number of lines in readme file

50

increased by13.64%

Worsened metrics

Number of low supply chain risk alerts

263

increased by26200%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes