react-mention-input 1.1.1 → 1.1.2
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/dist/ShowMessageCard.d.ts +2 -2
- package/dist/ShowMessageCard.js +37 -20
- package/package.json +1 -1
- package/src/ShowMessageCard.tsx +40 -27
package/dist/ShowMessageCard.js
CHANGED
|
@@ -1,32 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import React, { useState } from "react";
|
|
13
|
+
import "./ShowMessageCard.css";
|
|
3
14
|
export var ShowMessageCard = function (_a) {
|
|
4
|
-
var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ?
|
|
5
|
-
|
|
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;
|
|
16
|
+
// State to manage initials for images that fail to load
|
|
17
|
+
var _f = useState({}), initialsState = _f[0], setInitialsState = _f[1];
|
|
18
|
+
// Handle image load failure
|
|
19
|
+
var handleImageError = function (id) {
|
|
20
|
+
setInitialsState(function (prevState) {
|
|
21
|
+
var _a;
|
|
22
|
+
return (__assign(__assign({}, prevState), (_a = {}, _a[id] = true, _a)));
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
// Helper function to generate initials from the name
|
|
6
26
|
var getInitials = function (name) {
|
|
7
|
-
var nameParts = name.split(
|
|
27
|
+
var nameParts = name.split(" ");
|
|
8
28
|
var initials = nameParts
|
|
9
|
-
.map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ||
|
|
29
|
+
.map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; }) // Take the first letter of each part
|
|
10
30
|
.slice(0, 2) // Limit to 2 letters
|
|
11
|
-
.join(
|
|
31
|
+
.join("");
|
|
12
32
|
return initials;
|
|
13
33
|
};
|
|
14
|
-
return (React.createElement("div", { className: "message-card-container ".concat(containerClassName ||
|
|
34
|
+
return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
|
|
15
35
|
if (renderItem !== undefined) {
|
|
16
36
|
// Use custom render function if provided
|
|
17
37
|
return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
|
|
18
38
|
}
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ''), style: dateStyle }, item[dateKey]))),
|
|
29
|
-
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ''), style: bodyStyle },
|
|
30
|
-
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ''), style: commentStyle }, item[commentKey]))));
|
|
39
|
+
var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
|
|
40
|
+
return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ""), style: cardStyle },
|
|
41
|
+
React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
|
|
42
|
+
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); } })),
|
|
43
|
+
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
|
|
44
|
+
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
|
|
45
|
+
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
|
|
46
|
+
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
|
|
47
|
+
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle }, item[commentKey]))));
|
|
31
48
|
})));
|
|
32
49
|
};
|
package/package.json
CHANGED
package/src/ShowMessageCard.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { CSSProperties, useState, ReactNode } from
|
|
2
|
-
import
|
|
1
|
+
import React, { CSSProperties, useState, ReactNode } from "react";
|
|
2
|
+
import "./ShowMessageCard.css";
|
|
3
3
|
|
|
4
4
|
interface MessageCardProps {
|
|
5
5
|
[key: string]: any; // Support dynamic keys
|
|
@@ -34,10 +34,10 @@ interface ShowMessageCardProps {
|
|
|
34
34
|
|
|
35
35
|
export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
36
36
|
data,
|
|
37
|
-
nameKey =
|
|
38
|
-
dateKey =
|
|
39
|
-
commentKey =
|
|
40
|
-
imgSrcKey =
|
|
37
|
+
nameKey = "name",
|
|
38
|
+
dateKey = "date",
|
|
39
|
+
commentKey = "comment",
|
|
40
|
+
imgSrcKey = "imgSrc",
|
|
41
41
|
containerClassName,
|
|
42
42
|
containerStyle,
|
|
43
43
|
cardClassName,
|
|
@@ -56,19 +56,36 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
56
56
|
bodyStyle,
|
|
57
57
|
commentClassName,
|
|
58
58
|
commentStyle,
|
|
59
|
-
renderItem // Custom render function
|
|
59
|
+
renderItem, // Custom render function
|
|
60
60
|
}) => {
|
|
61
|
+
// State to manage initials for images that fail to load
|
|
62
|
+
const [initialsState, setInitialsState] = useState<{ [key: string]: boolean }>(
|
|
63
|
+
{}
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
// Handle image load failure
|
|
67
|
+
const handleImageError = (id: string | number) => {
|
|
68
|
+
setInitialsState((prevState) => ({
|
|
69
|
+
...prevState,
|
|
70
|
+
[id]: true, // Show initials for the specific card
|
|
71
|
+
}));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// Helper function to generate initials from the name
|
|
61
75
|
const getInitials = (name: string) => {
|
|
62
|
-
const nameParts = name.split(
|
|
76
|
+
const nameParts = name.split(" ");
|
|
63
77
|
const initials = nameParts
|
|
64
|
-
.map((part) => part[0]?.toUpperCase() ||
|
|
78
|
+
.map((part) => part[0]?.toUpperCase() || "") // Take the first letter of each part
|
|
65
79
|
.slice(0, 2) // Limit to 2 letters
|
|
66
|
-
.join(
|
|
80
|
+
.join("");
|
|
67
81
|
return initials;
|
|
68
82
|
};
|
|
69
83
|
|
|
70
84
|
return (
|
|
71
|
-
<div
|
|
85
|
+
<div
|
|
86
|
+
className={`message-card-container ${containerClassName || ""}`}
|
|
87
|
+
style={containerStyle}
|
|
88
|
+
>
|
|
72
89
|
{data.map((item, index) => {
|
|
73
90
|
if (renderItem !== undefined) {
|
|
74
91
|
// Use custom render function if provided
|
|
@@ -79,25 +96,21 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
79
96
|
);
|
|
80
97
|
}
|
|
81
98
|
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
const handleImageError = () => {
|
|
85
|
-
setShowInitials(true);
|
|
86
|
-
};
|
|
99
|
+
const showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
|
|
87
100
|
|
|
88
101
|
return (
|
|
89
102
|
<div
|
|
90
103
|
key={item.id || index}
|
|
91
|
-
className={`message-card ${cardClassName ||
|
|
104
|
+
className={`message-card ${cardClassName || ""}`}
|
|
92
105
|
style={cardStyle}
|
|
93
106
|
>
|
|
94
107
|
<div
|
|
95
|
-
className={`message-card-header ${headerClassName ||
|
|
108
|
+
className={`message-card-header ${headerClassName || ""}`}
|
|
96
109
|
style={headerStyle}
|
|
97
110
|
>
|
|
98
|
-
{showInitials
|
|
111
|
+
{showInitials ? (
|
|
99
112
|
<div
|
|
100
|
-
className={`message-card-initials ${imgClassName ||
|
|
113
|
+
className={`message-card-initials ${imgClassName || ""}`}
|
|
101
114
|
style={imgStyle}
|
|
102
115
|
>
|
|
103
116
|
{getInitials(item[nameKey])}
|
|
@@ -106,23 +119,23 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
106
119
|
<img
|
|
107
120
|
src={item[imgSrcKey]}
|
|
108
121
|
alt={item[nameKey]}
|
|
109
|
-
className={`message-card-img ${imgClassName ||
|
|
122
|
+
className={`message-card-img ${imgClassName || ""}`}
|
|
110
123
|
style={imgStyle}
|
|
111
|
-
onError={handleImageError}
|
|
124
|
+
onError={() => handleImageError(item.id || index)} // Pass card id or index
|
|
112
125
|
/>
|
|
113
126
|
)}
|
|
114
127
|
<div
|
|
115
|
-
className={`message-card-info ${infoClassName ||
|
|
128
|
+
className={`message-card-info ${infoClassName || ""}`}
|
|
116
129
|
style={infoStyle}
|
|
117
130
|
>
|
|
118
131
|
<h3
|
|
119
|
-
className={`message-card-name ${nameClassName ||
|
|
132
|
+
className={`message-card-name ${nameClassName || ""}`}
|
|
120
133
|
style={nameStyle}
|
|
121
134
|
>
|
|
122
135
|
{item[nameKey]}
|
|
123
136
|
</h3>
|
|
124
137
|
<p
|
|
125
|
-
className={`message-card-date ${dateClassName ||
|
|
138
|
+
className={`message-card-date ${dateClassName || ""}`}
|
|
126
139
|
style={dateStyle}
|
|
127
140
|
>
|
|
128
141
|
{item[dateKey]}
|
|
@@ -130,11 +143,11 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
130
143
|
</div>
|
|
131
144
|
</div>
|
|
132
145
|
<div
|
|
133
|
-
className={`message-card-body ${bodyClassName ||
|
|
146
|
+
className={`message-card-body ${bodyClassName || ""}`}
|
|
134
147
|
style={bodyStyle}
|
|
135
148
|
>
|
|
136
149
|
<p
|
|
137
|
-
className={`message-card-comment ${commentClassName ||
|
|
150
|
+
className={`message-card-comment ${commentClassName || ""}`}
|
|
138
151
|
style={commentStyle}
|
|
139
152
|
>
|
|
140
153
|
{item[commentKey]}
|