ansxor.ca
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 {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
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 const enableSquareButtons = useEnableSquareButtons()
50
51 if (!blur || override) {
52 return (
53 <View testID={testID} style={style}>
54 {children}
55 </View>
56 )
57 }
58
59 const isNoPwi = !!modui.blurs.find(
60 cause =>
61 cause.type === 'label' &&
62 cause.labelDef.identifier === '!no-unauthenticated',
63 )
64 return (
65 <CenteredView
66 style={[
67 a.flex_1,
68 {
69 paddingTop: 100,
70 paddingBottom: 150,
71 },
72 t.atoms.bg,
73 containerStyle,
74 ]}
75 sideBorders>
76 <View style={[a.align_center, a.mb_md]}>
77 <View
78 style={[
79 t.atoms.bg_contrast_975,
80 a.align_center,
81 a.justify_center,
82 {
83 borderRadius: 25,
84 width: 50,
85 height: 50,
86 },
87 ]}>
88 <desc.icon width={24} fill={t.atoms.bg.backgroundColor} />
89 </View>
90 </View>
91 <Text
92 style={[
93 a.text_4xl,
94 a.font_semi_bold,
95 a.text_center,
96 a.mb_md,
97 t.atoms.text,
98 ]}>
99 {isNoPwi ? (
100 <Trans>Sign-in Required</Trans>
101 ) : (
102 <Trans>Content Warning</Trans>
103 )}
104 </Text>
105 <Text
106 style={[
107 a.text_lg,
108 a.mb_md,
109 a.px_lg,
110 a.text_center,
111 a.leading_snug,
112 t.atoms.text_contrast_medium,
113 ]}>
114 {isNoPwi ? (
115 <Trans>
116 This account has requested that users sign in to view their profile.
117 </Trans>
118 ) : (
119 <>
120 <Trans>This {screenDescription} has been flagged:</Trans>{' '}
121 <Text
122 style={[
123 a.text_lg,
124 a.font_semi_bold,
125 a.leading_snug,
126 t.atoms.text,
127 a.ml_xs,
128 ]}>
129 {desc.name}.{' '}
130 </Text>
131 <TouchableWithoutFeedback
132 onPress={() => {
133 control.open()
134 }}
135 accessibilityRole="button"
136 accessibilityLabel={_(msg`Learn more about this warning`)}
137 accessibilityHint="">
138 <Text
139 style={[
140 a.text_lg,
141 a.leading_snug,
142 {
143 color: t.palette.primary_500,
144 },
145 web({
146 cursor: 'pointer',
147 }),
148 ]}>
149 <Trans>Learn More</Trans>
150 </Text>
151 </TouchableWithoutFeedback>
152 <ModerationDetailsDialog control={control} modcause={blur} />
153 </>
154 )}{' '}
155 </Text>
156 {isMobile && <View style={a.flex_1} />}
157 <View style={[a.flex_row, a.justify_center, a.my_md, a.gap_md]}>
158 <Button
159 variant="solid"
160 color="primary"
161 size="large"
162 style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
163 label={_(msg`Go back`)}
164 onPress={() => {
165 if (navigation.canGoBack()) {
166 navigation.goBack()
167 } else {
168 navigation.navigate('Home')
169 }
170 }}>
171 <ButtonText>
172 <Trans>Go back</Trans>
173 </ButtonText>
174 </Button>
175 {!modui.noOverride && (
176 <Button
177 variant="solid"
178 color="secondary"
179 size="large"
180 style={[enableSquareButtons ? a.rounded_sm : a.rounded_full]}
181 label={_(msg`Show anyway`)}
182 onPress={() => setOverride(v => !v)}>
183 <ButtonText>
184 <Trans>Show anyway</Trans>
185 </ButtonText>
186 </Button>
187 )}
188 </View>
189 </CenteredView>
190 )
191}