react-telephone-input - npm Package Compare versions

Comparing version 4.7.11 to 4.71.11

es/ReactTelephoneInput.js

@@ -94,4 +94,2 @@ 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; };
   ReactTelephoneInput.prototype.componentDidMount = function componentDidMount() {
-    document.addEventListener('keydown', this.handleKeydown);
-
     this._cursorToEnd(true);
@@ -108,6 +106,2 @@ };
 
-  ReactTelephoneInput.prototype.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeydown);
-  };
-
   // put the cursor to the end of the input (usually after a focus event)
@@ -147,3 +141,6 @@
       'div',
-      { className: classNames('react-tel-input', this.props.classNames, this.props.className) },
+      {
+        className: classNames('react-tel-input', this.props.classNames, this.props.className),
+        'data-test-id': 'src_reacttelephoneinput_test_id_4'
+      },
       React.createElement('input', _extends({
@@ -166,6 +163,14 @@ onChange: this.handleInput,
         disabled: this.props.disabled
-      }, otherProps)),
+      }, otherProps, {
+        'data-test-id': 'src_reacttelephoneinput_test_id_5'
+      })),
       React.createElement(
         'div',
-        { className: flagViewClasses, onKeyDown: this.handleKeydown },
+        {
+          className: flagViewClasses,
+          onKeyDown: this.handleKeydown,
+          'data-test-id': 'src_reacttelephoneinput_test_id_6'
+          // this is crucial if we want keyboard up/down events to be heard through this div and not document.body
+          , tabIndex: 0
+        },
         React.createElement(
@@ -176,8 +181,13 @@ 'div',
             className: 'selected-flag',
-            title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+            title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode,
+            'data-test-id': 'src_reacttelephoneinput_test_id_7'
           },
           React.createElement(
             'div',
-            { className: inputFlagClasses, style: this.getFlagStyle() },
-            React.createElement('div', { className: arrowClasses })
+            {
+              className: inputFlagClasses,
+              style: this.getFlagStyle(),
+              'data-test-id': 'src_reacttelephoneinput_test_id_8'
+            },
+            React.createElement('div', { className: arrowClasses, 'data-test-id': 'src_reacttelephoneinput_test_id_9' })
           )
@@ -215,10 +225,2 @@ ),
 
-  this.getNumber = function () {
-    return _this3.state.formattedNumber !== '+' ? _this3.state.formattedNumber : '';
-  };
-
-  this.getValue = function () {
-    return _this3.getNumber();
-  };
-
   this._cursorToEnd = function (skipFocus) {
@@ -309,3 +311,3 @@ var input = _this3.numberInputRef;
 
-    // if the input is the same as before, must be some special key like enter etc.
+    // if the input is the same as before, must be some special key like enter, alt, command etc.
 
@@ -316,12 +318,13 @@ if (event.target.value === _this3.state.formattedNumber) {
 
-    // ie hack
     if (event.preventDefault) {
       event.preventDefault();
     } else {
+      // ie hack
       event.returnValue = false; // eslint-disable-line no-param-reassign
     }
 
-    if (event.target.value.length > 0) {
+    if (event.target.value && event.target.value.length > 0) {
       // before entering the number in new format,
       // lets check if the dial code now matches some other country
+      // replace all non-numeric characters from the input string
       var inputNumber = event.target.value.replace(/\D/g, '');
@@ -337,3 +340,2 @@
       }
-      // let us remove all non numerals from the input
       formattedNumber = formatNumber(inputNumber, newSelectedCountry.format, _this3.props.autoFormat);
@@ -527,3 +529,3 @@ }
     if (event.which === keys.ENTER) {
-      _this3.props.onEnterKeyPress(event);
+      typeof _this3.props.onEnterKeyPress === 'function' && _this3.props.onEnterKeyPress(event);
     }
@@ -574,8 +576,13 @@ };
             style: style,
-            title: country.name + ' - ' + country.dialCode
+            title: country.name + ' - ' + country.dialCode,
+            'data-test-id': 'src_reacttelephoneinput_test_id_0'
           },
-          React.createElement('div', { className: inputFlagClasses, style: _this3.getFlagStyle() }),
+          React.createElement('div', {
+            className: inputFlagClasses,
+            style: _this3.getFlagStyle(),
+            'data-test-id': 'src_reacttelephoneinput_test_id_1'
+          }),
           React.createElement(
             'span',
-            { className: 'country-name' },
+            { className: 'country-name', 'data-test-id': 'src_reacttelephoneinput_test_id_2' },
             country.name
@@ -585,3 +592,3 @@ ),
             'span',
-            { className: 'dial-code' },
+            { className: 'dial-code', 'data-test-id': 'src_reacttelephoneinput_test_id_3' },
             '+' + country.dialCode
@@ -588,0 +595,0 @@ )

lib/ReactTelephoneInput.js

@@ -134,4 +134,2 @@ 'use strict';
   ReactTelephoneInput.prototype.componentDidMount = function componentDidMount() {
-    document.addEventListener('keydown', this.handleKeydown);
-
     this._cursorToEnd(true);
@@ -148,6 +146,2 @@ };
 
-  ReactTelephoneInput.prototype.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeydown);
-  };
-
   // put the cursor to the end of the input (usually after a focus event)
@@ -187,3 +181,6 @@
       'div',
-      { className: (0, _classnames2.default)('react-tel-input', this.props.classNames, this.props.className) },
+      {
+        className: (0, _classnames2.default)('react-tel-input', this.props.classNames, this.props.className),
+        'data-test-id': 'src_reacttelephoneinput_test_id_4'
+      },
       _react2.default.createElement('input', _extends({
@@ -206,6 +203,14 @@ onChange: this.handleInput,
         disabled: this.props.disabled
-      }, otherProps)),
+      }, otherProps, {
+        'data-test-id': 'src_reacttelephoneinput_test_id_5'
+      })),
       _react2.default.createElement(
         'div',
-        { className: flagViewClasses, onKeyDown: this.handleKeydown },
+        {
+          className: flagViewClasses,
+          onKeyDown: this.handleKeydown,
+          'data-test-id': 'src_reacttelephoneinput_test_id_6'
+          // this is crucial if we want keyboard up/down events to be heard through this div and not document.body
+          , tabIndex: 0
+        },
         _react2.default.createElement(
@@ -216,8 +221,13 @@ 'div',
             className: 'selected-flag',
-            title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode
+            title: this.state.selectedCountry.name + ': + ' + this.state.selectedCountry.dialCode,
+            'data-test-id': 'src_reacttelephoneinput_test_id_7'
           },
           _react2.default.createElement(
             'div',
-            { className: inputFlagClasses, style: this.getFlagStyle() },
-            _react2.default.createElement('div', { className: arrowClasses })
+            {
+              className: inputFlagClasses,
+              style: this.getFlagStyle(),
+              'data-test-id': 'src_reacttelephoneinput_test_id_8'
+            },
+            _react2.default.createElement('div', { className: arrowClasses, 'data-test-id': 'src_reacttelephoneinput_test_id_9' })
           )
@@ -255,10 +265,2 @@ ),
 
-  this.getNumber = function () {
-    return _this3.state.formattedNumber !== '+' ? _this3.state.formattedNumber : '';
-  };
-
-  this.getValue = function () {
-    return _this3.getNumber();
-  };
-
   this._cursorToEnd = function (skipFocus) {
@@ -349,3 +351,3 @@ var input = _this3.numberInputRef;
 
-    // if the input is the same as before, must be some special key like enter etc.
+    // if the input is the same as before, must be some special key like enter, alt, command etc.
 
@@ -356,12 +358,13 @@ if (event.target.value === _this3.state.formattedNumber) {
 
-    // ie hack
     if (event.preventDefault) {
       event.preventDefault();
     } else {
+      // ie hack
       event.returnValue = false; // eslint-disable-line no-param-reassign
     }
 
-    if (event.target.value.length > 0) {
+    if (event.target.value && event.target.value.length > 0) {
       // before entering the number in new format,
       // lets check if the dial code now matches some other country
+      // replace all non-numeric characters from the input string
       var inputNumber = event.target.value.replace(/\D/g, '');
@@ -377,3 +380,2 @@
       }
-      // let us remove all non numerals from the input
       formattedNumber = (0, _format_number2.default)(inputNumber, newSelectedCountry.format, _this3.props.autoFormat);
@@ -567,3 +569,3 @@ }
     if (event.which === keys.ENTER) {
-      _this3.props.onEnterKeyPress(event);
+      typeof _this3.props.onEnterKeyPress === 'function' && _this3.props.onEnterKeyPress(event);
     }
@@ -614,8 +616,13 @@ };
             style: style,
-            title: country.name + ' - ' + country.dialCode
+            title: country.name + ' - ' + country.dialCode,
+            'data-test-id': 'src_reacttelephoneinput_test_id_0'
           },
-          _react2.default.createElement('div', { className: inputFlagClasses, style: _this3.getFlagStyle() }),
+          _react2.default.createElement('div', {
+            className: inputFlagClasses,
+            style: _this3.getFlagStyle(),
+            'data-test-id': 'src_reacttelephoneinput_test_id_1'
+          }),
           _react2.default.createElement(
             'span',
-            { className: 'country-name' },
+            { className: 'country-name', 'data-test-id': 'src_reacttelephoneinput_test_id_2' },
             country.name
@@ -625,3 +632,3 @@ ),
             'span',
-            { className: 'dial-code' },
+            { className: 'dial-code', 'data-test-id': 'src_reacttelephoneinput_test_id_3' },
             '+' + country.dialCode
@@ -628,0 +635,0 @@ )

package.json

 {
   "name": "react-telephone-input",
-  "version": "4.7.11",
+  "version": "4.71.11",
   "description": "React component for entering and validating international telephone numbers",
@@ -14,3 +14,3 @@ "main": "lib/ReactTelephoneInput.js",
     "test": "jest",
-    "test: coverage": "jest --coverage",
+    "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
@@ -23,3 +23,4 @@ "deploy": "gh-pages -d demo/dist"
     },
-    "moduleFileExtensions": ["js"]
+    "moduleFileExtensions": ["js"],
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   },
@@ -45,9 +46,9 @@ "repository": {
     "babel-jest": "^22.4.3",
+    "babel-plugin-remove-data-test-id-attribute": "^1.0.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-latest": "6.24.1",
     "babel-preset-react": "6.24.1",
-    "chai": "^3.0.0",
-    "dirty-chai": "^1.2.2",
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.3",
     "eslint": "^4.19.1",
@@ -60,3 +61,3 @@ "eslint-config-airbnb": "^16.1.0",
     "jest": "^22.4.3",
-    "nwb": "0.18.x",
+    "nwb": "^0.21.5",
     "react": "^16.3.2",
@@ -63,0 +64,0 @@ "react-dom": "^16.3.2",

No alert changes

Improved metrics

Total package byte prevSize

77275

increased by1.7%

Lines of code

2040

increased by1.24%

No dependency changes