react-mention-input
Version:
A React component for input with @mention functionality.
81 lines (80 loc) • 4.31 kB
JavaScript
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 { MentionInput, ShowMessageCard } from './src';
var Demo = function () {
var _a = useState([
{
id: 1,
name: 'John Doe',
date: '2 hours ago',
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>',
objectName: '26may_item001 (A)',
},
{
id: 2,
name: 'Mike Johnson',
date: '1 day ago',
comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
objectName: '26may_item001 (A)',
}
]), messages = _a[0], setMessages = _a[1];
// Sample users for mentions
var users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' },
{ id: 3, name: 'Mike Johnson' },
{ id: 4, name: 'Sarah Wilson' },
];
var handleSendMessage = function (messageData) {
console.log('Message Data:', messageData);
console.log('Extracted Tags:', messageData.tags);
// Create a new message for display
var newMessage = {
id: Date.now(),
name: 'You',
date: new Date().toLocaleTimeString(),
comment: messageData.messageHTML,
imageUrl: messageData.imageUrl,
tags: messageData.tags,
mentions: messageData.userSelectListName,
objectName: 'new_item001 (A)', // You can customize this or make it dynamic
};
setMessages(__spreadArray(__spreadArray([], messages, true), [newMessage], false));
};
return (React.createElement("div", { style: { maxWidth: '600px', margin: '20px auto', padding: '20px' } },
React.createElement("h1", null, "React Mention Input with Hashtag Support"),
React.createElement("div", { style: { marginBottom: '20px' } },
React.createElement("h3", null, "Features:"),
React.createElement("ul", null,
React.createElement("li", null,
"Type ",
React.createElement("strong", null, "@"),
" to mention users (e.g., @John Doe)"),
React.createElement("li", null,
"Type ",
React.createElement("strong", null, "#"),
" to create hashtags (e.g., #urgent #review #milestone)"),
React.createElement("li", null, "Links are automatically detected and highlighted"),
React.createElement("li", null, "Hashtags are extracted and returned in the tags array"))),
React.createElement("div", { style: { marginBottom: '20px' } },
React.createElement(MentionInput, { users: users, placeholder: "Type a message with @mentions and #hashtags...", onSendMessage: handleSendMessage, suggestionPosition: "bottom" })),
React.createElement("div", null,
React.createElement("h3", null, "Messages:"),
React.createElement(ShowMessageCard, { data: messages })),
React.createElement("div", { style: { marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' } },
React.createElement("h4", null, "Example Usage:"),
React.createElement("p", null, "Try typing these examples:"),
React.createElement("ul", null,
React.createElement("li", null, "\"Project update complete. Ready for @John Doe review #milestone #completed\""),
React.createElement("li", null, "\"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help\""),
React.createElement("li", null, "\"Meeting scheduled for tomorrow #meeting #planning\"")))));
};
export default Demo;