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