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