react-mention-input 1.0.8 → 1.0.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 (7) hide show
  1. package/dist/MentionInput.css +1 -1
  2. package/dist/MentionInput.d.ts +0 -2
  3. package/dist/MentionInput.js +6 -27
  4. package/package.json +1 -1
  5. package/src/MentionInput.css +1 -1
  6. package/src/MentionInput.tsx +16 -64
  7. package/tsconfig.json +1 -0
package/dist/MentionInput.css CHANGED
@@ -58,4 +58,4 @@
58
58
  background-color: #f5f5f5;
59
59
  }
60
60
 
61
- /*# sourceMappingURL=MentionInput.css.map */
61
+
package/dist/MentionInput.d.ts CHANGED
@@ -9,8 +9,6 @@ interface MentionInputProps {
9
9
  placeholder?: string;
10
10
  containerClassName?: string;
11
11
  inputClassName?: string;
12
- suggestionListClassName?: string;
13
- suggestionItemClassName?: string;
14
12
  sendButtonIcon?: ReactNode;
15
13
  onSendMessage?: (message: string) => void;
16
14
  }
package/dist/MentionInput.js CHANGED
@@ -1,31 +1,10 @@
1
1
  import React, { useState } from 'react';
2
- import './MentionInput.css'; // Import the SCSS file
2
+ import './MentionInput.css'; // Import the CSS file
3
3
  var MentionInput = function (_a) {
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;
4
+ var users = _a.users, placeholder = _a.placeholder, containerClassName = _a.containerClassName, inputClassName = _a.inputClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage;
5
5
  var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
6
- var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
7
- var _d = useState(false), showSuggestions = _d[0], setShowSuggestions = _d[1];
8
6
  var handleInputChange = function (e) {
9
- var value = e.target.value;
10
- setInputValue(value);
11
- var mentionMatch = value.match(/@(\w*)$/);
12
- if (mentionMatch) {
13
- var query_1 = mentionMatch[1].toLowerCase();
14
- var filteredUsers = users.filter(function (user) {
15
- return user.name.toLowerCase().startsWith(query_1);
16
- });
17
- setSuggestions(filteredUsers);
18
- setShowSuggestions(true);
19
- }
20
- else {
21
- setShowSuggestions(false);
22
- }
23
- };
24
- var handleSuggestionClick = function (user) {
25
- var mentionIndex = inputValue.lastIndexOf('@');
26
- var newValue = "".concat(inputValue.substring(0, mentionIndex + 1)).concat(user.name, " ");
27
- setInputValue(newValue);
28
- setShowSuggestions(false);
7
+ setInputValue(e.target.value);
29
8
  };
30
9
  var handleSendMessage = function () {
31
10
  if (inputValue.trim() && onSendMessage) {
@@ -40,8 +19,8 @@ var MentionInput = function (_a) {
40
19
  }
41
20
  };
42
21
  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)); })))));
22
+ React.createElement("div", { className: "input-wrapper" },
23
+ React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, placeholder: placeholder || 'Type @ to mention someone...', className: "mention-input ".concat(inputClassName || '') }),
24
+ React.createElement("button", { onClick: handleSendMessage, className: "send-button" }, sendButtonIcon ? sendButtonIcon : '➤'))));
46
25
  };
47
26
  export default MentionInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/MentionInput.css CHANGED
@@ -58,4 +58,4 @@
58
58
  background-color: #f5f5f5;
59
59
  }
60
60
 
61
- /*# sourceMappingURL=MentionInput.css.map */
61
+
package/src/MentionInput.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useState, ChangeEvent, KeyboardEvent, ReactNode } from 'react';
2
- import './MentionInput.css'; // Import the SCSS file
2
+ import './MentionInput.css'; // Import the CSS file
3
3
 
4
4
  interface User {
5
5
  id: number;
@@ -11,9 +11,7 @@ interface MentionInputProps {
11
11
  placeholder?: string;
12
12
  containerClassName?: string;
13
13
  inputClassName?: string;
14
- suggestionListClassName?: string;
15
- suggestionItemClassName?: string;
16
- sendButtonIcon?: ReactNode; // New prop for button icon (MUI icon or image path)
14
+ sendButtonIcon?: ReactNode;
17
15
  onSendMessage?: (message: string) => void;
18
16
  }
19
17
 
@@ -22,37 +20,13 @@ const MentionInput: React.FC<MentionInputProps> = ({
22
20
  placeholder,
23
21
  containerClassName,
24
22
  inputClassName,
25
- suggestionListClassName,
26
- suggestionItemClassName,
27
23
  sendButtonIcon,
28
24
  onSendMessage,
29
25
  }) => {
30
26
  const [inputValue, setInputValue] = useState<string>('');
31
- const [suggestions, setSuggestions] = useState<User[]>([]);
32
- const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
33
27
 
34
28
  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
35
- const value = e.target.value;
36
- setInputValue(value);
37
-
38
- const mentionMatch = value.match(/@(\w*)$/);
39
- if (mentionMatch) {
40
- const query = mentionMatch[1].toLowerCase();
41
- const filteredUsers = users.filter((user) =>
42
- user.name.toLowerCase().startsWith(query)
43
- );
44
- setSuggestions(filteredUsers);
45
- setShowSuggestions(true);
46
- } else {
47
- setShowSuggestions(false);
48
- }
49
- };
50
-
51
- const handleSuggestionClick = (user: User) => {
52
- const mentionIndex = inputValue.lastIndexOf('@');
53
- const newValue = `${inputValue.substring(0, mentionIndex + 1)}${user.name} `;
54
- setInputValue(newValue);
55
- setShowSuggestions(false);
29
+ setInputValue(e.target.value);
56
30
  };
57
31
 
58
32
  const handleSendMessage = () => {
@@ -71,41 +45,19 @@ const MentionInput: React.FC<MentionInputProps> = ({
71
45
 
72
46
  return (
73
47
  <div className={`mention-container ${containerClassName || ''}`}>
74
- <input
75
- type="text"
76
- value={inputValue}
77
- onChange={handleInputChange}
78
- onKeyPress={handleKeyPress}
79
- placeholder={placeholder || 'Type a message...'}
80
- className={`mention-input ${inputClassName || ''}`}
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>
96
- {showSuggestions && (
97
- <ul className={`suggestion-list ${suggestionListClassName || ''}`}>
98
- {suggestions.map((user) => (
99
- <li
100
- key={user.id}
101
- onClick={() => handleSuggestionClick(user)}
102
- className={`suggestion-item ${suggestionItemClassName || ''}`}
103
- >
104
- {user.name}
105
- </li>
106
- ))}
107
- </ul>
108
- )}
48
+ <div className="input-wrapper">
49
+ <input
50
+ type="text"
51
+ value={inputValue}
52
+ onChange={handleInputChange}
53
+ onKeyPress={handleKeyPress}
54
+ placeholder={placeholder || 'Type @ to mention someone...'}
55
+ className={`mention-input ${inputClassName || ''}`}
56
+ />
57
+ <button onClick={handleSendMessage} className="send-button">
58
+ {sendButtonIcon ? sendButtonIcon : '➤'}
59
+ </button>
60
+ </div>
109
61
  </div>
110
62
  );
111
63
  };
package/tsconfig.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "target": "ES5",
4
+ "sourceMap": false,
4
5
  "module": "ESNext",
5
6
  "moduleResolution": "node",
6
7
  "jsx": "react",