forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add share warning to big share button in post ctrl (#3367)
authored by
Samuel Newman
and committed by
GitHub
75c9da93
907c7c05
+87
-58
+3
-4
src/components/Prompt.tsx
+3
-4
src/components/Prompt.tsx
···
3
3
import {msg} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {useTheme, atoms as a, useBreakpoints} from '#/alf'
7
-
import {Text} from '#/components/Typography'
6
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
8
7
import {Button, ButtonColor, ButtonText} from '#/components/Button'
9
-
10
8
import * as Dialog from '#/components/Dialog'
9
+
import {Text} from '#/components/Typography'
11
10
12
11
export {useDialogControl as usePromptControl} from '#/components/Dialog'
13
12
···
80
79
<View
81
80
style={[
82
81
a.w_full,
83
-
a.gap_sm,
82
+
a.gap_md,
84
83
a.justify_end,
85
84
gtMobile
86
85
? [a.flex_row, a.flex_row_reverse, a.justify_start]
+26
-26
src/view/com/util/forms/PostDropdownBtn.tsx
+26
-26
src/view/com/util/forms/PostDropdownBtn.tsx
···
1
1
import React, {memo} from 'react'
2
-
import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native'
3
-
import Clipboard from '@react-native-clipboard/clipboard'
4
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5
-
import {useNavigation} from '@react-navigation/native'
2
+
import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
6
3
import {
7
4
AppBskyActorDefs,
8
5
AppBskyFeedPost,
9
6
AtUri,
10
7
RichText as RichTextAPI,
11
8
} from '@atproto/api'
12
-
import {toShareUrl} from 'lib/strings/url-helpers'
13
-
import {useTheme} from 'lib/ThemeContext'
14
-
import {shareUrl} from 'lib/sharing'
15
-
import * as Toast from '../Toast'
16
-
import {EventStopper} from '../EventStopper'
17
-
import {useDialogControl} from '#/components/Dialog'
18
-
import * as Prompt from '#/components/Prompt'
9
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
+
import {msg} from '@lingui/macro'
11
+
import {useLingui} from '@lingui/react'
12
+
import Clipboard from '@react-native-clipboard/clipboard'
13
+
import {useNavigation} from '@react-navigation/native'
14
+
19
15
import {makeProfileLink} from '#/lib/routes/links'
20
16
import {CommonNavigatorParams} from '#/lib/routes/types'
21
-
import {getCurrentRoute} from 'lib/routes/helpers'
17
+
import {richTextToString} from '#/lib/strings/rich-text-helpers'
22
18
import {getTranslatorLink} from '#/locale/helpers'
23
-
import {usePostDeleteMutation} from '#/state/queries/post'
19
+
import {logger} from '#/logger'
20
+
import {isWeb} from '#/platform/detection'
24
21
import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads'
25
22
import {useLanguagePrefs} from '#/state/preferences'
26
23
import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
27
24
import {useOpenLink} from '#/state/preferences/in-app-browser'
28
-
import {logger} from '#/logger'
29
-
import {msg} from '@lingui/macro'
30
-
import {useLingui} from '@lingui/react'
25
+
import {usePostDeleteMutation} from '#/state/queries/post'
31
26
import {useSession} from '#/state/session'
32
-
import {isWeb} from '#/platform/detection'
33
-
import {richTextToString} from '#/lib/strings/rich-text-helpers'
34
-
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
35
-
import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
36
-
27
+
import {getCurrentRoute} from 'lib/routes/helpers'
28
+
import {shareUrl} from 'lib/sharing'
29
+
import {toShareUrl} from 'lib/strings/url-helpers'
30
+
import {useTheme} from 'lib/ThemeContext'
37
31
import {atoms as a, useTheme as useAlf} from '#/alf'
38
-
import * as Menu from '#/components/Menu'
39
-
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
40
-
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
32
+
import {useDialogControl} from '#/components/Dialog'
33
+
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
41
34
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
35
+
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
36
+
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
42
37
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
38
+
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
43
39
import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
44
40
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
45
-
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
41
+
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
46
42
import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
47
-
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
43
+
import * as Menu from '#/components/Menu'
44
+
import * as Prompt from '#/components/Prompt'
45
+
import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
46
+
import {EventStopper} from '../EventStopper'
47
+
import * as Toast from '../Toast'
48
48
49
49
let PostDropdownBtn = ({
50
50
testID,
+58
-28
src/view/com/util/post-ctrls/PostCtrls.tsx
+58
-28
src/view/com/util/post-ctrls/PostCtrls.tsx
···
12
12
AtUri,
13
13
RichText as RichTextAPI,
14
14
} from '@atproto/api'
15
-
import {Text} from '../text/Text'
16
-
import {PostDropdownBtn} from '../forms/PostDropdownBtn'
17
-
import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons'
18
-
import {s} from 'lib/styles'
19
-
import {pluralize} from 'lib/strings/helpers'
20
-
import {useTheme} from 'lib/ThemeContext'
21
-
import {RepostButton} from './RepostButton'
22
-
import {Haptics} from 'lib/haptics'
23
-
import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
15
+
import {msg} from '@lingui/macro'
16
+
import {useLingui} from '@lingui/react'
17
+
18
+
import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
19
+
import {Haptics} from '#/lib/haptics'
20
+
import {CommentBottomArrow, HeartIcon, HeartIconSolid} from '#/lib/icons'
21
+
import {makeProfileLink} from '#/lib/routes/links'
22
+
import {shareUrl} from '#/lib/sharing'
23
+
import {pluralize} from '#/lib/strings/helpers'
24
+
import {toShareUrl} from '#/lib/strings/url-helpers'
25
+
import {s} from '#/lib/styles'
26
+
import {useTheme} from '#/lib/ThemeContext'
27
+
import {Shadow} from '#/state/cache/types'
24
28
import {useModalControls} from '#/state/modals'
25
29
import {
26
30
usePostLikeMutationQueue,
27
31
usePostRepostMutationQueue,
28
32
} from '#/state/queries/post'
29
-
import {useComposerControls} from '#/state/shell/composer'
30
-
import {Shadow} from '#/state/cache/types'
31
33
import {useRequireAuth} from '#/state/session'
32
-
import {msg} from '@lingui/macro'
33
-
import {useLingui} from '@lingui/react'
34
+
import {useComposerControls} from '#/state/shell/composer'
35
+
import {useDialogControl} from '#/components/Dialog'
34
36
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
35
-
import {toShareUrl} from 'lib/strings/url-helpers'
36
-
import {shareUrl} from 'lib/sharing'
37
-
import {makeProfileLink} from 'lib/routes/links'
37
+
import * as Prompt from '#/components/Prompt'
38
+
import {PostDropdownBtn} from '../forms/PostDropdownBtn'
39
+
import {Text} from '../text/Text'
40
+
import {RepostButton} from './RepostButton'
38
41
39
42
let PostCtrls = ({
40
43
big,
···
63
66
logContext,
64
67
)
65
68
const requireAuth = useRequireAuth()
69
+
const loggedOutWarningPromptControl = useDialogControl()
70
+
71
+
const shouldShowLoggedOutWarning = React.useMemo(() => {
72
+
return !!post.author.labels?.find(
73
+
label => label.val === '!no-unauthenticated',
74
+
)
75
+
}, [post])
66
76
67
77
const defaultCtrlColor = React.useMemo(
68
78
() => ({
···
209
219
</TouchableOpacity>
210
220
</View>
211
221
{big && (
212
-
<View style={styles.ctrlBig}>
213
-
<TouchableOpacity
214
-
testID="shareBtn"
215
-
style={[styles.btn]}
216
-
onPress={onShare}
217
-
accessibilityRole="button"
218
-
accessibilityLabel={`${_(msg`Share`)}`}
219
-
accessibilityHint=""
220
-
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
221
-
<ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
222
-
</TouchableOpacity>
223
-
</View>
222
+
<>
223
+
<View style={styles.ctrlBig}>
224
+
<TouchableOpacity
225
+
testID="shareBtn"
226
+
style={[styles.btn]}
227
+
onPress={() => {
228
+
if (shouldShowLoggedOutWarning) {
229
+
loggedOutWarningPromptControl.open()
230
+
} else {
231
+
onShare()
232
+
}
233
+
}}
234
+
accessibilityRole="button"
235
+
accessibilityLabel={`${_(msg`Share`)}`}
236
+
accessibilityHint=""
237
+
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
238
+
<ArrowOutOfBox
239
+
style={[defaultCtrlColor, styles.mt1]}
240
+
width={22}
241
+
/>
242
+
</TouchableOpacity>
243
+
</View>
244
+
<Prompt.Basic
245
+
control={loggedOutWarningPromptControl}
246
+
title={_(msg`Note about sharing`)}
247
+
description={_(
248
+
msg`This post is only visible to logged-in users. It won't be visible to people who aren't logged in.`,
249
+
)}
250
+
onConfirm={onShare}
251
+
confirmButtonCta={_(msg`Share anyway`)}
252
+
/>
253
+
</>
224
254
)}
225
255
<View style={big ? styles.ctrlBig : styles.ctrl}>
226
256
<PostDropdownBtn