diff options
Diffstat (limited to 'src/view/com/composer/text-input')
| -rw-r--r-- | src/view/com/composer/text-input/TextInput.tsx | 10 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/mobile/Autocomplete.tsx | 75 |
2 files changed, 53 insertions, 32 deletions
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 668b148a4..877945b96 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -3,6 +3,7 @@ import { NativeSyntheticEvent, StyleSheet, TextInputSelectionChangeEventData, + View, } from 'react-native' import PasteInput, { PastedFile, @@ -185,7 +186,7 @@ export const TextInput = React.forwardRef( }, [text, pal.link, pal.text]) return ( - <> + <View style={styles.container}> <PasteInput testID="composerTextInput" ref={textInput} @@ -202,15 +203,20 @@ export const TextInput = React.forwardRef( view={autocompleteView} onSelect={onSelectAutocompleteItem} /> - </> + </View> ) }, ) const styles = StyleSheet.create({ + container: { + width: '100%', + }, textInput: { flex: 1, + minHeight: 80, padding: 5, + paddingBottom: 20, marginLeft: 8, alignSelf: 'flex-start', }, diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx index 424a8629f..293c89da5 100644 --- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx +++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx @@ -1,10 +1,5 @@ import React, {useEffect} from 'react' -import { - Animated, - TouchableOpacity, - StyleSheet, - useWindowDimensions, -} from 'react-native' +import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native' import {observer} from 'mobx-react-lite' import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' @@ -20,52 +15,72 @@ export const Autocomplete = observer( onSelect: (item: string) => void }) => { const pal = usePalette('default') - const winDim = useWindowDimensions() const positionInterp = useAnimatedValue(0) useEffect(() => { Animated.timing(positionInterp, { toValue: view.isActive ? 1 : 0, duration: 200, - useNativeDriver: false, + useNativeDriver: true, }).start() }, [positionInterp, view.isActive]) const topAnimStyle = { - top: positionInterp.interpolate({ - inputRange: [0, 1], - outputRange: [winDim.height, winDim.height / 4], - }), + transform: [ + { + translateY: positionInterp.interpolate({ + inputRange: [0, 1], + outputRange: [200, 0], + }), + }, + ], } return ( - <Animated.View style={[styles.outer, pal.view, pal.border, topAnimStyle]}> - {view.suggestions.map(item => ( - <TouchableOpacity - testID="autocompleteButton" - key={item.handle} - 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} + <View style={[styles.container, view.isActive && styles.visible]}> + <Animated.View + style={[ + styles.animatedContainer, + pal.view, + pal.border, + topAnimStyle, + view.isActive && styles.visible, + ]}> + {view.suggestions.slice(0, 5).map(item => ( + <TouchableOpacity + testID="autocompleteButton" + key={item.handle} + 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> - </Text> - </TouchableOpacity> - ))} - </Animated.View> + </TouchableOpacity> + ))} + </Animated.View> + </View> ) }, ) const styles = StyleSheet.create({ - outer: { + container: { + display: 'none', + height: 250, + }, + animatedContainer: { + display: 'none', position: 'absolute', - left: 0, + left: -64, right: 0, - bottom: 0, + top: 0, borderTopWidth: 1, }, + visible: { + display: 'flex', + }, item: { borderBottomWidth: 1, paddingVertical: 16, |