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); }