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