diff options
Diffstat (limited to 'src/view/com/util/post-ctrls/RepostButton.tsx')
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.tsx | 174 |
1 files changed, 99 insertions, 75 deletions
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index f58417887..1124cb405 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -1,108 +1,132 @@ import React, {memo, useCallback} from 'react' -import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native' +import {View} from 'react-native' import {msg, plural} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' import {useRequireAuth} from '#/state/session' -import {HITSLOP_10, HITSLOP_20} from 'lib/constants' -import {RepostIcon} from 'lib/icons' -import {colors, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {Text} from '../text/Text' +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' interface Props { isReposted: boolean repostCount?: number - big?: boolean onRepost: () => void onQuote: () => void + big?: boolean } let RepostButton = ({ isReposted, repostCount, - big, onRepost, onQuote, + big, }: Props): React.ReactNode => { - const theme = useTheme() + const t = useTheme() const {_} = useLingui() - const {openModal} = useModalControls() const requireAuth = useRequireAuth() + const dialogControl = Dialog.useDialogControl() - const defaultControlColor = React.useMemo( + const color = React.useMemo( () => ({ - color: theme.palette.default.postCtrl, + color: isReposted ? t.palette.positive_600 : t.palette.contrast_500, }), - [theme], + [t, isReposted], ) - const onPressToggleRepostWrapper = useCallback(() => { - openModal({ - name: 'repost', - onRepost: onRepost, - onQuote: onQuote, - isReposted, - }) - }, [onRepost, onQuote, isReposted, openModal]) + const close = useCallback(() => dialogControl.close(), [dialogControl]) return ( - <TouchableOpacity - testID="repostBtn" - onPress={() => { - requireAuth(() => onPressToggleRepostWrapper()) - }} - style={[styles.btn, !big && styles.btnPad]} - accessibilityRole="button" - accessibilityLabel={`${ - isReposted - ? _(msg`Undo repost`) - : _(msg({message: 'Repost', context: 'action'})) - } (${plural(repostCount || 0, {one: '# repost', other: '# reposts'})})`} - accessibilityHint="" - hitSlop={big ? HITSLOP_20 : HITSLOP_10}> - <RepostIcon - style={ + <> + <Button + testID="repostBtn" + onPress={() => { + requireAuth(() => dialogControl.open()) + }} + style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]} + hoverStyle={t.atoms.bg_contrast_25} + label={`${ isReposted - ? (styles.reposted as StyleProp<ViewStyle>) - : defaultControlColor - } - strokeWidth={2.4} - size={big ? 24 : 20} - /> - {typeof repostCount !== 'undefined' && repostCount > 0 ? ( - <Text - testID="repostCount" - style={ - isReposted - ? [s.bold, s.green3, s.f15, s.ml5] - : [defaultControlColor, s.f15, s.ml5] - }> - {repostCount} - </Text> - ) : undefined} - </TouchableOpacity> + ? _(msg`Undo repost`) + : _(msg({message: 'Repost', context: 'action'})) + } (${plural(repostCount || 0, {one: '# repost', other: '# reposts'})})`} + shape="round" + variant="ghost" + color="secondary"> + <Repost style={color} width={big ? 22 : 18} /> + {typeof repostCount !== 'undefined' && repostCount > 0 ? ( + <Text + testID="repostCount" + style={[ + color, + big ? a.text_md : {fontSize: 15}, + isReposted && a.font_bold, + ]}> + {repostCount} + </Text> + ) : undefined} + </Button> + <Dialog.Outer control={dialogControl}> + <Dialog.Handle /> + <Dialog.Inner label={_(msg`Repost or quote post`)}> + <View style={a.gap_xl}> + <View style={a.gap_xs}> + <Button + style={[a.justify_start, a.px_md]} + label={ + isReposted + ? _(msg`Remove repost`) + : _(msg({message: `Repost`, context: 'action'})) + } + onPress={() => { + dialogControl.close() + onRepost() + }} + size="large" + variant="ghost" + color="primary"> + <Repost size="lg" fill={t.palette.primary_500} /> + <Text style={[a.font_bold, a.text_xl]}> + {isReposted + ? _(msg`Remove repost`) + : _(msg({message: `Repost`, context: 'action'}))} + </Text> + </Button> + <Button + style={[a.justify_start, a.px_md]} + label={_(msg`Quote post`)} + onPress={() => { + dialogControl.close(() => { + onQuote() + }) + }} + size="large" + variant="ghost" + color="primary"> + <Quote size="lg" fill={t.palette.primary_500} /> + <Text style={[a.font_bold, a.text_xl]}> + {_(msg`Quote post`)} + </Text> + </Button> + </View> + <Button + label={_(msg`Cancel quote post`)} + onAccessibilityEscape={close} + onPress={close} + size="medium" + variant="solid" + color="primary"> + <ButtonText>{_(msg`Cancel`)}</ButtonText> + </Button> + </View> + </Dialog.Inner> + </Dialog.Outer> + </> ) } RepostButton = memo(RepostButton) export {RepostButton} - -const styles = StyleSheet.create({ - btn: { - flexDirection: 'row', - alignItems: 'center', - }, - btnPad: { - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 5, - paddingRight: 5, - }, - reposted: { - color: colors.green3, - }, - repostCount: { - color: 'currentColor', - }, -}) |