revite/src/components/common/messaging/Message.tsx

50 lines
2.1 KiB
TypeScript
Raw Normal View History

2021-06-20 17:09:18 -04:00
import Embed from "./embed/Embed";
2021-06-20 15:30:42 -04:00
import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort";
import Markdown from "../../markdown/Markdown";
import { Children } from "../../../types/Preact";
2021-06-20 17:09:18 -04:00
import Attachment from "./attachments/Attachment";
import { attachContextMenu } from "preact-context-menu";
import { useUser } from "../../../context/revoltjs/hooks";
import { MessageObject } from "../../../context/revoltjs/util";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
interface Props {
attachContext?: boolean
message: MessageObject
contrast?: boolean
content?: Children
head?: boolean
}
2021-06-20 17:09:18 -04:00
export default function Message({ attachContext, message, contrast, content: replacement, head }: Props) {
// TODO: Can improve re-renders here by providing a list
// TODO: of dependencies. We only need to update on u/avatar.
let user = useUser(message.author);
2021-06-20 17:09:18 -04:00
const content = message.content as string;
return (
<MessageBase id={message._id}
contrast={contrast}
2021-06-21 16:53:08 -04:00
head={head}
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
<MessageInfo>
{ head ?
<UserIcon target={user} size={36} /> :
<MessageDetail message={message} position="left" /> }
</MessageInfo>
<MessageContent>
{ head && <span className="author">
<Username user={user} />
<MessageDetail message={message} position="top" />
</span> }
{ replacement ?? <Markdown content={content} /> }
2021-06-20 17:09:18 -04:00
{ message.attachments?.map((attachment, index) =>
<Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
{ message.embeds?.map((embed, index) =>
<Embed key={index} embed={embed} />) }
</MessageContent>
</MessageBase>
)
}