react-telephone-input - npm Package Compare versions

Comparing version 4.74.4 to 4.75.4

es/ReactTelephoneInput.js

@@ -25,2 +25,3 @@ 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; };
 import isNumberValid from './number_validator';
+import guessSelectedCountry from './guessSelectedCountry';
 
@@ -33,4 +34,3 @@ var find = R.find,
 var allCountries = countryData.allCountries,
-    iso2Lookup = countryData.iso2Lookup,
-    allCountryCodes = countryData.allCountryCodes;
+    iso2Lookup = countryData.iso2Lookup;
 
@@ -85,3 +85,4 @@ var isModernBrowser = true;
 
-    _this.state = _extends({
+    _this.state = {
+      firstCall: true,
       preferredCountries: preferredCountries,
@@ -92,3 +93,3 @@ showDropDown: false,
       debouncedQueryStingSearcher: debounce(_this.searchCountry, 600)
-    }, _this._mapPropsToState(props, true));
+    };
     return _this;
@@ -105,4 +106,28 @@ }
 
-  ReactTelephoneInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    this.setState(this._mapPropsToState(nextProps));
+  ReactTelephoneInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    var inputNumber = void 0;
+
+    if (props.value) {
+      inputNumber = props.value;
+    } else if (props.initialValue && state.firstCall) {
+      inputNumber = props.initialValue;
+    } else if (props.value === null) {
+      // just clear the value
+      inputNumber = '';
+    } else if (state && state.formattedNumber && state.formattedNumber.length > 0) {
+      inputNumber = state.formattedNumber;
+    } else {
+      inputNumber = '';
+    }
+
+    var selectedCountryGuess = guessSelectedCountry(inputNumber.replace(/\D/g, ''), props);
+    var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
+    var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, props.autoFormat);
+
+    return {
+      firstCall: false,
+      selectedCountry: selectedCountryGuess,
+      highlightCountryIndex: selectedCountryGuessIndex,
+      formattedNumber: formattedNumber
+    };
   };
@@ -113,5 +138,2 @@
 
-  // memoize results based on the first 5/6 characters. That is all that matters
-
-
   // memoize search results... caching all the way
@@ -139,2 +161,3 @@
     var buttonProps = this.props.buttonProps;
+
     var otherProps = this.props.inputProps;
@@ -243,48 +266,2 @@ if (this.props.inputId) {
 
-  this.guessSelectedCountry = function (inputNumber) {
-    var _props = _this3.props,
-        defaultCountry = _props.defaultCountry,
-        onlyCountries = _props.onlyCountries;
-
-
-    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this3.props.onlyCountries[0];
-
-    var inputNumberForCountries = inputNumber.substr(0, 4);
-    var bestGuess = void 0;
-
-    if (inputNumber.trim() !== '') {
-      bestGuess = onlyCountries.reduce(function (selectedCountry, country) {
-        // if the country dialCode exists WITH area code
-
-        if (allCountryCodes[inputNumberForCountries] && allCountryCodes[inputNumberForCountries][0] === country.iso2) {
-          return country;
-
-          // if the selected country dialCode is there with the area code
-        } else if (allCountryCodes[inputNumberForCountries] && allCountryCodes[inputNumberForCountries][0] === selectedCountry.iso2) {
-          return selectedCountry;
-
-          // else do the original if statement
-        }
-        if (startsWith(country.dialCode, inputNumber)) {
-          if (country.dialCode.length > selectedCountry.dialCode.length) {
-            return country;
-          }
-          if (country.dialCode.length === selectedCountry.dialCode.length && country.priority < selectedCountry.priority) {
-            return country;
-          }
-        }
-
-        return selectedCountry;
-      }, { dialCode: '', priority: 10001 }, _this3);
-    } else {
-      return secondBestGuess;
-    }
-
-    if (!bestGuess || !bestGuess.name) {
-      return secondBestGuess;
-    }
-
-    return bestGuess;
-  };
-
   this.handleFlagDropdownClick = function (e) {
@@ -339,3 +316,3 @@ if (_this3.props.disabled) {
       if (!_this3.state.freezeSelection || _this3.state.selectedCountry.dialCode.length > inputNumber.length) {
-        newSelectedCountry = _this3.guessSelectedCountry(inputNumber.substring(0, 6));
+        newSelectedCountry = guessSelectedCountry(inputNumber.substring(0, 6), _this3.props);
         freezeSelection = false;
@@ -418,31 +395,2 @@ }
 
-  this._mapPropsToState = function (props) {
-    var firstCall = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-    var inputNumber = void 0;
-
-    if (props.value) {
-      inputNumber = props.value;
-    } else if (props.initialValue && firstCall) {
-      inputNumber = props.initialValue;
-    } else if (_this3.props.value) {
-      // just clear the value
-      inputNumber = '';
-    } else if (_this3.state && _this3.state.formattedNumber && _this3.state.formattedNumber.length > 0) {
-      inputNumber = _this3.state.formattedNumber;
-    } else {
-      inputNumber = '';
-    }
-
-    var selectedCountryGuess = _this3.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
-    var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
-    var formattedNumber = formatNumber(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this3.props.autoFormat);
-
-    return {
-      selectedCountry: selectedCountryGuess,
-      highlightCountryIndex: selectedCountryGuessIndex,
-      formattedNumber: formattedNumber
-    };
-  };
-
   this._fillDialCode = function () {
@@ -531,4 +479,4 @@ // if the input is blank, insert dial code of the selected country
   this.handleInputKeyDown = function (event) {
-    if (event.which === keys.ENTER) {
-      typeof _this3.props.onEnterKeyPress === 'function' && _this3.props.onEnterKeyPress(event);
+    if (event.which === keys.ENTER && typeof _this3.props.onEnterKeyPress === 'function') {
+      _this3.props.onEnterKeyPress(event);
     }
@@ -535,0 +483,0 @@ };

lib/ReactTelephoneInput.js

@@ -58,2 +58,6 @@ 'use strict';
 
+var _guessSelectedCountry = require('./guessSelectedCountry');
+
+var _guessSelectedCountry2 = _interopRequireDefault(_guessSelectedCountry);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,4 +77,3 @@
 var allCountries = _countryTelephoneData2.default.allCountries,
-    iso2Lookup = _countryTelephoneData2.default.iso2Lookup,
-    allCountryCodes = _countryTelephoneData2.default.allCountryCodes;
+    iso2Lookup = _countryTelephoneData2.default.iso2Lookup;
 
@@ -125,3 +128,4 @@ var isModernBrowser = true;
 
-    _this.state = _extends({
+    _this.state = {
+      firstCall: true,
       preferredCountries: preferredCountries,
@@ -132,3 +136,3 @@ showDropDown: false,
       debouncedQueryStingSearcher: (0, _debounce2.default)(_this.searchCountry, 600)
-    }, _this._mapPropsToState(props, true));
+    };
     return _this;
@@ -145,4 +149,28 @@ }
 
-  ReactTelephoneInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    this.setState(this._mapPropsToState(nextProps));
+  ReactTelephoneInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    var inputNumber = void 0;
+
+    if (props.value) {
+      inputNumber = props.value;
+    } else if (props.initialValue && state.firstCall) {
+      inputNumber = props.initialValue;
+    } else if (props.value === null) {
+      // just clear the value
+      inputNumber = '';
+    } else if (state && state.formattedNumber && state.formattedNumber.length > 0) {
+      inputNumber = state.formattedNumber;
+    } else {
+      inputNumber = '';
+    }
+
+    var selectedCountryGuess = (0, _guessSelectedCountry2.default)(inputNumber.replace(/\D/g, ''), props);
+    var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
+    var formattedNumber = (0, _format_number2.default)(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, props.autoFormat);
+
+    return {
+      firstCall: false,
+      selectedCountry: selectedCountryGuess,
+      highlightCountryIndex: selectedCountryGuessIndex,
+      formattedNumber: formattedNumber
+    };
   };
@@ -153,5 +181,2 @@
 
-  // memoize results based on the first 5/6 characters. That is all that matters
-
-
   // memoize search results... caching all the way
@@ -179,2 +204,3 @@
     var buttonProps = this.props.buttonProps;
+
     var otherProps = this.props.inputProps;
@@ -283,48 +309,2 @@ if (this.props.inputId) {
 
-  this.guessSelectedCountry = function (inputNumber) {
-    var _props = _this3.props,
-        defaultCountry = _props.defaultCountry,
-        onlyCountries = _props.onlyCountries;
-
-
-    var secondBestGuess = find(propEq('iso2', defaultCountry), allCountries) || _this3.props.onlyCountries[0];
-
-    var inputNumberForCountries = inputNumber.substr(0, 4);
-    var bestGuess = void 0;
-
-    if (inputNumber.trim() !== '') {
-      bestGuess = onlyCountries.reduce(function (selectedCountry, country) {
-        // if the country dialCode exists WITH area code
-
-        if (allCountryCodes[inputNumberForCountries] && allCountryCodes[inputNumberForCountries][0] === country.iso2) {
-          return country;
-
-          // if the selected country dialCode is there with the area code
-        } else if (allCountryCodes[inputNumberForCountries] && allCountryCodes[inputNumberForCountries][0] === selectedCountry.iso2) {
-          return selectedCountry;
-
-          // else do the original if statement
-        }
-        if (startsWith(country.dialCode, inputNumber)) {
-          if (country.dialCode.length > selectedCountry.dialCode.length) {
-            return country;
-          }
-          if (country.dialCode.length === selectedCountry.dialCode.length && country.priority < selectedCountry.priority) {
-            return country;
-          }
-        }
-
-        return selectedCountry;
-      }, { dialCode: '', priority: 10001 }, _this3);
-    } else {
-      return secondBestGuess;
-    }
-
-    if (!bestGuess || !bestGuess.name) {
-      return secondBestGuess;
-    }
-
-    return bestGuess;
-  };
-
   this.handleFlagDropdownClick = function (e) {
@@ -379,3 +359,3 @@ if (_this3.props.disabled) {
       if (!_this3.state.freezeSelection || _this3.state.selectedCountry.dialCode.length > inputNumber.length) {
-        newSelectedCountry = _this3.guessSelectedCountry(inputNumber.substring(0, 6));
+        newSelectedCountry = (0, _guessSelectedCountry2.default)(inputNumber.substring(0, 6), _this3.props);
         freezeSelection = false;
@@ -458,31 +438,2 @@ }
 
-  this._mapPropsToState = function (props) {
-    var firstCall = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-    var inputNumber = void 0;
-
-    if (props.value) {
-      inputNumber = props.value;
-    } else if (props.initialValue && firstCall) {
-      inputNumber = props.initialValue;
-    } else if (_this3.props.value) {
-      // just clear the value
-      inputNumber = '';
-    } else if (_this3.state && _this3.state.formattedNumber && _this3.state.formattedNumber.length > 0) {
-      inputNumber = _this3.state.formattedNumber;
-    } else {
-      inputNumber = '';
-    }
-
-    var selectedCountryGuess = _this3.guessSelectedCountry(inputNumber.replace(/\D/g, ''));
-    var selectedCountryGuessIndex = findIndex(propEq('iso2', selectedCountryGuess.iso2), allCountries);
-    var formattedNumber = (0, _format_number2.default)(inputNumber.replace(/\D/g, ''), selectedCountryGuess ? selectedCountryGuess.format : null, _this3.props.autoFormat);
-
-    return {
-      selectedCountry: selectedCountryGuess,
-      highlightCountryIndex: selectedCountryGuessIndex,
-      formattedNumber: formattedNumber
-    };
-  };
-
   this._fillDialCode = function () {
@@ -571,4 +522,4 @@ // if the input is blank, insert dial code of the selected country
   this.handleInputKeyDown = function (event) {
-    if (event.which === keys.ENTER) {
-      typeof _this3.props.onEnterKeyPress === 'function' && _this3.props.onEnterKeyPress(event);
+    if (event.which === keys.ENTER && typeof _this3.props.onEnterKeyPress === 'function') {
+      _this3.props.onEnterKeyPress(event);
     }
@@ -575,0 +526,0 @@ };

package.json

 {
   "name": "react-telephone-input",
-  "version": "4.74.4",
+  "version": "4.75.4",
   "description": "React component for entering and validating international telephone numbers",
@@ -14,4 +14,4 @@ "main": "lib/ReactTelephoneInput.js",
   "scripts": {
-    "build": "npx nwb build-react-component --copy-files",
-    "clean": "npx nwb clean-module && npx nwb clean-demo",
+    "build": "nwb build-react-component --copy-files",
+    "clean": "nwb clean-module && npx nwb clean-demo",
     "start": "nwb serve-react-demo",
@@ -24,5 +24,18 @@ "lint": "eslint src",
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write",
+      "git add",
+      "npm run test -- --bail --passWithNoTests --findRelatedTests"
+    ]
+  },
   "jest": {
     "transform": {
-      "^.+\\.js$": "./jest.transform.js"
+      "^.+\\.js$": "babel-jest"
     },
@@ -53,22 +66,26 @@ "moduleFileExtensions": [
   "devDependencies": {
-    "babel-eslint": "^8.2.3",
-    "babel-jest": "^22.4.3",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^25.1.0",
     "babel-plugin-remove-data-test-id-attribute": "^1.0.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-latest": "6.24.1",
-    "babel-preset-react": "6.24.1",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
     "enzyme-to-json": "^3.3.3",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.1",
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "gh-pages": "^1.1.0",
-    "jest": "^22.4.3",
+    "gh-pages": "^2.2.0",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.8",
     "nwb": "^0.23.0",
+    "prettier": "^1.19.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "regenerator-runtime": "0.10.5"
+    "regenerator-runtime": "0.13.5"
   },
@@ -75,0 +92,0 @@ "dependencies": {

README.md

@@ -39,5 +39,6 @@ # Reactjs Component for International Telephone Input
                 flagsImagePath='/path/to/images/flags.png'
-                onChange={handleInputChange}/>
+                onChange={handleInputChange}
                 onBlur={handleInputBlur}
-                document.getElementById('my-container'));
+              />,
+              document.getElementById('my-container'));
 ```
@@ -177,3 +178,3 @@
 
-;<ReactTelephoneInput
+<ReactTelephoneInput
   defaultCountry="in"
@@ -203,3 +204,3 @@ flagsImagePath="/path/to/images/flags.png"
 
-go to your browser and type `http://localhost:3000`
+go to your browser and type http://localhost:3000
 ```
@@ -206,0 +207,0 @@

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

79191

increased by0.95%

Number of package files

17

increased by13.33%

Lines of code

2074

increased by0.68%

Number of lines in readme file

209

increased by0.48%

Worsened metrics

Dev dependency count

24

increased by20%

No dependency changes