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 (
<>
<MessageBase
className={classNames(css.MessageBase, className)}
tabIndex={0}
@ -891,7 +890,7 @@ export const Message = as<'div', MessageProps>(
{...(isMobile ? longPressBinder() : {})}
ref={ref}
>
{!edit && (isHovered || !!menuAnchor || !!emojiBoardAnchor) && (
{!edit && (isMobileSheetOpen || isHovered || !!menuAnchor || !!emojiBoardAnchor) && (
<MessageOptionsMenu
mEvent={mEvent}
room={room}
@ -915,6 +914,8 @@ export const Message = as<'div', MessageProps>(
setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu}
setMobileSheetOpen={setMobileSheetOpen}
isMobileSheetOpen={isMobileSheetOpen}
/>
)}
{messageLayout === MessageLayout.Compact &&
@ -1002,62 +1003,6 @@ export const Message = as<'div', MessageProps>(
</DraggableMessage>
))}
</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>
)}
</>
);
}
);