react-mention-input 1.1.13 → 1.1.14

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 +3 -0
  2. package/dist/ShowMessageCard.js +6 -3
  3. package/package.json +1 -1
  4. package/src/ShowMessageCard.tsx +21 -9
package/dist/ShowMessageCard.d.ts CHANGED
@@ -9,6 +9,7 @@ interface ShowMessageCardProps {
9
9
  dateKey?: string;
10
10
  commentKey?: string;
11
11
  imgSrcKey?: string;
12
+ imageUrlKey?: string;
12
13
  containerClassName?: string;
13
14
  containerStyle?: CSSProperties;
14
15
  cardClassName?: string;
@@ -27,6 +28,8 @@ interface ShowMessageCardProps {
27
28
  bodyStyle?: CSSProperties;
28
29
  commentClassName?: string;
29
30
  commentStyle?: CSSProperties;
31
+ attachedImageClassName?: string;
32
+ attachedImageStyle?: CSSProperties;
30
33
  renderItem?: (element: MessageCardProps) => ReactNode;
31
34
  }
32
35
  export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
package/dist/ShowMessageCard.js CHANGED
@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
12
12
  import React, { useState } from "react";
13
13
  import "./ShowMessageCard.css";
14
14
  export var ShowMessageCard = function (_a) {
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, 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, renderItem = _a.renderItem;
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
+ 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, renderItem = _a.renderItem;
16
17
  // State to manage initials for images that fail to load
17
- var _f = useState({}), initialsState = _f[0], setInitialsState = _f[1];
18
+ var _g = useState({}), initialsState = _g[0], setInitialsState = _g[1];
18
19
  // Handle image load failure
19
20
  var handleImageError = function (id) {
20
21
  setInitialsState(function (prevState) {
@@ -44,6 +45,8 @@ export var ShowMessageCard = function (_a) {
44
45
  React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
45
46
  React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
46
47
  React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
47
- React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }))));
48
+ React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
49
+ (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container" },
50
+ React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))))));
48
51
  })));
49
52
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.13",
3
+ "version": "1.1.14",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/ShowMessageCard.tsx CHANGED
@@ -11,6 +11,7 @@ interface ShowMessageCardProps {
11
11
  dateKey?: string; // Custom key for date
12
12
  commentKey?: string; // Custom key for comment
13
13
  imgSrcKey?: string; // Custom key for image source
14
+ imageUrlKey?: string; // Custom key for attached image URL
14
15
  containerClassName?: string; // Class for the outermost container
15
16
  containerStyle?: CSSProperties; // Style for the outermost container
16
17
  cardClassName?: string; // Class for the card
@@ -29,6 +30,8 @@ interface ShowMessageCardProps {
29
30
  bodyStyle?: CSSProperties; // Style for the card body
30
31
  commentClassName?: string; // Class for the comment text
31
32
  commentStyle?: CSSProperties; // Style for the comment text
33
+ attachedImageClassName?: string; // Class for the attached image
34
+ attachedImageStyle?: CSSProperties; // Style for the attached image
32
35
  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
33
36
  }
34
37
 
@@ -38,6 +41,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
38
41
  dateKey = "date",
39
42
  commentKey = "comment",
40
43
  imgSrcKey = "imgSrc",
44
+ imageUrlKey = "imageUrl", // Default key for attached image
41
45
  containerClassName,
42
46
  containerStyle,
43
47
  cardClassName,
@@ -56,6 +60,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
56
60
  bodyStyle,
57
61
  commentClassName,
58
62
  commentStyle,
63
+ attachedImageClassName,
64
+ attachedImageStyle,
59
65
  renderItem, // Custom render function
60
66
  }) => {
61
67
  // State to manage initials for images that fail to load
@@ -146,17 +152,23 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
146
152
  className={`message-card-body ${bodyClassName || ""}`}
147
153
  style={bodyStyle}
148
154
  >
149
- {/* <p
155
+ <p
150
156
  className={`message-card-comment ${commentClassName || ""}`}
151
157
  style={commentStyle}
152
- >
153
- {item[commentKey]}
154
- </p> */}
155
- <p
156
- className={`message-card-comment ${commentClassName || ""}`}
157
- style={commentStyle}
158
- dangerouslySetInnerHTML={{ __html: item[commentKey] }}
159
- ></p>
158
+ dangerouslySetInnerHTML={{ __html: item[commentKey] }}
159
+ ></p>
160
+
161
+ {/* Display attached image if available */}
162
+ {item?.[imageUrlKey] && (
163
+ <div className="message-card-attached-image-container">
164
+ <img
165
+ src={item[imageUrlKey]}
166
+ alt="Attached"
167
+ className={`message-card-attached-image ${attachedImageClassName || ""}`}
168
+ style={attachedImageStyle}
169
+ />
170
+ </div>
171
+ )}
160
172
  </div>
161
173
  </div>
162
174
  );