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

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

60
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,14 +886,19 @@ 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 &&
(isOptionsMenuOpen ||
isEmojiBoardOpen ||
isHovered ||
!!menuAnchor ||
!!emojiBoardAnchor) && (
<MessageOptionsMenu <MessageOptionsMenu
mEvent={mEvent} mEvent={mEvent}
room={room} room={room}
@ -905,7 +913,6 @@ export const Message = as<'div', MessageProps>(
onReactionToggle={onReactionToggle} onReactionToggle={onReactionToggle}
onReplyClick={onReplyClick} onReplyClick={onReplyClick}
onEditId={onEditId} onEditId={onEditId}
onActiveStateChange={setDesktopOptionsActive}
handleAddReactions={handleAddReactions} handleAddReactions={handleAddReactions}
closeMenu={closeMenu} closeMenu={closeMenu}
emojiBoardAnchor={emojiBoardAnchor} emojiBoardAnchor={emojiBoardAnchor}
@ -914,16 +921,13 @@ export const Message = as<'div', MessageProps>(
setEmojiBoardAnchor={setEmojiBoardAnchor} setEmojiBoardAnchor={setEmojiBoardAnchor}
setMenuAnchor={setMenuAnchor} setMenuAnchor={setMenuAnchor}
handleOpenMenu={handleOpenMenu} handleOpenMenu={handleOpenMenu}
setMobileSheetOpen={setMobileSheetOpen} setOptionsMenuOpen={setOptionsMenuOpen}
isMobileSheetOpen={isMobileSheetOpen} isOptionsMenuOpen={isOptionsMenuOpen}
setEmojiBoardOpen={setEmojiBoardOpen}
isEmojiBoardOpen={isEmojiBoardOpen}
/> />
)} )}
{messageLayout === MessageLayout.Compact && {messageLayout === MessageLayout.Compact && (
(!isMobile ? (
<CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</CompactLayout>
) : (
<DraggableMessage <DraggableMessage
event={mEvent} event={mEvent}
onReply={() => { onReply={() => {
@ -944,13 +948,8 @@ export const Message = as<'div', MessageProps>(
{msgContentJSX} {msgContentJSX}
</CompactLayout> </CompactLayout>
</DraggableMessage> </DraggableMessage>
))} )}
{messageLayout === MessageLayout.Bubble && {messageLayout === MessageLayout.Bubble && (
(!isMobile ? (
<BubbleLayout before={headerJSX} onContextMenu={handleContextMenu}>
{msgContentJSX}
</BubbleLayout>
) : (
<DraggableMessage <DraggableMessage
event={mEvent} event={mEvent}
onReply={() => { onReply={() => {
@ -971,15 +970,8 @@ export const Message = as<'div', MessageProps>(
{msgContentJSX} {msgContentJSX}
</BubbleLayout> </BubbleLayout>
</DraggableMessage> </DraggableMessage>
))} )}
{messageLayout !== MessageLayout.Compact && {messageLayout !== MessageLayout.Compact && messageLayout !== MessageLayout.Bubble && (
messageLayout !== MessageLayout.Bubble &&
(!isMobile ? (
<ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}>
{headerJSX}
{msgContentJSX}
</ModernLayout>
) : (
<DraggableMessage <DraggableMessage
event={mEvent} event={mEvent}
onReply={() => { onReply={() => {
@ -1001,7 +993,7 @@ export const Message = as<'div', MessageProps>(
{msgContentJSX} {msgContentJSX}
</ModernLayout> </ModernLayout>
</DraggableMessage> </DraggableMessage>
))} )}
</MessageBase> </MessageBase>
); );
} }