Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
8.5 kB · 261 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262import {memo, useCallback} from 'react'import {View} from 'react-native'import {msg, plural, Trans} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {useHaptics} from '#/lib/haptics'import {getTerminology, TERMINOLOGY} from '#/lib/strings/terminology'import {useTerminologyPreference} from '#/state/preferences'import {useRequireAuth} from '#/state/session'import {atoms as a, useTheme} from '#/alf'import {Button, ButtonText} from '#/components/Button'import * as Dialog from '#/components/Dialog'import {CloseQuote_Stroke2_Corner1_Rounded as QuoteIcon} from '#/components/icons/Quote'import {Repost_Stroke2_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost'import {useFormatPostStatCount} from '#/components/PostControls/util'import {Text} from '#/components/Typography'import { PostControlButton, PostControlButtonIcon, PostControlButtonText,} from './PostControlButton'
interface Props { isReposted: boolean repostCount?: number onRepost: () => void onQuote: () => void big?: boolean embeddingDisabled: boolean}
let RepostButton = ({ isReposted, repostCount, onRepost, onQuote, big, embeddingDisabled,}: Props): React.ReactNode => { const t = useTheme() const {_} = useLingui() const terminologyPreference = useTerminologyPreference() const requireAuth = useRequireAuth() const dialogControl = Dialog.useDialogControl() const formatPostStatCount = useFormatPostStatCount()
const onPress = () => requireAuth(() => dialogControl.open())
const onLongPress = () => requireAuth(() => { if (embeddingDisabled) { dialogControl.open() } else { onQuote() } })
return ( <> <PostControlButton testID="repostBtn" active={isReposted} activeColor={t.palette.positive_500} big={big} onPress={onPress} onLongPress={onLongPress} label={ isReposted ? _( msg({ message: `Undo repost (${plural(repostCount || 0, { one: '# repost', other: '# reposts', })})`, comment: 'Accessibility label for the repost button when the post has been reposted, verb followed by number of reposts and noun', }), ) : _( msg({ message: `Repost (${plural(repostCount || 0, { one: '# repost', other: '# reposts', })})`, comment: 'Accessibility label for the repost button when the post has not been reposted, verb form followed by number of reposts and noun form', }), ) }> <PostControlButtonIcon icon={RepostIcon} /> {typeof repostCount !== 'undefined' && repostCount > 0 && ( <PostControlButtonText testID="repostCount"> {formatPostStatCount(repostCount)} </PostControlButtonText> )} </PostControlButton> <Dialog.Outer control={dialogControl} nativeOptions={{preventExpansion: true}}> <Dialog.Handle /> <RepostButtonDialogInner isReposted={isReposted} onRepost={onRepost} onQuote={onQuote} embeddingDisabled={embeddingDisabled} /> </Dialog.Outer> </> )}RepostButton = memo(RepostButton)export {RepostButton}
let RepostButtonDialogInner = ({ isReposted, onRepost, onQuote, embeddingDisabled,}: { isReposted: boolean onRepost: () => void onQuote: () => void embeddingDisabled: boolean}): React.ReactNode => { const t = useTheme() const {_} = useLingui() const terminologyPreference = useTerminologyPreference() const playHaptic = useHaptics() const control = Dialog.useDialogContext()
const onPressRepost = useCallback(() => { if (!isReposted) playHaptic()
control.close(() => { onRepost() }) }, [control, isReposted, onRepost, playHaptic])
const onPressQuote = useCallback(() => { playHaptic() control.close(() => { onQuote() }) }, [control, onQuote, playHaptic])
const onPressClose = useCallback(() => control.close(), [control])
return ( <Dialog.ScrollableInner label={_(getTerminology(terminologyPreference, { skeet: msg`Reskeet or quote skeet`, post: msg`Repost or quote post`, spell: msg`Respell or quote spell`, }))}> <View style={a.gap_xl}> <View style={a.gap_xs}> <Button style={[a.justify_start, a.px_md, a.gap_sm]} label={ isReposted ? _(getTerminology(terminologyPreference, { skeet: msg`Remove reskeet`, post: msg`Remove repost`, spell: msg`Remove respell`, })) : _(getTerminology(terminologyPreference, { skeet: msg({message: `Reskeet`, context: 'action'}), post: msg({message: `Repost`, context: 'action'}), spell: msg({message: `Respell`, context: 'action'}), })) } onPress={onPressRepost} size="large" variant="ghost" color="primary"> <RepostIcon size="lg" fill={t.palette.primary_500} /> <Text style={[a.font_semi_bold, a.text_xl]}> {isReposted ? ( <Trans>{_(getTerminology(terminologyPreference, { skeet: msg`Remove reskeet`, post: msg`Remove repost`, spell: msg`Remove respell`, }))}</Trans> ) : ( <Trans>{_(getTerminology(terminologyPreference, { skeet: msg({message: `Reskeet`, context: 'action'}), post: msg({message: `Repost`, context: 'action'}), spell: msg({message: `Respell`, context: 'action'}), }))}</Trans> )} </Text> </Button> <Button disabled={embeddingDisabled} testID="quoteBtn" style={[a.justify_start, a.px_md, a.gap_sm]} label={ embeddingDisabled ? _(getTerminology(terminologyPreference, { skeet: msg`Quote skeets disabled`, post: msg`Quote posts disabled`, spell: msg`Quote spells disabled`, })) : _(getTerminology(terminologyPreference, { skeet: msg`Quote skeet`, post: msg`Quote post`, spell: msg`Quote spell`, })) } onPress={onPressQuote} size="large" variant="ghost" color="primary"> <QuoteIcon size="lg" fill={ embeddingDisabled ? t.atoms.text_contrast_low.color : t.palette.primary_500 } /> <Text style={[ a.font_semi_bold, a.text_xl, embeddingDisabled && t.atoms.text_contrast_low, ]}> {embeddingDisabled ? ( <Trans>{_(getTerminology(terminologyPreference, { skeet: msg`Quote skeets disabled`, post: msg`Quote posts disabled`, spell: msg`Quote spells disabled`, }))}</Trans> ) : ( <Trans>{_(getTerminology(terminologyPreference, { skeet: msg`Quote skeet`, post: msg`Quote post`, spell: msg`Quote spell`, }))}</Trans> )} </Text> </Button> </View> <Button label={_(getTerminology(terminologyPreference, { skeet: msg`Cancel quote skeet`, post: msg`Cancel quote post`, spell: msg`Cancel quote spell`, }))} onPress={onPressClose} size="large" color="secondary"> <ButtonText> <Trans>Cancel</Trans> </ButtonText> </Button> </View> </Dialog.ScrollableInner> )}RepostButtonDialogInner = memo(RepostButtonDialogInner)export {RepostButtonDialogInner}