Merge pull request #2136 from Bilb/global-search-off-clearnet
Global search off clearnetpull/2147/head
Audric Ackermann
3 years ago
committed by
GitHub
commit
f07aba72df
@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import { RenderTextCallbackType } from '../../types/Util';
|
||||
import { SizeClassType } from '../../util/emoji';
|
||||
import { AddNewLines } from '../conversation/AddNewLines';
|
||||
import { Emojify } from '../conversation/Emojify';
|
||||
import { MessageBody } from '../conversation/message/message-content/MessageBody';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const renderNewLines: RenderTextCallbackType = ({ text, key }) => (
|
||||
<AddNewLines key={key} text={text} />
|
||||
);
|
||||
|
||||
const renderEmoji = ({
|
||||
text,
|
||||
key,
|
||||
sizeClass,
|
||||
renderNonEmoji,
|
||||
}: {
|
||||
text: string;
|
||||
key: number;
|
||||
sizeClass?: SizeClassType;
|
||||
renderNonEmoji: RenderTextCallbackType;
|
||||
}) => <Emojify key={key} text={text} sizeClass={sizeClass} renderNonEmoji={renderNonEmoji} />;
|
||||
|
||||
export class MessageBodyHighlight extends React.Component<Props> {
|
||||
public render() {
|
||||
const { text } = this.props;
|
||||
const results: Array<any> = [];
|
||||
const FIND_BEGIN_END = /<<left>>(.+?)<<right>>/g;
|
||||
|
||||
let match = FIND_BEGIN_END.exec(text);
|
||||
let last = 0;
|
||||
let count = 1;
|
||||
|
||||
if (!match) {
|
||||
return <MessageBody disableJumbomoji={true} disableLinks={true} text={text} />;
|
||||
}
|
||||
|
||||
const sizeClass = '';
|
||||
|
||||
while (match) {
|
||||
if (last < match.index) {
|
||||
const beforeText = text.slice(last, match.index);
|
||||
results.push(
|
||||
renderEmoji({
|
||||
text: beforeText,
|
||||
sizeClass,
|
||||
key: count++,
|
||||
renderNonEmoji: renderNewLines,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const [, toHighlight] = match;
|
||||
results.push(
|
||||
<span className="module-message-body__highlight" key={count++}>
|
||||
{renderEmoji({
|
||||
text: toHighlight,
|
||||
sizeClass,
|
||||
key: count++,
|
||||
renderNonEmoji: renderNewLines,
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
|
||||
// @ts-ignore
|
||||
last = FIND_BEGIN_END.lastIndex;
|
||||
match = FIND_BEGIN_END.exec(text);
|
||||
}
|
||||
|
||||
if (last < text.length) {
|
||||
results.push(
|
||||
renderEmoji({
|
||||
text: text.slice(last),
|
||||
sizeClass,
|
||||
key: count++,
|
||||
renderNonEmoji: renderNewLines,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { MessageDirection } from '../../models/messageType';
|
||||
import { getOurPubKeyStrFromCache } from '../../session/utils/User';
|
||||
import {
|
||||
FindAndFormatContactType,
|
||||
openConversationWithMessages,
|
||||
} from '../../state/ducks/conversations';
|
||||
import { ContactName } from '../conversation/ContactName';
|
||||
import { Avatar, AvatarSize } from '../avatar/Avatar';
|
||||
import { Timestamp } from '../conversation/Timestamp';
|
||||
import { MessageBodyHighlight } from '../basic/MessageBodyHighlist';
|
||||
|
||||
type PropsHousekeeping = {
|
||||
isSelected?: boolean;
|
||||
};
|
||||
|
||||
export type PropsForSearchResults = {
|
||||
from: FindAndFormatContactType;
|
||||
to: FindAndFormatContactType;
|
||||
id: string;
|
||||
conversationId: string;
|
||||
destination: string;
|
||||
source: string;
|
||||
|
||||
direction?: string;
|
||||
snippet?: string; //not sure about the type of snippet
|
||||
receivedAt?: number;
|
||||
};
|
||||
|
||||
type Props = PropsForSearchResults & PropsHousekeeping;
|
||||
|
||||
const FromName = (props: { source: string; destination: string }) => {
|
||||
const { source, destination } = props;
|
||||
|
||||
const isNoteToSelf = destination === getOurPubKeyStrFromCache() && source === destination;
|
||||
|
||||
if (isNoteToSelf) {
|
||||
return (
|
||||
<span className="module-message-search-result__header__name">
|
||||
{window.i18n('noteToSelf')}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (source === getOurPubKeyStrFromCache()) {
|
||||
return <span className="module-message-search-result__header__name">{window.i18n('you')}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
// tslint:disable: use-simple-attributes
|
||||
<ContactName
|
||||
pubkey={source}
|
||||
module="module-message-search-result__header__name"
|
||||
shouldShowPubkey={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const From = (props: { source: string; destination: string }) => {
|
||||
const { source, destination } = props;
|
||||
const fromName = <FromName source={source} destination={destination} />;
|
||||
|
||||
const ourKey = getOurPubKeyStrFromCache();
|
||||
|
||||
// TODO: ww maybe add useConversationUsername hook within contact name
|
||||
if (destination !== ourKey) {
|
||||
return (
|
||||
<div className="module-message-search-result__header__from">
|
||||
{fromName} {window.i18n('to')}
|
||||
<span className="module-mesages-search-result__header__group">
|
||||
<ContactName pubkey={destination} shouldShowPubkey={false} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className="module-message-search-result__header__from">{fromName}</div>;
|
||||
};
|
||||
|
||||
const AvatarItem = (props: { source: string }) => {
|
||||
const { source } = props;
|
||||
return <Avatar size={AvatarSize.S} pubkey={source} />;
|
||||
};
|
||||
|
||||
export const MessageSearchResult = (props: Props) => {
|
||||
const {
|
||||
isSelected,
|
||||
id,
|
||||
conversationId,
|
||||
receivedAt,
|
||||
snippet,
|
||||
destination,
|
||||
source,
|
||||
direction,
|
||||
} = props;
|
||||
|
||||
const sourceOrDestinationDerivable =
|
||||
(destination && direction === MessageDirection.outgoing) ||
|
||||
!destination ||
|
||||
!source ||
|
||||
(source && direction === MessageDirection.incoming);
|
||||
|
||||
if (!sourceOrDestinationDerivable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const effectiveSource =
|
||||
!source && direction === MessageDirection.outgoing ? getOurPubKeyStrFromCache() : source;
|
||||
const effectiveDestination =
|
||||
!destination && direction === MessageDirection.incoming
|
||||
? getOurPubKeyStrFromCache()
|
||||
: destination;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`div-msg-searchresult-${id}`}
|
||||
role="button"
|
||||
onClick={async () => {
|
||||
await openConversationWithMessages({
|
||||
conversationKey: conversationId,
|
||||
messageId: id,
|
||||
});
|
||||
}}
|
||||
className={classNames(
|
||||
'module-message-search-result',
|
||||
isSelected ? 'module-message-search-result--is-selected' : null
|
||||
)}
|
||||
>
|
||||
<AvatarItem source={effectiveSource} />
|
||||
<div className="module-message-search-result__text">
|
||||
<div className="module-message-search-result__header">
|
||||
<From source={effectiveSource} destination={effectiveDestination} />
|
||||
<div className="module-message-search-result__header__timestamp">
|
||||
<Timestamp timestamp={receivedAt} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-message-search-result__body">
|
||||
<MessageBodyHighlight text={snippet || ''} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue