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

Fix chat bubble overlap

Browse Source
This commit is contained in:
Bill 2022-03-17 12:23:20 -04:00
parent 98a2827a4a
commit 06a2fe059e
3 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/room/widgets/chat/ChatWidgetMessageView.tsx
View File

@ -1,5 +1,4 @@
import { FC, MouseEvent, useEffect, useRef, useState } from 'react'; import { FC, MouseEvent, useEffect, useRef, useState } from 'react';
import { RoomChatFormatter } from '../../../../api';
import { ChatBubbleMessage } from './common/ChatBubbleMessage'; import { ChatBubbleMessage } from './common/ChatBubbleMessage';
interface ChatWidgetMessageViewProps interface ChatWidgetMessageViewProps
@ -14,7 +13,6 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
const { chat = null, makeRoom = null, onChatClicked = null } = props; const { chat = null, makeRoom = null, onChatClicked = null } = props;
const [ isVisible, setIsVisible ] = useState(false); const [ isVisible, setIsVisible ] = useState(false);
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
const [formatted, setFormatted] = useState(null);
const onMouseDown = (event: MouseEvent<HTMLDivElement>) => onChatClicked(chat); const onMouseDown = (event: MouseEvent<HTMLDivElement>) => onChatClicked(chat);
@ -50,13 +48,11 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
chat.visible = true; chat.visible = true;
} }
if(!formatted) setFormatted(RoomChatFormatter(chat.text));
return () => return () =>
{ {
chat.elementRef = null; chat.elementRef = null;
} }
}, [ elementRef, chat, makeRoom,formatted ]); }, [ elementRef, chat, makeRoom ]);
useEffect(() => setIsVisible(chat.visible), [ chat.visible ]); useEffect(() => setIsVisible(chat.visible), [ chat.visible ]);
@ -68,8 +64,8 @@ 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" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } /> <b className="username mr-1" dangerouslySetInnerHTML={ { __html: chat.username } } />
<span className="message" dangerouslySetInnerHTML={{ __html: formatted }} /> <span className="message" dangerouslySetInnerHTML={{ __html: chat.formattedText }} />
</div> </div>
<div className="pointer"></div> <div className="pointer"></div>
</div> </div>

3
src/components/room/widgets/chat/ChatWidgetView.tsx
View File

@ -1,6 +1,6 @@
import { NitroPoint, RoomDragEvent } from '@nitrots/nitro-renderer'; import { NitroPoint, RoomDragEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage, RoomWidgetUpdateChatEvent } from '../../../../api'; import { RoomChatFormatter, RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage, RoomWidgetUpdateChatEvent } from '../../../../api';
import { UseEventDispatcherHook, UseRoomEngineEvent } from '../../../../hooks'; import { UseEventDispatcherHook, UseRoomEngineEvent } from '../../../../hooks';
import { useRoomContext } from '../../RoomContext'; import { useRoomContext } from '../../RoomContext';
import { ChatWidgetMessageView } from './ChatWidgetMessageView'; import { ChatWidgetMessageView } from './ChatWidgetMessageView';
@ -63,6 +63,7 @@ export const ChatWidgetView: FC<{}> = props =>
event.userCategory, event.userCategory,
event.roomId, event.roomId,
event.text, event.text,
RoomChatFormatter(event.text),
event.userName, event.userName,
new NitroPoint(event.userX, event.userY), new NitroPoint(event.userX, event.userY),
event.chatType, event.chatType,

1
src/components/room/widgets/chat/common/ChatBubbleMessage.ts
View File

@ -18,6 +18,7 @@ export class ChatBubbleMessage
public senderCategory: number = -1, public senderCategory: number = -1,
public roomId: number = -1, public roomId: number = -1,
public text: string = '', public text: string = '',
public formattedText: string = '',
public username: string = '', public username: string = '',
public location: INitroPoint = null, public location: INitroPoint = null,
public type: number = 0, public type: number = 0,