Samuel Newman
93c4719a21
* check handle as you type * metrics * add metric types * fix overflow * only check reserved handles for bsky.social, fix test * change validation check name * tweak input * move ghosttext component to textfield * tweak styles to try and match latest * add suggestions * improvements, metrics * share logic between typeahead and next button * Apply suggestions from code review Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * update checks, disable button if unavailable * convert to lowercase * fix bug with checkHandleAvailability * add gate * move files around to make clearer * fix bad import * Fix flashing next button * Enable for TF --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Hailey <me@haileyok.com> Co-authored-by: Eric Bailey <git@esb.lol>
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import Animated, {Easing, FadeInDown, FadeOut} from 'react-native-reanimated'
|
|
import {type ComAtprotoTempCheckHandleAvailability} from '@atproto/api'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {atoms as a, native, useTheme} from '#/alf'
|
|
import {borderRadius} from '#/alf/tokens'
|
|
import {Button} from '#/components/Button'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function HandleSuggestions({
|
|
suggestions,
|
|
onSelect,
|
|
}: {
|
|
suggestions: ComAtprotoTempCheckHandleAvailability.Suggestion[]
|
|
onSelect: (
|
|
suggestions: ComAtprotoTempCheckHandleAvailability.Suggestion,
|
|
) => void
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
|
|
return (
|
|
<Animated.View
|
|
entering={native(FadeInDown.easing(Easing.out(Easing.exp)))}
|
|
exiting={native(FadeOut)}
|
|
style={[
|
|
a.flex_1,
|
|
a.border,
|
|
a.rounded_sm,
|
|
t.atoms.shadow_sm,
|
|
t.atoms.bg,
|
|
t.atoms.border_contrast_low,
|
|
a.mt_xs,
|
|
a.z_50,
|
|
a.w_full,
|
|
a.zoom_fade_in,
|
|
]}>
|
|
{suggestions.map((suggestion, index) => (
|
|
<Button
|
|
label={_(
|
|
msg({
|
|
message: `Select ${suggestion.handle}`,
|
|
comment: `Accessibility label for a username suggestion in the account creation flow`,
|
|
}),
|
|
)}
|
|
key={index}
|
|
onPress={() => onSelect(suggestion)}
|
|
hoverStyle={[t.atoms.bg_contrast_25]}
|
|
style={[
|
|
a.w_full,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.justify_between,
|
|
a.p_md,
|
|
a.border_b,
|
|
t.atoms.border_contrast_low,
|
|
index === 0 && {
|
|
borderTopStartRadius: borderRadius.sm,
|
|
borderTopEndRadius: borderRadius.sm,
|
|
},
|
|
index === suggestions.length - 1 && [
|
|
{
|
|
borderBottomStartRadius: borderRadius.sm,
|
|
borderBottomEndRadius: borderRadius.sm,
|
|
},
|
|
a.border_b_0,
|
|
],
|
|
]}>
|
|
<Text style={[a.text_md]}>{suggestion.handle}</Text>
|
|
<Text style={[a.text_sm, {color: t.palette.positive_700}]}>
|
|
<Trans comment="Shown next to an available username suggestion in the account creation flow">
|
|
Available
|
|
</Trans>
|
|
</Text>
|
|
</Button>
|
|
))}
|
|
</Animated.View>
|
|
)
|
|
}
|