forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useCallback} from 'react'
2import {View} from 'react-native'
3import {Sift, type UseSiftReturn} from '@bsky.app/sift'
4
5import {atoms as a, useTheme} from '#/alf'
6import {type AutocompleteItem} from '#/components/Autocomplete/types'
7import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
8import {Portal} from '#/components/Portal'
9import {IS_WEB} from '#/env'
10import {AutocompleteItemEmoji} from './AutocompleteItemEmoji'
11import {AutocompleteItemProfile} from './AutocompleteItemProfile'
12import {AutocompleteItemSearch} from './AutocompleteItemSearch'
13
14function renderItem(
15 item: Parameters<Parameters<typeof Sift<AutocompleteItem>>[0]['render']>[0],
16) {
17 switch (item.item.type) {
18 case 'profile':
19 return <AutocompleteItemProfile {...item} />
20 case 'emoji':
21 return <AutocompleteItemEmoji {...item} />
22 case 'search':
23 return <AutocompleteItemSearch {...item} />
24 default:
25 return <View />
26 }
27}
28
29export function Autocomplete({
30 inverted,
31 sift,
32 data,
33 render = renderItem,
34 onSelect,
35 onDismiss,
36}: {
37 inverted?: boolean
38 sift: UseSiftReturn
39 data: AutocompleteItem[]
40 render?: Parameters<typeof Sift<AutocompleteItem>>[0]['render']
41 onSelect: (item: AutocompleteItem) => void
42 onDismiss: () => void
43}) {
44 const t = useTheme()
45
46 const updatePosition = useCallback(() => {
47 sift.updatePosition()
48 }, [sift])
49
50 useOnKeyboard('keyboardDidShow', updatePosition)
51 useOnKeyboard('keyboardDidHide', updatePosition)
52
53 return (
54 <Portal>
55 <Sift
56 inverted={inverted}
57 sift={sift}
58 data={data}
59 onSelect={onSelect}
60 onDismiss={onDismiss}
61 style={[
62 a.overflow_hidden,
63 a.rounded_md,
64 a.border,
65 t.atoms.border_contrast_low,
66 t.atoms.bg,
67 a.w_full,
68 IS_WEB
69 ? {
70 maxWidth: 300,
71 }
72 : {},
73 ]}
74 render={render}
75 />
76 </Portal>
77 )
78}