diff options
Diffstat (limited to 'src/view/com/composer/autocomplete')
-rw-r--r-- | src/view/com/composer/autocomplete/Autocomplete.tsx | 77 | ||||
-rw-r--r-- | src/view/com/composer/autocomplete/Autocomplete.web.tsx | 59 |
2 files changed, 0 insertions, 136 deletions
diff --git a/src/view/com/composer/autocomplete/Autocomplete.tsx b/src/view/com/composer/autocomplete/Autocomplete.tsx deleted file mode 100644 index 82fb239da..000000000 --- a/src/view/com/composer/autocomplete/Autocomplete.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, {useEffect} from 'react' -import { - Animated, - TouchableOpacity, - StyleSheet, - useWindowDimensions, -} from 'react-native' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {usePalette} from 'lib/hooks/usePalette' -import {Text} from '../../util/text/Text' - -interface AutocompleteItem { - handle: string - displayName?: string -} - -export function Autocomplete({ - active, - items, - onSelect, -}: { - active: boolean - items: AutocompleteItem[] - onSelect: (item: string) => void -}) { - const pal = usePalette('default') - const winDim = useWindowDimensions() - const positionInterp = useAnimatedValue(0) - - useEffect(() => { - Animated.timing(positionInterp, { - toValue: active ? 1 : 0, - duration: 200, - useNativeDriver: false, - }).start() - }, [positionInterp, active]) - - const topAnimStyle = { - top: positionInterp.interpolate({ - inputRange: [0, 1], - outputRange: [winDim.height, winDim.height / 4], - }), - } - return ( - <Animated.View style={[styles.outer, pal.view, pal.border, topAnimStyle]}> - {items.map((item, i) => ( - <TouchableOpacity - testID="autocompleteButton" - key={i} - style={[pal.border, styles.item]} - onPress={() => onSelect(item.handle)}> - <Text type="md-medium" style={pal.text}> - {item.displayName || item.handle} - <Text type="sm" style={pal.textLight}> - @{item.handle} - </Text> - </Text> - </TouchableOpacity> - ))} - </Animated.View> - ) -} - -const styles = StyleSheet.create({ - outer: { - position: 'absolute', - left: 0, - right: 0, - bottom: 0, - borderTopWidth: 1, - }, - item: { - borderBottomWidth: 1, - paddingVertical: 16, - paddingHorizontal: 16, - }, -}) diff --git a/src/view/com/composer/autocomplete/Autocomplete.web.tsx b/src/view/com/composer/autocomplete/Autocomplete.web.tsx deleted file mode 100644 index b6be1c21e..000000000 --- a/src/view/com/composer/autocomplete/Autocomplete.web.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react' -import {TouchableOpacity, StyleSheet, View} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {Text} from '../../util/text/Text' - -interface AutocompleteItem { - handle: string - displayName?: string -} - -export function Autocomplete({ - active, - items, - onSelect, -}: { - active: boolean - items: AutocompleteItem[] - onSelect: (item: string) => void -}) { - const pal = usePalette('default') - - if (!active) { - return <View /> - } - return ( - <View style={[styles.outer, pal.view, pal.border]}> - {items.map((item, i) => ( - <TouchableOpacity - testID="autocompleteButton" - key={i} - style={[pal.border, styles.item]} - onPress={() => onSelect(item.handle)}> - <Text type="md-medium" style={pal.text}> - {item.displayName || item.handle} - <Text type="sm" style={pal.textLight}> - @{item.handle} - </Text> - </Text> - </TouchableOpacity> - ))} - </View> - ) -} - -const styles = StyleSheet.create({ - outer: { - position: 'absolute', - left: 0, - right: 0, - top: '100%', - borderWidth: 1, - borderRadius: 8, - }, - item: { - borderBottomWidth: 1, - paddingVertical: 16, - paddingHorizontal: 16, - }, -}) |