Autocomplete.tsx

import React, {useEffect} from 'react'
import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {usePalette} from 'lib/hooks/usePalette'
import {Text} from 'view/com/util/text/Text'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {useGrapheme} from '../hooks/useGrapheme'

export const Autocomplete = observer(
  ({
    view,
    onSelect,
  }: {
    view: UserAutocompleteModel
    onSelect: (item: string) => void
  }) => {
    const pal = usePalette('default')
    const positionInterp = useAnimatedValue(0)
    const {getGraphemeString} = useGrapheme()

    useEffect(() => {
      Animated.timing(positionInterp, {
        toValue: view.isActive ? 1 : 0,
        duration: 200,
        useNativeDriver: true,
      }).start()
    }, [positionInterp, view.isActive])

    const topAnimStyle = {
      transform: [
        {
          translateY: positionInterp.interpolate({
            inputRange: [0, 1],
            outputRange: [200, 0],
          }),
        },
      ],
    }

    return (
      <Animated.View style={topAnimStyle}>
        {view.isActive ? (
          <View style={[pal.view, styles.container, pal.border]}>
            {view.suggestions.length > 0 ? (
              view.suggestions.slice(0, 5).map(item => {
                // Eventually use an average length
                const MAX_CHARS = 40
                const MAX_HANDLE_CHARS = 20

                // Using this approach because styling is not respecting
                // bounding box wrapping (before converting to ellipsis)
                const {name: displayHandle, remainingCharacters} =
                  getGraphemeString(item.handle, MAX_HANDLE_CHARS)

                const {name: displayName} = getGraphemeString(
                  item.displayName ?? item.handle,
                  MAX_CHARS -
                    MAX_HANDLE_CHARS +
                    (remainingCharacters > 0 ? remainingCharacters : 0),
                )

                return (
                  <TouchableOpacity
                    testID="autocompleteButton"
                    key={item.handle}
                    style={[pal.border, styles.item]}
                    onPress={() => onSelect(item.handle)}
                    accessibilityLabel={`Select ${item.handle}`}
                    accessibilityHint="">
                    <View style={styles.avatarAndHandle}>
                      <UserAvatar avatar={item.avatar ?? null} size={24} />
                      <Text type="md-medium" style={pal.text}>
                        {displayName}
                      </Text>
                    </View>
                    <Text type="sm" style={pal.textLight} numberOfLines={1}>
                      @{displayHandle}
                    </Text>
                  </TouchableOpacity>
                )
              })
            ) : (
              <Text type="sm" style={[pal.text, pal.border, styles.noResults]}>
                No result
              </Text>
            )}
          </View>
        ) : null}
      </Animated.View>
    )
  },
)

const styles = StyleSheet.create({
  container: {
    marginLeft: -54,
    top: 10,
    borderTopWidth: 1,
  },
  item: {
    borderBottomWidth: 1,
    paddingVertical: 12,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 6,
  },
  avatarAndHandle: {
    display: 'flex',
    flexDirection: 'row',
    gap: 6,
    alignItems: 'center',
  },
  noResults: {
    paddingVertical: 12,
  },
})