use prompt component
This commit is contained in:
vineyardbovines
@@ -1,12 +1,13 @@
|
||||
import {Modal, Pressable, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Trans} from '@lingui/react/macro'
|
||||
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button, ButtonText} from '#/components/Button'
|
||||
import * as Dialog from '#/components/Dialog'
|
||||
import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {navigate} from '#/Navigation'
|
||||
|
||||
@@ -24,88 +25,6 @@ export function BotAccountInfoDialog({
|
||||
}
|
||||
|
||||
export function BotAccountOwnAlert({
|
||||
visible,
|
||||
onClose,
|
||||
}: {
|
||||
visible: boolean
|
||||
onClose: (cb?: () => void) => void
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => onClose()}
|
||||
accessibilityLabel={_(msg`Automated account`)}
|
||||
accessibilityViewIsModal>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Close`)}
|
||||
onPress={() => onClose()}
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
a.px_xl,
|
||||
{backgroundColor: 'rgba(0,0,0,0.5)'},
|
||||
]}>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
onPress={e => e.stopPropagation()}
|
||||
style={[
|
||||
t.atoms.bg,
|
||||
a.w_full,
|
||||
{borderRadius: 48},
|
||||
a.p_2xl,
|
||||
{maxWidth: 280},
|
||||
]}>
|
||||
<View style={[a.align_center, a.gap_md]}>
|
||||
<View style={[t.atoms.shadow_sm]}>
|
||||
<RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
|
||||
</View>
|
||||
|
||||
<Text style={[a.text_md, a.text_center, a.py_sm]}>
|
||||
<Trans>
|
||||
You have marked this account as automated. You can remove it at
|
||||
any time from your account settings.
|
||||
</Trans>
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label={_(msg`Okay`)}
|
||||
onPress={() => onClose()}
|
||||
color="primary"
|
||||
size="large"
|
||||
style={[a.w_full]}>
|
||||
<ButtonText>
|
||||
<Trans>Okay</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
<Button
|
||||
label={_(msg`Open settings`)}
|
||||
onPress={() => {
|
||||
onClose(() => {
|
||||
navigate('AutomationLabelSettings')
|
||||
})
|
||||
}}
|
||||
color="secondary"
|
||||
size="large"
|
||||
style={[a.w_full]}>
|
||||
<ButtonText>
|
||||
<Trans>Open settings</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export function BotAccountOwnAlertWeb({
|
||||
control,
|
||||
}: {
|
||||
control: Dialog.DialogControlProps
|
||||
@@ -114,49 +33,35 @@ export function BotAccountOwnAlertWeb({
|
||||
const t = useTheme()
|
||||
|
||||
return (
|
||||
<Dialog.Outer control={control} webOptions={{alignCenter: true}}>
|
||||
<Dialog.ScrollableInner
|
||||
label={_(msg`Automated account`)}
|
||||
style={web([{maxWidth: 320, borderRadius: 36}])}>
|
||||
<View style={[a.align_center, a.gap_2xl, a.py_md]}>
|
||||
<View style={[t.atoms.shadow_sm]}>
|
||||
<RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
|
||||
</View>
|
||||
<Text style={[a.text_md, a.text_center]}>
|
||||
<Trans>
|
||||
You have marked this account as automated. You can remove it at
|
||||
any time from your account settings.
|
||||
</Trans>
|
||||
</Text>
|
||||
<Button
|
||||
label={_(msg`Okay`)}
|
||||
onPress={() => control.close()}
|
||||
color="primary"
|
||||
size="large"
|
||||
style={[a.w_full]}>
|
||||
<ButtonText>
|
||||
<Trans>Okay</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
<Button
|
||||
label={_(msg`Open settings`)}
|
||||
onPress={() => {
|
||||
control.close(() => {
|
||||
navigate('AutomationLabelSettings')
|
||||
})
|
||||
}}
|
||||
color="secondary"
|
||||
size="large"
|
||||
variant="ghost"
|
||||
style={[a.w_full]}>
|
||||
<ButtonText>
|
||||
<Trans>Open settings</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
<Prompt.Outer control={control} type="alert">
|
||||
<Prompt.Content>
|
||||
<View style={[a.align_center, a.pb_sm]}>
|
||||
<RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
|
||||
</View>
|
||||
<Dialog.Close />
|
||||
</Dialog.ScrollableInner>
|
||||
</Dialog.Outer>
|
||||
<Prompt.DescriptionText>
|
||||
<Trans>
|
||||
You have marked this account as automated. You can remove it at any
|
||||
time from your account settings.
|
||||
</Trans>
|
||||
</Prompt.DescriptionText>
|
||||
</Prompt.Content>
|
||||
<Prompt.Actions>
|
||||
<Prompt.Action cta={_(msg`Okay`)} onPress={() => {}} color="primary" />
|
||||
<Button
|
||||
label={_(msg`Open settings`)}
|
||||
onPress={() => {
|
||||
control.close(() => {
|
||||
navigate('AutomationLabelSettings')
|
||||
})
|
||||
}}
|
||||
color="secondary"
|
||||
size="large">
|
||||
<ButtonText>
|
||||
<Trans>Open settings</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</Prompt.Actions>
|
||||
</Prompt.Outer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,18 @@
|
||||
import {useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {type ComAtprotoLabelDefs} from '@atproto/api'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {useAnalytics} from '#/analytics'
|
||||
import {IS_NATIVE} from '#/env'
|
||||
import {isBotAccount} from '#/lib/bots'
|
||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||
import {
|
||||
BotAccountInfoDialog,
|
||||
BotAccountOwnAlert,
|
||||
BotAccountOwnAlertWeb,
|
||||
} from '#/components/BotAccountInfoDialog'
|
||||
import {Button} from '#/components/Button'
|
||||
import {useDialogControl} from '#/components/Dialog'
|
||||
import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
|
||||
import {useAnalytics} from '#/analytics'
|
||||
|
||||
export function BotBadge({
|
||||
profile,
|
||||
@@ -53,7 +50,6 @@ export function BotBadgeButton({
|
||||
const {_} = useLingui()
|
||||
const {gtPhone} = useBreakpoints()
|
||||
const control = useDialogControl()
|
||||
const [alertVisible, setAlertVisible] = useState(false)
|
||||
|
||||
if (!isBotAccount(profile)) {
|
||||
return null
|
||||
@@ -66,8 +62,6 @@ export function BotBadgeButton({
|
||||
dimensions = 14
|
||||
}
|
||||
|
||||
const useNativeAlert = isMe && IS_NATIVE
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
@@ -76,11 +70,7 @@ export function BotBadgeButton({
|
||||
onPress={evt => {
|
||||
evt.preventDefault()
|
||||
ax.metric('bot:badge:click', {})
|
||||
if (useNativeAlert) {
|
||||
setAlertVisible(true)
|
||||
} else {
|
||||
control.open()
|
||||
}
|
||||
control.open()
|
||||
}}>
|
||||
{({hovered}) => (
|
||||
<View
|
||||
@@ -101,16 +91,8 @@ export function BotBadgeButton({
|
||||
</View>
|
||||
)}
|
||||
</Button>
|
||||
{useNativeAlert ? (
|
||||
<BotAccountOwnAlert
|
||||
visible={alertVisible}
|
||||
onClose={cb => {
|
||||
setAlertVisible(false)
|
||||
cb?.()
|
||||
}}
|
||||
/>
|
||||
) : isMe ? (
|
||||
<BotAccountOwnAlertWeb control={control} />
|
||||
{isMe ? (
|
||||
<BotAccountOwnAlert control={control} />
|
||||
) : (
|
||||
<BotAccountInfoDialog control={control} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user