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

simplify by placing check in draggable base

Browse source
This commit is contained in:
Gigiaj 2025-06-17 20:15:55 -05:00
parent c269e841f6
commit 49259c37b0
1 changed files with 98 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -721,15 +721,18 @@ export const Message = as<'div', MessageProps>(
const { focusWithinProps } = useFocusWithin({}); const { focusWithinProps } = useFocusWithin({});
const [menuAnchor, setMenuAnchor] = useState<RectCords>(); const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>(); const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
const [isDesktopOptionsActive, setDesktopOptionsActive] = useState(false);
const [isOptionsMenuOpen, setOptionsMenuOpen] = useState(false);
const [isEmojiBoardOpen, setEmojiBoardOpen] = useState(false);
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile; const isMobile = screenSize === ScreenSize.Mobile;
const [isDesktopOptionsActive, setDesktopOptionsActive] = useState(false);
const [isMobileSheetOpen, setMobileSheetOpen] = useState(false);
const senderDisplayName = const senderDisplayName =
getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId; getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
const senderAvatarMxc = getMemberAvatarMxc(room, senderId); const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
const closeMenu = () => { const closeMenu = () => {
setOptionsMenuOpen(false);
setMenuAnchor(undefined); setMenuAnchor(undefined);
}; };
@ -745,10 +748,10 @@ export const Message = as<'div', MessageProps>(
const handleAddReactions: MouseEventHandler<HTMLButtonElement> = () => { const handleAddReactions: MouseEventHandler<HTMLButtonElement> = () => {
const rect = menuAnchor; const rect = menuAnchor;
closeMenu(); setEmojiBoardOpen(true);
setTimeout(() => { setTimeout(() => {
setEmojiBoardAnchor(rect); setEmojiBoardAnchor(rect);
}, 100); }, 150);
}; };
// TODO: Remove this and clean it up later... // TODO: Remove this and clean it up later...
@ -767,7 +770,7 @@ export const Message = as<'div', MessageProps>(
const longPressBinder = useLongPress( const longPressBinder = useLongPress(
() => { () => {
if (isMobile) { if (isMobile) {
setMobileSheetOpen(true); setOptionsMenuOpen(true);
} }
}, },
{ {
@ -883,125 +886,114 @@ export const Message = as<'div', MessageProps>(
space={messageSpacing} space={messageSpacing}
collapse={collapse} collapse={collapse}
highlight={highlight} highlight={highlight}
selected={isDesktopOptionsActive || isMobileSheetOpen} selected={isDesktopOptionsActive || isOptionsMenuOpen || isEmojiBoardOpen}
{...props} {...props}
{...hoverProps} {...hoverProps}
{...focusWithinProps} {...(!isMobile ? focusWithinProps : {})}
{...(isMobile ? longPressBinder() : {})} {...(isMobile ? longPressBinder() : {})}
ref={ref} ref={ref}
> >
{!edit && (isMobileSheetOpen || isHovered || !!menuAnchor || !!emojiBoardAnchor) && ( {!edit &&
<MessageOptionsMenu (isOptionsMenuOpen ||
mEvent={mEvent} isEmojiBoardOpen ||
room={room} isHovered ||
!!menuAnchor ||
!!emojiBoardAnchor) && (
<MessageOptionsMenu
mEvent={mEvent}
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}
handleAddReactions={handleAddReactions}
closeMenu={closeMenu}
emojiBoardAnchor={emojiBoardAnchor}
menuAnchor={menuAnchor}
handleOpenEmojiBoard={handleOpenEmojiBoard}
setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu}
setOptionsMenuOpen={setOptionsMenuOpen}
isOptionsMenuOpen={isOptionsMenuOpen}
setEmojiBoardOpen={setEmojiBoardOpen}
isEmojiBoardOpen={isEmojiBoardOpen}
/>
)}
{messageLayout === MessageLayout.Compact && (
<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}
setMobileSheetOpen={setMobileSheetOpen}
isMobileSheetOpen={isMobileSheetOpen}
/>
)}
{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={() => { <DraggableMessage
const mockTargetElement = document.createElement('button'); event={mEvent}
mockTargetElement.setAttribute('data-event-id', mEvent.getId()); onReply={() => {
const mockEvent = { const mockTargetElement = document.createElement('button');
currentTarget: mockTargetElement, 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 && messageLayout !== MessageLayout.Bubble && (
onReply={() => { <DraggableMessage
const mockTargetElement = document.createElement('button'); event={mEvent}
mockTargetElement.setAttribute('data-event-id', mEvent.getId()); onReply={() => {
const mockEvent = { const mockTargetElement = document.createElement('button');
currentTarget: mockTargetElement, 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}
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> </MessageBase>
); );
} }