Add share warning to big share button in post ctrl (#3367)
parent
907c7c0586
commit
75c9da931c
|
@ -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]
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue