[Clipclops] Message actions for native and web (#3807)
* haptic on long press * add animation to press and hold * eslint disable for now * adjust styles * dont trigger if animation is cancelled * organize * add a delete menu * reset scale automatically * message actions dialog cleanup center the trigger handle focus/unfocus better make triggers accessible weg dropdown menu add a wep specific wrapper decrease press delay add report button improve shrink logic use `self_end` instead of `margin: auto` rm extra `?` move `MessageItem` to `components` add delete button * rm some padding * update after merge * fix merge * web only types * fix crash * add an explanation * fix web types --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>zio/stable
parent
6da18e3dcf
commit
8ba1b10ce0
|
@ -0,0 +1,82 @@
|
||||||
|
import React, {useCallback} from 'react'
|
||||||
|
import {Pressable, View} from 'react-native'
|
||||||
|
import Animated, {
|
||||||
|
cancelAnimation,
|
||||||
|
runOnJS,
|
||||||
|
useAnimatedStyle,
|
||||||
|
useSharedValue,
|
||||||
|
withTiming,
|
||||||
|
} from 'react-native-reanimated'
|
||||||
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
|
|
||||||
|
import {useHaptics} from 'lib/haptics'
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
|
import {MessageMenu} from '#/components/dms/MessageMenu'
|
||||||
|
import {useMenuControl} from '#/components/Menu'
|
||||||
|
|
||||||
|
const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
|
||||||
|
|
||||||
|
export function ActionsWrapper({
|
||||||
|
message,
|
||||||
|
isFromSelf,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
message: ChatBskyConvoDefs.MessageView
|
||||||
|
isFromSelf: boolean
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
const playHaptic = useHaptics()
|
||||||
|
const menuControl = useMenuControl()
|
||||||
|
|
||||||
|
const scale = useSharedValue(1)
|
||||||
|
const animationDidComplete = useSharedValue(false)
|
||||||
|
|
||||||
|
const animatedStyle = useAnimatedStyle(() => ({
|
||||||
|
transform: [{scale: scale.value}],
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
|
||||||
|
// function
|
||||||
|
const open = useCallback(() => {
|
||||||
|
menuControl.open()
|
||||||
|
}, [menuControl])
|
||||||
|
|
||||||
|
const shrink = useCallback(() => {
|
||||||
|
'worklet'
|
||||||
|
cancelAnimation(scale)
|
||||||
|
scale.value = withTiming(1, {duration: 200}, () => {
|
||||||
|
animationDidComplete.value = false
|
||||||
|
})
|
||||||
|
}, [animationDidComplete, scale])
|
||||||
|
|
||||||
|
const grow = React.useCallback(() => {
|
||||||
|
'worklet'
|
||||||
|
scale.value = withTiming(1.05, {duration: 750}, finished => {
|
||||||
|
if (!finished) return
|
||||||
|
animationDidComplete.value = true
|
||||||
|
runOnJS(playHaptic)()
|
||||||
|
runOnJS(open)()
|
||||||
|
|
||||||
|
shrink()
|
||||||
|
})
|
||||||
|
}, [scale, animationDidComplete, playHaptic, shrink, open])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
maxWidth: '65%',
|
||||||
|
},
|
||||||
|
isFromSelf ? a.self_end : a.self_start,
|
||||||
|
]}>
|
||||||
|
<AnimatedPressable
|
||||||
|
style={animatedStyle}
|
||||||
|
unstable_pressDelay={200}
|
||||||
|
onPressIn={grow}
|
||||||
|
onTouchEnd={shrink}>
|
||||||
|
{children}
|
||||||
|
</AnimatedPressable>
|
||||||
|
<MessageMenu message={message} control={menuControl} hideTrigger={true} />
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,86 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {StyleSheet, View} from 'react-native'
|
||||||
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
|
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
|
import {MessageMenu} from '#/components/dms/MessageMenu'
|
||||||
|
import {useMenuControl} from '#/components/Menu'
|
||||||
|
|
||||||
|
export function ActionsWrapper({
|
||||||
|
message,
|
||||||
|
isFromSelf,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
message: ChatBskyConvoDefs.MessageView
|
||||||
|
isFromSelf: boolean
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
const menuControl = useMenuControl()
|
||||||
|
const viewRef = React.useRef(null)
|
||||||
|
|
||||||
|
const [showActions, setShowActions] = React.useState(false)
|
||||||
|
|
||||||
|
const onMouseEnter = React.useCallback(() => {
|
||||||
|
setShowActions(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const onMouseLeave = React.useCallback(() => {
|
||||||
|
setShowActions(false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// We need to handle the `onFocus` separately because we want to know if there is a related target (the element
|
||||||
|
// that is losing focus). If there isn't that means the focus is coming from a dropdown that is now closed.
|
||||||
|
const onFocus = React.useCallback<React.FocusEventHandler>(e => {
|
||||||
|
if (e.nativeEvent.relatedTarget == null) return
|
||||||
|
setShowActions(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
// @ts-expect-error web only
|
||||||
|
onMouseEnter={onMouseEnter}
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onMouseLeave}
|
||||||
|
style={StyleSheet.flatten([a.flex_1, a.flex_row])}
|
||||||
|
ref={viewRef}>
|
||||||
|
{isFromSelf && (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.mr_xl,
|
||||||
|
a.justify_center,
|
||||||
|
{
|
||||||
|
marginLeft: 'auto',
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<MessageMenu
|
||||||
|
message={message}
|
||||||
|
control={menuControl}
|
||||||
|
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
||||||
|
onTriggerPress={onMouseEnter}
|
||||||
|
// @ts-expect-error web only
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
maxWidth: '65%',
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</View>
|
||||||
|
{!isFromSelf && (
|
||||||
|
<View style={[a.flex_row, a.align_center, a.ml_xl]}>
|
||||||
|
<MessageMenu
|
||||||
|
message={message}
|
||||||
|
control={menuControl}
|
||||||
|
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
||||||
|
onTriggerPress={onMouseEnter}
|
||||||
|
// @ts-expect-error web only
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
|
@ -5,8 +5,9 @@ import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
|
import {TimeElapsed} from 'view/com/util/TimeElapsed'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
export function MessageItem({
|
export function MessageItem({
|
||||||
|
@ -50,34 +51,34 @@ export function MessageItem({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<View
|
<ActionsWrapper isFromSelf={isFromSelf} message={item}>
|
||||||
style={[
|
<View
|
||||||
a.py_sm,
|
|
||||||
a.px_lg,
|
|
||||||
a.my_2xs,
|
|
||||||
a.rounded_md,
|
|
||||||
isFromSelf ? a.self_end : a.self_start,
|
|
||||||
{
|
|
||||||
maxWidth: '65%',
|
|
||||||
backgroundColor: isFromSelf
|
|
||||||
? t.palette.primary_500
|
|
||||||
: t.palette.contrast_50,
|
|
||||||
borderRadius: 17,
|
|
||||||
},
|
|
||||||
isFromSelf
|
|
||||||
? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
|
|
||||||
: {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
|
|
||||||
]}>
|
|
||||||
<Text
|
|
||||||
style={[
|
style={[
|
||||||
a.text_md,
|
a.py_sm,
|
||||||
a.leading_snug,
|
a.px_lg,
|
||||||
isFromSelf && {color: t.palette.white},
|
a.my_2xs,
|
||||||
|
a.rounded_md,
|
||||||
|
{
|
||||||
|
backgroundColor: isFromSelf
|
||||||
|
? t.palette.primary_500
|
||||||
|
: t.palette.contrast_50,
|
||||||
|
borderRadius: 17,
|
||||||
|
},
|
||||||
|
isFromSelf
|
||||||
|
? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
|
||||||
|
: {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
|
||||||
]}>
|
]}>
|
||||||
{item.text}
|
<Text
|
||||||
</Text>
|
style={[
|
||||||
</View>
|
a.text_md,
|
||||||
<Metadata
|
a.leading_snug,
|
||||||
|
isFromSelf && {color: t.palette.white},
|
||||||
|
]}>
|
||||||
|
{item.text}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</ActionsWrapper>
|
||||||
|
<MessageItemMetadata
|
||||||
message={item}
|
message={item}
|
||||||
isLastInGroup={isLastInGroup}
|
isLastInGroup={isLastInGroup}
|
||||||
style={isFromSelf ? a.text_right : a.text_left}
|
style={isFromSelf ? a.text_right : a.text_left}
|
||||||
|
@ -86,7 +87,7 @@ export function MessageItem({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function Metadata({
|
export function MessageItemMetadata({
|
||||||
message,
|
message,
|
||||||
isLastInGroup,
|
isLastInGroup,
|
||||||
style,
|
style,
|
|
@ -0,0 +1,99 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {Pressable, 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 {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
|
||||||
|
import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
|
||||||
|
import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
|
||||||
|
import * as Menu from '#/components/Menu'
|
||||||
|
import * as Prompt from '#/components/Prompt'
|
||||||
|
import {usePromptControl} from '#/components/Prompt'
|
||||||
|
|
||||||
|
export let MessageMenu = ({
|
||||||
|
message,
|
||||||
|
control,
|
||||||
|
hideTrigger,
|
||||||
|
triggerOpacity,
|
||||||
|
}: {
|
||||||
|
hideTrigger?: boolean
|
||||||
|
triggerOpacity?: number
|
||||||
|
onTriggerPress?: () => void
|
||||||
|
message: ChatBskyConvoDefs.MessageView
|
||||||
|
control: Menu.MenuControlProps
|
||||||
|
}): React.ReactNode => {
|
||||||
|
const {_} = useLingui()
|
||||||
|
const t = useTheme()
|
||||||
|
const {currentAccount} = useSession()
|
||||||
|
const deleteControl = usePromptControl()
|
||||||
|
|
||||||
|
const isFromSelf = message.sender?.did === currentAccount?.did
|
||||||
|
|
||||||
|
const onDelete = React.useCallback(() => {
|
||||||
|
// TODO delete the message
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const onReport = React.useCallback(() => {
|
||||||
|
// TODO report the message
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Menu.Root control={control}>
|
||||||
|
{!hideTrigger && (
|
||||||
|
<View style={{opacity: triggerOpacity}}>
|
||||||
|
<Menu.Trigger label={_(msg`Chat settings`)}>
|
||||||
|
{({props, state}) => (
|
||||||
|
<Pressable
|
||||||
|
{...props}
|
||||||
|
style={[
|
||||||
|
a.p_sm,
|
||||||
|
a.rounded_full,
|
||||||
|
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
||||||
|
]}>
|
||||||
|
<DotsHorizontal size="sm" style={t.atoms.text} />
|
||||||
|
</Pressable>
|
||||||
|
)}
|
||||||
|
</Menu.Trigger>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Menu.Outer>
|
||||||
|
<Menu.Group>
|
||||||
|
<Menu.Item
|
||||||
|
testID="messageDropdownDeleteBtn"
|
||||||
|
label={_(msg`Delete message`)}
|
||||||
|
onPress={deleteControl.open}>
|
||||||
|
<Menu.ItemText>{_(msg`Delete`)}</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={Trash} position="right" />
|
||||||
|
</Menu.Item>
|
||||||
|
{!isFromSelf && (
|
||||||
|
<Menu.Item
|
||||||
|
testID="messageDropdownReportBtn"
|
||||||
|
label={_(msg`Report message`)}
|
||||||
|
onPress={onReport}>
|
||||||
|
<Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
|
||||||
|
<Menu.ItemIcon icon={Warning} position="right" />
|
||||||
|
</Menu.Item>
|
||||||
|
)}
|
||||||
|
</Menu.Group>
|
||||||
|
</Menu.Outer>
|
||||||
|
</Menu.Root>
|
||||||
|
|
||||||
|
<Prompt.Basic
|
||||||
|
control={deleteControl}
|
||||||
|
title={_(msg`Delete message`)}
|
||||||
|
description={_(
|
||||||
|
msg`Are you sure you want to delete this message? The message will be deleted for you, but not for other participants.`,
|
||||||
|
)}
|
||||||
|
confirmButtonCta={_(msg`Delete`)}
|
||||||
|
confirmButtonColor="negative"
|
||||||
|
onConfirm={onDelete}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
MessageMenu = React.memo(MessageMenu)
|
|
@ -17,9 +17,9 @@ import {useChat} from '#/state/messages'
|
||||||
import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
|
import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
|
||||||
import {useSetMinimalShellMode} from '#/state/shell'
|
import {useSetMinimalShellMode} from '#/state/shell'
|
||||||
import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
|
import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
|
||||||
import {MessageItem} from '#/screens/Messages/Conversation/MessageItem'
|
|
||||||
import {atoms as a} from '#/alf'
|
import {atoms as a} from '#/alf'
|
||||||
import {Button, ButtonText} from '#/components/Button'
|
import {Button, ButtonText} from '#/components/Button'
|
||||||
|
import {MessageItem} from '#/components/dms/MessageItem'
|
||||||
import {Loader} from '#/components/Loader'
|
import {Loader} from '#/components/Loader'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue