From c3f88e0a48bdf22831736ad3d44222e7c4418486 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Sat, 24 May 2025 02:02:38 +0300 Subject: Share menu (#7840) * move post ctrls to #/components * restructure post controls, basic share menu * add border radius to searchable people list for android * Revert "add border radius to searchable people list for android" This reverts commit 417449086e25b82f5683b12f6405d972f48ce50e. * add copy link to native share menu * reorg files again * open native share menu on long press * Translation comments Thanks @surfdude29 * abs path * update type imports, remove forwardRef * rm react import * equal spacing of buttons, extract disco debug * add better icon * add right offset to share button for visual alignment * Add recent chats to share menu (#7853) * add recent chats to share menu * Update RecentChats.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update RecentChats.tsx * add fading edge on andriod * tweak scrollview * Add metrics and A/B alt icon to share menu (#8401) * add metrics * add a/b tested alt icon --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * More descriptive share text/icon on web (#7854) * more descriptive share text on web * revert dev mode changes * add missing import * use modified share icon everywhere * Add back conflicting changes --------- Co-authored-by: Eric Bailey --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Eric Bailey --- src/components/PostControls/RepostButton.tsx | 206 +++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 src/components/PostControls/RepostButton.tsx (limited to 'src/components/PostControls/RepostButton.tsx') diff --git a/src/components/PostControls/RepostButton.tsx b/src/components/PostControls/RepostButton.tsx new file mode 100644 index 000000000..db63a7383 --- /dev/null +++ b/src/components/PostControls/RepostButton.tsx @@ -0,0 +1,206 @@ +import {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 {useRequireAuth} from '#/state/session' +import {formatCount} from '#/view/com/util/numeric/format' +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 Quote} from '#/components/icons/Quote' +import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' +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 {_, i18n} = useLingui() + const requireAuth = useRequireAuth() + const dialogControl = Dialog.useDialogControl() + + return ( + <> + requireAuth(() => dialogControl.open())} + onLongPress={() => requireAuth(() => onQuote())} + 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', + }), + ) + }> + + {typeof repostCount !== 'undefined' && repostCount > 0 && ( + + {formatCount(i18n, repostCount)} + + )} + + + + + + + ) +} +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 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 ( + + + + + + + + + + ) +} +RepostButtonDialogInner = memo(RepostButtonDialogInner) +export {RepostButtonDialogInner} -- cgit 1.4.1