forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {
3 type StyleProp,
4 TouchableWithoutFeedback,
5 View,
6 type ViewStyle,
7} from 'react-native'
8import {type ModerationUI} from '@atproto/api'
9import {msg} from '@lingui/core/macro'
10import {useLingui} from '@lingui/react'
11import {Trans} from '@lingui/react/macro'
12import {useNavigation} from '@react-navigation/native'
13
14import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
15import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
16import {type NavigationProp} from '#/lib/routes/types'
17import {CenteredView} from '#/view/com/util/Views'
18import {atoms as a, useTheme, web} from '#/alf'
19import {Button, ButtonText} from '#/components/Button'
20import {
21 ModerationDetailsDialog,
22 useModerationDetailsDialogControl,
23} from '#/components/moderation/ModerationDetailsDialog'
24import {Text} from '#/components/Typography'
25
26export function ScreenHider({
27 testID,
28 screenDescription,
29 modui,
30 style,
31 containerStyle,
32 children,
33}: React.PropsWithChildren<{
34 testID?: string
35 screenDescription: string
36 modui: ModerationUI
37 style?: StyleProp<ViewStyle>
38 containerStyle?: StyleProp<ViewStyle>
39}>) {
40 const t = useTheme()
41 const {_} = useLingui()
42 const [override, setOverride] = React.useState(false)
43 const navigation = useNavigation<NavigationProp>()
44 const {isMobile} = useWebMediaQueries()
45 const control = useModerationDetailsDialogControl()
46 const blur = modui.blurs[0]
47 const desc = useModerationCauseDescription(blur)
48
49 if (!blur || override) {
50 return (
51 <View testID={testID} style={style}>
52 {children}
53 </View>
54 )
55 }
56
57 const isNoPwi = !!modui.blurs.find(
58 cause =>
59 cause.type === 'label' &&
60 cause.labelDef.identifier === '!no-unauthenticated',
61 )
62 return (
63 <CenteredView
64 style={[
65 a.flex_1,
66 {
67 paddingTop: 100,
68 paddingBottom: 150,
69 },
70 t.atoms.bg,
71 containerStyle,
72 ]}
73 sideBorders>
74 <View style={[a.align_center, a.mb_md]}>
75 <View
76 style={[
77 t.atoms.bg_contrast_975,
78 a.align_center,
79 a.justify_center,
80 {
81 borderRadius: 25,
82 width: 50,
83 height: 50,
84 },
85 ]}>
86 <desc.icon width={24} fill={t.atoms.bg.backgroundColor} />
87 </View>
88 </View>
89 <Text
90 style={[
91 a.text_4xl,
92 a.font_semi_bold,
93 a.text_center,
94 a.mb_md,
95 t.atoms.text,
96 ]}>
97 {isNoPwi ? (
98 <Trans>Sign-in Required</Trans>
99 ) : (
100 <Trans>Content Warning</Trans>
101 )}
102 </Text>
103 <Text
104 style={[
105 a.text_lg,
106 a.mb_md,
107 a.px_lg,
108 a.text_center,
109 a.leading_snug,
110 t.atoms.text_contrast_medium,
111 ]}>
112 {isNoPwi ? (
113 <Trans>
114 This account has requested that users sign in to view their profile.
115 </Trans>
116 ) : (
117 <>
118 <Trans>This {screenDescription} has been flagged:</Trans>{' '}
119 <Text
120 style={[
121 a.text_lg,
122 a.font_semi_bold,
123 a.leading_snug,
124 t.atoms.text,
125 a.ml_xs,
126 ]}>
127 {desc.name}.{' '}
128 </Text>
129 <TouchableWithoutFeedback
130 onPress={() => {
131 control.open()
132 }}
133 accessibilityRole="button"
134 accessibilityLabel={_(msg`Learn more about this warning`)}
135 accessibilityHint="">
136 <Text
137 style={[
138 a.text_lg,
139 a.leading_snug,
140 {
141 color: t.palette.primary_500,
142 },
143 web({
144 cursor: 'pointer',
145 }),
146 ]}>
147 <Trans>Learn More</Trans>
148 </Text>
149 </TouchableWithoutFeedback>
150 <ModerationDetailsDialog control={control} modcause={blur} />
151 </>
152 )}{' '}
153 </Text>
154 {isMobile && <View style={a.flex_1} />}
155 <View style={[a.flex_row, a.justify_center, a.my_md, a.gap_md]}>
156 <Button
157 variant="solid"
158 color="primary"
159 size="large"
160 style={[a.rounded_full]}
161 label={_(msg`Go back`)}
162 onPress={() => {
163 if (navigation.canGoBack()) {
164 navigation.goBack()
165 } else {
166 navigation.navigate('Home')
167 }
168 }}>
169 <ButtonText>
170 <Trans>Go back</Trans>
171 </ButtonText>
172 </Button>
173 {!modui.noOverride && (
174 <Button
175 variant="solid"
176 color="secondary"
177 size="large"
178 style={[a.rounded_full]}
179 label={_(msg`Show anyway`)}
180 onPress={() => setOverride(v => !v)}>
181 <ButtonText>
182 <Trans>Show anyway</Trans>
183 </ButtonText>
184 </Button>
185 )}
186 </View>
187 </CenteredView>
188 )
189}