revite/src/components/common/messaging/attachments/MessageReply.tsx

99 lines
2.4 KiB
TypeScript
Raw Normal View History

2021-06-27 06:17:59 -04:00
import { Reply, File } from "@styled-icons/boxicons-regular";
2021-07-05 06:23:23 -04:00
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
2021-06-23 13:26:41 -04:00
import { useRenderState } from "../../../../lib/renderer/Singleton";
2021-07-05 06:23:23 -04:00
import { useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SYSTEM_USER_ID } from "revolt.js";
import { SystemMessage } from "../SystemMessage";
2021-07-05 06:23:23 -04:00
2021-06-23 13:26:41 -04:00
interface Props {
2021-07-05 06:25:20 -04:00
channel: string;
index: number;
id: string;
2021-06-23 13:26:41 -04:00
}
2021-07-05 06:23:23 -04:00
export const ReplyBase = styled.div<{
2021-07-05 06:25:20 -04:00
head?: boolean;
fail?: boolean;
preview?: boolean;
2021-07-05 06:23:23 -04:00
}>`
2021-07-05 06:25:20 -04:00
gap: 4px;
display: flex;
font-size: 0.8em;
margin-left: 30px;
user-select: none;
margin-bottom: 4px;
align-items: center;
color: var(--secondary-foreground);
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2021-07-05 06:25:20 -04:00
svg:first-child {
flex-shrink: 0;
transform: scaleX(-1);
color: var(--tertiary-foreground);
}
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
${(props) =>
props.fail &&
css`
color: var(--tertiary-foreground);
`}
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
2021-06-23 13:26:41 -04:00
2021-07-05 06:23:23 -04:00
${(props) =>
2021-07-05 06:25:20 -04:00
props.preview &&
css`
margin-left: 0;
`}
2021-06-23 13:26:41 -04:00
`;
export function MessageReply({ index, channel, id }: Props) {
2021-07-05 06:25:20 -04:00
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
const message = view.messages.find((x) => x._id === id);
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
</ReplyBase>
);
}
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
const user = useUser(message.author);
2021-06-23 13:26:41 -04:00
2021-07-05 06:25:20 -04:00
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
<UserShort user={user} size={16} />
{message.attachments && message.attachments.length > 0 && (
<File size={16} />
)}
{ message.author === SYSTEM_USER_ID ?
<SystemMessage message={message} /> :
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
}
2021-07-05 06:25:20 -04:00
</ReplyBase>
);
2021-06-23 13:26:41 -04:00
}