diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index cb186d88b..e18c1d578 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -14,6 +14,7 @@ import { StyledChooseActionTitle } from './ActionRow';
import { ContactRow, ContactRowBreak } from './ContactRow';
import { UserUtils } from '../../../../session/utils';
import { getThemeValue, pxValueToNumber } from '../../../../themes/globals';
+import { SearchResultsMergedListItem } from '../../../../state/selectors/search';
const StyledContactSection = styled.div`
display: flex;
@@ -68,6 +69,19 @@ const renderRow = (props: ListRowProps) => {
return ;
};
+export function calcContactRowHeight(
+ items: Array,
+ params: Index,
+ overrides?: {
+ rowHeight?: number;
+ breakRowHeight?: number;
+ }
+) {
+ return isString(items[params.index])
+ ? overrides?.breakRowHeight || pxValueToNumber(getThemeValue('--contact-row-break-height'))
+ : overrides?.rowHeight || pxValueToNumber(getThemeValue('--contact-row-height'));
+}
+
const unknownSection = 'unknown';
const ContactListItemSection = () => {
@@ -99,12 +113,6 @@ const ContactListItemSection = () => {
const length = Number(directContactsByNameWithBreaks.length);
- const calcRowHeight = (params: Index) => {
- return isString(directContactsByNameWithBreaks[params.index])
- ? pxValueToNumber(getThemeValue('--contact-row-break-height'))
- : pxValueToNumber(getThemeValue('--contact-row-height'));
- };
-
return (
@@ -114,7 +122,7 @@ const ContactListItemSection = () => {
className="module-left-pane__virtual-list"
height={height}
rowCount={length}
- rowHeight={calcRowHeight}
+ rowHeight={params => calcContactRowHeight(directContactsByNameWithBreaks, params)}
directContactsByNameWithBreaks={directContactsByNameWithBreaks}
rowRenderer={renderRow}
width={leftPaneListWidth}
diff --git a/ts/components/search/SearchResults.tsx b/ts/components/search/SearchResults.tsx
index f86d21124..651d40ee9 100644
--- a/ts/components/search/SearchResults.tsx
+++ b/ts/components/search/SearchResults.tsx
@@ -12,6 +12,7 @@ import {
getSearchResultsList,
getSearchTerm,
} from '../../state/selectors/search';
+import { calcContactRowHeight } from '../leftpane/overlay/choose-action/ContactsListWithBreaks';
const StyledSeparatorSection = styled.div<{ isSubtitle: boolean }>`
height: 36px;
@@ -63,15 +64,16 @@ function isContact(item: SearchResultsMergedListItem): item is { contactConvoId:
const VirtualizedList = () => {
const searchResultList = useSelector(getSearchResultsList);
+
return (
{({ height, width }) => (
{
- return isString(searchResultList[rowPos.index]) ? 36 : 64;
- }}
+ rowHeight={params =>
+ calcContactRowHeight(searchResultList, params, { breakRowHeight: 36 })
+ }
rowRenderer={({ index, key, style }) => {
const row = searchResultList[index];
if (!row) {
diff --git a/ts/state/selectors/search.ts b/ts/state/selectors/search.ts
index f19c5c130..e5c778421 100644
--- a/ts/state/selectors/search.ts
+++ b/ts/state/selectors/search.ts
@@ -99,21 +99,22 @@ export const getSearchResultsList = createSelector([getSearchResults], searchSta
);
// add a break wherever needed
- let currentChar = '';
+ // let currentChar = '';
for (let i = 0; i < idsWithNameAndType.length; i++) {
const m = idsWithNameAndType[i];
if (m.contactConvoId === us) {
usIndex = i;
continue;
}
- if (
- idsWithNameAndType.length > 1 &&
- m.displayName &&
- m.displayName[0].toLowerCase() !== currentChar
- ) {
- currentChar = m.displayName[0].toLowerCase();
- builtList.push(currentChar.toUpperCase());
- }
+ // we might want breaks again in future
+ // if (
+ // idsWithNameAndType.length > 1 &&
+ // m.displayName &&
+ // m.displayName[0].toLowerCase() !== currentChar
+ // ) {
+ // currentChar = m.displayName[0].toLowerCase();
+ // builtList.push(currentChar.toUpperCase());
+ // }
builtList.push(m);
}