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.
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import {
|
|
ConversationListItemProps,
|
|
MemoConversationListItemWithDetails,
|
|
} from '../leftpane/conversation-list-item/ConversationListItem';
|
|
import { MessageResultProps, MessageSearchResult } from './MessageSearchResults';
|
|
|
|
export type SearchResultsProps = {
|
|
contactsAndGroups: Array<ConversationListItemProps>;
|
|
messages: Array<MessageResultProps>;
|
|
searchTerm: string;
|
|
};
|
|
|
|
const StyledSeparatorSection = styled.div`
|
|
height: 36px;
|
|
line-height: 36px;
|
|
|
|
margin-inline-start: 16px;
|
|
|
|
color: var(--text-secondary-color);
|
|
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
`;
|
|
|
|
const SearchResultsContainer = styled.div`
|
|
overflow-y: auto;
|
|
max-height: 100%;
|
|
color: var(--text-secondary-color);
|
|
flex-grow: 1;
|
|
width: -webkit-fill-available;
|
|
`;
|
|
const NoResults = styled.div`
|
|
margin-top: 27px;
|
|
width: 100%;
|
|
text-align: center;
|
|
`;
|
|
|
|
export const SearchResults = (props: SearchResultsProps) => {
|
|
const { contactsAndGroups, messages, searchTerm } = props;
|
|
|
|
const haveContactsAndGroup = Boolean(contactsAndGroups?.length);
|
|
const haveMessages = Boolean(messages?.length);
|
|
const noResults = !haveContactsAndGroup && !haveMessages;
|
|
|
|
return (
|
|
<SearchResultsContainer>
|
|
{noResults ? <NoResults>{window.i18n('noSearchResults', [searchTerm])}</NoResults> : null}
|
|
{haveContactsAndGroup ? (
|
|
<>
|
|
<StyledSeparatorSection>{window.i18n('conversationsHeader')}</StyledSeparatorSection>
|
|
{contactsAndGroups.map(contactOrGroup => (
|
|
<MemoConversationListItemWithDetails
|
|
{...contactOrGroup}
|
|
mentionedUs={false}
|
|
isBlocked={false}
|
|
key={`search-result-convo-${contactOrGroup.id}`}
|
|
/>
|
|
))}
|
|
</>
|
|
) : null}
|
|
|
|
{haveMessages && (
|
|
<>
|
|
<StyledSeparatorSection>
|
|
{`${window.i18n('messagesHeader')}: ${messages.length}`}
|
|
</StyledSeparatorSection>
|
|
{messages.map(message => (
|
|
<MessageSearchResult key={`search-result-message-${message.id}`} {...message} />
|
|
))}
|
|
</>
|
|
)}
|
|
</SearchResultsContainer>
|
|
);
|
|
};
|