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.
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
5 years ago
|
import React, { useContext } from 'react';
|
||
|
import { Flex } from '../Flex';
|
||
|
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
|
||
|
import { ReplyingToMessageProps } from './SessionCompositionBox';
|
||
|
import styled, { DefaultTheme, ThemeContext } from 'styled-components';
|
||
|
|
||
|
// tslint:disable: react-unused-props-and-state
|
||
|
interface Props {
|
||
|
quotedMessageProps: ReplyingToMessageProps;
|
||
|
removeQuotedMessage: any;
|
||
|
}
|
||
|
|
||
|
const QuotedMessageComposition = styled.div`
|
||
|
width: 50%;
|
||
|
`;
|
||
|
|
||
|
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;
|
||
|
return (
|
||
|
<QuotedMessageComposition>
|
||
|
<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}
|
||
|
/>
|
||
|
</Flex>
|
||
|
<QuotedMessageCompositionReply>
|
||
|
<Subtle>
|
||
|
{(hasAttachments && window.i18n('mediaMessage')) || body}
|
||
|
</Subtle>
|
||
|
</QuotedMessageCompositionReply>
|
||
|
</QuotedMessageComposition>
|
||
|
);
|
||
|
};
|