react-mention-input 1.0.5 → 1.0.7
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.css.map +1 -0
- package/dist/MentionInput.d.ts +6 -3
- package/dist/MentionInput.js +18 -15
- package/package.json +9 -9
- package/src/MentionInput.scss +61 -0
- package/src/MentionInput.tsx +37 -32
|
@@ -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 */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/MentionInput.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE","file":"MentionInput.css"}
|
package/dist/MentionInput.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import './MentionInput.scss';
|
|
2
3
|
interface User {
|
|
3
4
|
id: number;
|
|
4
5
|
name: string;
|
|
@@ -6,9 +7,11 @@ 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
|
+
onSendMessage?: (message: string) => void;
|
|
12
15
|
}
|
|
13
16
|
declare const MentionInput: React.FC<MentionInputProps>;
|
|
14
17
|
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.scss'; // 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, 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" }, "\u27A4"),
|
|
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,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-mention-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
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 build-css",
|
|
9
|
+
"build-css": "sass src/MentionInput.scss dist/MentionInput.css",
|
|
10
|
+
"watch-css": "sass --watch src/MentionInput.scss:dist/MentionInput.css"
|
|
9
11
|
},
|
|
10
12
|
"keywords": [
|
|
11
13
|
"mention",
|
|
@@ -21,19 +23,17 @@
|
|
|
21
23
|
"repository": {
|
|
22
24
|
"type": "git",
|
|
23
25
|
"url": "https://github.com/yourusername/react-mention-input.git"
|
|
24
|
-
},
|
|
25
|
-
"dependencies": {
|
|
26
|
-
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
|
-
"
|
|
28
|
+
"@types/node": "^22.9.0",
|
|
30
29
|
"@types/react": "^18.3.12",
|
|
31
30
|
"@types/react-dom": "^18.3.1",
|
|
32
|
-
"
|
|
33
|
-
"
|
|
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
|
+
&:focus {
|
|
18
|
+
border: 1px solid #007BFF;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.send-button {
|
|
23
|
+
padding: 8px 12px;
|
|
24
|
+
border: none;
|
|
25
|
+
background-color: #007BFF;
|
|
26
|
+
color: #fff;
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
font-size: 18px;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.suggestion-list {
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: 100%;
|
|
38
|
+
left: 0;
|
|
39
|
+
right: 0;
|
|
40
|
+
background-color: #fff;
|
|
41
|
+
border: 1px solid #ddd;
|
|
42
|
+
border-radius: 4px;
|
|
43
|
+
list-style: none;
|
|
44
|
+
margin: 4px 0;
|
|
45
|
+
padding: 0;
|
|
46
|
+
max-height: 150px;
|
|
47
|
+
overflow-y: auto;
|
|
48
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
49
|
+
z-index: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.suggestion-item {
|
|
53
|
+
padding: 8px 12px;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
border-bottom: 1px solid #ddd;
|
|
56
|
+
transition: background-color 0.2s;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
background-color: #f5f5f5;
|
|
60
|
+
}
|
|
61
|
+
}
|
package/src/MentionInput.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { useState, ChangeEvent } from 'react';
|
|
1
|
+
import React, { useState, ChangeEvent, KeyboardEvent } from 'react';
|
|
2
|
+
import './MentionInput.scss'; // Import the SCSS file
|
|
2
3
|
|
|
3
4
|
interface User {
|
|
4
5
|
id: number;
|
|
@@ -8,17 +9,21 @@ interface User {
|
|
|
8
9
|
interface MentionInputProps {
|
|
9
10
|
users: User[];
|
|
10
11
|
placeholder?: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
containerClassName?: string; // New prop for container class
|
|
13
|
+
inputClassName?: string; // New prop for input class
|
|
14
|
+
suggestionListClassName?: string; // New prop for suggestion list class
|
|
15
|
+
suggestionItemClassName?: string; // New prop for suggestion item class
|
|
16
|
+
onSendMessage?: (message: string) => void;
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
const MentionInput: React.FC<MentionInputProps> = ({
|
|
17
20
|
users,
|
|
18
21
|
placeholder,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
containerClassName,
|
|
23
|
+
inputClassName,
|
|
24
|
+
suggestionListClassName,
|
|
25
|
+
suggestionItemClassName,
|
|
26
|
+
onSendMessage,
|
|
22
27
|
}) => {
|
|
23
28
|
const [inputValue, setInputValue] = useState<string>('');
|
|
24
29
|
const [suggestions, setSuggestions] = useState<User[]>([]);
|
|
@@ -48,43 +53,43 @@ const MentionInput: React.FC<MentionInputProps> = ({
|
|
|
48
53
|
setShowSuggestions(false);
|
|
49
54
|
};
|
|
50
55
|
|
|
56
|
+
const handleSendMessage = () => {
|
|
57
|
+
if (inputValue.trim() && onSendMessage) {
|
|
58
|
+
onSendMessage(inputValue.trim());
|
|
59
|
+
setInputValue(''); // Clear input after sending
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
64
|
+
if (e.key === 'Enter') {
|
|
65
|
+
e.preventDefault();
|
|
66
|
+
handleSendMessage();
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
|
|
51
70
|
return (
|
|
52
|
-
<div
|
|
71
|
+
<div className={`mention-container ${containerClassName || ''}`}>
|
|
53
72
|
<input
|
|
54
73
|
type="text"
|
|
55
74
|
value={inputValue}
|
|
56
75
|
onChange={handleInputChange}
|
|
76
|
+
onKeyPress={handleKeyPress}
|
|
57
77
|
placeholder={placeholder || 'Type a message...'}
|
|
58
|
-
|
|
78
|
+
className={`mention-input ${inputClassName || ''}`}
|
|
59
79
|
/>
|
|
80
|
+
<button
|
|
81
|
+
onClick={handleSendMessage}
|
|
82
|
+
className="send-button"
|
|
83
|
+
>
|
|
84
|
+
➤
|
|
85
|
+
</button>
|
|
60
86
|
{showSuggestions && (
|
|
61
|
-
<ul
|
|
62
|
-
style={{
|
|
63
|
-
position: 'absolute',
|
|
64
|
-
top: '100%',
|
|
65
|
-
left: 0,
|
|
66
|
-
right: 0,
|
|
67
|
-
backgroundColor: '#fff',
|
|
68
|
-
border: '1px solid #ddd',
|
|
69
|
-
listStyle: 'none',
|
|
70
|
-
margin: 0,
|
|
71
|
-
padding: 0,
|
|
72
|
-
maxHeight: '150px',
|
|
73
|
-
overflowY: 'auto',
|
|
74
|
-
zIndex: 1,
|
|
75
|
-
...suggestionListStyle,
|
|
76
|
-
}}
|
|
77
|
-
>
|
|
87
|
+
<ul className={`suggestion-list ${suggestionListClassName || ''}`}>
|
|
78
88
|
{suggestions.map((user) => (
|
|
79
89
|
<li
|
|
80
90
|
key={user.id}
|
|
81
91
|
onClick={() => handleSuggestionClick(user)}
|
|
82
|
-
|
|
83
|
-
padding: '8px',
|
|
84
|
-
cursor: 'pointer',
|
|
85
|
-
borderBottom: '1px solid #ddd',
|
|
86
|
-
...suggestionItemStyle,
|
|
87
|
-
}}
|
|
92
|
+
className={`suggestion-item ${suggestionItemClassName || ''}`}
|
|
88
93
|
>
|
|
89
94
|
{user.name}
|
|
90
95
|
</li>
|