import React from 'react' ; import { ActivityIndicator , FlatList , StyleSheet , Text , View } from 'react-native' ; import { vw } from 'stream-chat-react-native' ; import { UserGridItem } from './UserGridItem' ; import { EmptySearchState } from '../../icons/EmptySearchState' ; import type { UserResponse } from 'stream-chat' ; import type { LocalUserType } from '../../types' ; const totalUserSpace = vw ( 100 ) - 56 ; const styles = StyleSheet . create ( { container : { flex : 1 , paddingHorizontal : 20 , } , contentContainer : { flexGrow : 1 } , emptyResultIndicator : { alignItems : 'center' , height : 300 , justifyContent : 'center' , } , flex : { flex : 1 } , userGridItemContainer : { paddingBottom : 10 , width : 64 , } , } ) ; type UserSearchResultsGridProps = { onPress : ( user : UserResponse < LocalUserType > ) => void ; results : UserResponse < LocalUserType > [ ] ; gridSize ? : number ; loading ? : boolean ; loadMore ? : ( ) => void ; searchText ? : string ; showOnlineStatus ? : boolean ; } ; export const UserSearchResultsGrid = ( { gridSize = 4 , loading = false , loadMore = ( ) => null , onPress , results , searchText , } ) => ( < View style = { styles . container } > { loading && results . length === 0 && searchText === '' ? ( < ActivityIndicator size = 'small' / > ) : ( < FlatList contentContainerStyle = { styles . contentContainer } data = { results } keyboardDismissMode = 'interactive' keyboardShouldPersistTaps = 'handled' keyExtractor = { ( item , index ) => `${ item . id }-${ index }` } ListEmptyComponent = { ( ) => ( < View style = { styles . emptyResultIndicator } > < EmptySearchState height = { 124 } width = { 124 } / > < Text > No user matches these keywords < /Text> < Text > { loading ? 'true' : 'false' } < /Text> < Text > { results . length } < /Text> < /View>)} numColumns={gridSize} onEndReached={loadMore} renderItem={({ index, item: user }) => (<View style={[ styles . userGridItemContainer , { marginLeft : index % gridSize !== 0 ? ( totalUserSpace - 64 * gridSize ) / 3 : 0 , } , ] } > < UserGridItem onPress = { ( ) => { onPress ( user ) ; } } removeButton = { false } user = { user } / > < /View>)} showsVerticalScrollIndicator={false} style={styles.flex}/ > ) } < /View>);