react-mention-input
Version:
A React component for input with @mention functionality.
73 lines (72 loc) • 6.69 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useState } from "react";
import "./ShowMessageCard.css";
export var ShowMessageCard = function (_a) {
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
_g = _a.objectNameKey, // Default key for attached image
objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
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;
console.log(data, "data==");
// State to manage initials for images that fail to load
var _h = useState({}), initialsState = _h[0], setInitialsState = _h[1];
// Handle image load failure
var handleImageError = function (id) {
setInitialsState(function (prevState) {
var _a;
return (__assign(__assign({}, prevState), (_a = {}, _a[id] = true, _a)));
});
};
// Helper function to generate initials from the name
var getInitials = function (name) {
var nameParts = name.split(" ");
var initials = nameParts
.map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ""; }) // Take the first letter of each part
.slice(0, 2) // Limit to 2 letters
.join("");
return initials;
};
// Helper function to extract hashtags and mentions from text
var extractTagsAndMentions = function (text) {
var plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
var hashtags = plainText.match(/#[\w]+/g) || [];
var mentions = plainText.match(/@[\w\s-]+/g) || [];
return {
hashtags: Array.from(new Set(hashtags)), // Remove duplicates
mentions: Array.from(new Set(mentions.map(function (mention) { return mention.trim(); }))) // Remove duplicates and trim
};
};
return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
if (renderItem !== undefined) {
// Use custom render function if provided
return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
}
var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
// Extract tags and mentions from the comment
var _a = extractTagsAndMentions(item[commentKey] || ''), hashtags = _a.hashtags, mentions = _a.mentions;
return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ""), style: cardStyle },
React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
React.createElement("div", { className: "message-card-header-left" },
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); } })),
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
item[objectNameKey] && (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle }, item[objectNameKey]))),
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
(item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
(hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))))));
})));
};