diff --git a/core/screens/search/typesense/SearchHit.tsx b/core/screens/search/typesense/SearchHit.tsx index 75bd8e5dcf0b38400cac973a46ce816a28217a32..94ff8c17c4d854e5a288029f135449002b76a5c4 100644 --- a/core/screens/search/typesense/SearchHit.tsx +++ b/core/screens/search/typesense/SearchHit.tsx @@ -1,7 +1,7 @@ import { getInitials } from '@holi/core/helpers' import { SearchHitLink } from '@holi/core/screens/search/typesense/SearchHitLink' import { useUserLanguage } from '@holi/core/screens/search/typesense/hooks' -import type { SearchHitData } from '@holi/core/screens/search/typesense/types' +import type { SearchHitData, SearchHitType } from '@holi/core/screens/search/typesense/types' import { dimensions } from '@holi/ui/styles/globalVars' import { Avatar } from 'holi-bricks/components/avatar' import { Text } from 'holi-bricks/components/text' @@ -12,7 +12,8 @@ import { useTranslation } from 'react-i18next' import { Platform, View } from 'react-native' import { Trackable, type TrackableBaseProps } from '@holi/core/components/Trackable' -export const HIT_HEIGHT = 48 +export const HIT_HEIGHT = 65 +export const HIT_HEIGHT_PROFILE = 48 export interface SearchHitProps extends TrackableBaseProps { hit: SearchHitData @@ -36,7 +37,7 @@ export const SearchHit = Trackable<SearchHitProps>(({ hit, onPress }: SearchHitP return ( <SearchHitLink hit={hit} label={title} onPress={onPress}> - <View style={styles.hitItem} testID={`search-hit-${hit.type}`}> + <View style={styles.hitItem(hit.type)} testID={`search-hit-${hit.type}`}> <Avatar initials={getInitials(title)} label={title} @@ -62,7 +63,7 @@ export const SearchHit = Trackable<SearchHitProps>(({ hit, onPress }: SearchHitP </> )} </View> - <Text size={'sm'} numberOfLines={Platform.OS === 'android' ? 0 : 1}> + <Text size={'sm'} numberOfLines={hit.type === 'profile' ? 1 : 2}> {title} </Text> </View> @@ -72,12 +73,12 @@ export const SearchHit = Trackable<SearchHitProps>(({ hit, onPress }: SearchHitP }) const stylesheet = createStyleSheet(() => ({ - hitItem: { + hitItem: (hitType: SearchHitType) => ({ flexDirection: 'row', columnGap: dimensions.spacingSM, - height: HIT_HEIGHT, + height: hitType === 'profile' ? HIT_HEIGHT_PROFILE : HIT_HEIGHT, overflow: 'hidden', - }, + }), hitItemContent: { flex: 1, rowGap: dimensions.spacingXs, diff --git a/core/screens/search/typesense/SearchHitInfiniteList.tsx b/core/screens/search/typesense/SearchHitInfiniteList.tsx index f8d6db334e07ce3a3513407a666aa4cf5845ef7b..81772a527c5976962734d42ee504306c451eb382 100644 --- a/core/screens/search/typesense/SearchHitInfiniteList.tsx +++ b/core/screens/search/typesense/SearchHitInfiniteList.tsx @@ -1,7 +1,7 @@ import { FlashList } from '@shopify/flash-list' import { useStyles } from 'holi-bricks/hooks' import { createStyleSheet } from 'holi-bricks/utils' -import { HIT_HEIGHT, SearchHit } from '@holi/core/screens/search/typesense/SearchHit' +import { HIT_HEIGHT, HIT_HEIGHT_PROFILE, SearchHit } from '@holi/core/screens/search/typesense/SearchHit' import type { SearchHitData } from '@holi/core/screens/search/typesense/types' import { HoliGap } from '@holi/ui/components/atoms/HoliGap' import React, { useEffect } from 'react' @@ -64,12 +64,13 @@ export function SearchHitInfiniteList() { // Hide results of empty query const isEmptyQuery = !results?.query || results?.query === '*' const displayedItems = isEmptyQuery ? [] : items.length ? items : results?.hits + const itemHeight = items.length && items[0].type === 'profile' ? HIT_HEIGHT_PROFILE : HIT_HEIGHT return ( <FlashList contentContainerStyle={styles.list} testID={'search-results-list'} - estimatedItemSize={HIT_HEIGHT + Spacing['xs']} + estimatedItemSize={itemHeight + Spacing['xs']} data={displayedItems} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <HoliGap size={'s'} />}