Add share warning to big share button in post ctrl (#3367)

zio/stable
Samuel Newman 2024-04-03 11:03:54 -07:00 committed by GitHub
parent 907c7c0586
commit 75c9da931c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 87 additions and 58 deletions

View File

@ -3,11 +3,10 @@ import {View} from 'react-native'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useTheme, atoms as a, useBreakpoints} from '#/alf' import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
import {Button, ButtonColor, ButtonText} from '#/components/Button' import {Button, ButtonColor, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog' import * as Dialog from '#/components/Dialog'
import {Text} from '#/components/Typography'
export {useDialogControl as usePromptControl} from '#/components/Dialog' export {useDialogControl as usePromptControl} from '#/components/Dialog'
@ -80,7 +79,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
<View <View
style={[ style={[
a.w_full, a.w_full,
a.gap_sm, a.gap_md,
a.justify_end, a.justify_end,
gtMobile gtMobile
? [a.flex_row, a.flex_row_reverse, a.justify_start] ? [a.flex_row, a.flex_row_reverse, a.justify_start]

View File

@ -1,50 +1,50 @@
import React, {memo} from 'react' import React, {memo} from 'react'
import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native' import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
import Clipboard from '@react-native-clipboard/clipboard'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useNavigation} from '@react-navigation/native'
import { import {
AppBskyActorDefs, AppBskyActorDefs,
AppBskyFeedPost, AppBskyFeedPost,
AtUri, AtUri,
RichText as RichTextAPI, RichText as RichTextAPI,
} from '@atproto/api' } from '@atproto/api'
import {toShareUrl} from 'lib/strings/url-helpers' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useTheme} from 'lib/ThemeContext' import {msg} from '@lingui/macro'
import {shareUrl} from 'lib/sharing' import {useLingui} from '@lingui/react'
import * as Toast from '../Toast' import Clipboard from '@react-native-clipboard/clipboard'
import {EventStopper} from '../EventStopper' import {useNavigation} from '@react-navigation/native'
import {useDialogControl} from '#/components/Dialog'
import * as Prompt from '#/components/Prompt'
import {makeProfileLink} from '#/lib/routes/links' import {makeProfileLink} from '#/lib/routes/links'
import {CommonNavigatorParams} from '#/lib/routes/types' import {CommonNavigatorParams} from '#/lib/routes/types'
import {getCurrentRoute} from 'lib/routes/helpers' import {richTextToString} from '#/lib/strings/rich-text-helpers'
import {getTranslatorLink} from '#/locale/helpers' import {getTranslatorLink} from '#/locale/helpers'
import {usePostDeleteMutation} from '#/state/queries/post' import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads' import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads'
import {useLanguagePrefs} from '#/state/preferences' import {useLanguagePrefs} from '#/state/preferences'
import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences' import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
import {useOpenLink} from '#/state/preferences/in-app-browser' import {useOpenLink} from '#/state/preferences/in-app-browser'
import {logger} from '#/logger' import {usePostDeleteMutation} from '#/state/queries/post'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {isWeb} from '#/platform/detection' import {getCurrentRoute} from 'lib/routes/helpers'
import {richTextToString} from '#/lib/strings/rich-text-helpers' import {shareUrl} from 'lib/sharing'
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' import {toShareUrl} from 'lib/strings/url-helpers'
import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' import {useTheme} from 'lib/ThemeContext'
import {atoms as a, useTheme as useAlf} from '#/alf' import {atoms as a, useTheme as useAlf} from '#/alf'
import * as Menu from '#/components/Menu' import {useDialogControl} from '#/components/Dialog'
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
import * as Menu from '#/components/Menu'
import * as Prompt from '#/components/Prompt'
import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
import {EventStopper} from '../EventStopper'
import * as Toast from '../Toast'
let PostDropdownBtn = ({ let PostDropdownBtn = ({
testID, testID,

View File

@ -12,29 +12,32 @@ import {
AtUri, AtUri,
RichText as RichTextAPI, RichText as RichTextAPI,
} from '@atproto/api' } from '@atproto/api'
import {Text} from '../text/Text' import {msg} from '@lingui/macro'
import {PostDropdownBtn} from '../forms/PostDropdownBtn' import {useLingui} from '@lingui/react'
import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons'
import {s} from 'lib/styles' import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
import {pluralize} from 'lib/strings/helpers' import {Haptics} from '#/lib/haptics'
import {useTheme} from 'lib/ThemeContext' import {CommentBottomArrow, HeartIcon, HeartIconSolid} from '#/lib/icons'
import {RepostButton} from './RepostButton' import {makeProfileLink} from '#/lib/routes/links'
import {Haptics} from 'lib/haptics' import {shareUrl} from '#/lib/sharing'
import {HITSLOP_10, HITSLOP_20} from 'lib/constants' import {pluralize} from '#/lib/strings/helpers'
import {toShareUrl} from '#/lib/strings/url-helpers'
import {s} from '#/lib/styles'
import {useTheme} from '#/lib/ThemeContext'
import {Shadow} from '#/state/cache/types'
import {useModalControls} from '#/state/modals' import {useModalControls} from '#/state/modals'
import { import {
usePostLikeMutationQueue, usePostLikeMutationQueue,
usePostRepostMutationQueue, usePostRepostMutationQueue,
} from '#/state/queries/post' } from '#/state/queries/post'
import {useComposerControls} from '#/state/shell/composer'
import {Shadow} from '#/state/cache/types'
import {useRequireAuth} from '#/state/session' import {useRequireAuth} from '#/state/session'
import {msg} from '@lingui/macro' import {useComposerControls} from '#/state/shell/composer'
import {useLingui} from '@lingui/react' import {useDialogControl} from '#/components/Dialog'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
import {toShareUrl} from 'lib/strings/url-helpers' import * as Prompt from '#/components/Prompt'
import {shareUrl} from 'lib/sharing' import {PostDropdownBtn} from '../forms/PostDropdownBtn'
import {makeProfileLink} from 'lib/routes/links' import {Text} from '../text/Text'
import {RepostButton} from './RepostButton'
let PostCtrls = ({ let PostCtrls = ({
big, big,
@ -63,6 +66,13 @@ let PostCtrls = ({
logContext, logContext,
) )
const requireAuth = useRequireAuth() const requireAuth = useRequireAuth()
const loggedOutWarningPromptControl = useDialogControl()
const shouldShowLoggedOutWarning = React.useMemo(() => {
return !!post.author.labels?.find(
label => label.val === '!no-unauthenticated',
)
}, [post])
const defaultCtrlColor = React.useMemo( const defaultCtrlColor = React.useMemo(
() => ({ () => ({
@ -209,18 +219,38 @@ let PostCtrls = ({
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{big && ( {big && (
<View style={styles.ctrlBig}> <>
<TouchableOpacity <View style={styles.ctrlBig}>
testID="shareBtn" <TouchableOpacity
style={[styles.btn]} testID="shareBtn"
onPress={onShare} style={[styles.btn]}
accessibilityRole="button" onPress={() => {
accessibilityLabel={`${_(msg`Share`)}`} if (shouldShowLoggedOutWarning) {
accessibilityHint="" loggedOutWarningPromptControl.open()
hitSlop={big ? HITSLOP_20 : HITSLOP_10}> } else {
<ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} /> onShare()
</TouchableOpacity> }
</View> }}
accessibilityRole="button"
accessibilityLabel={`${_(msg`Share`)}`}
accessibilityHint=""
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
<ArrowOutOfBox
style={[defaultCtrlColor, styles.mt1]}
width={22}
/>
</TouchableOpacity>
</View>
<Prompt.Basic
control={loggedOutWarningPromptControl}
title={_(msg`Note about sharing`)}
description={_(
msg`This post is only visible to logged-in users. It won't be visible to people who aren't logged in.`,
)}
onConfirm={onShare}
confirmButtonCta={_(msg`Share anyway`)}
/>
</>
)} )}
<View style={big ? styles.ctrlBig : styles.ctrl}> <View style={big ? styles.ctrlBig : styles.ctrl}>
<PostDropdownBtn <PostDropdownBtn