react-mention-input 1.0.6 → 1.0.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 +61 -0
- package/dist/MentionInput.d.ts +8 -4
- package/dist/MentionInput.js +18 -15
- package/package.json +9 -9
- package/src/MentionInput.css +61 -0
- package/src/MentionInput.tsx +47 -49
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.mention-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mention-input {
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding: 12px 16px;
|
|
10
|
+
border: 1px solid #ccc;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
outline: none;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
15
|
+
transition: border 0.2s, box-shadow 0.2s;
|
|
16
|
+
}
|
|
17
|
+
.mention-input:focus {
|
|
18
|
+
border: 1px solid #007BFF;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.send-button {
|
|
22
|
+
padding: 8px 12px;
|
|
23
|
+
border: none;
|
|
24
|
+
background-color: #007BFF;
|
|
25
|
+
color: #fff;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
font-size: 18px;
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.suggestion-list {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 100%;
|
|
37
|
+
left: 0;
|
|
38
|
+
right: 0;
|
|
39
|
+
background-color: #fff;
|
|
40
|
+
border: 1px solid #ddd;
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
list-style: none;
|
|
43
|
+
margin: 4px 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
max-height: 150px;
|
|
46
|
+
overflow-y: auto;
|
|
47
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
48
|
+
z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.suggestion-item {
|
|
52
|
+
padding: 8px 12px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
border-bottom: 1px solid #ddd;
|
|
55
|
+
transition: background-color 0.2s;
|
|
56
|
+
}
|
|
57
|
+
.suggestion-item:hover {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/*# sourceMappingURL=MentionInput.css.map */
|
package/dist/MentionInput.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import './MentionInput.css';
|
|
2
3
|
interface User {
|
|
3
4
|
id: number;
|
|
4
5
|
name: string;
|
|
@@ -6,9 +7,12 @@ interface User {
|
|
|
6
7
|
interface MentionInputProps {
|
|
7
8
|
users: User[];
|
|
8
9
|
placeholder?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
containerClassName?: string;
|
|
11
|
+
inputClassName?: string;
|
|
12
|
+
suggestionListClassName?: string;
|
|
13
|
+
suggestionItemClassName?: string;
|
|
14
|
+
sendButtonIcon?: ReactNode;
|
|
15
|
+
onSendMessage?: (message: string) => void;
|
|
12
16
|
}
|
|
13
17
|
declare const MentionInput: React.FC<MentionInputProps>;
|
|
14
18
|
export default MentionInput;
|
package/dist/MentionInput.js
CHANGED
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React, { useState } from 'react';
|
|
2
|
+
import './MentionInput.css'; // Import the SCSS file
|
|
13
3
|
var MentionInput = function (_a) {
|
|
14
|
-
var users = _a.users, placeholder = _a.placeholder,
|
|
4
|
+
var users = _a.users, placeholder = _a.placeholder, containerClassName = _a.containerClassName, inputClassName = _a.inputClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage;
|
|
15
5
|
var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
|
|
16
6
|
var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
|
|
17
7
|
var _d = useState(false), showSuggestions = _d[0], setShowSuggestions = _d[1];
|
|
@@ -37,8 +27,21 @@ var MentionInput = function (_a) {
|
|
|
37
27
|
setInputValue(newValue);
|
|
38
28
|
setShowSuggestions(false);
|
|
39
29
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
var handleSendMessage = function () {
|
|
31
|
+
if (inputValue.trim() && onSendMessage) {
|
|
32
|
+
onSendMessage(inputValue.trim());
|
|
33
|
+
setInputValue(''); // Clear input after sending
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var handleKeyPress = function (e) {
|
|
37
|
+
if (e.key === 'Enter') {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
handleSendMessage();
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
return (React.createElement("div", { className: "mention-container ".concat(containerClassName || '') },
|
|
43
|
+
React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, placeholder: placeholder || 'Type a message...', className: "mention-input ".concat(inputClassName || '') }),
|
|
44
|
+
React.createElement("button", { onClick: handleSendMessage, className: "send-button" }, sendButtonIcon ? (typeof sendButtonIcon === 'string' ? (React.createElement("img", { src: sendButtonIcon, alt: "Send Icon", style: { width: '20px', height: '20px' } })) : (sendButtonIcon)) : ('➤')),
|
|
45
|
+
showSuggestions && (React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || '') }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || '') }, user.name)); })))));
|
|
43
46
|
};
|
|
44
47
|
export default MentionInput;
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-mention-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
8
|
-
"build": "tsc"
|
|
8
|
+
"build": "tsc && npm run copy-css",
|
|
9
|
+
"copy-css": "copyfiles -u 1 src/**/*.css dist"
|
|
9
10
|
},
|
|
10
11
|
"keywords": [
|
|
11
12
|
"mention",
|
|
@@ -21,19 +22,18 @@
|
|
|
21
22
|
"repository": {
|
|
22
23
|
"type": "git",
|
|
23
24
|
"url": "https://github.com/yourusername/react-mention-input.git"
|
|
24
|
-
},
|
|
25
|
-
"dependencies": {
|
|
26
|
-
|
|
27
25
|
},
|
|
28
26
|
"devDependencies": {
|
|
29
|
-
"
|
|
27
|
+
"@types/node": "^22.9.0",
|
|
30
28
|
"@types/react": "^18.3.12",
|
|
31
29
|
"@types/react-dom": "^18.3.1",
|
|
32
|
-
"
|
|
33
|
-
"csstype": "^3.1.3"
|
|
30
|
+
"copyfiles": "^2.4.1",
|
|
31
|
+
"csstype": "^3.1.3",
|
|
32
|
+
"sass": "^1.81.0",
|
|
33
|
+
"typescript": "^5.6.3"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^17.0.0 || ^18.0.0",
|
|
37
37
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
38
38
|
}
|
|
39
|
-
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.mention-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mention-input {
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding: 12px 16px;
|
|
10
|
+
border: 1px solid #ccc;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
outline: none;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
15
|
+
transition: border 0.2s, box-shadow 0.2s;
|
|
16
|
+
}
|
|
17
|
+
.mention-input:focus {
|
|
18
|
+
border: 1px solid #007BFF;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.send-button {
|
|
22
|
+
padding: 8px 12px;
|
|
23
|
+
border: none;
|
|
24
|
+
background-color: #007BFF;
|
|
25
|
+
color: #fff;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
font-size: 18px;
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.suggestion-list {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 100%;
|
|
37
|
+
left: 0;
|
|
38
|
+
right: 0;
|
|
39
|
+
background-color: #fff;
|
|
40
|
+
border: 1px solid #ddd;
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
list-style: none;
|
|
43
|
+
margin: 4px 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
max-height: 150px;
|
|
46
|
+
overflow-y: auto;
|
|
47
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
48
|
+
z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.suggestion-item {
|
|
52
|
+
padding: 8px 12px;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
border-bottom: 1px solid #ddd;
|
|
55
|
+
transition: background-color 0.2s;
|
|
56
|
+
}
|
|
57
|
+
.suggestion-item:hover {
|
|
58
|
+
background-color: #f5f5f5;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/*# sourceMappingURL=MentionInput.css.map */
|
package/src/MentionInput.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { useState, ChangeEvent } from 'react';
|
|
1
|
+
import React, { useState, ChangeEvent, KeyboardEvent, ReactNode } from 'react';
|
|
2
|
+
import './MentionInput.css'; // Import the SCSS file
|
|
2
3
|
|
|
3
4
|
interface User {
|
|
4
5
|
id: number;
|
|
@@ -8,17 +9,23 @@ interface User {
|
|
|
8
9
|
interface MentionInputProps {
|
|
9
10
|
users: User[];
|
|
10
11
|
placeholder?: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
containerClassName?: string;
|
|
13
|
+
inputClassName?: string;
|
|
14
|
+
suggestionListClassName?: string;
|
|
15
|
+
suggestionItemClassName?: string;
|
|
16
|
+
sendButtonIcon?: ReactNode; // New prop for button icon (MUI icon or image path)
|
|
17
|
+
onSendMessage?: (message: string) => void;
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
const MentionInput: React.FC<MentionInputProps> = ({
|
|
17
21
|
users,
|
|
18
22
|
placeholder,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
containerClassName,
|
|
24
|
+
inputClassName,
|
|
25
|
+
suggestionListClassName,
|
|
26
|
+
suggestionItemClassName,
|
|
27
|
+
sendButtonIcon,
|
|
28
|
+
onSendMessage,
|
|
22
29
|
}) => {
|
|
23
30
|
const [inputValue, setInputValue] = useState<string>('');
|
|
24
31
|
const [suggestions, setSuggestions] = useState<User[]>([]);
|
|
@@ -48,60 +55,51 @@ const MentionInput: React.FC<MentionInputProps> = ({
|
|
|
48
55
|
setShowSuggestions(false);
|
|
49
56
|
};
|
|
50
57
|
|
|
58
|
+
const handleSendMessage = () => {
|
|
59
|
+
if (inputValue.trim() && onSendMessage) {
|
|
60
|
+
onSendMessage(inputValue.trim());
|
|
61
|
+
setInputValue(''); // Clear input after sending
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
66
|
+
if (e.key === 'Enter') {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
handleSendMessage();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
51
72
|
return (
|
|
52
|
-
<div
|
|
73
|
+
<div className={`mention-container ${containerClassName || ''}`}>
|
|
53
74
|
<input
|
|
54
75
|
type="text"
|
|
55
76
|
value={inputValue}
|
|
56
77
|
onChange={handleInputChange}
|
|
78
|
+
onKeyPress={handleKeyPress}
|
|
57
79
|
placeholder={placeholder || 'Type a message...'}
|
|
58
|
-
|
|
59
|
-
width: '100%',
|
|
60
|
-
padding: '12px 16px',
|
|
61
|
-
border: '1px solid #ccc',
|
|
62
|
-
borderRadius: '8px',
|
|
63
|
-
outline: 'none',
|
|
64
|
-
fontSize: '16px',
|
|
65
|
-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
66
|
-
transition: 'border 0.2s, box-shadow 0.2s',
|
|
67
|
-
...inputStyle,
|
|
68
|
-
}}
|
|
69
|
-
onFocus={(e) => (e.currentTarget.style.border = '1px solid #007BFF')}
|
|
70
|
-
onBlur={(e) => (e.currentTarget.style.border = '1px solid #ccc')}
|
|
80
|
+
className={`mention-input ${inputClassName || ''}`}
|
|
71
81
|
/>
|
|
82
|
+
<button
|
|
83
|
+
onClick={handleSendMessage}
|
|
84
|
+
className="send-button"
|
|
85
|
+
>
|
|
86
|
+
{sendButtonIcon ? (
|
|
87
|
+
typeof sendButtonIcon === 'string' ? (
|
|
88
|
+
<img src={sendButtonIcon} alt="Send Icon" style={{ width: '20px', height: '20px' }} />
|
|
89
|
+
) : (
|
|
90
|
+
sendButtonIcon
|
|
91
|
+
)
|
|
92
|
+
) : (
|
|
93
|
+
'➤'
|
|
94
|
+
)}
|
|
95
|
+
</button>
|
|
72
96
|
{showSuggestions && (
|
|
73
|
-
<ul
|
|
74
|
-
style={{
|
|
75
|
-
position: 'absolute',
|
|
76
|
-
top: '100%',
|
|
77
|
-
left: 0,
|
|
78
|
-
right: 0,
|
|
79
|
-
backgroundColor: '#fff',
|
|
80
|
-
border: '1px solid #ddd',
|
|
81
|
-
borderRadius: '4px',
|
|
82
|
-
listStyle: 'none',
|
|
83
|
-
margin: '4px 0',
|
|
84
|
-
padding: 0,
|
|
85
|
-
maxHeight: '150px',
|
|
86
|
-
overflowY: 'auto',
|
|
87
|
-
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
88
|
-
zIndex: 1,
|
|
89
|
-
...suggestionListStyle,
|
|
90
|
-
}}
|
|
91
|
-
>
|
|
97
|
+
<ul className={`suggestion-list ${suggestionListClassName || ''}`}>
|
|
92
98
|
{suggestions.map((user) => (
|
|
93
99
|
<li
|
|
94
100
|
key={user.id}
|
|
95
101
|
onClick={() => handleSuggestionClick(user)}
|
|
96
|
-
|
|
97
|
-
padding: '8px 12px',
|
|
98
|
-
cursor: 'pointer',
|
|
99
|
-
borderBottom: '1px solid #ddd',
|
|
100
|
-
transition: 'background-color 0.2s',
|
|
101
|
-
...suggestionItemStyle,
|
|
102
|
-
}}
|
|
103
|
-
onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f5f5f5')}
|
|
104
|
-
onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
|
|
102
|
+
className={`suggestion-item ${suggestionItemClassName || ''}`}
|
|
105
103
|
>
|
|
106
104
|
{user.name}
|
|
107
105
|
</li>
|