From 04c101dd8032ea6b5b71c2981e2b6ae322b6b5d5 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 1 May 2024 19:19:13 -0700 Subject: [PATCH] add delete button --- src/components/dms/GrowWrapper.tsx | 57 +++++++------------ src/components/dms/MessageMenu.tsx | 49 +++++++++++----- .../Messages/Conversation/MessageItem.tsx | 27 ++------- 3 files changed, 64 insertions(+), 69 deletions(-) diff --git a/src/components/dms/GrowWrapper.tsx b/src/components/dms/GrowWrapper.tsx index 9a6748f462..021e52083a 100644 --- a/src/components/dms/GrowWrapper.tsx +++ b/src/components/dms/GrowWrapper.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useImperativeHandle} from 'react' +import React, {useCallback} from 'react' import {Pressable} from 'react-native' import Animated, { cancelAnimation, @@ -8,22 +8,19 @@ import Animated, { withTiming, } from 'react-native-reanimated' +import {useHaptics} from 'lib/haptics' + const AnimatedPressable = Animated.createAnimatedComponent(Pressable) -export interface GrowWrapperRef { - reset: () => void -} +export const GrowWrapper = function GrowWrapper({ + onOpenMenu, + children, +}: { + onOpenMenu: () => unknown + children: React.ReactNode +}) { + const playHaptic = useHaptics() -export const GrowWrapper = React.forwardRef(function GrowWrapper( - { - onOpenMenu, - children, - }: { - onOpenMenu: () => unknown - children: React.ReactNode - }, - ref, -) { const scale = useSharedValue(1) const animationDidComplete = useSharedValue(false) @@ -31,31 +28,21 @@ export const GrowWrapper = React.forwardRef(function GrowWrapper( transform: [{scale: scale.value}], })) - const reset = useCallback(() => { + const onTouchStart = React.useCallback(() => { + scale.value = withTiming(1.05, {duration: 750}, finished => { + if (!finished) return + animationDidComplete.value = true + runOnJS(playHaptic)() + runOnJS(onOpenMenu)() + }) + }, [scale, animationDidComplete, playHaptic, onOpenMenu]) + + const onTouchEnd = useCallback(() => { cancelAnimation(scale) animationDidComplete.value = false scale.value = withTiming(1, {duration: 200}) }, [animationDidComplete, scale]) - const onTouchStart = React.useCallback(() => { - scale.value = withTiming(1.05, {duration: 750}, finished => { - if (!finished) return - - animationDidComplete.value = true - runOnJS(onOpenMenu)() - }) - }, [scale, animationDidComplete, onOpenMenu]) - - const onTouchEnd = React.useCallback(() => { - if (!animationDidComplete.value) { - reset() - } - }, [animationDidComplete, reset]) - - useImperativeHandle(ref, () => ({ - reset, - })) - return ( ) -}) +} diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx index 19ee52870a..c587643fe9 100644 --- a/src/components/dms/MessageMenu.tsx +++ b/src/components/dms/MessageMenu.tsx @@ -1,32 +1,55 @@ import React from 'react' -import {View} from 'react-native' import {ChatBskyConvoDefs} from '@atproto-labs/api' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {atoms as a} from '#/alf' -import * as Dialog from '#/components/Dialog' +import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Menu from '#/components/Menu' +import * as Prompt from '#/components/Prompt' +import {usePromptControl} from '#/components/Prompt' export let MessageMenu = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars message, - onClose, control, }: { message: ChatBskyConvoDefs.MessageView - onClose: () => void - control: Dialog.DialogControlProps + control: Menu.MenuControlProps }): React.ReactNode => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars const {_} = useLingui() + const deleteControl = usePromptControl() + + const onDelete = React.useCallback(() => { + // TODO delete the message + }, []) return ( - - + <> + + + + + {_(msg`Delete message`)} + + + + + - - - - + + ) } MessageMenu = React.memo(MessageMenu) diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx index 1c184d5832..486e76613a 100644 --- a/src/screens/Messages/Conversation/MessageItem.tsx +++ b/src/screens/Messages/Conversation/MessageItem.tsx @@ -1,17 +1,13 @@ import React, {useMemo} from 'react' import {View} from 'react-native' import {ChatBskyConvoDefs} from '@atproto-labs/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useSession} from '#/state/session' -import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {atoms as a, useTheme} from '#/alf' -import {useDialogControl} from '#/components/Dialog' import {GrowWrapper} from '#/components/dms/GrowWrapper' +import {MessageItemMetadata} from '#/components/dms/MesageItemMetadata' import {MessageMenu} from '#/components/dms/MessageMenu' -import * as Prompt from '#/components/Prompt' -import {usePromptControl} from '#/components/Prompt' +import {useMenuControl} from '#/components/Menu' import {Text} from '#/components/Typography' export function MessageItem({ @@ -25,10 +21,9 @@ export function MessageItem({ | null }) { const t = useTheme() - const {_} = useLingui() const {currentAccount} = useSession() - const control = useDialogControl() + const menuControl = useMenuControl() const isFromSelf = item.sender?.did === currentAccount?.did @@ -57,8 +52,8 @@ export function MessageItem({ }, [item, next, isFromSelf, isNextFromSelf]) const onOpenMenu = React.useCallback(() => { - control.open() - }, [control]) + menuControl.open() + }, [menuControl]) return ( - - + )