Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
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 outerStyle={[
62 a.rounded_md,
63 a.w_full,
64 t.atoms.shadow_lg,
65 IS_WEB
66 ? {
67 maxWidth: 300,
68 }
69 : {},
70 ]}
71 innerStyle={[
72 a.overflow_hidden,
73 a.rounded_md,
74 a.border,
75 t.atoms.border_contrast_low,
76 t.atoms.bg,
77 a.w_full,
78 IS_WEB
79 ? {
80 maxWidth: 300,
81 }
82 : {},
83 ]}
84 render={render}
85 />
86 </Portal>
87 )
88}