DS Boyce
128 lines
3.2 KiB
TypeScript
128 lines
3.2 KiB
TypeScript
import {memo} from 'react'
|
|
import {TouchableOpacity, View, type ViewStyle} from 'react-native'
|
|
import {useLingui} from '@lingui/react/macro'
|
|
|
|
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
|
import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
|
|
import {atoms as a, native, useTheme} from '#/alf'
|
|
import {type AutocompleteItem} from '#/components/Autocomplete'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Link} from '#/components/Link'
|
|
import {Loader} from '#/components/Loader'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAnalytics} from '#/analytics'
|
|
import {IS_NATIVE} from '#/env'
|
|
import type * as bsky from '#/types/bsky'
|
|
|
|
let AutocompleteResults = ({
|
|
items,
|
|
isFetching,
|
|
searchText,
|
|
onSubmit,
|
|
onResultPress,
|
|
onProfileClick,
|
|
}: {
|
|
items: AutocompleteItem[]
|
|
isFetching: boolean
|
|
searchText: string
|
|
onSubmit: () => void
|
|
onResultPress: () => void
|
|
onProfileClick: (profile: bsky.profile.AnyProfileView) => void
|
|
}): React.ReactNode => {
|
|
const ax = useAnalytics()
|
|
const {t: l} = useLingui()
|
|
const moderationOpts = useModerationOpts()
|
|
|
|
return (
|
|
<>
|
|
{(isFetching && !items.length) || !moderationOpts ? (
|
|
<Layout.Content>
|
|
<View style={[a.py_xl, a.align_center]}>
|
|
<Loader size="xl" />
|
|
</View>
|
|
</Layout.Content>
|
|
) : (
|
|
<Layout.Content
|
|
keyboardShouldPersistTaps="handled"
|
|
keyboardDismissMode="on-drag">
|
|
<SearchLinkCard
|
|
label={l`Search for “${searchText}”`}
|
|
onPress={native(onSubmit)}
|
|
to={
|
|
IS_NATIVE
|
|
? undefined
|
|
: `/search?q=${encodeURIComponent(searchText)}`
|
|
}
|
|
style={a.border_b}
|
|
/>
|
|
{items.map((item, index) => {
|
|
if (item.type !== 'profile') return null
|
|
return (
|
|
<SearchProfileCard
|
|
key={item.key}
|
|
profile={item.profile}
|
|
moderationOpts={moderationOpts}
|
|
onPress={() => {
|
|
ax.metric('search:autocomplete:press', {
|
|
profileDid: item.profile.did,
|
|
position: index,
|
|
})
|
|
onProfileClick(item.profile)
|
|
onResultPress()
|
|
}}
|
|
/>
|
|
)
|
|
})}
|
|
<View style={{height: 200}} />
|
|
</Layout.Content>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
AutocompleteResults = memo(AutocompleteResults)
|
|
export {AutocompleteResults}
|
|
|
|
let SearchLinkCard = ({
|
|
label,
|
|
to,
|
|
onPress,
|
|
style,
|
|
}: {
|
|
label: string
|
|
to?: string
|
|
onPress?: () => void
|
|
style?: ViewStyle
|
|
}): React.ReactNode => {
|
|
const t = useTheme()
|
|
|
|
const inner = (
|
|
<View
|
|
style={[a.flex_1, a.py_lg, a.px_md, t.atoms.border_contrast_low, style]}>
|
|
<Text emoji style={[a.text_md, t.atoms.text]}>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
)
|
|
|
|
if (onPress) {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
accessibilityLabel={label}
|
|
accessibilityHint="">
|
|
{inner}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
if (to) {
|
|
return (
|
|
<Link label={label} to={to}>
|
|
{inner}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return inner
|
|
}
|