react-mention-input 1.1.19 → 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 +63 -1
- package/dist/ShowMessageCard.css +6 -0
- package/dist/ShowMessageCard.d.ts +7 -0
- package/dist/ShowMessageCard.js +13 -4
- package/package.json +1 -1
- package/src/ShowMessageCard.css +6 -0
- package/src/ShowMessageCard.tsx +33 -13
package/demo.tsx
CHANGED
|
@@ -10,6 +10,7 @@ const Demo: React.FC = () => {
|
|
|
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
11
|
objectName: '26may_item001',
|
|
12
12
|
revision: 'A',
|
|
13
|
+
object_type_icon: '📄',
|
|
13
14
|
},
|
|
14
15
|
{
|
|
15
16
|
id: 2,
|
|
@@ -18,6 +19,7 @@ const Demo: React.FC = () => {
|
|
|
18
19
|
comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
|
|
19
20
|
objectName: '26may_item001',
|
|
20
21
|
revision: 'A',
|
|
22
|
+
object_type_icon: '📋',
|
|
21
23
|
}
|
|
22
24
|
]);
|
|
23
25
|
|
|
@@ -52,6 +54,7 @@ const Demo: React.FC = () => {
|
|
|
52
54
|
mentions: messageData.userSelectListName,
|
|
53
55
|
objectName: 'new_item001', // You can customize this or make it dynamic
|
|
54
56
|
revision: 'A', // You can customize this or make it dynamic
|
|
57
|
+
object_type_icon: '✨', // You can customize this or make it dynamic
|
|
55
58
|
};
|
|
56
59
|
|
|
57
60
|
setMessages([...messages, newMessage]);
|
|
@@ -68,6 +71,8 @@ const Demo: React.FC = () => {
|
|
|
68
71
|
<li>Type <strong>#</strong> to create hashtags (e.g., #urgent #review #milestone)</li>
|
|
69
72
|
<li>Links are automatically detected and highlighted</li>
|
|
70
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>
|
|
71
76
|
</ul>
|
|
72
77
|
</div>
|
|
73
78
|
|
|
@@ -81,10 +86,35 @@ const Demo: React.FC = () => {
|
|
|
81
86
|
</div>
|
|
82
87
|
|
|
83
88
|
<div>
|
|
84
|
-
<h3>Messages:</h3>
|
|
89
|
+
<h3>Messages (Default Object Chip):</h3>
|
|
85
90
|
<ShowMessageCard data={messages} />
|
|
86
91
|
</div>
|
|
87
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
|
+
|
|
88
118
|
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
|
|
89
119
|
<h4>Example Usage:</h4>
|
|
90
120
|
<p>Try typing these examples:</p>
|
|
@@ -93,6 +123,38 @@ const Demo: React.FC = () => {
|
|
|
93
123
|
<li>"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help"</li>
|
|
94
124
|
<li>"Meeting scheduled for tomorrow #meeting #planning"</li>
|
|
95
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>
|
|
96
158
|
</div>
|
|
97
159
|
</div>
|
|
98
160
|
);
|
package/dist/ShowMessageCard.css
CHANGED
|
@@ -12,6 +12,7 @@ interface ShowMessageCardProps {
|
|
|
12
12
|
imageUrlKey?: string;
|
|
13
13
|
objectNameKey?: string;
|
|
14
14
|
revisionKey?: string;
|
|
15
|
+
objectTypeIconKey?: string;
|
|
15
16
|
containerClassName?: string;
|
|
16
17
|
containerStyle?: CSSProperties;
|
|
17
18
|
cardClassName?: string;
|
|
@@ -38,6 +39,12 @@ interface ShowMessageCardProps {
|
|
|
38
39
|
objectNameStyle?: CSSProperties;
|
|
39
40
|
revisionClassName?: string;
|
|
40
41
|
revisionStyle?: CSSProperties;
|
|
42
|
+
objectChipRender?: (objectData: {
|
|
43
|
+
objectName?: string;
|
|
44
|
+
revision?: string;
|
|
45
|
+
objectTypeIcon?: string;
|
|
46
|
+
item: MessageCardProps;
|
|
47
|
+
}) => ReactNode;
|
|
41
48
|
renderItem?: (element: MessageCardProps) => ReactNode;
|
|
42
49
|
}
|
|
43
50
|
export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
|
package/dist/ShowMessageCard.js
CHANGED
|
@@ -17,9 +17,12 @@ export var ShowMessageCard = function (_a) {
|
|
|
17
17
|
objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
|
|
18
18
|
_h = _a.revisionKey, // Default key for object identifier
|
|
19
19
|
revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
|
|
20
|
-
|
|
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;
|
|
21
24
|
// State to manage initials for images that fail to load
|
|
22
|
-
var
|
|
25
|
+
var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
|
|
23
26
|
// Handle image load failure
|
|
24
27
|
var handleImageError = function (id) {
|
|
25
28
|
setInitialsState(function (prevState) {
|
|
@@ -61,9 +64,15 @@ export var ShowMessageCard = function (_a) {
|
|
|
61
64
|
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
|
|
62
65
|
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
|
|
63
66
|
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
|
|
64
|
-
(item[objectNameKey] || item[revisionKey]) && (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])),
|
|
65
74
|
item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
|
|
66
|
-
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))),
|
|
75
|
+
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))),
|
|
67
76
|
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
|
|
68
77
|
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
|
|
69
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
package/src/ShowMessageCard.tsx
CHANGED
|
@@ -14,6 +14,7 @@ interface ShowMessageCardProps {
|
|
|
14
14
|
imageUrlKey?: string; // Custom key for attached image URL
|
|
15
15
|
objectNameKey?: string; // Custom key for object identifier (top-right)
|
|
16
16
|
revisionKey?: string; // Custom key for revision (top-right)
|
|
17
|
+
objectTypeIconKey?: string; // Custom key for object type icon (top-right)
|
|
17
18
|
containerClassName?: string; // Class for the outermost container
|
|
18
19
|
containerStyle?: CSSProperties; // Style for the outermost container
|
|
19
20
|
cardClassName?: string; // Class for the card
|
|
@@ -40,6 +41,7 @@ interface ShowMessageCardProps {
|
|
|
40
41
|
objectNameStyle?: CSSProperties; // Style for the object name (top-right)
|
|
41
42
|
revisionClassName?: string; // Class for the revision (top-right)
|
|
42
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
|
|
43
45
|
renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
|
|
44
46
|
}
|
|
45
47
|
|
|
@@ -52,6 +54,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
52
54
|
imageUrlKey = "imageUrl", // Default key for attached image
|
|
53
55
|
objectNameKey = "objectName", // Default key for object identifier
|
|
54
56
|
revisionKey = "revision", // Default key for revision
|
|
57
|
+
objectTypeIconKey = "object_type_icon", // Default key for object type icon
|
|
55
58
|
containerClassName,
|
|
56
59
|
containerStyle,
|
|
57
60
|
cardClassName,
|
|
@@ -78,6 +81,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
78
81
|
objectNameStyle,
|
|
79
82
|
revisionClassName,
|
|
80
83
|
revisionStyle,
|
|
84
|
+
objectChipRender, // Custom render function for object chip
|
|
81
85
|
renderItem, // Custom render function
|
|
82
86
|
}) => {
|
|
83
87
|
// State to manage initials for images that fail to load
|
|
@@ -182,20 +186,36 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
182
186
|
</div>
|
|
183
187
|
|
|
184
188
|
{/* Object identifier with revision in top-right corner */}
|
|
185
|
-
{(item[objectNameKey] || item[revisionKey]) && (
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
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>
|
|
192
217
|
)}
|
|
193
|
-
|
|
194
|
-
<span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
|
|
195
|
-
{item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
|
|
196
|
-
</span>
|
|
197
|
-
)}
|
|
198
|
-
</div>
|
|
218
|
+
</>
|
|
199
219
|
)}
|
|
200
220
|
</div>
|
|
201
221
|
<div
|