email-autocomplete-input - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

email-autocomplete-compiled.js

@@ -71,3 +71,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 { observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { observable, toJS } from 'mobx';
 
@@ -88,3 +88,3 @@ var EmailAutocompleteInput = observer(_class = (_class2 = function (_Component) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EmailAutocompleteInput.__proto__ || Object.getPrototypeOf(EmailAutocompleteInput)).call.apply(_ref, [this].concat(args))), _this), _initDefineProp(_this, 'email', _descriptor, _this), _initDefineProp(_this, 'isValid', _descriptor2, _this), _this.domains = [].concat(_toConsumableArray(_this.props.domains || []), ['yahoo.com', 'hotmail.com', 'gmail.com', 'me.com', 'aol.com', 'mac.com', 'live.com', 'googlemail.com', 'msn.com', 'facebook.com', 'verizon.net', 'outlook.com', 'icloud.com', 'table.co']), _this.prevValue = '', _this.handleChange = function (_ref2) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EmailAutocompleteInput.__proto__ || Object.getPrototypeOf(EmailAutocompleteInput)).call.apply(_ref, [this].concat(args))), _this), _initDefineProp(_this, 'email', _descriptor, _this), _initDefineProp(_this, 'isValid', _descriptor2, _this), _this.domains = [].concat(_toConsumableArray(_this.props.domains || []), ['yahoo.com', 'hotmail.com', 'gmail.com', 'me.com', 'aol.com', 'mac.com', 'live.com', 'googlemail.com', 'msn.com', 'facebook.com', 'verizon.net', 'outlook.com', 'icloud.com', 'table.co']), _this.prevValue = '', _this.prevEmail = '', _this.handleChange = function (_ref2) {
       var value = _ref2.target.value;
@@ -96,15 +96,24 @@
       _this.props.onChange(_this.email);
+      if (_this.props.validate) _this.validate();
+      _this.prevEmail = value + suggestion;
       _this.prevValue = value;
-      if (_this.props.validate) _this.validate();
     }, _this.validate = function () {
+      if (_this.props.isValid === false) return 'no';
       var inputIsFocused = _this._input === document.activeElement;
-      var regex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; // eslint-disable-line
-      var isValid = regex.test(_this.email);
-      if (!_this.email || !_this.prevValue) {
+      var isValidEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; // eslint-disable-line
+      if (!toJS(_this.email)) {
         _this.isValid = null;
-      } else if (inputIsFocused) {
-        _this.isValid = isValid ? 'yes' : 'maybe';
-      } else if (!inputIsFocused) {
-        _this.isValid = isValid ? 'yes' : 'no';
+      } else if (isValidEmail.test(_this.email)) {
+        _this.isValid = 'yes';
+      } else if (inputIsFocused && _this.prevEmail.length !== _this.email.length) {
+        _this.isValid = 'maybe';
+      } else {
+        _this.isValid = 'no';
       }
+    }, _this.handleBlur = function (e) {
+      if (_this.props.validate) _this.validate();
+      if (_this.props.onBlur) _this.props.onBlur(e);
+    }, _this.handleFocus = function (e) {
+      if (_this.props.validate) _this.validate();
+      if (_this.props.onFocus) _this.props.onFocus(e);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -153,4 +162,4 @@ } // yes, no, maybe, null
         value: this.email,
-        onFocus: this.validate,
-        onBlur: this.validate,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
         onChange: this.handleChange,
@@ -162,3 +171,3 @@ innerRef: function innerRef(r) {
           fileName: _jsxFileName,
-          lineNumber: 54
+          lineNumber: 69
         },
@@ -187,11 +196,11 @@ __self: this
 var borderColors = {
+  yes: '#28a745',
   maybe: '#cfdc00',
-  yes: '#28a745',
   no: '#dc3545'
 };
 
-var outlineColors = {
-  maybe: 'rgba(207, 220, 0, 0.4)',
-  yes: 'rgba(40,167,69,.25)',
-  no: 'rgba(220,53,69,.25)'
+var outlineColors = { // source: http://bit.ly/2j2sbyx
+  yes: 'rgba(40, 167, 69, .25)',
+  maybe: 'rgba(207, 220, 0, .25)',
+  no: 'rgba(220, 53, 69, .25)'
 };
@@ -198,0 +207,0 @@

package.json

 {
   "name": "email-autocomplete-input",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "homepage": "https://alex-cory.github.io/email-autocomplete-input",
@@ -5,0 +5,0 @@ "main": "/email-autocomplete-compiled.js",

README.md

@@ -0,2 +1,5 @@
+<!--
 <img src="https://github.com/alex-cory/email-autocomplete-input/blob/master/public/email-autocomplete-input.gif?raw=true" width="100%">
+-->
+<img src="https://github.com/alex-cory/email-autocomplete-input/blob/master/public/email-autocomplete-input-validation.gif?raw=true" width="100%">
 
@@ -33,5 +36,5 @@ Email Autocomplete Input
 -----
-| Props                 | Description                                                                              |
-| --------------------- | ---------------------------------------------------------------------------------------- |
-| `validate`            | This will highlight the input with a red, yellow, or green border if the email is valid. |
-| `domains`             | This will add additional domains to the autocomplete.                                    |
+| Props      | Description                                                                              |
+| ---------- | ---------------------------------------------------------------------------------------- |
+| `validate` | This will highlight the input with a red, yellow, or green border if the email is valid. |
+| `domains`  | This will add additional domains to the autocomplete.                                    |

src/EmailAutocompleteInput.js

 import React, { Component } from 'react'
 import styled, { css } from 'styled-components'
 import { observer } from 'mobx-react'
-import { observable } from 'mobx'
+import { observable, toJS } from 'mobx'
 
@@ -13,3 +13,5 @@
   prevValue = ''
+  prevEmail = ''
 
+
   handleChange = ({ target: { value } }) => {
@@ -20,4 +22,5 @@ const suggestion = this.suggest(value)
     this.props.onChange(this.email)
+    if (this.props.validate) this.validate()
+    this.prevEmail = value + suggestion
     this.prevValue = value
-    if (this.props.validate) this.validate()
   }
@@ -41,14 +44,26 @@
   validate = () => {
+    if (this.props.isValid === false) return 'no'
     const inputIsFocused = this._input === document.activeElement
-    const regex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i  // eslint-disable-line
-    const isValid = regex.test(this.email)
-    if (!this.email || !this.prevValue) {
+    const isValidEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i  // eslint-disable-line
+    if (!toJS(this.email)) {
       this.isValid = null
-    } else if (inputIsFocused) {
-      this.isValid = isValid ? 'yes' : 'maybe'
-    } else if (!inputIsFocused) {
-      this.isValid = isValid ? 'yes' : 'no'
+    } else if (isValidEmail.test(this.email)) {
+      this.isValid = 'yes'
+    } else if (inputIsFocused && this.prevEmail.length !== this.email.length) {
+      this.isValid = 'maybe'
+    } else {
+      this.isValid = 'no'
     }
   }
 
+  handleBlur = e => {
+    if (this.props.validate) this.validate()
+    if (this.props.onBlur) this.props.onBlur(e)
+  }
+
+  handleFocus = e => {
+    if (this.props.validate) this.validate()
+    if (this.props.onFocus) this.props.onFocus(e)
+  }
+
   render() {
@@ -62,4 +77,4 @@ const { className, ...props } = this.props
         value={this.email}
-        onFocus={this.validate}
-        onBlur={this.validate}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
         onChange={this.handleChange}
@@ -73,11 +88,11 @@ innerRef={r => this._input = r}
 const borderColors = {
+  yes: '#28a745',
   maybe: '#cfdc00',
-  yes: '#28a745',
   no: '#dc3545'
 }
 
-const outlineColors = {
-  maybe: 'rgba(207, 220, 0, 0.4)',
-  yes: 'rgba(40,167,69,.25)',
-  no: 'rgba(220,53,69,.25)'
+const outlineColors = { // source: http://bit.ly/2j2sbyx
+  yes: 'rgba(40, 167, 69, .25)',
+  maybe: 'rgba(207, 220, 0, .25)',
+  no: 'rgba(220, 53, 69, .25)'
 }
@@ -84,0 +99,0 @@

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80949720

increased by42.29%

Number of lines in readme file

40

increased by8.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

36

decreased by-10%

Lines of code

1501

decreased by-37.48%

No dependency changes