react-mention-input
Version:
A React component for input with @mention functionality.
107 lines (106 loc) • 9.18 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);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
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
_h = _a.revisionKey, // Default key for object identifier
revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
_j = _a.objectTypeIconKey, // Default key for revision
objectTypeIconKey = _j === void 0 ? "object_type_icon" : _j, // Default key for object type icon
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, objectChipRender = _a.objectChipRender, // Custom render function for object chip
renderItem = _a.renderItem;
// State to manage initials for images that fail to load
var _k = useState({}), initialsState = _k[0], setInitialsState = _k[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) {
// First extract from HTML with spans
var hashtagsFromHTML = text.match(/<span[^>]*class="hashtag-highlight"[^>]*>(#[\w]+)<\/span>/g) || [];
var mentionsFromHTML = text.match(/<span[^>]*class="mention-highlight"[^>]*>(@[^<]+)<\/span>/g) || [];
// Extract the actual text content from HTML
var hashtags = hashtagsFromHTML.map(function (match) {
var textMatch = match.match(/>(#[\w]+)</);
return textMatch ? textMatch[1] : '';
}).filter(function (tag) { return tag; });
var mentions = mentionsFromHTML.map(function (match) {
var textMatch = match.match(/>(@[^<]+)</);
return textMatch ? textMatch[1].trim() : '';
}).filter(function (mention) { return mention; });
// Also check plain text for any missed items
var plainText = text.replace(/<[^>]*>/g, '');
var plainHashtags = plainText.match(/#[\w]+/g) || [];
var plainMentions = plainText.match(/@[\w\s-]+/g) || [];
return {
hashtags: Array.from(new Set(__spreadArray(__spreadArray([], hashtags, true), plainHashtags, true))), // Remove duplicates
mentions: Array.from(new Set(__spreadArray(__spreadArray([], mentions, true), plainMentions.map(function (mention) { return mention.trim(); }), true))) // 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-wrapper" },
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])))),
React.createElement("div", { className: "message-card ".concat(cardClassName || ""), style: cardStyle },
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 }))),
item[objectNameKey] && (React.createElement("div", { className: "message-card-related" },
React.createElement("span", { className: "related-label" }, "Related: "),
(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
objectName: item[objectNameKey],
revision: item[revisionKey],
objectTypeIcon: item[objectTypeIconKey],
item: item
})) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))))))));
})));
};