react-multi-email - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

commonjs/ReactMultiEmail.d.ts

@@ -22,3 +22,3 @@ import * as React from 'react';
     };
-    private emailInput;
+    emailInputRef: React.RefObject<HTMLInputElement>;
     static getDerivedStateFromProps(nextProps: IReactMultiEmailProps, prevState: IReactMultiEmailState): {
@@ -30,7 +30,13 @@ propsEmails: string[];
     };
+    constructor(props: IReactMultiEmailProps);
     findEmailAddress: (value: string, isEnter?: boolean) => void;
     onChangeInputValue: (value: string) => void;
     removeEmail: (index: number) => void;
+    handleOnKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOnKeyup: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOnChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnBlur: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnFocus: () => void;
     render(): JSX.Element;
 }
 export default ReactMultiEmail;

commonjs/ReactMultiEmail.js

@@ -17,4 +17,4 @@ "use strict";
     __extends(ReactMultiEmail, _super);
-    function ReactMultiEmail() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ReactMultiEmail(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
@@ -95,2 +95,36 @@ focused: false,
         };
+        _this.handleOnKeydown = function (e) {
+            switch (e.which) {
+                case 13:
+                    e.preventDefault();
+                    break;
+                case 8:
+                    if (!e.currentTarget.value) {
+                        _this.removeEmail(_this.state.emails.length - 1);
+                    }
+                    break;
+                default:
+            }
+        };
+        _this.handleOnKeyup = function (e) {
+            switch (e.which) {
+                case 13:
+                    _this.findEmailAddress(e.currentTarget.value, true);
+                    break;
+                default:
+            }
+        };
+        _this.handleOnChange = function (e) {
+            return _this.onChangeInputValue(e.currentTarget.value);
+        };
+        _this.handleOnBlur = function (e) {
+            _this.setState({ focused: false });
+            _this.findEmailAddress(e.currentTarget.value, true);
+        };
+        _this.handleOnFocus = function () {
+            return _this.setState({
+                focused: true,
+            });
+        };
+        _this.emailInputRef = React.createRef();
         return _this;
@@ -115,3 +149,5 @@ }
         return (React.createElement("div", { className: className + " react-multi-email " + (focused ? 'focused' : '') + " " + (inputValue === '' && emails.length === 0 ? 'empty' : ''), style: style, onClick: function () {
-                _this.emailInput.focus();
+                if (_this.emailInputRef.current) {
+                    _this.emailInputRef.current.focus();
+                }
             } },
@@ -122,22 +158,3 @@ placeholder ? React.createElement("span", { "data-placeholder": true }, placeholder) : null,
             }),
-            React.createElement("input", { ref: function (ref) {
-                    if (ref) {
-                        _this.emailInput = ref;
-                    }
-                }, type: "text", value: inputValue, onFocus: function () {
-                    return _this.setState({
-                        focused: true,
-                    });
-                }, onBlur: function (e) {
-                    _this.setState({ focused: false });
-                    _this.findEmailAddress(e.target.value, true);
-                }, onChange: function (e) { return _this.onChangeInputValue(e.target.value); }, onKeyDown: function (e) {
-                    if (e.which === 8 && !e.target.value) {
-                        _this.removeEmail(_this.state.emails.length - 1);
-                    }
-                }, onKeyUp: function (e) {
-                    if (e.which === 13) {
-                        _this.findEmailAddress(e.target.value, true);
-                    }
-                } })));
+            React.createElement("input", { ref: this.emailInputRef, type: "text", value: inputValue, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur, onChange: this.handleOnChange, onKeyDown: this.handleOnKeydown, onKeyUp: this.handleOnKeyup })));
     };
@@ -144,0 +161,0 @@ return ReactMultiEmail;

es6/ReactMultiEmail.d.ts

@@ -22,3 +22,3 @@ import * as React from 'react';
     };
-    private emailInput;
+    emailInputRef: React.RefObject<HTMLInputElement>;
     static getDerivedStateFromProps(nextProps: IReactMultiEmailProps, prevState: IReactMultiEmailState): {
@@ -30,7 +30,13 @@ propsEmails: string[];
     };
+    constructor(props: IReactMultiEmailProps);
     findEmailAddress: (value: string, isEnter?: boolean) => void;
     onChangeInputValue: (value: string) => void;
     removeEmail: (index: number) => void;
+    handleOnKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOnKeyup: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOnChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnBlur: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnFocus: () => void;
     render(): JSX.Element;
 }
 export default ReactMultiEmail;

es6/ReactMultiEmail.js

 import * as React from 'react';
 import isEmail from './isEmail';
 class ReactMultiEmail extends React.Component {
-    constructor() {
-        super(...arguments);
+    constructor(props) {
+        super(props);
         this.state = {
@@ -84,2 +84,32 @@ focused: false,
         };
+        this.handleOnKeydown = (e) => {
+            switch (e.which) {
+                case 13:
+                    e.preventDefault();
+                    break;
+                case 8:
+                    if (!e.currentTarget.value) {
+                        this.removeEmail(this.state.emails.length - 1);
+                    }
+                    break;
+                default:
+            }
+        };
+        this.handleOnKeyup = (e) => {
+            switch (e.which) {
+                case 13:
+                    this.findEmailAddress(e.currentTarget.value, true);
+                    break;
+                default:
+            }
+        };
+        this.handleOnChange = (e) => this.onChangeInputValue(e.currentTarget.value);
+        this.handleOnBlur = (e) => {
+            this.setState({ focused: false });
+            this.findEmailAddress(e.currentTarget.value, true);
+        };
+        this.handleOnFocus = () => this.setState({
+            focused: true,
+        });
+        this.emailInputRef = React.createRef();
     }
@@ -102,26 +132,11 @@ static getDerivedStateFromProps(nextProps, prevState) {
         return (React.createElement("div", { className: `${className} react-multi-email ${focused ? 'focused' : ''} ${inputValue === '' && emails.length === 0 ? 'empty' : ''}`, style: style, onClick: () => {
-                this.emailInput.focus();
+                if (this.emailInputRef.current) {
+                    this.emailInputRef.current.focus();
+                }
             } },
             placeholder ? React.createElement("span", { "data-placeholder": true }, placeholder) : null,
             emails.map((email, index) => getLabel(email, index, this.removeEmail)),
-            React.createElement("input", { ref: ref => {
-                    if (ref) {
-                        this.emailInput = ref;
-                    }
-                }, type: "text", value: inputValue, onFocus: () => this.setState({
-                    focused: true,
-                }), onBlur: (e) => {
-                    this.setState({ focused: false });
-                    this.findEmailAddress(e.target.value, true);
-                }, onChange: (e) => this.onChangeInputValue(e.target.value), onKeyDown: (e) => {
-                    if (e.which === 8 && !e.target.value) {
-                        this.removeEmail(this.state.emails.length - 1);
-                    }
-                }, onKeyUp: (e) => {
-                    if (e.which === 13) {
-                        this.findEmailAddress(e.target.value, true);
-                    }
-                } })));
+            React.createElement("input", { ref: this.emailInputRef, type: "text", value: inputValue, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur, onChange: this.handleOnChange, onKeyDown: this.handleOnKeydown, onKeyUp: this.handleOnKeyup })));
     }
 }
 export default ReactMultiEmail;

package.json

 {
   "name": "react-multi-email",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "React multi email input",
@@ -5,0 +5,0 @@ "jsnext:main": "es6/index.js",

No alert changes

Improved metrics

Total package byte prevSize

28485

increased by6.59%

Lines of code

713

increased by6.58%

No dependency changes