You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import React, { useContext } from 'react';
|
|
import { Flex } from '../../basic/Flex';
|
|
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
|
|
import { ReplyingToMessageProps } from './SessionCompositionBox';
|
|
import styled, { DefaultTheme, ThemeContext } from 'styled-components';
|
|
import { getAlt, isAudio, isImageAttachment } from '../../../types/Attachment';
|
|
import { Image } from '../../conversation/Image';
|
|
|
|
// tslint:disable: react-unused-props-and-state
|
|
interface Props {
|
|
quotedMessageProps: ReplyingToMessageProps;
|
|
removeQuotedMessage: any;
|
|
}
|
|
|
|
const QuotedMessageComposition = styled.div`
|
|
width: 100%;
|
|
padding-inline-end: ${props => props.theme.common.margins.md};
|
|
padding-inline-start: ${props => props.theme.common.margins.md};
|
|
`;
|
|
|
|
const QuotedMessageCompositionReply = styled.div`
|
|
background: ${props => props.theme.colors.quoteBottomBarBackground};
|
|
border-radius: ${props => props.theme.common.margins.sm};
|
|
padding: ${props => props.theme.common.margins.xs};
|
|
box-shadow: ${props => props.theme.colors.sessionShadow};
|
|
margin: ${props => props.theme.common.margins.xs};
|
|
`;
|
|
|
|
const Subtle = styled.div`
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;
|
|
color: ${props => props.theme.colors.textColor};
|
|
`;
|
|
|
|
const ReplyingTo = styled.div`
|
|
color: ${props => props.theme.colors.textColor};
|
|
`;
|
|
|
|
export const SessionQuotedMessageComposition = (props: Props) => {
|
|
const { quotedMessageProps, removeQuotedMessage } = props;
|
|
const theme = useContext(ThemeContext);
|
|
|
|
const { text: body, attachments } = quotedMessageProps;
|
|
const hasAttachments = attachments && attachments.length > 0;
|
|
|
|
let hasImageAttachment = false;
|
|
|
|
let firstImageAttachment;
|
|
if (attachments && attachments.length > 0) {
|
|
firstImageAttachment = attachments[0];
|
|
hasImageAttachment = true;
|
|
}
|
|
|
|
const hasAudioAttachment =
|
|
hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
|
|
|
|
return (
|
|
<QuotedMessageComposition theme={theme}>
|
|
<Flex
|
|
container={true}
|
|
justifyContent="space-between"
|
|
flexGrow={1}
|
|
margin={theme.common.margins.xs}
|
|
>
|
|
<ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
|
|
<SessionIconButton
|
|
iconType={SessionIconType.Exit}
|
|
iconSize={SessionIconSize.Small}
|
|
onClick={removeQuotedMessage}
|
|
theme={theme}
|
|
/>
|
|
</Flex>
|
|
<QuotedMessageCompositionReply>
|
|
<Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}>
|
|
<Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
|
|
|
|
{hasImageAttachment && (
|
|
<Image
|
|
alt={getAlt(firstImageAttachment, window.i18n)}
|
|
i18n={window.i18n}
|
|
attachment={firstImageAttachment}
|
|
height={100}
|
|
width={100}
|
|
curveTopLeft={true}
|
|
curveTopRight={true}
|
|
curveBottomLeft={true}
|
|
curveBottomRight={true}
|
|
url={firstImageAttachment.thumbnail.objectUrl}
|
|
/>
|
|
)}
|
|
|
|
{hasAudioAttachment && (
|
|
<SessionIcon
|
|
iconType={SessionIconType.Microphone}
|
|
iconSize={SessionIconSize.Huge}
|
|
theme={theme}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</QuotedMessageCompositionReply>
|
|
</QuotedMessageComposition>
|
|
);
|
|
};
|