react-multi-email - npm Package Compare versions

Comparing version 1.0.13 to 1.0.14

dist/commonjs/ReactMultiEmail.d.ts

@@ -28,4 +28,7 @@ import * as React from 'react';
     autoComplete?: string;
+    disableOnBlurValidation?: boolean;
+    allowDisplayName?: boolean;
+    stripDisplayName?: boolean;
 }
 export declare function ReactMultiEmail(props: IReactMultiEmailProps): React.JSX.Element;
 //# sourceMappingURL=ReactMultiEmail.d.ts.map

dist/commonjs/ReactMultiEmail.js

@@ -98,12 +98,13 @@ "use strict";
     var _this = this;
-    var id = props.id, style = props.style, propsEmails = props.emails, _a = props.className, className = _a === void 0 ? '' : _a, noClass = props.noClass, placeholder = props.placeholder, autoFocus = props.autoFocus, _b = props.delimiter, delimiter = _b === void 0 ? '[ ,;]' : _b, _c = props.initialInputValue, initialInputValue = _c === void 0 ? '' : _c, inputClassName = props.inputClassName, autoComplete = props.autoComplete, getLabel = props.getLabel, enable = props.enable, onDisabled = props.onDisabled, validateEmail = props.validateEmail, onChange = props.onChange, onChangeInput = props.onChangeInput, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, spinner = props.spinner;
+    var id = props.id, style = props.style, propsEmails = props.emails, _a = props.className, className = _a === void 0 ? '' : _a, noClass = props.noClass, placeholder = props.placeholder, autoFocus = props.autoFocus, _b = props.allowDisplayName, allowDisplayName = _b === void 0 ? false : _b, _c = props.stripDisplayName, stripDisplayName = _c === void 0 ? false : _c, _d = props.delimiter, delimiter = _d === void 0 ? "[".concat(allowDisplayName ? '' : ' ', ",;]") : _d, _e = props.initialInputValue, initialInputValue = _e === void 0 ? '' : _e, inputClassName = props.inputClassName, autoComplete = props.autoComplete, getLabel = props.getLabel, enable = props.enable, onDisabled = props.onDisabled, validateEmail = props.validateEmail, onChange = props.onChange, onChangeInput = props.onChangeInput, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, spinner = props.spinner, _f = props.disableOnBlurValidation, disableOnBlurValidation = _f === void 0 ? false : _f;
     var emailInputRef = React.useRef(null);
-    var _d = __read(React.useState(false), 2), focused = _d[0], setFocused = _d[1];
-    var _e = __read(React.useState(function () { return initialEmailAddress(propsEmails); }), 2), emails = _e[0], setEmails = _e[1];
-    var _f = __read(React.useState(initialInputValue), 2), inputValue = _f[0], setInputValue = _f[1];
-    var _g = __read(React.useState(false), 2), spinning = _g[0], setSpinning = _g[1];
+    var _g = __read(React.useState(false), 2), focused = _g[0], setFocused = _g[1];
+    var _h = __read(React.useState(function () { return initialEmailAddress(propsEmails); }), 2), emails = _h[0], setEmails = _h[1];
+    var _j = __read(React.useState(initialInputValue), 2), inputValue = _j[0], setInputValue = _j[1];
+    var _k = __read(React.useState(false), 2), spinning = _k[0], setSpinning = _k[1];
     var findEmailAddress = React.useCallback(function (value, isEnter) { return __awaiter(_this, void 0, void 0, function () {
-        var validEmails, inputValue, re, isEmail, addEmails, splitData, setArr, arr, validateResult, validateResult;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var validEmails, inputValue, re, isEmail, addEmails, setArr, arr, validateResult, validateResultWithDisplayName, email, validateResult, validateResultWithDisplayName, email;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
                 case 0:
@@ -125,8 +126,5 @@ validEmails = [];
                     if (!re.test(value)) return [3 /*break*/, 6];
-                    splitData = value.split(re).filter(function (n) {
-                        return n !== '' && n !== undefined && n !== null;
-                    });
-                    setArr = new Set(splitData);
+                    setArr = new Set(value.split(re).filter(function (n) { return n; }));
                     arr = __spreadArray([], __read(setArr), false);
-                    _a.label = 1;
+                    _b.label = 1;
                 case 1:
@@ -140,3 +138,20 @@ validateResult = isEmail('' + arr[0]);
                         if (arr.length === 1) {
-                            inputValue = '' + arr.shift();
+                            if (allowDisplayName) {
+                                validateResultWithDisplayName = isEmail('' + arr[0], { allowDisplayName: allowDisplayName });
+                                if (validateResultWithDisplayName) {
+                                    email = stripDisplayName ? (_a = arr.shift()) === null || _a === void 0 ? void 0 : _a.split("<")[1].split(">")[0] : arr.shift();
+                                    addEmails('' + email);
+                                }
+                                else {
+                                    if (arr.length === 1) {
+                                        inputValue = '' + arr.shift();
+                                    }
+                                    else {
+                                        arr.shift();
+                                    }
+                                }
+                            }
+                            else {
+                                inputValue = '' + arr.shift();
+                            }
                         }
@@ -153,3 +168,3 @@ else {
                 case 3:
-                    if ((_a.sent()) === true) {
+                    if ((_b.sent()) === true) {
                         addEmails('' + arr.shift());
@@ -166,6 +181,6 @@ setSpinning(false);
                     }
-                    _a.label = 4;
+                    _b.label = 4;
                 case 4:
                     if (arr.length) return [3 /*break*/, 1];
-                    _a.label = 5;
+                    _b.label = 5;
                 case 5: return [3 /*break*/, 11];
@@ -183,2 +198,12 @@ case 6:
                     }
+                    else if (allowDisplayName) {
+                        validateResultWithDisplayName = isEmail(value, { allowDisplayName: allowDisplayName });
+                        if (validateResultWithDisplayName) {
+                            email = stripDisplayName ? value.split("<")[1].split(">")[0] : value;
+                            addEmails(email);
+                        }
+                        else {
+                            inputValue = value;
+                        }
+                    }
                     else {
@@ -193,3 +218,3 @@ inputValue = value;
                 case 8:
-                    if ((_a.sent()) === true) {
+                    if ((_b.sent()) === true) {
                         addEmails(value);
@@ -201,7 +226,7 @@ setSpinning(false);
                     }
-                    _a.label = 9;
+                    _b.label = 9;
                 case 9: return [3 /*break*/, 11];
                 case 10:
                     inputValue = value;
-                    _a.label = 11;
+                    _b.label = 11;
                 case 11:
@@ -283,5 +308,8 @@ setEmails(__spreadArray(__spreadArray([], __read(emails), false), __read(validEmails), false));
                     setFocused(false);
+                    if (!!disableOnBlurValidation) return [3 /*break*/, 2];
                     return [4 /*yield*/, findEmailAddress(e.currentTarget.value, true)];
                 case 1:
                     _a.sent();
+                    _a.label = 2;
+                case 2:
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur();
@@ -291,3 +319,3 @@ return [2 /*return*/];
         });
-    }); }, [findEmailAddress, onBlur]);
+    }); }, [disableOnBlurValidation, findEmailAddress, onBlur]);
     var handleOnFocus = React.useCallback(function () {
@@ -294,0 +322,0 @@ setFocused(true);

dist/es6/ReactMultiEmail.d.ts

@@ -28,4 +28,7 @@ import * as React from 'react';
     autoComplete?: string;
+    disableOnBlurValidation?: boolean;
+    allowDisplayName?: boolean;
+    stripDisplayName?: boolean;
 }
 export declare function ReactMultiEmail(props: IReactMultiEmailProps): React.JSX.Element;
 //# sourceMappingURL=ReactMultiEmail.d.ts.map

dist/es6/ReactMultiEmail.js

@@ -45,3 +45,3 @@ "use strict";
 function ReactMultiEmail(props) {
-    const { id, style, emails: propsEmails, className = '', noClass, placeholder, autoFocus, delimiter = '[ ,;]', initialInputValue = '', inputClassName, autoComplete, getLabel, enable, onDisabled, validateEmail, onChange, onChangeInput, onFocus, onBlur, onKeyDown, onKeyUp, spinner, } = props;
+    const { id, style, emails: propsEmails, className = '', noClass, placeholder, autoFocus, allowDisplayName = false, stripDisplayName = false, delimiter = `[${allowDisplayName ? '' : ' '},;]`, initialInputValue = '', inputClassName, autoComplete, getLabel, enable, onDisabled, validateEmail, onChange, onChangeInput, onFocus, onBlur, onKeyDown, onKeyUp, spinner, disableOnBlurValidation = false, } = props;
     const emailInputRef = React.useRef(null);
@@ -53,2 +53,3 @@ const [focused, setFocused] = React.useState(false);
     const findEmailAddress = React.useCallback((value, isEnter) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         const validEmails = [];
@@ -69,6 +70,3 @@ let inputValue = '';
             if (re.test(value)) {
-                const splitData = value.split(re).filter(n => {
-                    return n !== '' && n !== undefined && n !== null;
-                });
-                const setArr = new Set(splitData);
+                const setArr = new Set(value.split(re).filter(n => n));
                 const arr = [...setArr];
@@ -83,3 +81,21 @@ do {
                             if (arr.length === 1) {
-                                inputValue = '' + arr.shift();
+                                if (allowDisplayName) {
+                                    const validateResultWithDisplayName = isEmail('' + arr[0], { allowDisplayName });
+                                    if (validateResultWithDisplayName) {
+                                        // Strip display name from email formatted as such "First Last <[e-mail]>"
+                                        const email = stripDisplayName ? (_a = arr.shift()) === null || _a === void 0 ? void 0 : _a.split("<")[1].split(">")[0] : arr.shift();
+                                        addEmails('' + email);
+                                    }
+                                    else {
+                                        if (arr.length === 1) {
+                                            inputValue = '' + arr.shift();
+                                        }
+                                        else {
+                                            arr.shift();
+                                        }
+                                    }
+                                }
+                                else {
+                                    inputValue = '' + arr.shift();
+                                }
                             }
@@ -120,2 +136,13 @@ else {
                         }
+                        else if (allowDisplayName) {
+                            const validateResultWithDisplayName = isEmail(value, { allowDisplayName });
+                            if (validateResultWithDisplayName) {
+                                // Strip display name from email formatted as such "First Last <[e-mail]>"
+                                const email = stripDisplayName ? value.split("<")[1].split(">")[0] : value;
+                                addEmails(email);
+                            }
+                            else {
+                                inputValue = value;
+                            }
+                        }
                         else {
@@ -189,5 +216,7 @@ inputValue = value;
         setFocused(false);
-        yield findEmailAddress(e.currentTarget.value, true);
+        if (!disableOnBlurValidation) {
+            yield findEmailAddress(e.currentTarget.value, true);
+        }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }), [findEmailAddress, onBlur]);
+    }), [disableOnBlurValidation, findEmailAddress, onBlur]);
     const handleOnFocus = React.useCallback(() => {
@@ -194,0 +223,0 @@ setFocused(true);

package.json

 {
   "name": "react-multi-email",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "jsnext:main": "dist/es6/index.js",
@@ -5,0 +5,0 @@ "module": "dist/es6/index.js",

README.md

@@ -173,5 +173,4 @@ [![npm version](https://badge.fury.io/js/react-multi-email.svg)](https://badge.fury.io/js/react-multi-email)
   <tr>
+    <td>getLabel</td>
     <td>
-    getLabel</td>
-    <td>
   (
@@ -195,2 +194,9 @@ email: string,
     <td>
+    inputClassName</td>
+    <td>string</td>
+    <td>''</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>
     placeholder</td>
@@ -222,3 +228,3 @@ <td>string | React.ReactNode;</td>
   </tr>
-   <tr>
+  <tr>
     <td>
@@ -230,2 +236,15 @@ autoComplete</td>
   </tr>
+  <tr>
+    <td>initialInputValue</td>
+    <td>string | undefined</td>
+    <td>''</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>
+    disableOnBlurValidation</td>
+    <td>boolean | undefined</td>
+    <td>false</td>
+    <td></td>
+  </tr>
 </table>
@@ -232,0 +251,0 @@

No alert changes

Improved metrics

Total package byte prevSize

127058

increased by3.7%

Lines of code

1012

increased by6.86%

Number of lines in readme file

253

increased by8.12%

No dependency changes