Reduce reuse and clean up as a result of handling the behavior in OptionsMenu

This commit is contained in:
Gigiaj 2025-06-17 13:10:40 -05:00
parent 5dd67009cb
commit 2cdc4a4969

View file

@ -877,7 +877,6 @@ export const Message = as<'div', MessageProps>(
}; };
return ( return (
<>
<MessageBase <MessageBase
className={classNames(css.MessageBase, className)} className={classNames(css.MessageBase, className)}
tabIndex={0} tabIndex={0}
@ -891,7 +890,7 @@ export const Message = as<'div', MessageProps>(
{...(isMobile ? longPressBinder() : {})} {...(isMobile ? longPressBinder() : {})}
ref={ref} ref={ref}
> >
{!edit && (isHovered || !!menuAnchor || !!emojiBoardAnchor) && ( {!edit && (isMobileSheetOpen || isHovered || !!menuAnchor || !!emojiBoardAnchor) && (
<MessageOptionsMenu <MessageOptionsMenu
mEvent={mEvent} mEvent={mEvent}
room={room} room={room}
@ -915,6 +914,8 @@ export const Message = as<'div', MessageProps>(
setEmojiBoardAnchor={setEmojiBoardAnchor} setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor} setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu} handleOpenMenu={handleOpenMenu}
setMobileSheetOpen={setMobileSheetOpen}
isMobileSheetOpen={isMobileSheetOpen}
/> />
)} )}
{messageLayout === MessageLayout.Compact && {messageLayout === MessageLayout.Compact &&
@ -1002,62 +1003,6 @@ export const Message = as<'div', MessageProps>(
</DraggableMessage> </DraggableMessage>
))} ))}
</MessageBase> </MessageBase>
{isMobile && (
<BottomSheetMenu onClose={() => setMobileSheetOpen(false)} isOpen={isMobileSheetOpen}>
{view === 'options' ? (
<MessageDropdownMenu
closeMenu={() => {
closeMenu();
setMobileSheetOpen(false);
}}
mEvent={mEvent}
room={room}
mx={mx}
relations={relations}
canSendReaction={canSendReaction}
canEdit={canEditEvent(mx, mEvent)}
canDelete={canDelete || mEvent?.getSender() === mx.getUserId()}
canPinEvent={canPinEvent}
hideReadReceipts={hideReadReceipts}
onReactionToggle={onReactionToggle}
onReplyClick={onReplyClick}
onEditId={onEditId}
handleAddReactions={() => setView('emoji')}
/>
) : (
<Box direction="Column" style={{ width: '100%' }}>
<Header variant="Surface" size="500">
<IconButton size="300" onClick={() => setView('options')}>
<Icon src={Icons.ArrowLeft} />
</IconButton>
<Box grow="Yes" alignItems="Center">
<Text size="H4">Add Reaction</Text>
</Box>
</Header>
<EmojiBoard
imagePackRooms={imagePackRooms ?? []}
returnFocusOnDeactivate={false}
allowTextCustomEmoji
onEmojiSelect={(key) => {
onReactionToggle(mEvent.getId(), key);
setEmojiBoardAnchor(undefined);
closeMenu();
setMobileSheetOpen(false);
}}
onCustomEmojiSelect={(mxc, shortcode) => {
onReactionToggle(mEvent.getId(), mxc, shortcode);
setEmojiBoardAnchor(undefined);
closeMenu();
setMobileSheetOpen(false);
}}
requestClose={() => setEmojiBoardAnchor(undefined)}
/>
</Box>
)}
</BottomSheetMenu>
)}
</>
); );
} }
); );