react-mention-input 1.1.23 → 1.1.24

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 (4) hide show
  1. package/dist/ShowMessageCard.d.ts +0 -1
  2. package/dist/ShowMessageCard.js +12 -18
  3. package/package.json +1 -1
  4. package/src/ShowMessageCard.tsx +34 -56
package/dist/ShowMessageCard.d.ts CHANGED
@@ -13,7 +13,6 @@ interface ShowMessageCardProps {
13
13
  objectNameKey?: string;
14
14
  revisionKey?: string;
15
15
  objectTypeIconKey?: string;
16
- relatedObjectKey?: string;
17
16
  containerClassName?: string;
18
17
  containerStyle?: CSSProperties;
19
18
  cardClassName?: string;
package/dist/ShowMessageCard.js CHANGED
@@ -28,12 +28,10 @@ export var ShowMessageCard = function (_a) {
28
28
  revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
29
29
  _j = _a.objectTypeIconKey, // Default key for revision
30
30
  objectTypeIconKey = _j === void 0 ? "object_type_icon" : _j, // Default key for object type icon
31
- _k = _a.relatedObjectKey, // Default key for object type icon
32
- relatedObjectKey = _k === void 0 ? "relatedObject" : _k, // Default key for related object
33
31
  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
34
32
  renderItem = _a.renderItem;
35
33
  // State to manage initials for images that fail to load
36
- var _l = useState({}), initialsState = _l[0], setInitialsState = _l[1];
34
+ var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
37
35
  // Handle image load failure
38
36
  var handleImageError = function (id) {
39
37
  setInitialsState(function (prevState) {
@@ -87,26 +85,22 @@ export var ShowMessageCard = function (_a) {
87
85
  showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); } })),
88
86
  React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
89
87
  React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
90
- React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
91
- (item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
92
- objectName: item[objectNameKey],
93
- revision: item[revisionKey],
94
- objectTypeIcon: item[objectTypeIconKey],
95
- item: item
96
- })) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
97
- item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
98
- item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
99
- item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))),
88
+ React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey])))),
100
89
  React.createElement("div", { className: "message-card ".concat(cardClassName || ""), style: cardStyle },
101
90
  React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
102
91
  React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
103
92
  (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
104
93
  React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
105
- (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
106
- hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
107
- mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))),
108
- item[relatedObjectKey] && (React.createElement("div", { className: "message-card-related" },
94
+ item[objectNameKey] && (React.createElement("div", { className: "message-card-related" },
109
95
  React.createElement("span", { className: "related-label" }, "Related: "),
110
- React.createElement("span", { className: "related-object-chip" }, item[relatedObjectKey])))))));
96
+ (item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
97
+ objectName: item[objectNameKey],
98
+ revision: item[revisionKey],
99
+ objectTypeIcon: item[objectTypeIconKey],
100
+ item: item
101
+ })) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
102
+ item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
103
+ item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
104
+ item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))))))));
111
105
  })));
112
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.23",
3
+ "version": "1.1.24",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/ShowMessageCard.tsx CHANGED
@@ -15,7 +15,6 @@ interface ShowMessageCardProps {
15
15
  objectNameKey?: string; // Custom key for object identifier (top-right)
16
16
  revisionKey?: string; // Custom key for revision (top-right)
17
17
  objectTypeIconKey?: string; // Custom key for object type icon (top-right)
18
- relatedObjectKey?: string; // Custom key for related object (bottom-left)
19
18
  containerClassName?: string; // Class for the outermost container
20
19
  containerStyle?: CSSProperties; // Style for the outermost container
21
20
  cardClassName?: string; // Class for the card
@@ -56,7 +55,6 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
56
55
  objectNameKey = "objectName", // Default key for object identifier
57
56
  revisionKey = "revision", // Default key for revision
58
57
  objectTypeIconKey = "object_type_icon", // Default key for object type icon
59
- relatedObjectKey = "relatedObject", // Default key for related object
60
58
  containerClassName,
61
59
  containerStyle,
62
60
  cardClassName,
@@ -199,39 +197,6 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
199
197
  </p>
200
198
  </div>
201
199
  </div>
202
-
203
- {/* Object identifier with revision in top-right corner */}
204
- {(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (
205
- <>
206
- {objectChipRender ? (
207
- objectChipRender({
208
- objectName: item[objectNameKey],
209
- revision: item[revisionKey],
210
- objectTypeIcon: item[objectTypeIconKey],
211
- item: item
212
- })
213
- ) : (
214
- <div
215
- className={`message-card-item-name ${objectNameClassName || ""}`}
216
- style={objectNameStyle}
217
- >
218
- {item[objectTypeIconKey] && (
219
- <span className="object-type-icon" style={{ marginRight: '6px' }}>
220
- {item[objectTypeIconKey]}
221
- </span>
222
- )}
223
- {item[objectNameKey] && (
224
- <span className="object-name-text">{item[objectNameKey]}</span>
225
- )}
226
- {item[revisionKey] && (
227
- <span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
228
- {item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
229
- </span>
230
- )}
231
- </div>
232
- )}
233
- </>
234
- )}
235
200
  </div>
236
201
 
237
202
  {/* Card bubble */}
@@ -264,31 +229,44 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
264
229
  </div>
265
230
  )}
266
231
 
267
- {/* Display hashtags and mentions as chips */}
268
- {(hashtags.length > 0 || mentions.length > 0) && (
269
- <div className="message-card-tags">
270
- {hashtags.map((tag, tagIndex) => (
271
- <span key={`hashtag-${tagIndex}`} className="tag-chip hashtag-chip">
272
- {tag}
273
- </span>
274
- ))}
275
- {mentions.map((mention, mentionIndex) => (
276
- <span key={`mention-${mentionIndex}`} className="tag-chip mention-chip">
277
- {mention}
278
- </span>
279
- ))}
280
- </div>
281
- )}
282
-
283
232
  {/* Display related object at bottom-left */}
284
- {item[relatedObjectKey] && (
233
+ {item[objectNameKey] && (
285
234
  <div className="message-card-related">
286
235
  <span className="related-label">Related: </span>
287
- <span className="related-object-chip">
288
- {item[relatedObjectKey]}
289
- </span>
236
+ {/* Object identifier with revision in top-right corner */}
237
+ {(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (
238
+ <>
239
+ {objectChipRender ? (
240
+ objectChipRender({
241
+ objectName: item[objectNameKey],
242
+ revision: item[revisionKey],
243
+ objectTypeIcon: item[objectTypeIconKey],
244
+ item: item
245
+ })
246
+ ) : (
247
+ <div
248
+ className={`message-card-item-name ${objectNameClassName || ""}`}
249
+ style={objectNameStyle}
250
+ >
251
+ {item[objectTypeIconKey] && (
252
+ <span className="object-type-icon" style={{ marginRight: '6px' }}>
253
+ {item[objectTypeIconKey]}
254
+ </span>
255
+ )}
256
+ {item[objectNameKey] && (
257
+ <span className="object-name-text">{item[objectNameKey]}</span>
258
+ )}
259
+ {item[revisionKey] && (
260
+ <span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
261
+ {item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
262
+ </span>
263
+ )}
264
+ </div>
265
+ )}
266
+ </>
267
+ )}
290
268
  </div>
291
- )}
269
+ )}
292
270
  </div>
293
271
  </div>
294
272
  </div>