mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-09 00:30:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Gigiaj 2025-06-17 13:10:40 -05:00
parent 5dd67009cb
commit 2cdc4a4969
1 changed files with 113 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

281
src/app/features/room/message/Message.tsx
View file

@ -877,187 +877,132 @@ export const Message = as<'div', MessageProps>(
}; };
return ( return (
<> <MessageBase
<MessageBase className={classNames(css.MessageBase, className)}
className={classNames(css.MessageBase, className)} tabIndex={0}
tabIndex={0} space={messageSpacing}
space={messageSpacing} collapse={collapse}
collapse={collapse} highlight={highlight}
highlight={highlight} selected={isDesktopOptionsActive || isMobileSheetOpen}
selected={isDesktopOptionsActive || isMobileSheetOpen} {...props}
{...props} {...hoverProps}
{...hoverProps} {...focusWithinProps}
{...focusWithinProps} {...(isMobile ? longPressBinder() : {})}
{...(isMobile ? longPressBinder() : {})} ref={ref}
ref={ref} >
> {!edit && (isMobileSheetOpen || isHovered || !!menuAnchor || !!emojiBoardAnchor) && (
{!edit && (isHovered || !!menuAnchor || !!emojiBoardAnchor) && ( <MessageOptionsMenu
<MessageOptionsMenu mEvent={mEvent}
mEvent={mEvent} room={room}
room={room} mx={mx}
relations={relations}
imagePackRooms={imagePackRooms}
canSendReaction={canSendReaction}
canEdit={canEditEvent(mx, mEvent)}
canDelete={canDelete}
canPinEvent={canPinEvent}
hideReadReceipts={hideReadReceipts}
onReactionToggle={onReactionToggle}
onReplyClick={onReplyClick}
onEditId={onEditId}
onActiveStateChange={setDesktopOptionsActive}
handleAddReactions={handleAddReactions}
closeMenu={closeMenu}
emojiBoardAnchor={emojiBoardAnchor}
menuAnchor={menuAnchor}
handleOpenEmojiBoard={handleOpenEmojiBoard}
setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu}
setMobileSheetOpen={setMobileSheetOpen}
isMobileSheetOpen={isMobileSheetOpen}
/>
)}
{messageLayout === MessageLayout.Compact &&
(!isMobile ? (
<CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</CompactLayout>
) : (
<DraggableMessage
event={mEvent}
onReply={() => {
const mockTargetElement = document.createElement('button');
mockTargetElement.setAttribute('data-event-id', mEvent.getId());
const mockEvent = {
currentTarget: mockTargetElement,
};
onReplyClick(mockEvent);
}}
onEdit={() => {
onEditId(mEvent.getId());
}}
mx={mx} mx={mx}
relations={relations} >
imagePackRooms={imagePackRooms}
canSendReaction={canSendReaction}
canEdit={canEditEvent(mx, mEvent)}
canDelete={canDelete}
canPinEvent={canPinEvent}
hideReadReceipts={hideReadReceipts}
onReactionToggle={onReactionToggle}
onReplyClick={onReplyClick}
onEditId={onEditId}
onActiveStateChange={setDesktopOptionsActive}
handleAddReactions={handleAddReactions}
closeMenu={closeMenu}
emojiBoardAnchor={emojiBoardAnchor}
menuAnchor={menuAnchor}
handleOpenEmojiBoard={handleOpenEmojiBoard}
setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu}
/>
)}
{messageLayout === MessageLayout.Compact &&
(!isMobile ? (
<CompactLayout before={headerJSX} onContextMenu={handleContextMenu}> <CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX} {msgContentJSX}
</CompactLayout> </CompactLayout>
) : ( </DraggableMessage>
<DraggableMessage ))}
event={mEvent} {messageLayout === MessageLayout.Bubble &&
onReply={() => { (!isMobile ? (
const mockTargetElement = document.createElement('button'); <BubbleLayout before={headerJSX} onContextMenu={handleContextMenu}>
mockTargetElement.setAttribute('data-event-id', mEvent.getId()); {msgContentJSX}
const mockEvent = { </BubbleLayout>
currentTarget: mockTargetElement, ) : (
}; <DraggableMessage
event={mEvent}
onReply={() => {
const mockTargetElement = document.createElement('button');
mockTargetElement.setAttribute('data-event-id', mEvent.getId());
const mockEvent = {
currentTarget: mockTargetElement,
};
onReplyClick(mockEvent); onReplyClick(mockEvent);
}} }}
onEdit={() => { onEdit={() => {
onEditId(mEvent.getId()); onEditId(mEvent.getId());
}} }}
mx={mx} mx={mx}
> >
<CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</CompactLayout>
</DraggableMessage>
))}
{messageLayout === MessageLayout.Bubble &&
(!isMobile ? (
<BubbleLayout before={headerJSX} onContextMenu={handleContextMenu}> <BubbleLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX} {msgContentJSX}
</BubbleLayout> </BubbleLayout>
) : ( </DraggableMessage>
<DraggableMessage ))}
event={mEvent} {messageLayout !== MessageLayout.Compact &&
onReply={() => { messageLayout !== MessageLayout.Bubble &&
const mockTargetElement = document.createElement('button'); (!isMobile ? (
mockTargetElement.setAttribute('data-event-id', mEvent.getId()); <ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}>
const mockEvent = { {headerJSX}
currentTarget: mockTargetElement, {msgContentJSX}
}; </ModernLayout>
) : (
<DraggableMessage
event={mEvent}
onReply={() => {
const mockTargetElement = document.createElement('button');
mockTargetElement.setAttribute('data-event-id', mEvent.getId());
const mockEvent = {
currentTarget: mockTargetElement,
};
onReplyClick(mockEvent); onReplyClick(mockEvent);
}} }}
onEdit={() => { onEdit={() => {
onEditId(mEvent.getId()); onEditId(mEvent.getId());
}} }}
mx={mx} mx={mx}
> >
<BubbleLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</BubbleLayout>
</DraggableMessage>
))}
{messageLayout !== MessageLayout.Compact &&
messageLayout !== MessageLayout.Bubble &&
(!isMobile ? (
<ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}> <ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}>
{headerJSX} {headerJSX}
{msgContentJSX} {msgContentJSX}
</ModernLayout> </ModernLayout>
) : ( </DraggableMessage>
<DraggableMessage ))}
event={mEvent} </MessageBase>
onReply={() => {
const mockTargetElement = document.createElement('button');
mockTargetElement.setAttribute('data-event-id', mEvent.getId());
const mockEvent = {
currentTarget: mockTargetElement,
};
onReplyClick(mockEvent);
}}
onEdit={() => {
onEditId(mEvent.getId());
}}
mx={mx}
>
<ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}>
{headerJSX}
{msgContentJSX}
</ModernLayout>
</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>
)}
</>
); );
} }
); );