react-mention-input 1.1.7 → 1.1.8
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.
- package/dist/MentionInput.css +18 -0
- package/dist/MentionInput.js +11 -1
- package/package.json +1 -1
- package/src/MentionInput.css +18 -0
- package/src/MentionInput.tsx +10 -0
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
|
@@ -97,6 +97,14 @@ var MentionInput = function (_a) {
|
|
|
97
97
|
position: 'absolute',
|
|
98
98
|
zIndex: 1000,
|
|
99
99
|
};
|
|
100
|
+
var getInitials = function (name) {
|
|
101
|
+
var nameParts = name.split(" ");
|
|
102
|
+
var initials = nameParts
|
|
103
|
+
.map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; }) // Take the first letter of each part
|
|
104
|
+
.slice(0, 2) // Limit to 2 letters
|
|
105
|
+
.join("");
|
|
106
|
+
return initials;
|
|
107
|
+
};
|
|
100
108
|
// Use suggestionPosition prop to adjust tooltip position
|
|
101
109
|
switch (suggestionPosition) {
|
|
102
110
|
case 'top':
|
|
@@ -118,7 +126,9 @@ var MentionInput = function (_a) {
|
|
|
118
126
|
default:
|
|
119
127
|
break;
|
|
120
128
|
}
|
|
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" },
|
|
129
|
+
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" },
|
|
130
|
+
React.createElement("div", { className: "user-icon" }, getInitials(user === null || user === void 0 ? void 0 : user.name)),
|
|
131
|
+
user.name)); })), window.document.body // Render in portal
|
|
122
132
|
);
|
|
123
133
|
};
|
|
124
134
|
var handleSuggestionClick = function (user) {
|
package/package.json
CHANGED
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
|
))}
|