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.
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import _ from 'lodash';
|
|
import { MessageRenderingProps, QuoteClickOptions } from '../../../../models/messageType';
|
|
import { PubKey } from '../../../../session/types';
|
|
import { toggleSelectedMessageId } from '../../../../state/ducks/conversations';
|
|
import {
|
|
getMessageQuoteProps,
|
|
isMessageSelectionMode,
|
|
} from '../../../../state/selectors/conversations';
|
|
import { Quote } from './Quote';
|
|
|
|
// tslint:disable: use-simple-attributes
|
|
|
|
type Props = {
|
|
onQuoteClick?: (quote: QuoteClickOptions) => void;
|
|
messageId: string;
|
|
};
|
|
|
|
export type MessageQuoteSelectorProps = Pick<MessageRenderingProps, 'quote' | 'direction'>;
|
|
|
|
export const MessageQuote = (props: Props) => {
|
|
const { onQuoteClick: scrollToQuote } = props;
|
|
|
|
const selected = useSelector(state => getMessageQuoteProps(state as any, props.messageId));
|
|
const dispatch = useDispatch();
|
|
const multiSelectMode = useSelector(isMessageSelectionMode);
|
|
|
|
const onQuoteClick = useCallback(
|
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
if (!selected?.quote) {
|
|
window.log.warn('onQuoteClick: quote not valid');
|
|
return;
|
|
}
|
|
if (multiSelectMode && props.messageId) {
|
|
dispatch(toggleSelectedMessageId(props.messageId));
|
|
|
|
return;
|
|
}
|
|
const { authorPhoneNumber, referencedMessageNotFound, messageId } = selected.quote;
|
|
const quoteId = _.toNumber(messageId);
|
|
|
|
scrollToQuote?.({
|
|
quoteAuthor: authorPhoneNumber,
|
|
quoteId,
|
|
referencedMessageNotFound: referencedMessageNotFound || false,
|
|
});
|
|
},
|
|
[scrollToQuote, selected?.quote, multiSelectMode, props.messageId]
|
|
);
|
|
if (!selected) {
|
|
return null;
|
|
}
|
|
|
|
const { quote, direction } = selected;
|
|
|
|
if (!quote || !quote.authorPhoneNumber || !quote.messageId) {
|
|
return null;
|
|
}
|
|
const shortenedPubkey = PubKey.shorten(quote.authorPhoneNumber);
|
|
|
|
const displayedPubkey = quote.authorProfileName ? shortenedPubkey : quote.authorPhoneNumber;
|
|
|
|
return (
|
|
<Quote
|
|
onClick={onQuoteClick}
|
|
text={quote.text || ''}
|
|
attachment={quote.attachment}
|
|
isIncoming={direction === 'incoming'}
|
|
authorPhoneNumber={displayedPubkey}
|
|
authorProfileName={quote.authorProfileName}
|
|
authorName={quote.authorName}
|
|
referencedMessageNotFound={quote.referencedMessageNotFound || false}
|
|
isFromMe={quote.isFromMe || false}
|
|
/>
|
|
);
|
|
};
|