nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Chat mention thing

Browse Source
This commit is contained in:
MyNameIsBatman 2021-06-30 00:35:05 -03:00
parent e00dd44888
commit 0b0f877794
3 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -11,7 +11,7 @@
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title> <title>Nitro</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

12
src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
View File

@ -15,6 +15,18 @@
} }
} }
.chat-mention {
padding: 1px 5px;
font-weight: bold;
background: rgba(0, 0, 0, .2);
cursor: pointer;
border-radius: 100px;
&:hover {
color: blue;
}
}
.bubble-container { .bubble-container {
position: absolute; position: absolute;
width: fit-content; width: fit-content;

43
src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
View File

@ -1,10 +1,12 @@
import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react'; import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
import { GetSessionDataManager } from '../../../../../api';
import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types'; import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types';
export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props => export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
{ {
const { chat = null, makeRoom = null } = props; const { chat = null, makeRoom = null } = props;
const [ isVisible, setIsVisible ] = useState(false); const [ isVisible, setIsVisible ] = useState(true);
const [ messageParts, setMessageParts ] = useState<{text: string, className?: string, style?: any, onClick?: () => void}[]>(null);
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
const onClick = useCallback((event: MouseEvent) => const onClick = useCallback((event: MouseEvent) =>
@ -12,6 +14,38 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
}, []); }, []);
useEffect(() =>
{
if(messageParts) return;
const userNameMention = '@' + GetSessionDataManager().userName;
const matches = [...chat.text.matchAll(new RegExp(userNameMention + '\\b', 'gi'))];
if(matches.length > 0)
{
const prevText = chat.text.substr(0, matches[0].index);
const postText = chat.text.substring(matches[0].index + userNameMention.length, chat.text.length);
setMessageParts(
[
{ text: prevText },
{ text: userNameMention, className: 'chat-mention', onClick: () => {alert('I clicked in the mention')}},
{ text: postText }
]
);
}
else
{
setMessageParts(
[
{ text: chat.text }
]
);
}
}, [ chat ]);
useEffect(() => useEffect(() =>
{ {
const element = elementRef.current; const element = elementRef.current;
@ -62,7 +96,12 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
{ (chat.imageUrl && (chat.imageUrl !== '')) && <div className="user-image" style={ { backgroundImage: 'url(' + chat.imageUrl + ')' } } /> } { (chat.imageUrl && (chat.imageUrl !== '')) && <div className="user-image" style={ { backgroundImage: 'url(' + chat.imageUrl + ')' } } /> }
</div> </div>
<div className="chat-content"> <div className="chat-content">
<b className="username mr-1">{ chat.username }</b><span className="message"> { chat.text }</span> <b className="username mr-1">{ chat.username }</b><span className="message"> {
messageParts && messageParts.map((part, index) =>
{
return <span key={ index } className={ part.className } style={ part.style } onClick={ part.onClick }>{ part.text }</span>
})
}</span>
</div> </div>
<div className="pointer"></div> <div className="pointer"></div>
</div> </div>