react-mention-input 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/MentionInput.css +18 -0
  2. package/dist/MentionInput.js +17 -6
  3. package/package.json +1 -1
  4. package/src/MentionInput.css +18 -0
  5. package/src/MentionInput.tsx +15 -1
package/dist/MentionInput.css CHANGED
@@ -72,7 +72,25 @@
72
72
  }
73
73
 
74
74
 
75
+ .user-icon {
76
+ width: 25px;
77
+ height: 25px;
78
+ border-radius: 50%;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ font-size: 12px;
83
+ font-weight: bold;
84
+ color: #fff;
85
+ background-color: #007bff;
86
+ text-transform: uppercase;
87
+ margin-right: 4px;
88
+ }
89
+
90
+
75
91
  .suggestion-item {
92
+ display: flex;
93
+ align-items: center;
76
94
  padding: 8px 12px;
77
95
  cursor: pointer;
78
96
  border-bottom: 1px solid #ddd;
package/dist/MentionInput.js CHANGED
@@ -2,10 +2,11 @@ import React, { useState, useRef } from "react";
2
2
  import ReactDOM from "react-dom";
3
3
  import "./MentionInput.css";
4
4
  var MentionInput = function (_a) {
5
- var users = _a.users, _b = _a.placeholder, placeholder = _b === void 0 ? "Type a message..." : _b, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage, _c = _a.suggestionPosition, suggestionPosition = _c === void 0 ? 'bottom' : _c;
6
- var _d = useState(""), inputValue = _d[0], setInputValue = _d[1]; // Plain text
7
- var _e = useState([]), suggestions = _e[0], setSuggestions = _e[1];
8
- var _f = useState(false), showSuggestions = _f[0], setShowSuggestions = _f[1];
5
+ var _b;
6
+ var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message..." : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d;
7
+ var _e = useState(""), inputValue = _e[0], setInputValue = _e[1]; // Plain text
8
+ var _f = useState([]), suggestions = _f[0], setSuggestions = _f[1];
9
+ var _g = useState(false), showSuggestions = _g[0], setShowSuggestions = _g[1];
9
10
  var inputRef = useRef(null);
10
11
  var suggestionListRef = useRef(null);
11
12
  var caretOffsetRef = useRef(0);
@@ -97,6 +98,14 @@ var MentionInput = function (_a) {
97
98
  position: 'absolute',
98
99
  zIndex: 1000,
99
100
  };
101
+ var getInitials = function (name) {
102
+ var nameParts = name.split(" ");
103
+ var initials = nameParts
104
+ .map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; }) // Take the first letter of each part
105
+ .slice(0, 2) // Limit to 2 letters
106
+ .join("");
107
+ return initials;
108
+ };
100
109
  // Use suggestionPosition prop to adjust tooltip position
101
110
  switch (suggestionPosition) {
102
111
  case 'top':
@@ -118,7 +127,9 @@ var MentionInput = function (_a) {
118
127
  default:
119
128
  break;
120
129
  }
121
- return ReactDOM.createPortal(React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || ''), ref: suggestionListRef, style: styles }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || ''), role: "option", tabIndex: 0, "aria-selected": "false" }, user.name)); })), window.document.body // Render in portal
130
+ return ReactDOM.createPortal(React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || ''), ref: suggestionListRef, style: styles }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || ''), role: "option", tabIndex: 0, "aria-selected": "false" },
131
+ React.createElement("div", { className: "user-icon" }, getInitials(user === null || user === void 0 ? void 0 : user.name)),
132
+ user.name)); })), window.document.body // Render in portal
122
133
  );
123
134
  };
124
135
  var handleSuggestionClick = function (user) {
@@ -173,7 +184,7 @@ var MentionInput = function (_a) {
173
184
  };
174
185
  return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
175
186
  React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "") },
176
- React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }),
187
+ React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }, (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null),
177
188
  React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
178
189
  renderSuggestions()));
179
190
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/MentionInput.css CHANGED
@@ -72,7 +72,25 @@
72
72
  }
73
73
 
74
74
 
75
+ .user-icon {
76
+ width: 25px;
77
+ height: 25px;
78
+ border-radius: 50%;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ font-size: 12px;
83
+ font-weight: bold;
84
+ color: #fff;
85
+ background-color: #007bff;
86
+ text-transform: uppercase;
87
+ margin-right: 4px;
88
+ }
89
+
90
+
75
91
  .suggestion-item {
92
+ display: flex;
93
+ align-items: center;
76
94
  padding: 8px 12px;
77
95
  cursor: pointer;
78
96
  border-bottom: 1px solid #ddd;
package/src/MentionInput.tsx CHANGED
@@ -151,6 +151,15 @@ const MentionInput: React.FC<MentionInputProps> = ({
151
151
  zIndex: 1000,
152
152
  };
153
153
 
154
+ const getInitials = (name: string) => {
155
+ const nameParts = name.split(" ");
156
+ const initials = nameParts
157
+ .map((part) => part[0]?.toUpperCase() || "") // Take the first letter of each part
158
+ .slice(0, 2) // Limit to 2 letters
159
+ .join("");
160
+ return initials;
161
+ };
162
+
154
163
  // Use suggestionPosition prop to adjust tooltip position
155
164
  switch (suggestionPosition) {
156
165
  case 'top':
@@ -188,6 +197,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
188
197
  tabIndex={0}
189
198
  aria-selected="false"
190
199
  >
200
+ <div className="user-icon">{getInitials(user?.name)}</div>
191
201
  {user.name}
192
202
  </li>
193
203
  ))}
@@ -274,7 +284,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
274
284
  className={`mention-input ${inputClassName || ""}`}
275
285
  onInput={handleInputChange}
276
286
  onKeyDown={handleKeyDown} // Add keydown listener
277
- ></div>
287
+ >
288
+ {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
289
+ <span className="placeholder">{placeholder}</span>
290
+ ) : null}
291
+ </div>
278
292
  <button
279
293
  onClick={handleSendMessage}
280
294
  className={`send-button ${sendBtnClassName || ""}`}