import {View} from 'react-native' import Animated, {FadeInDown, FadeOut} from 'react-native-reanimated' import {Trans} from '@lingui/macro' import {PressableScale} from '#/lib/custom-animations/PressableScale' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' export function Autocomplete({ prefix, onSelect, }: { prefix: string onSelect: (item: string) => void }) { const t = useTheme() const isActive = !!prefix const {data: suggestions, isFetching} = useActorAutocompleteQuery( prefix, true, ) if (!isActive) return null return ( {suggestions?.length ? ( suggestions.slice(0, 5).map((item, index, arr) => { return ( onSelect(item.handle)} accessibilityLabel={`Select ${item.handle}`} accessibilityHint=""> {sanitizeDisplayName( item.displayName || sanitizeHandle(item.handle), )} {sanitizeHandle(item.handle, '@')} ) }) ) : ( {isFetching ? Loading... : No result} )} ) }