email-autocomplete-input - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

build/asset-manifest.json

 {
-  "main.js": "static/js/main.4f96ccb7.js",
-  "main.js.map": "static/js/main.4f96ccb7.js.map"
+  "main.js": "static/js/main.4d0a0522.js",
+  "main.js.map": "static/js/main.4d0a0522.js.map"
 }

build/service-worker.js

@@ -1,1 +0,1 @@
-"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/email-autocomplete-input/index.html","91353225983534a9e79864f1d22715bb"],["/email-autocomplete-input/static/js/main.4f96ccb7.js","a6ed8c8714b70c03335e48bcd0f08c42"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/email-autocomplete-input/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
+"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["/email-autocomplete-input/index.html","afa4a0938c0ddb877cc1708f0ce783c8"],["/email-autocomplete-input/static/js/main.4d0a0522.js","8cb73a45972d840db48478eee063a5ec"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/email-autocomplete-input/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});

email-autocomplete-compiled.js

@@ -12,2 +12,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; };
     _descriptor,
+    _descriptor2,
     _jsxFileName = 'src/EmailAutocompleteInput.js';
@@ -68,8 +69,9 @@
 
-import React from 'react';
+import React, { Component } from 'react';
+import styled, { css } from 'styled-components';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 
-var EmailAutocompleteInput = observer(_class = (_class2 = function (_React$Component) {
-  _inherits(EmailAutocompleteInput, _React$Component);
+var EmailAutocompleteInput = observer(_class = (_class2 = function (_Component) {
+  _inherits(EmailAutocompleteInput, _Component);
 
@@ -87,3 +89,3 @@ function EmailAutocompleteInput() {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EmailAutocompleteInput.__proto__ || Object.getPrototypeOf(EmailAutocompleteInput)).call.apply(_ref, [this].concat(args))), _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 = '', _initDefineProp(_this, 'email', _descriptor, _this), _this.handleChange = function (_ref2) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EmailAutocompleteInput.__proto__ || Object.getPrototypeOf(EmailAutocompleteInput)).call.apply(_ref, [this].concat(args))), _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 = '', _initDefineProp(_this, 'email', _descriptor, _this), _initDefineProp(_this, 'isValid', _descriptor2, _this), _this.handleChange = function (_ref2) {
       var value = _ref2.target.value;
@@ -96,2 +98,14 @@
       _this.prevValue = value;
+      if (_this.props.validate) _this.validate();
+    }, _this.validate = function () {
+      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) {
+        _this.isValid = null;
+      } else if (inputIsFocused) {
+        _this.isValid = isValid ? 'yes' : 'maybe';
+      } else if (!inputIsFocused) {
+        _this.isValid = isValid ? 'yes' : 'no';
+      }
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -106,4 +120,5 @@ }
           emailName = _email$split2[0],
-          partialDomain = _email$split2[1];
+          partialDomain = _email$split2[1]; // eslint-disable-line
 
+
       if (!partialDomain || email.length <= this.prevValue.length) return '';
@@ -135,7 +150,10 @@ var domain = this.domains.find(function (d) {
 
-      return React.createElement('input', _extends({}, props, {
+      return React.createElement(Input, _extends({}, props, {
+        isValid: this.isValid,
         className: className + ' email-autocomplete-input',
         value: this.email,
+        onFocus: this.validate,
+        onBlur: this.validate,
         onChange: this.handleChange,
-        ref: function ref(r) {
+        innerRef: function innerRef(r) {
           return _this3._input = r;
@@ -145,3 +163,3 @@ },
           fileName: _jsxFileName,
-          lineNumber: 38
+          lineNumber: 54
         },
@@ -154,3 +172,3 @@ __self: this
   return EmailAutocompleteInput;
-}(React.Component), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'email', [observable], {
+}(Component), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'email', [observable], {
   enumerable: true,
@@ -160,4 +178,24 @@ initializer: function initializer() {
   }
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'isValid', [observable], {
+  enumerable: true,
+  initializer: function initializer() {
+    return null;
+  }
 })), _class2)) || _class;
 
 export { EmailAutocompleteInput as default };
+
+
+var colors = {
+  maybe: 'yellow',
+  yes: 'limegreen',
+  no: 'red'
+};
+
+var Input = styled.input.withConfig({
+  displayName: 'EmailAutocompleteInput__Input'
+})(['', ''], function (_ref3) {
+  var validate = _ref3.validate,
+      isValid = _ref3.isValid;
+  return validate && css(['outline:none;', ''], isValid && css(['border:1px solid ', ' !important;'], colors[isValid]));
+});

package.json

 {
   "name": "email-autocomplete-input",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://alex-cory.github.io/email-autocomplete-input",
   "main": "/email-autocomplete-compiled.js",
+  "description": "A simple email autocomplete input for React.js",
+  "author": "Alex Cory <[e-mail]>",
+  "license": "MIT",
   "devDependencies": {
@@ -112,3 +115,17 @@ "autoprefixer": "7.1.2",
     "extends": "react-app"
-  }
+  },
+  "keywords": [
+    "react-component",
+    "react",
+    "autocomplete",
+    "email",
+    "input"
+  ],
+  "tags": [
+    "react-component",
+    "react",
+    "autocomplete",
+    "email",
+    "input"
+  ]
 }

README.md

@@ -29,2 +29,9 @@ <img src="https://github.com/alex-cory/email-autocomplete-input/blob/master/public/email-autocomplete-input.gif?raw=true" width="100%">
 )
+
+Props
+-----
+| Props                 | Description                                                                    |
+| --------------------- | ------------------------------------------------------------------------------ |
+| `validate`            | This will highlight with a red, yellow, or green border if the email is valid. |
+
 ```

src/components/index.js

@@ -1,1 +0,6 @@
-export * from './Page'
+export * from './Page'
+export * from './Col'
+export * from './Row'
+export * from './Title'
+export * from './GithubLink'
+export * from './Heart'

src/EmailAutocompleteInput.js

@@ -1,2 +0,3 @@
-import React from 'react'
+import React, { Component } from 'react'
+import styled, { css } from 'styled-components'
 import { observer } from 'mobx-react'
@@ -7,6 +8,7 @@ import { observable } from 'mobx'
 @observer
-export default class EmailAutocompleteInput extends React.Component {
+export default class EmailAutocompleteInput extends Component {
   domains = [...(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']
   prevValue = ''
   @observable email = this.props.value || ''
+  @observable isValid = null
 
@@ -19,6 +21,7 @@ handleChange = ({ target: { value } }) => {
     this.prevValue = value
+    if (this.props.validate) this.validate()
   }
 
   suggest(email) {
-    const [ emailName, partialDomain ] = email.split('@')
+    const [ emailName, partialDomain ] = email.split('@')  // eslint-disable-line
     if (!partialDomain || email.length <= this.prevValue.length) return ''
@@ -37,14 +40,45 @@ const domain = this.domains.find(d => d.indexOf(partialDomain) === 0) || ''
 
+  validate = () => {
+    const inputIsFocused = this._input === document.activeElement
+    var regex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i  // eslint-disable-line
+    const isValid = regex.test(this.email)
+    if (!this.email || !this.prevValue) {
+      this.isValid = null
+    } else if (inputIsFocused) {
+      this.isValid = isValid ? 'yes' : 'maybe'
+    } else if (!inputIsFocused) {
+      this.isValid = isValid ? 'yes' : 'no'
+    }
+  }
+
   render() {
     const { className, ...props } = this.props
     return (
-      <input
+      <Input
         {...props}
+        isValid={this.isValid}
         className={`${className} email-autocomplete-input`}
         value={this.email}
+        onFocus={this.validate}
+        onBlur={this.validate}
         onChange={this.handleChange}
-        ref={r => this._input = r}
+        innerRef={r => this._input = r}
       />
     )
   }
-}
+}
+
+const colors = {
+  maybe: 'yellow',
+  yes: 'limegreen',
+  no: 'red'
+}
+
+const Input = styled.input`
+  ${({ validate, isValid }) => validate && css`
+    outline: none;
+    ${isValid && css`
+      border: 1px solid ${colors[isValid]} !important;
+    `}
+  `}
+`

src/index.js

 import React from 'react'
 import { render } from 'react-dom'
-import { Page } from 'components'
+import { Page, Row, Col, Title, GithubLink as Link, Heart as Love } from 'components'
 import { observable } from 'mobx'
@@ -9,14 +9,2 @@ import styled from 'styled-components'
 
-const Col = styled.div`
-  display:        flex;
-  flex-direction: column;
-  color:          white;
-`
-
-const Title = styled.h1`
-  text-shadow: 1px 1px grey;
-  font-weight: 100;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-`
-
 const Input = styled(EmailAutocompleteInput)`
@@ -26,42 +14,15 @@ font-family:      Helvetica, Arial, sans-serif;
   line-height:      1.3em;
-  display:          inline-block;
   box-sizing:       border-box;
-  background-color: off-white;
-  border-radius:    5px;
-  outline:          none;
   border:           1px solid lightgray;
-  border-image:     initial;
   padding:          0.5rem;
   border-radius:    3px;
-  background:       white;
-  width:            100%;
   font-size:        12pt;
+  outline:          none;
 `
 
-const Row = styled.h4`
-  display: flex;
-  flex-direction: row;
-  font-weight: 100;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  letter-spacing: 1px;
-  justify-content: center;
-  align-items: center;
-`
+window.onload = () => {
+  const input = document.getElementsByClassName('email-autocomplete-input')[0]
+  input.focus()
+}
 
-const Link = styled.a.attrs({
-  href: 'https://github.com/alex-cory'
-})`
-  margin: 0 3px;
-  color: #ea6b2b;
-  text-decoration: none;
-`
-
-const Love = styled.span`
-  &:before {
-    content: '❤';
-    color: #ea6b2b;
-    margin: 0 3px;
-  }
-`
-
 const email = observable('')
@@ -73,3 +34,3 @@
       <Title>Email Autocomplete Input</Title>
-      <Input value={email} onChange={value => email.set(value)} />
+      <Input value={email} onChange={value => email.set(value)} validate />
       <Row>Made with <Love /> by <Link>@alex-cory</Link></Row>
@@ -76,0 +37,0 @@ </Col>

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56889172

increased by0.03%

Number of package files

40

increased by17.65%

Number of low license alerts

0

decreased by-100%

Lines of code

2386

increased by4.1%

Number of low maintenance alerts

2

decreased by-33.33%

Number of lines in readme file

37

increased by23.33%

No dependency changes