react-mention-input 1.1.18 → 1.1.19

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/demo.tsx +6 -3
  2. package/dist/ShowMessageCard.css +13 -0
  3. package/dist/ShowMessageCard.d.ts +3 -0
  4. package/dist/ShowMessageCard.js +7 -4
  5. package/package.json +1 -1
  6. package/src/ShowMessageCard.css +13 -0
  7. package/src/ShowMessageCard.tsx +16 -5
package/demo.tsx CHANGED
@@ -8,14 +8,16 @@ 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 (A)',
11
+ objectName: '26may_item001',
12
+ revision: 'A',
12
13
  },
13
14
  {
14
15
  id: 2,
15
16
  name: 'Mike Johnson',
16
17
  date: '1 day ago',
17
18
  comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
18
- objectName: '26may_item001 (A)',
19
+ objectName: '26may_item001',
20
+ revision: 'A',
19
21
  }
20
22
  ]);
21
23
 
@@ -48,7 +50,8 @@ const Demo: React.FC = () => {
48
50
  imageUrl: messageData.imageUrl,
49
51
  tags: messageData.tags,
50
52
  mentions: messageData.userSelectListName,
51
- objectName: 'new_item001 (A)', // You can customize this or make it dynamic
53
+ objectName: 'new_item001', // You can customize this or make it dynamic
54
+ revision: 'A', // You can customize this or make it dynamic
52
55
  };
53
56
 
54
57
  setMessages([...messages, newMessage]);
package/dist/ShowMessageCard.css CHANGED
@@ -38,6 +38,19 @@
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-name-text {
47
+ font-weight: 600;
48
+ }
49
+
50
+ .revision-text {
51
+ font-weight: 400;
52
+ color: #888;
53
+ margin-left: 4px;
41
54
  }
42
55
 
43
56
  .message-card-img,
package/dist/ShowMessageCard.d.ts CHANGED
@@ -11,6 +11,7 @@ interface ShowMessageCardProps {
11
11
  imgSrcKey?: string;
12
12
  imageUrlKey?: string;
13
13
  objectNameKey?: string;
14
+ revisionKey?: string;
14
15
  containerClassName?: string;
15
16
  containerStyle?: CSSProperties;
16
17
  cardClassName?: string;
@@ -35,6 +36,8 @@ interface ShowMessageCardProps {
35
36
  attachedImageContainerStyle?: CSSProperties;
36
37
  objectNameClassName?: string;
37
38
  objectNameStyle?: CSSProperties;
39
+ revisionClassName?: string;
40
+ revisionStyle?: CSSProperties;
38
41
  renderItem?: (element: MessageCardProps) => ReactNode;
39
42
  }
40
43
  export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
package/dist/ShowMessageCard.js CHANGED
@@ -15,10 +15,11 @@ 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
- 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, renderItem = _a.renderItem;
19
- console.log(data, "data==");
18
+ _h = _a.revisionKey, // Default key for object identifier
19
+ revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
20
+ 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, renderItem = _a.renderItem;
20
21
  // State to manage initials for images that fail to load
21
- var _h = useState({}), initialsState = _h[0], setInitialsState = _h[1];
22
+ var _j = useState({}), initialsState = _j[0], setInitialsState = _j[1];
22
23
  // Handle image load failure
23
24
  var handleImageError = function (id) {
24
25
  setInitialsState(function (prevState) {
@@ -60,7 +61,9 @@ export var ShowMessageCard = function (_a) {
60
61
  React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
61
62
  React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
62
63
  React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
63
- item[objectNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle }, item[objectNameKey]))),
64
+ (item[objectNameKey] || item[revisionKey]) && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
65
+ 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], ")")))))),
64
67
  React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
65
68
  React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
66
69
  (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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.18",
3
+ "version": "1.1.19",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/ShowMessageCard.css CHANGED
@@ -38,6 +38,19 @@
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-name-text {
47
+ font-weight: 600;
48
+ }
49
+
50
+ .revision-text {
51
+ font-weight: 400;
52
+ color: #888;
53
+ margin-left: 4px;
41
54
  }
42
55
 
43
56
  .message-card-img,
package/src/ShowMessageCard.tsx CHANGED
@@ -13,6 +13,7 @@ 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)
16
17
  containerClassName?: string; // Class for the outermost container
17
18
  containerStyle?: CSSProperties; // Style for the outermost container
18
19
  cardClassName?: string; // Class for the card
@@ -37,6 +38,8 @@ interface ShowMessageCardProps {
37
38
  attachedImageContainerStyle?: CSSProperties; // Style for the attached image container
38
39
  objectNameClassName?: string; // Class for the object name (top-right)
39
40
  objectNameStyle?: CSSProperties; // Style for the object name (top-right)
41
+ revisionClassName?: string; // Class for the revision (top-right)
42
+ revisionStyle?: CSSProperties; // Style for the revision (top-right)
40
43
  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
41
44
  }
42
45
 
@@ -48,6 +51,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
48
51
  imgSrcKey = "imgSrc",
49
52
  imageUrlKey = "imageUrl", // Default key for attached image
50
53
  objectNameKey = "objectName", // Default key for object identifier
54
+ revisionKey = "revision", // Default key for revision
51
55
  containerClassName,
52
56
  containerStyle,
53
57
  cardClassName,
@@ -72,10 +76,10 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
72
76
  attachedImageContainerStyle,
73
77
  objectNameClassName,
74
78
  objectNameStyle,
79
+ revisionClassName,
80
+ revisionStyle,
75
81
  renderItem, // Custom render function
76
82
  }) => {
77
-
78
- console.log(data, "data==");
79
83
  // State to manage initials for images that fail to load
80
84
  const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
81
85
  {}
@@ -177,13 +181,20 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
177
181
  </div>
178
182
  </div>
179
183
 
180
- {/* Object identifier in top-right corner */}
181
- {item[objectNameKey] && (
184
+ {/* Object identifier with revision in top-right corner */}
185
+ {(item[objectNameKey] || item[revisionKey]) && (
182
186
  <div
183
187
  className={`message-card-item-name ${objectNameClassName || ""}`}
184
188
  style={objectNameStyle}
185
189
  >
186
- {item[objectNameKey]}
190
+ {item[objectNameKey] && (
191
+ <span className="object-name-text">{item[objectNameKey]}</span>
192
+ )}
193
+ {item[revisionKey] && (
194
+ <span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
195
+ {item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
196
+ </span>
197
+ )}
187
198
  </div>
188
199
  )}
189
200
  </div>