react-mention-input 1.1.18 → 1.1.21
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/demo.tsx +69 -4
- package/dist/ShowMessageCard.css +19 -0
- package/dist/ShowMessageCard.d.ts +10 -0
- package/dist/ShowMessageCard.js +16 -4
- package/package.json +1 -1
- package/src/ShowMessageCard.css +19 -0
- package/src/ShowMessageCard.tsx +41 -10
package/demo.tsx
CHANGED
|
@@ -8,14 +8,18 @@ const Demo: React.FC = () => {
|
|
|
8
8
|
name: 'John Doe',
|
|
9
9
|
date: '2 hours ago',
|
|
10
10
|
comment: 'Updated the status to Draft. Need <span class="mention-highlight">@team-leads</span> review before proceeding. <span class="hashtag-highlight">#urgent</span> <span class="hashtag-highlight">#review</span>',
|
|
11
|
-
objectName: '26may_item001
|
|
11
|
+
objectName: '26may_item001',
|
|
12
|
+
revision: 'A',
|
|
13
|
+
object_type_icon: '📄',
|
|
12
14
|
},
|
|
13
15
|
{
|
|
14
16
|
id: 2,
|
|
15
17
|
name: 'Mike Johnson',
|
|
16
18
|
date: '1 day ago',
|
|
17
19
|
comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
|
|
18
|
-
objectName: '26may_item001
|
|
20
|
+
objectName: '26may_item001',
|
|
21
|
+
revision: 'A',
|
|
22
|
+
object_type_icon: '📋',
|
|
19
23
|
}
|
|
20
24
|
]);
|
|
21
25
|
|
|
@@ -48,7 +52,9 @@ const Demo: React.FC = () => {
|
|
|
48
52
|
imageUrl: messageData.imageUrl,
|
|
49
53
|
tags: messageData.tags,
|
|
50
54
|
mentions: messageData.userSelectListName,
|
|
51
|
-
objectName: 'new_item001
|
|
55
|
+
objectName: 'new_item001', // You can customize this or make it dynamic
|
|
56
|
+
revision: 'A', // You can customize this or make it dynamic
|
|
57
|
+
object_type_icon: '✨', // You can customize this or make it dynamic
|
|
52
58
|
};
|
|
53
59
|
|
|
54
60
|
setMessages([...messages, newMessage]);
|
|
@@ -65,6 +71,8 @@ const Demo: React.FC = () => {
|
|
|
65
71
|
<li>Type <strong>#</strong> to create hashtags (e.g., #urgent #review #milestone)</li>
|
|
66
72
|
<li>Links are automatically detected and highlighted</li>
|
|
67
73
|
<li>Hashtags are extracted and returned in the tags array</li>
|
|
74
|
+
<li><strong>Custom Object Chip</strong> rendering with objectChipRender prop</li>
|
|
75
|
+
<li><strong>Object Type Icons</strong> for visual identification</li>
|
|
68
76
|
</ul>
|
|
69
77
|
</div>
|
|
70
78
|
|
|
@@ -78,10 +86,35 @@ const Demo: React.FC = () => {
|
|
|
78
86
|
</div>
|
|
79
87
|
|
|
80
88
|
<div>
|
|
81
|
-
<h3>Messages:</h3>
|
|
89
|
+
<h3>Messages (Default Object Chip):</h3>
|
|
82
90
|
<ShowMessageCard data={messages} />
|
|
83
91
|
</div>
|
|
84
92
|
|
|
93
|
+
<div style={{ marginTop: '30px' }}>
|
|
94
|
+
<h3>Messages (Custom Object Chip):</h3>
|
|
95
|
+
<ShowMessageCard
|
|
96
|
+
data={messages}
|
|
97
|
+
objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
|
|
98
|
+
<div style={{
|
|
99
|
+
backgroundColor: '#007bff',
|
|
100
|
+
color: 'white',
|
|
101
|
+
padding: '6px 12px',
|
|
102
|
+
borderRadius: '20px',
|
|
103
|
+
fontSize: '12px',
|
|
104
|
+
fontWeight: '600',
|
|
105
|
+
boxShadow: '0 2px 4px rgba(0,123,255,0.3)',
|
|
106
|
+
display: 'flex',
|
|
107
|
+
alignItems: 'center',
|
|
108
|
+
gap: '4px'
|
|
109
|
+
}}>
|
|
110
|
+
{objectTypeIcon && <span>{objectTypeIcon}</span>}
|
|
111
|
+
{objectName && <span>{objectName}</span>}
|
|
112
|
+
{revision && <span style={{ opacity: 0.8 }}> v{revision}</span>}
|
|
113
|
+
</div>
|
|
114
|
+
)}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
85
118
|
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
|
|
86
119
|
<h4>Example Usage:</h4>
|
|
87
120
|
<p>Try typing these examples:</p>
|
|
@@ -90,6 +123,38 @@ const Demo: React.FC = () => {
|
|
|
90
123
|
<li>"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help"</li>
|
|
91
124
|
<li>"Meeting scheduled for tomorrow #meeting #planning"</li>
|
|
92
125
|
</ul>
|
|
126
|
+
|
|
127
|
+
<h4 style={{ marginTop: '20px' }}>objectChipRender Example:</h4>
|
|
128
|
+
<pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
|
129
|
+
{`<ShowMessageCard
|
|
130
|
+
data={messages}
|
|
131
|
+
objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
|
|
132
|
+
<div style={{
|
|
133
|
+
backgroundColor: '#007bff',
|
|
134
|
+
color: 'white',
|
|
135
|
+
padding: '6px 12px',
|
|
136
|
+
borderRadius: '20px',
|
|
137
|
+
display: 'flex',
|
|
138
|
+
alignItems: 'center',
|
|
139
|
+
gap: '4px'
|
|
140
|
+
}}>
|
|
141
|
+
{objectTypeIcon && <span>{objectTypeIcon}</span>}
|
|
142
|
+
{objectName} v{revision}
|
|
143
|
+
</div>
|
|
144
|
+
)}
|
|
145
|
+
/>`}
|
|
146
|
+
</pre>
|
|
147
|
+
|
|
148
|
+
<h4 style={{ marginTop: '20px' }}>Data Structure with Icon:</h4>
|
|
149
|
+
<pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
|
150
|
+
{`const messageData = {
|
|
151
|
+
name: 'John Doe',
|
|
152
|
+
objectName: '26may_item001',
|
|
153
|
+
revision: 'A',
|
|
154
|
+
object_type_icon: '📄', // Document icon
|
|
155
|
+
comment: 'Message content...'
|
|
156
|
+
};`}
|
|
157
|
+
</pre>
|
|
93
158
|
</div>
|
|
94
159
|
</div>
|
|
95
160
|
);
|
package/dist/ShowMessageCard.css
CHANGED
|
@@ -38,6 +38,25 @@
|
|
|
38
38
|
padding: 4px 8px;
|
|
39
39
|
border-radius: 6px;
|
|
40
40
|
border: 1px solid #e0e0e0;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.object-type-icon {
|
|
47
|
+
font-size: 14px;
|
|
48
|
+
display: inline-flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.object-name-text {
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.revision-text {
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
color: #888;
|
|
59
|
+
margin-left: 4px;
|
|
41
60
|
}
|
|
42
61
|
|
|
43
62
|
.message-card-img,
|
|
@@ -11,6 +11,8 @@ interface ShowMessageCardProps {
|
|
|
11
11
|
imgSrcKey?: string;
|
|
12
12
|
imageUrlKey?: string;
|
|
13
13
|
objectNameKey?: string;
|
|
14
|
+
revisionKey?: string;
|
|
15
|
+
objectTypeIconKey?: string;
|
|
14
16
|
containerClassName?: string;
|
|
15
17
|
containerStyle?: CSSProperties;
|
|
16
18
|
cardClassName?: string;
|
|
@@ -35,6 +37,14 @@ interface ShowMessageCardProps {
|
|
|
35
37
|
attachedImageContainerStyle?: CSSProperties;
|
|
36
38
|
objectNameClassName?: string;
|
|
37
39
|
objectNameStyle?: CSSProperties;
|
|
40
|
+
revisionClassName?: string;
|
|
41
|
+
revisionStyle?: CSSProperties;
|
|
42
|
+
objectChipRender?: (objectData: {
|
|
43
|
+
objectName?: string;
|
|
44
|
+
revision?: string;
|
|
45
|
+
objectTypeIcon?: string;
|
|
46
|
+
item: MessageCardProps;
|
|
47
|
+
}) => ReactNode;
|
|
38
48
|
renderItem?: (element: MessageCardProps) => ReactNode;
|
|
39
49
|
}
|
|
40
50
|
export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
|
package/dist/ShowMessageCard.js
CHANGED
|
@@ -15,10 +15,14 @@ export var ShowMessageCard = function (_a) {
|
|
|
15
15
|
var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ? "name" : _b, _c = _a.dateKey, dateKey = _c === void 0 ? "date" : _c, _d = _a.commentKey, commentKey = _d === void 0 ? "comment" : _d, _e = _a.imgSrcKey, imgSrcKey = _e === void 0 ? "imgSrc" : _e, _f = _a.imageUrlKey, imageUrlKey = _f === void 0 ? "imageUrl" : _f, // Default key for attached image
|
|
16
16
|
_g = _a.objectNameKey, // Default key for attached image
|
|
17
17
|
objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
_h = _a.revisionKey, // Default key for object identifier
|
|
19
|
+
revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
|
|
20
|
+
_j = _a.objectTypeIconKey, // Default key for revision
|
|
21
|
+
objectTypeIconKey = _j === void 0 ? "object_type_icon" : _j, // Default key for object type icon
|
|
22
|
+
containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, objectNameClassName = _a.objectNameClassName, objectNameStyle = _a.objectNameStyle, revisionClassName = _a.revisionClassName, revisionStyle = _a.revisionStyle, objectChipRender = _a.objectChipRender, // Custom render function for object chip
|
|
23
|
+
renderItem = _a.renderItem;
|
|
20
24
|
// State to manage initials for images that fail to load
|
|
21
|
-
var
|
|
25
|
+
var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
|
|
22
26
|
// Handle image load failure
|
|
23
27
|
var handleImageError = function (id) {
|
|
24
28
|
setInitialsState(function (prevState) {
|
|
@@ -60,7 +64,15 @@ export var ShowMessageCard = function (_a) {
|
|
|
60
64
|
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
|
|
61
65
|
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
|
|
62
66
|
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
|
|
63
|
-
item[objectNameKey] && (React.createElement(
|
|
67
|
+
(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
|
|
68
|
+
objectName: item[objectNameKey],
|
|
69
|
+
revision: item[revisionKey],
|
|
70
|
+
objectTypeIcon: item[objectTypeIconKey],
|
|
71
|
+
item: item
|
|
72
|
+
})) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
|
|
73
|
+
item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
|
|
74
|
+
item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
|
|
75
|
+
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))),
|
|
64
76
|
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
|
|
65
77
|
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
|
|
66
78
|
(item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
|
package/package.json
CHANGED
package/src/ShowMessageCard.css
CHANGED
|
@@ -38,6 +38,25 @@
|
|
|
38
38
|
padding: 4px 8px;
|
|
39
39
|
border-radius: 6px;
|
|
40
40
|
border: 1px solid #e0e0e0;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.object-type-icon {
|
|
47
|
+
font-size: 14px;
|
|
48
|
+
display: inline-flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.object-name-text {
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.revision-text {
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
color: #888;
|
|
59
|
+
margin-left: 4px;
|
|
41
60
|
}
|
|
42
61
|
|
|
43
62
|
.message-card-img,
|
package/src/ShowMessageCard.tsx
CHANGED
|
@@ -13,6 +13,8 @@ interface ShowMessageCardProps {
|
|
|
13
13
|
imgSrcKey?: string; // Custom key for image source
|
|
14
14
|
imageUrlKey?: string; // Custom key for attached image URL
|
|
15
15
|
objectNameKey?: string; // Custom key for object identifier (top-right)
|
|
16
|
+
revisionKey?: string; // Custom key for revision (top-right)
|
|
17
|
+
objectTypeIconKey?: string; // Custom key for object type icon (top-right)
|
|
16
18
|
containerClassName?: string; // Class for the outermost container
|
|
17
19
|
containerStyle?: CSSProperties; // Style for the outermost container
|
|
18
20
|
cardClassName?: string; // Class for the card
|
|
@@ -37,6 +39,9 @@ interface ShowMessageCardProps {
|
|
|
37
39
|
attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
|
|
38
40
|
objectNameClassName?: string; // Class for the object name (top-right)
|
|
39
41
|
objectNameStyle?: CSSProperties; // Style for the object name (top-right)
|
|
42
|
+
revisionClassName?: string; // Class for the revision (top-right)
|
|
43
|
+
revisionStyle?: CSSProperties; // Style for the revision (top-right)
|
|
44
|
+
objectChipRender?: (objectData: { objectName?: string; revision?: string; objectTypeIcon?: string; item: MessageCardProps }) => ReactNode; // Custom render function for object chip
|
|
40
45
|
renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
|
|
41
46
|
}
|
|
42
47
|
|
|
@@ -48,6 +53,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
48
53
|
imgSrcKey = "imgSrc",
|
|
49
54
|
imageUrlKey = "imageUrl", // Default key for attached image
|
|
50
55
|
objectNameKey = "objectName", // Default key for object identifier
|
|
56
|
+
revisionKey = "revision", // Default key for revision
|
|
57
|
+
objectTypeIconKey = "object_type_icon", // Default key for object type icon
|
|
51
58
|
containerClassName,
|
|
52
59
|
containerStyle,
|
|
53
60
|
cardClassName,
|
|
@@ -72,10 +79,11 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
72
79
|
attachedImageContainerStyle,
|
|
73
80
|
objectNameClassName,
|
|
74
81
|
objectNameStyle,
|
|
82
|
+
revisionClassName,
|
|
83
|
+
revisionStyle,
|
|
84
|
+
objectChipRender, // Custom render function for object chip
|
|
75
85
|
renderItem, // Custom render function
|
|
76
86
|
}) => {
|
|
77
|
-
|
|
78
|
-
console.log(data, "data==");
|
|
79
87
|
// State to manage initials for images that fail to load
|
|
80
88
|
const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
|
|
81
89
|
{}
|
|
@@ -177,14 +185,37 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
177
185
|
</div>
|
|
178
186
|
</div>
|
|
179
187
|
|
|
180
|
-
{/* Object identifier in top-right corner */}
|
|
181
|
-
{item[objectNameKey] && (
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
{/* Object identifier with revision in top-right corner */}
|
|
189
|
+
{(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (
|
|
190
|
+
<>
|
|
191
|
+
{objectChipRender ? (
|
|
192
|
+
objectChipRender({
|
|
193
|
+
objectName: item[objectNameKey],
|
|
194
|
+
revision: item[revisionKey],
|
|
195
|
+
objectTypeIcon: item[objectTypeIconKey],
|
|
196
|
+
item: item
|
|
197
|
+
})
|
|
198
|
+
) : (
|
|
199
|
+
<div
|
|
200
|
+
className={`message-card-item-name ${objectNameClassName || ""}`}
|
|
201
|
+
style={objectNameStyle}
|
|
202
|
+
>
|
|
203
|
+
{item[objectTypeIconKey] && (
|
|
204
|
+
<span className="object-type-icon" style={{ marginRight: '6px' }}>
|
|
205
|
+
{item[objectTypeIconKey]}
|
|
206
|
+
</span>
|
|
207
|
+
)}
|
|
208
|
+
{item[objectNameKey] && (
|
|
209
|
+
<span className="object-name-text">{item[objectNameKey]}</span>
|
|
210
|
+
)}
|
|
211
|
+
{item[revisionKey] && (
|
|
212
|
+
<span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
|
|
213
|
+
{item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
|
|
214
|
+
</span>
|
|
215
|
+
)}
|
|
216
|
+
</div>
|
|
217
|
+
)}
|
|
218
|
+
</>
|
|
188
219
|
)}
|
|
189
220
|
</div>
|
|
190
221
|
<div
|