50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import Styled from './styles';
|
||
|
|
import useSettings from '/imports/ui/services/settings/hooks/useSettings';
|
||
|
|
import { SETTINGS } from '/imports/ui/services/settings/enums';
|
||
|
|
import { ChatEvents } from '/imports/ui/core/enums/chat';
|
||
|
|
|
||
|
|
const ChatReplyIntention = () => {
|
||
|
|
const [username, setUsername] = useState<string>();
|
||
|
|
const [message, setMessage] = useState<string>();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handler = (e: Event) => {
|
||
|
|
if (e instanceof CustomEvent) {
|
||
|
|
setUsername(e.detail.username);
|
||
|
|
setMessage(e.detail.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener(ChatEvents.CHAT_REPLY_INTENTION, handler);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener(ChatEvents.CHAT_REPLY_INTENTION, handler);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const { animations } = useSettings(SETTINGS.APPLICATION) as {
|
||
|
|
animations: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Styled.Container $hidden={!username || !message} $animations={animations}>
|
||
|
|
<Styled.Username>{username}</Styled.Username>
|
||
|
|
<Styled.Message>{message}</Styled.Message>
|
||
|
|
<Styled.CloseBtn
|
||
|
|
onClick={() => {
|
||
|
|
setMessage(undefined);
|
||
|
|
setUsername(undefined);
|
||
|
|
}}
|
||
|
|
icon="close"
|
||
|
|
ghost
|
||
|
|
circle
|
||
|
|
color="light"
|
||
|
|
size="sm"
|
||
|
|
/>
|
||
|
|
</Styled.Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChatReplyIntention;
|