v0.3.8 - support placeholder

README.md

@@ -40,6 +40,7 @@ class Basic extends React.Component<IProps, IState> {
       <>
         <h3>Email</h3>
         <ReactMultiEmail
+          placeholder='placeholder'
           emails={emails}
           onChange={(_emails: string[]) => {
             this.setState({ emails: _emails });

dist/README.md

@@ -40,6 +40,7 @@ class Basic extends React.Component<IProps, IState> {
       <>
         <h3>Email</h3>
         <ReactMultiEmail
+          placeholder='placeholder'
           emails={emails}
           onChange={(_emails: string[]) => {
             this.setState({ emails: _emails });

dist/commonjs/ReactMultiEmail.d.ts

@@ -4,6 +4,8 @@ export interface IReactMultiEmailProps {
     onChange?: (emails: string[]) => void;
     style?: object;
     getLabel: (email: string, index: number, removeEmail: (index: number) => void) => void;
+    className?: string;
+    placeholder?: string | React.ReactNode;
 }
 export interface IReactMultiEmailState {
     focused?: boolean;

dist/commonjs/ReactMultiEmail.js

@@ -105,19 +105,24 @@ var ReactMultiEmail = /** @class */ (function (_super) {
     ReactMultiEmail.prototype.render = function () {
         var _this = this;
         var _a = this.state, focused = _a.focused, emails = _a.emails, inputValue = _a.inputValue;
-        var _b = this.props, style = _b.style, getLabel = _b.getLabel;
+        var _b = this.props, style = _b.style, getLabel = _b.getLabel, _c = _b.className, className = _c === void 0 ? '' : _c, placeholder = _b.placeholder;
         // removeEmail
-        return (React.createElement("div", { className: 'react-multi-email ' + (focused ? 'focused' : ''), style: style, onClick: function (e) {
+        return (React.createElement("div", { className: className + " react-multi-email " + (focused ? 'focused' : '') + " " + (inputValue === '' && emails.length === 0 ? 'empty' : ''), style: style, onClick: function () {
                 _this.emailInput.focus();
             } },
+            placeholder ? React.createElement("span", { "data-placeholder": true }, placeholder) : null,
             emails.map(function (email, index) {
                 return getLabel(email, index, _this.removeEmail);
             }),
             React.createElement("input", { ref: function (ref) {
                     if (ref) {
                         _this.emailInput = ref;
                     }
-                }, type: "text", value: inputValue, onFocus: function (e) { return _this.setState({ focused: true }); }, onBlur: function (e) {
+                }, 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) {

dist/es6/ReactMultiEmail.d.ts

@@ -4,6 +4,8 @@ export interface IReactMultiEmailProps {
     onChange?: (emails: string[]) => void;
     style?: object;
     getLabel: (email: string, index: number, removeEmail: (index: number) => void) => void;
+    className?: string;
+    placeholder?: string | React.ReactNode;
 }
 export interface IReactMultiEmailState {
     focused?: boolean;

dist/es6/ReactMultiEmail.js

@@ -90,17 +90,20 @@ class ReactMultiEmail extends React.Component {
     }
     render() {
         const { focused, emails, inputValue } = this.state;
-        const { style, getLabel } = this.props;
+        const { style, getLabel, className = '', placeholder } = this.props;
         // removeEmail
-        return (React.createElement("div", { className: 'react-multi-email ' + (focused ? 'focused' : ''), style: style, onClick: (e) => {
+        return (React.createElement("div", { className: `${className} react-multi-email ${focused ? 'focused' : ''} ${inputValue === '' && emails.length === 0 ? 'empty' : ''}`, style: style, onClick: () => {
                 this.emailInput.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: (e) => this.setState({ focused: true }), onBlur: (e) => {
+                }, 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) => {

dist/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-multi-email",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "React multi email input",
   "jsnext:main": "es6/index.js",
   "main": "commonjs/index.js",
-  "repository": "https://github.com/axui/react-multi-email",
+  "repository": "https://github.com/jsdevkr/react-multi-email",
   "author": "[email protected]",
   "license": "MIT",
   "peerDependencies": {

dist/style.css

@@ -16,13 +16,29 @@
   -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease;
   transition: box-shadow 0.1s ease, border-color 0.1s ease;
   font-size: 13px;
+  position: relative;
+}
+.react-multi-email > span[data-placeholder] {
+  display: none;
+  position: absolute;
+  left: 0.5em;
+  top: 0.4em;
+  padding: 0.4em;
+  line-height: 1.21428571em;
 }
-
 .react-multi-email.focused {
   border-color: #85b7d9;
   background: #fff;
 }
 
+.react-multi-email.empty > span[data-placeholder] {
+  display: inline;
+  color: #ccc;
+}
+.react-multi-email.focused > span[data-placeholder] {
+  display: none;
+}
+
 .react-multi-email > input {
   width: auto !important;
   outline: none !important;

docs/asset-manifest.json

@@ -1,7 +1,7 @@
 {
-  "main.css": "static/css/main.4ef43ce9.css",
-  "main.css.map": "static/css/main.4ef43ce9.css.map",
-  "main.js": "static/js/main.a2e3268a.js",
-  "main.js.map": "static/js/main.a2e3268a.js.map",
+  "main.css": "static/css/main.ab19594c.css",
+  "main.css.map": "static/css/main.ab19594c.css.map",
+  "main.js": "static/js/main.00c50675.js",
+  "main.js.map": "static/js/main.00c50675.js.map",
   "static/media/axui-logo.png": "static/media/axui-logo.bdc57a37.png"
 }

docs/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>AXUI : react-multi-email</title><link href="/static/css/main.4ef43ce9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.a2e3268a.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>AXUI : react-multi-email</title><link href="/static/css/main.ab19594c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.00c50675.js"></script></body></html>

src/pages/samples/Examples/components/Basic.tsx

@@ -17,6 +17,7 @@ class Basic extends React.Component<IProps, IState> {
       <>
         <h3>Email</h3>
         <ReactMultiEmail
+          placeholder="Input your email"
           emails={emails}
           onChange={(_emails: string[]) => {
             this.setState({ emails: _emails });

src/pages/samples/Examples/components/CustomizeStyle.tsx

@@ -17,6 +17,11 @@ class CustomizeStyle extends React.Component<IProps, IState> {
       <>
         <h3>Email</h3>
         <ReactMultiEmail
+          placeholder={
+            <>
+              <b>I</b> am <u style={{ color: '#a0f2ff' }}>placeholder</u> !
+            </>
+          }
           style={{ minHeight: '100px' }}
           emails={emails}
           onChange={(_emails: string[]) => {

src/react-multi-email/ReactMultiEmail.tsx

@@ -10,6 +10,8 @@ export interface IReactMultiEmailProps {
     index: number,
     removeEmail: (index: number) => void,
   ) => void;
+  className?: string;
+  placeholder?: string | React.ReactNode;
 }
 
 export interface IReactMultiEmailState {
@@ -117,18 +119,21 @@ class ReactMultiEmail extends React.Component<IReactMultiEmailProps> {
 
   render() {
     const { focused, emails, inputValue } = this.state;
-    const { style, getLabel } = this.props;
+    const { style, getLabel, className = '', placeholder } = this.props;
 
     // removeEmail
 
     return (
       <div
-        className={'react-multi-email ' + (focused ? 'focused' : '')}
+        className={`${className} react-multi-email ${
+          focused ? 'focused' : ''
+        } ${inputValue === '' && emails.length === 0 ? 'empty' : ''}`}
         style={style}
-        onClick={(e: any) => {
+        onClick={() => {
           this.emailInput.focus();
         }}
       >
+        {placeholder ? <span data-placeholder>{placeholder}</span> : null}
         {emails.map((email: string, index: number) =>
           getLabel(email, index, this.removeEmail),
         )}
@@ -140,7 +145,11 @@ class ReactMultiEmail extends React.Component<IReactMultiEmailProps> {
           }}
           type="text"
           value={inputValue}
-          onFocus={(e: any) => this.setState({ focused: true })}
+          onFocus={() =>
+            this.setState({
+              focused: true,
+            })
+          }
           onBlur={(e: any) => {
             this.setState({ focused: false });
             this.findEmailAddress(e.target.value, true);

src/react-multi-email/style.css

@@ -16,13 +16,29 @@
   -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease;
   transition: box-shadow 0.1s ease, border-color 0.1s ease;
   font-size: 13px;
+  position: relative;
+}
+.react-multi-email > span[data-placeholder] {
+  display: none;
+  position: absolute;
+  left: 0.5em;
+  top: 0.4em;
+  padding: 0.4em;
+  line-height: 1.21428571em;
 }
-
 .react-multi-email.focused {
   border-color: #85b7d9;
   background: #fff;
 }
 
+.react-multi-email.empty > span[data-placeholder] {
+  display: inline;
+  color: #ccc;
+}
+.react-multi-email.focused > span[data-placeholder] {
+  display: none;
+}
+
 .react-multi-email > input {
   width: auto !important;
   outline: none !important;