this repo has no description
1import {useCallback} from 'react'
2import {Keyboard, View} from 'react-native'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {toNiceDomain} from '#/lib/strings/url-helpers'
8import {atoms as a, tokens, useTheme} from '#/alf'
9import {Button, ButtonIcon, ButtonText} from '#/components/Button'
10import {useDialogControl} from '#/components/Dialog'
11import {ServerInputDialog} from '#/components/dialogs/ServerInput'
12import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
13import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
14import {Text} from '#/components/Typography'
15
16export function HostingProvider({
17 serviceUrl,
18 onSelectServiceUrl,
19 onOpenDialog,
20 minimal,
21}: {
22 serviceUrl: string
23 onSelectServiceUrl: (provider: string) => void
24 onOpenDialog?: () => void
25 minimal?: boolean
26}) {
27 const serverInputControl = useDialogControl()
28 const t = useTheme()
29 const {_} = useLingui()
30
31 const onPressSelectService = useCallback(() => {
32 Keyboard.dismiss()
33 serverInputControl.open()
34 onOpenDialog?.()
35 }, [onOpenDialog, serverInputControl])
36
37 return (
38 <>
39 <ServerInputDialog
40 control={serverInputControl}
41 onSelect={onSelectServiceUrl}
42 />
43 {minimal ? (
44 <View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_xs]}>
45 <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
46 <Trans>You are creating an account on</Trans>
47 </Text>
48 <Button
49 label={toNiceDomain(serviceUrl)}
50 accessibilityHint={_(msg`Changes hosting provider`)}
51 onPress={onPressSelectService}
52 variant="ghost"
53 color="secondary"
54 size="tiny"
55 style={[
56 a.px_xs,
57 {marginHorizontal: tokens.space.xs * -1},
58 {paddingVertical: 0},
59 ]}>
60 <ButtonText style={[a.text_sm]}>
61 {toNiceDomain(serviceUrl)}
62 </ButtonText>
63 <ButtonIcon icon={PencilIcon} />
64 </Button>
65 </View>
66 ) : (
67 <Button
68 testID="selectServiceButton"
69 label={toNiceDomain(serviceUrl)}
70 accessibilityHint={_(msg`Changes hosting provider`)}
71 variant="solid"
72 color="secondary"
73 style={[
74 a.w_full,
75 a.flex_row,
76 a.align_center,
77 a.rounded_sm,
78 a.py_sm,
79 a.pl_md,
80 a.pr_sm,
81 a.gap_xs,
82 ]}
83 onPress={onPressSelectService}>
84 {({hovered, pressed}) => {
85 const interacted = hovered || pressed
86 return (
87 <>
88 <View style={a.pr_xs}>
89 <GlobeIcon
90 size="md"
91 fill={
92 interacted
93 ? t.palette.contrast_800
94 : t.palette.contrast_500
95 }
96 />
97 </View>
98 <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
99 <View
100 style={[
101 a.rounded_sm,
102 interacted
103 ? t.atoms.bg_contrast_300
104 : t.atoms.bg_contrast_100,
105 {marginLeft: 'auto', padding: 6},
106 ]}>
107 <PencilIcon
108 size="sm"
109 style={{
110 color: interacted
111 ? t.palette.contrast_800
112 : t.palette.contrast_500,
113 }}
114 />
115 </View>
116 </>
117 )
118 }}
119 </Button>
120 )}
121 </>
122 )
123}