react-mention-input 1.0.13 → 1.0.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.
- package/README.md +65 -8
- package/dist/ShowMessageCard.css +68 -39
- package/dist/ShowMessageCard.d.ts +21 -6
- package/dist/ShowMessageCard.js +30 -11
- package/package.json +1 -1
- package/src/ShowMessageCard.css +68 -39
- package/src/ShowMessageCard.tsx +129 -34
package/README.md
CHANGED
|
@@ -74,13 +74,20 @@ A customizable card component for displaying messages with user details.
|
|
|
74
74
|
|
|
75
75
|
#### Props
|
|
76
76
|
|
|
77
|
-
| Prop Name | Type
|
|
78
|
-
|
|
79
|
-
| `data` | `MessageCardProps[]
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
77
|
+
| Prop Name | Type | Description |
|
|
78
|
+
|------------------|-------------------------------------|-------------|
|
|
79
|
+
| `data` | `MessageCardProps[]` | Array of message card objects to display. |
|
|
80
|
+
| `nameKey` | `string` | Custom key for the user name. |
|
|
81
|
+
| `dateKey` | `string` | Custom key for the date. |
|
|
82
|
+
| `commentKey` | `string` | Custom key for the comment. |
|
|
83
|
+
| `imgSrcKey` | `string` | Custom key for the image source. |
|
|
84
|
+
| `containerClassName` | `string` | Custom class name for the outer container. |
|
|
85
|
+
| `containerStyle` | `CSSProperties` | Inline styles for the outer container. |
|
|
86
|
+
| `cardClassName` | `string` | Custom class name for the card. |
|
|
87
|
+
| `cardStyle` | `CSSProperties` | Inline styles for the card. |
|
|
88
|
+
| `imgClassName` | `string` | Custom class name for the image or initials. |
|
|
89
|
+
| `imgStyle` | `CSSProperties` | Inline styles for the image or initials. |
|
|
90
|
+
| `renderItem` | `(element: MessageCardProps) => ReactNode` | Custom render function for card content. |
|
|
84
91
|
|
|
85
92
|
**`MessageCardProps` Interface**:
|
|
86
93
|
```typescript
|
|
@@ -95,6 +102,7 @@ interface MessageCardProps {
|
|
|
95
102
|
|
|
96
103
|
#### Example Usage
|
|
97
104
|
|
|
105
|
+
##### Default Rendering
|
|
98
106
|
```tsx
|
|
99
107
|
import React from 'react';
|
|
100
108
|
import {ShowMessageCard} from 'react-mention-input';
|
|
@@ -112,7 +120,7 @@ const messageData = [
|
|
|
112
120
|
name: 'Jane Smith',
|
|
113
121
|
date: '19-11-24',
|
|
114
122
|
comment: 'Another comment.',
|
|
115
|
-
imgSrc: '
|
|
123
|
+
imgSrc: ''
|
|
116
124
|
}
|
|
117
125
|
];
|
|
118
126
|
|
|
@@ -130,5 +138,54 @@ function App() {
|
|
|
130
138
|
|
|
131
139
|
export default App;
|
|
132
140
|
```
|
|
141
|
+
|
|
142
|
+
##### Custom Keys and Styling
|
|
143
|
+
```tsx
|
|
144
|
+
<ShowMessageCard
|
|
145
|
+
data={messageData}
|
|
146
|
+
nameKey="user_name"
|
|
147
|
+
dateKey="custom_date"
|
|
148
|
+
commentKey="custom_comment"
|
|
149
|
+
imgSrcKey="custom_imgSrc"
|
|
150
|
+
containerClassName="custom-container"
|
|
151
|
+
containerStyle={{ margin: '20px' }}
|
|
152
|
+
cardClassName="custom-card"
|
|
153
|
+
cardStyle={{ border: '2px solid #007BFF' }}
|
|
154
|
+
imgClassName="custom-image"
|
|
155
|
+
imgStyle={{ borderRadius: '50%' }}
|
|
156
|
+
nameClassName="custom-name"
|
|
157
|
+
nameStyle={{ fontSize: '20px', color: '#333' }}
|
|
158
|
+
dateClassName="custom-date"
|
|
159
|
+
dateStyle={{ fontSize: '14px', color: '#777' }}
|
|
160
|
+
commentClassName="custom-comment"
|
|
161
|
+
commentStyle={{ fontStyle: 'italic' }}
|
|
162
|
+
/>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
##### Custom Rendering
|
|
166
|
+
```tsx
|
|
167
|
+
<ShowMessageCard
|
|
168
|
+
data={messageData}
|
|
169
|
+
renderItem={(element) => (
|
|
170
|
+
<>
|
|
171
|
+
<div style={{ fontWeight: 'bold', fontSize: '18px' }}>{element.user_name}</div>
|
|
172
|
+
<div style={{ color: '#777', fontSize: '14px' }}>{element.custom_date}</div>
|
|
173
|
+
<div style={{ marginTop: '8px', fontStyle: 'italic' }}>{element.custom_comment}</div>
|
|
174
|
+
</>
|
|
175
|
+
)}
|
|
176
|
+
/>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
### Features
|
|
182
|
+
|
|
183
|
+
1. **Dynamic Keys**: Use custom keys for fields like name, date, comment, and image.
|
|
184
|
+
2. **Custom Styling**: Pass CSS classes or inline styles for full customization.
|
|
185
|
+
3. **Custom Rendering**: Override default rendering with a custom `renderItem` function.
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
133
189
|
### License
|
|
190
|
+
|
|
134
191
|
This project is licensed under the ISC License.
|
package/dist/ShowMessageCard.css
CHANGED
|
@@ -1,40 +1,69 @@
|
|
|
1
|
+
.message-card-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 16px; /* Space between cards */
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.message-card {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
border: 1px solid #ccc;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
padding: 16px;
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
transition: box-shadow 0.2s;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.message-card:hover {
|
|
18
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.message-card-header {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
margin-bottom: 8px; /* Space between header and body */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.message-card-img,
|
|
28
|
+
.message-card-initials {
|
|
29
|
+
width: 48px;
|
|
30
|
+
height: 48px;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
color: #fff;
|
|
38
|
+
background-color: #007bff;
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
margin-right: 16px;
|
|
41
|
+
}
|
|
42
|
+
.message-card-info {
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.message-card-name {
|
|
48
|
+
margin: 0;
|
|
49
|
+
font-size: 18px;
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.message-card-date {
|
|
55
|
+
margin: 0;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
color: #888;
|
|
58
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.message-card-body {
|
|
62
|
+
margin-top: 8px; /* Space between header and comment */
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.message-card-comment {
|
|
66
|
+
margin: 0;
|
|
67
|
+
font-size: 16px;
|
|
68
|
+
line-height: 1.5; /* Optimal line height for readability */
|
|
69
|
+
}
|
|
@@ -1,18 +1,33 @@
|
|
|
1
|
-
import React, { CSSProperties } from 'react';
|
|
1
|
+
import React, { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import './ShowMessageCard.css';
|
|
3
3
|
interface MessageCardProps {
|
|
4
|
-
|
|
5
|
-
name: string;
|
|
6
|
-
date: string;
|
|
7
|
-
comment: string;
|
|
8
|
-
imgSrc: string;
|
|
4
|
+
[key: string]: any;
|
|
9
5
|
}
|
|
10
6
|
interface ShowMessageCardProps {
|
|
11
7
|
data: MessageCardProps[];
|
|
8
|
+
nameKey?: string;
|
|
9
|
+
dateKey?: string;
|
|
10
|
+
commentKey?: string;
|
|
11
|
+
imgSrcKey?: string;
|
|
12
|
+
containerClassName?: string;
|
|
13
|
+
containerStyle?: CSSProperties;
|
|
12
14
|
cardClassName?: string;
|
|
13
15
|
cardStyle?: CSSProperties;
|
|
16
|
+
headerClassName?: string;
|
|
17
|
+
headerStyle?: CSSProperties;
|
|
14
18
|
imgClassName?: string;
|
|
15
19
|
imgStyle?: CSSProperties;
|
|
20
|
+
infoClassName?: string;
|
|
21
|
+
infoStyle?: CSSProperties;
|
|
22
|
+
nameClassName?: string;
|
|
23
|
+
nameStyle?: CSSProperties;
|
|
24
|
+
dateClassName?: string;
|
|
25
|
+
dateStyle?: CSSProperties;
|
|
26
|
+
bodyClassName?: string;
|
|
27
|
+
bodyStyle?: CSSProperties;
|
|
28
|
+
commentClassName?: string;
|
|
29
|
+
commentStyle?: CSSProperties;
|
|
30
|
+
renderItem?: (element: MessageCardProps) => ReactNode;
|
|
16
31
|
}
|
|
17
32
|
export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
|
|
18
33
|
export {};
|
package/dist/ShowMessageCard.js
CHANGED
|
@@ -1,13 +1,32 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './ShowMessageCard.css';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import './ShowMessageCard.css';
|
|
3
3
|
export var ShowMessageCard = function (_a) {
|
|
4
|
-
var data = _a.data, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
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 // Custom render function
|
|
5
|
+
;
|
|
6
|
+
var getInitials = function (name) {
|
|
7
|
+
var nameParts = name.split(' ');
|
|
8
|
+
var initials = nameParts
|
|
9
|
+
.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
|
+
.slice(0, 2) // Limit to 2 letters
|
|
11
|
+
.join('');
|
|
12
|
+
return initials;
|
|
13
|
+
};
|
|
14
|
+
return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ''), style: containerStyle }, data.map(function (item, index) {
|
|
15
|
+
if (renderItem) {
|
|
16
|
+
// Use custom render function if provided
|
|
17
|
+
return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
|
|
18
|
+
}
|
|
19
|
+
var _a = useState(false), showInitials = _a[0], setShowInitials = _a[1];
|
|
20
|
+
var handleImageError = function () {
|
|
21
|
+
setShowInitials(true);
|
|
22
|
+
};
|
|
23
|
+
return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ''), style: cardStyle },
|
|
24
|
+
React.createElement("div", { className: "message-card-header ".concat(headerClassName || ''), style: headerStyle },
|
|
25
|
+
showInitials || !item[imgSrcKey] ? (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: handleImageError })),
|
|
26
|
+
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ''), style: infoStyle },
|
|
27
|
+
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ''), style: nameStyle }, item[nameKey]),
|
|
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]))));
|
|
31
|
+
})));
|
|
13
32
|
};
|
package/package.json
CHANGED
package/src/ShowMessageCard.css
CHANGED
|
@@ -1,40 +1,69 @@
|
|
|
1
|
+
.message-card-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 16px; /* Space between cards */
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.message-card {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
border: 1px solid #ccc;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
padding: 16px;
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
transition: box-shadow 0.2s;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.message-card:hover {
|
|
18
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.message-card-header {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
margin-bottom: 8px; /* Space between header and body */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.message-card-img,
|
|
28
|
+
.message-card-initials {
|
|
29
|
+
width: 48px;
|
|
30
|
+
height: 48px;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
color: #fff;
|
|
38
|
+
background-color: #007bff;
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
margin-right: 16px;
|
|
41
|
+
}
|
|
42
|
+
.message-card-info {
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.message-card-name {
|
|
48
|
+
margin: 0;
|
|
49
|
+
font-size: 18px;
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.message-card-date {
|
|
55
|
+
margin: 0;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
color: #888;
|
|
58
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.message-card-body {
|
|
62
|
+
margin-top: 8px; /* Space between header and comment */
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.message-card-comment {
|
|
66
|
+
margin: 0;
|
|
67
|
+
font-size: 16px;
|
|
68
|
+
line-height: 1.5; /* Optimal line height for readability */
|
|
69
|
+
}
|
package/src/ShowMessageCard.tsx
CHANGED
|
@@ -1,55 +1,150 @@
|
|
|
1
|
-
import React, { CSSProperties } from 'react';
|
|
2
|
-
import './ShowMessageCard.css';
|
|
1
|
+
import React, { CSSProperties, useState, ReactNode } from 'react';
|
|
2
|
+
import './ShowMessageCard.css';
|
|
3
3
|
|
|
4
4
|
interface MessageCardProps {
|
|
5
|
-
|
|
6
|
-
name: string;
|
|
7
|
-
date: string;
|
|
8
|
-
comment: string;
|
|
9
|
-
imgSrc: string;
|
|
5
|
+
[key: string]: any; // Support dynamic keys
|
|
10
6
|
}
|
|
11
7
|
|
|
12
8
|
interface ShowMessageCardProps {
|
|
13
9
|
data: MessageCardProps[];
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
nameKey?: string; // Custom key for name
|
|
11
|
+
dateKey?: string; // Custom key for date
|
|
12
|
+
commentKey?: string; // Custom key for comment
|
|
13
|
+
imgSrcKey?: string; // Custom key for image source
|
|
14
|
+
containerClassName?: string; // Class for the outermost container
|
|
15
|
+
containerStyle?: CSSProperties; // Style for the outermost container
|
|
16
|
+
cardClassName?: string; // Class for the card
|
|
17
|
+
cardStyle?: CSSProperties; // Style for the card
|
|
18
|
+
headerClassName?: string; // Class for the card header
|
|
19
|
+
headerStyle?: CSSProperties; // Style for the card header
|
|
20
|
+
imgClassName?: string; // Class for the image
|
|
21
|
+
imgStyle?: CSSProperties; // Style for the image
|
|
22
|
+
infoClassName?: string; // Class for the user info container
|
|
23
|
+
infoStyle?: CSSProperties; // Style for the user info container
|
|
24
|
+
nameClassName?: string; // Class for the user name
|
|
25
|
+
nameStyle?: CSSProperties; // Style for the user name
|
|
26
|
+
dateClassName?: string; // Class for the date
|
|
27
|
+
dateStyle?: CSSProperties; // Style for the date
|
|
28
|
+
bodyClassName?: string; // Class for the card body
|
|
29
|
+
bodyStyle?: CSSProperties; // Style for the card body
|
|
30
|
+
commentClassName?: string; // Class for the comment text
|
|
31
|
+
commentStyle?: CSSProperties; // Style for the comment text
|
|
32
|
+
renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
|
|
18
33
|
}
|
|
19
34
|
|
|
20
35
|
export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
21
36
|
data,
|
|
37
|
+
nameKey = 'name',
|
|
38
|
+
dateKey = 'date',
|
|
39
|
+
commentKey = 'comment',
|
|
40
|
+
imgSrcKey = 'imgSrc',
|
|
41
|
+
containerClassName,
|
|
42
|
+
containerStyle,
|
|
22
43
|
cardClassName,
|
|
23
44
|
cardStyle,
|
|
45
|
+
headerClassName,
|
|
46
|
+
headerStyle,
|
|
24
47
|
imgClassName,
|
|
25
|
-
imgStyle
|
|
48
|
+
imgStyle,
|
|
49
|
+
infoClassName,
|
|
50
|
+
infoStyle,
|
|
51
|
+
nameClassName,
|
|
52
|
+
nameStyle,
|
|
53
|
+
dateClassName,
|
|
54
|
+
dateStyle,
|
|
55
|
+
bodyClassName,
|
|
56
|
+
bodyStyle,
|
|
57
|
+
commentClassName,
|
|
58
|
+
commentStyle,
|
|
59
|
+
renderItem // Custom render function
|
|
26
60
|
}) => {
|
|
61
|
+
const getInitials = (name: string) => {
|
|
62
|
+
const nameParts = name.split(' ');
|
|
63
|
+
const initials = nameParts
|
|
64
|
+
.map((part) => part[0]?.toUpperCase() || '') // Take the first letter of each part
|
|
65
|
+
.slice(0, 2) // Limit to 2 letters
|
|
66
|
+
.join('');
|
|
67
|
+
return initials;
|
|
68
|
+
};
|
|
69
|
+
|
|
27
70
|
return (
|
|
28
|
-
<div className=
|
|
29
|
-
{data.map((item) =>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
71
|
+
<div className={`message-card-container ${containerClassName || ''}`} style={containerStyle}>
|
|
72
|
+
{data.map((item, index) => {
|
|
73
|
+
if (renderItem) {
|
|
74
|
+
// Use custom render function if provided
|
|
75
|
+
return (
|
|
76
|
+
<React.Fragment key={item.id || index}>
|
|
77
|
+
{renderItem(item)}
|
|
78
|
+
</React.Fragment>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const [showInitials, setShowInitials] = useState(false);
|
|
83
|
+
|
|
84
|
+
const handleImageError = () => {
|
|
85
|
+
setShowInitials(true);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<div
|
|
90
|
+
key={item.id || index}
|
|
91
|
+
className={`message-card ${cardClassName || ''}`}
|
|
92
|
+
style={cardStyle}
|
|
93
|
+
>
|
|
94
|
+
<div
|
|
95
|
+
className={`message-card-header ${headerClassName || ''}`}
|
|
96
|
+
style={headerStyle}
|
|
97
|
+
>
|
|
98
|
+
{showInitials || !item[imgSrcKey] ? (
|
|
99
|
+
<div
|
|
100
|
+
className={`message-card-initials ${imgClassName || ''}`}
|
|
101
|
+
style={imgStyle}
|
|
102
|
+
>
|
|
103
|
+
{getInitials(item[nameKey])}
|
|
104
|
+
</div>
|
|
105
|
+
) : (
|
|
106
|
+
<img
|
|
107
|
+
src={item[imgSrcKey]}
|
|
108
|
+
alt={item[nameKey]}
|
|
109
|
+
className={`message-card-img ${imgClassName || ''}`}
|
|
110
|
+
style={imgStyle}
|
|
111
|
+
onError={handleImageError}
|
|
112
|
+
/>
|
|
113
|
+
)}
|
|
114
|
+
<div
|
|
115
|
+
className={`message-card-info ${infoClassName || ''}`}
|
|
116
|
+
style={infoStyle}
|
|
117
|
+
>
|
|
118
|
+
<h3
|
|
119
|
+
className={`message-card-name ${nameClassName || ''}`}
|
|
120
|
+
style={nameStyle}
|
|
121
|
+
>
|
|
122
|
+
{item[nameKey]}
|
|
123
|
+
</h3>
|
|
124
|
+
<p
|
|
125
|
+
className={`message-card-date ${dateClassName || ''}`}
|
|
126
|
+
style={dateStyle}
|
|
127
|
+
>
|
|
128
|
+
{item[dateKey]}
|
|
129
|
+
</p>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div
|
|
133
|
+
className={`message-card-body ${bodyClassName || ''}`}
|
|
134
|
+
style={bodyStyle}
|
|
135
|
+
>
|
|
136
|
+
<p
|
|
137
|
+
className={`message-card-comment ${commentClassName || ''}`}
|
|
138
|
+
style={commentStyle}
|
|
139
|
+
>
|
|
140
|
+
{item[commentKey]}
|
|
141
|
+
</p>
|
|
45
142
|
</div>
|
|
46
143
|
</div>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
))}
|
|
144
|
+
);
|
|
145
|
+
})}
|
|
52
146
|
</div>
|
|
53
147
|
);
|
|
54
148
|
};
|
|
55
149
|
|
|
150
|
+
|