diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index ad6a8ec6..a7c5711a 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -21,7 +21,7 @@ import { import {useAnalytics} from 'lib/analytics' import _isEqual from 'lodash.isequal' import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view' -import {Autocomplete} from './Autocomplete' +import {Autocomplete} from './autocomplete/Autocomplete' import {ExternalEmbed} from './ExternalEmbed' import {Text} from '../util/text/Text' import * as Toast from '../util/Toast' diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/autocomplete/Autocomplete.tsx similarity index 97% rename from src/view/com/composer/Autocomplete.tsx rename to src/view/com/composer/autocomplete/Autocomplete.tsx index c17e41b3..82fb239d 100644 --- a/src/view/com/composer/Autocomplete.tsx +++ b/src/view/com/composer/autocomplete/Autocomplete.tsx @@ -7,7 +7,7 @@ import { } from 'react-native' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' -import {Text} from '../util/text/Text' +import {Text} from '../../util/text/Text' interface AutocompleteItem { handle: string diff --git a/src/view/com/composer/autocomplete/Autocomplete.web.tsx b/src/view/com/composer/autocomplete/Autocomplete.web.tsx new file mode 100644 index 00000000..b6be1c21 --- /dev/null +++ b/src/view/com/composer/autocomplete/Autocomplete.web.tsx @@ -0,0 +1,59 @@ +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 + } + return ( + + {items.map((item, i) => ( + onSelect(item.handle)}> + + {item.displayName || item.handle} + +  @{item.handle} + + + + ))} + + ) +} + +const styles = StyleSheet.create({ + outer: { + position: 'absolute', + left: 0, + right: 0, + top: '100%', + borderWidth: 1, + borderRadius: 8, + }, + item: { + borderBottomWidth: 1, + paddingVertical: 16, + paddingHorizontal: 16, + }, +}) diff --git a/src/view/shell/web/Composer.tsx b/src/view/shell/web/Composer.tsx index 5006b312..0d848426 100644 --- a/src/view/shell/web/Composer.tsx +++ b/src/view/shell/web/Composer.tsx @@ -61,5 +61,6 @@ const styles = StyleSheet.create({ paddingVertical: 0, paddingHorizontal: 2, borderRadius: 8, + marginBottom: '10vh', }, })