mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-13 02:30:29 +03:00
Clean up and pass args forward through parent obj and use shared value destructuring to keep the mobile context menu handling contained in the modularized component
This commit is contained in:
Gigiaj
parent
8ae0b75abd
commit
9b97d02c21
1 changed files with 356 additions and 0 deletions
356
src/app/features/room/message/MessageOptionsMenu.tsx
Normal file
356
src/app/features/room/message/MessageOptionsMenu.tsx
Normal file
|
|
@ -0,0 +1,356 @@
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Header,
|
||||||
|
Icon,
|
||||||
|
IconButton,
|
||||||
|
Icons,
|
||||||
|
Line,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
PopOut,
|
||||||
|
RectCords,
|
||||||
|
Text,
|
||||||
|
} from 'folds';
|
||||||
|
import React, { forwardRef, MouseEventHandler, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import FocusTrap from 'focus-trap-react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { MatrixClient, MatrixEvent, Relations, Room } from 'matrix-js-sdk';
|
||||||
|
import { EmojiBoard } from '../../../components/emoji-board';
|
||||||
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import * as css from './styles.css';
|
||||||
|
|
||||||
|
import {
|
||||||
|
MessageAllReactionItem,
|
||||||
|
MessageCopyLinkItem,
|
||||||
|
MessageDeleteItem,
|
||||||
|
MessagePinItem,
|
||||||
|
MessageQuickReactions,
|
||||||
|
MessageReadReceiptItem,
|
||||||
|
MessageReportItem,
|
||||||
|
MessageSourceCodeItem,
|
||||||
|
} from './Message';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BottomSheetMenu } from './MobileContextMenu';
|
||||||
|
|
||||||
|
type BaseOptionProps = {
|
||||||
|
mEvent: MatrixEvent;
|
||||||
|
room: Room;
|
||||||
|
mx: MatrixClient;
|
||||||
|
relations: Relations | undefined;
|
||||||
|
canSendReaction: boolean | undefined;
|
||||||
|
canEdit: boolean | undefined;
|
||||||
|
canDelete: boolean | undefined;
|
||||||
|
canPinEvent: boolean | undefined;
|
||||||
|
hideReadReceipts: boolean | undefined;
|
||||||
|
onReactionToggle: (targetEventId: string, key: string, shortcode?: string | undefined) => void;
|
||||||
|
onReplyClick: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
onEditId: ((eventId?: string | undefined) => void) | undefined;
|
||||||
|
handleAddReactions: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
closeMenu: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MessageDropdownMenu = forwardRef<HTMLDivElement, BaseOptionProps>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
mEvent,
|
||||||
|
room,
|
||||||
|
mx,
|
||||||
|
relations,
|
||||||
|
canSendReaction,
|
||||||
|
canEdit,
|
||||||
|
canDelete,
|
||||||
|
canPinEvent,
|
||||||
|
hideReadReceipts,
|
||||||
|
onReactionToggle,
|
||||||
|
onReplyClick,
|
||||||
|
onEditId,
|
||||||
|
handleAddReactions,
|
||||||
|
closeMenu,
|
||||||
|
},
|
||||||
|
ref
|
||||||
|
) => (
|
||||||
|
<Menu ref={ref}>
|
||||||
|
{canSendReaction && (
|
||||||
|
<MessageQuickReactions
|
||||||
|
onReaction={(key, shortcode) => {
|
||||||
|
onReactionToggle(mEvent.getId() ?? '', key, shortcode);
|
||||||
|
closeMenu();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Box direction="Column" gap="100" className={css.MessageMenuGroup}>
|
||||||
|
{canSendReaction && (
|
||||||
|
<MenuItem
|
||||||
|
size="300"
|
||||||
|
after={<Icon size="100" src={Icons.SmilePlus} />}
|
||||||
|
radii="300"
|
||||||
|
onClick={handleAddReactions}
|
||||||
|
>
|
||||||
|
<Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
|
||||||
|
Add Reaction
|
||||||
|
</Text>
|
||||||
|
</MenuItem>
|
||||||
|
)}
|
||||||
|
{relations && (
|
||||||
|
<MessageAllReactionItem room={room} relations={relations} onClose={closeMenu} />
|
||||||
|
)}
|
||||||
|
<MenuItem
|
||||||
|
size="300"
|
||||||
|
after={<Icon size="100" src={Icons.ReplyArrow} />}
|
||||||
|
radii="300"
|
||||||
|
data-event-id={mEvent.getId()}
|
||||||
|
onClick={(evt) => {
|
||||||
|
onReplyClick(evt);
|
||||||
|
closeMenu();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
|
||||||
|
Reply
|
||||||
|
</Text>
|
||||||
|
</MenuItem>
|
||||||
|
{canEdit && onEditId && (
|
||||||
|
<MenuItem
|
||||||
|
size="300"
|
||||||
|
after={<Icon size="100" src={Icons.Pencil} />}
|
||||||
|
radii="300"
|
||||||
|
data-event-id={mEvent.getId()}
|
||||||
|
onClick={() => {
|
||||||
|
onEditId(mEvent.getId());
|
||||||
|
closeMenu();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
|
||||||
|
Edit Message
|
||||||
|
</Text>
|
||||||
|
</MenuItem>
|
||||||
|
)}
|
||||||
|
{!hideReadReceipts && (
|
||||||
|
<MessageReadReceiptItem room={room} eventId={mEvent.getId() ?? ''} onClose={closeMenu} />
|
||||||
|
)}
|
||||||
|
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
|
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
|
{canPinEvent && <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />}
|
||||||
|
</Box>
|
||||||
|
{((!mEvent.isRedacted() && canDelete) || mEvent.getSender() !== mx.getUserId()) && (
|
||||||
|
<>
|
||||||
|
<Line size="300" />
|
||||||
|
<Box direction="Column" gap="100" className={css.MessageMenuGroup}>
|
||||||
|
{!mEvent.isRedacted() && canDelete && (
|
||||||
|
<MessageDeleteItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
|
)}
|
||||||
|
{mEvent.getSender() !== mx.getUserId() && (
|
||||||
|
<MessageReportItem room={room} mEvent={mEvent} onClose={closeMenu} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Menu>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
type ExtendedOptionsProps = BaseOptionProps & {
|
||||||
|
imagePackRooms: Room[] | undefined;
|
||||||
|
onActiveStateChange: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
menuAnchor: RectCords | undefined;
|
||||||
|
emojiBoardAnchor: RectCords | undefined;
|
||||||
|
handleOpenEmojiBoard: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
handleOpenMenu: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
|
||||||
|
setEmojiBoardAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
|
||||||
|
isMobileSheetOpen;
|
||||||
|
setMobileSheetOpen;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function MessageOptionsMenu({
|
||||||
|
mEvent,
|
||||||
|
room,
|
||||||
|
mx,
|
||||||
|
relations,
|
||||||
|
imagePackRooms,
|
||||||
|
canSendReaction,
|
||||||
|
canEdit,
|
||||||
|
canDelete,
|
||||||
|
canPinEvent,
|
||||||
|
hideReadReceipts,
|
||||||
|
onReactionToggle,
|
||||||
|
onReplyClick,
|
||||||
|
onEditId,
|
||||||
|
onActiveStateChange,
|
||||||
|
closeMenu,
|
||||||
|
menuAnchor,
|
||||||
|
emojiBoardAnchor,
|
||||||
|
handleOpenEmojiBoard,
|
||||||
|
handleOpenMenu,
|
||||||
|
handleAddReactions,
|
||||||
|
setMenuAnchor,
|
||||||
|
setEmojiBoardAnchor,
|
||||||
|
isMobileSheetOpen,
|
||||||
|
setMobileSheetOpen,
|
||||||
|
}: ExtendedOptionsProps) {
|
||||||
|
useEffect(() => {
|
||||||
|
onActiveStateChange?.(!!menuAnchor || !!emojiBoardAnchor);
|
||||||
|
}, [emojiBoardAnchor, menuAnchor, onActiveStateChange]);
|
||||||
|
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
const isMobile = screenSize === ScreenSize.Mobile;
|
||||||
|
const [view, setView] = useState('options');
|
||||||
|
|
||||||
|
const eventId = mEvent.getId();
|
||||||
|
if (!eventId) return null;
|
||||||
|
|
||||||
|
const optionProps: BaseOptionProps = {
|
||||||
|
mEvent,
|
||||||
|
room,
|
||||||
|
mx,
|
||||||
|
relations,
|
||||||
|
canSendReaction,
|
||||||
|
canEdit,
|
||||||
|
canDelete,
|
||||||
|
canPinEvent,
|
||||||
|
hideReadReceipts,
|
||||||
|
onReactionToggle,
|
||||||
|
onReplyClick,
|
||||||
|
onEditId,
|
||||||
|
handleAddReactions,
|
||||||
|
closeMenu,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<BottomSheetMenu onClose={() => setMobileSheetOpen(false)} isOpen={isMobileSheetOpen}>
|
||||||
|
{view === 'options' ? (
|
||||||
|
<MessageDropdownMenu
|
||||||
|
{...optionProps}
|
||||||
|
closeMenu={() => {
|
||||||
|
closeMenu();
|
||||||
|
setMobileSheetOpen(false);
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={css.MessageOptionsBase}>
|
||||||
|
<Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
|
||||||
|
<Box gap="100">
|
||||||
|
{canSendReaction && (
|
||||||
|
<PopOut
|
||||||
|
position="Bottom"
|
||||||
|
align={emojiBoardAnchor?.width === 0 ? 'Start' : 'End'}
|
||||||
|
offset={emojiBoardAnchor?.width === 0 ? 0 : undefined}
|
||||||
|
anchor={emojiBoardAnchor}
|
||||||
|
content={
|
||||||
|
<EmojiBoard
|
||||||
|
imagePackRooms={imagePackRooms ?? []}
|
||||||
|
returnFocusOnDeactivate={false}
|
||||||
|
allowTextCustomEmoji
|
||||||
|
onEmojiSelect={(key) => {
|
||||||
|
onReactionToggle(eventId, key);
|
||||||
|
setEmojiBoardAnchor(undefined);
|
||||||
|
}}
|
||||||
|
onCustomEmojiSelect={(mxc, shortcode) => {
|
||||||
|
onReactionToggle(eventId, mxc, shortcode);
|
||||||
|
setEmojiBoardAnchor(undefined);
|
||||||
|
}}
|
||||||
|
requestClose={() => setEmojiBoardAnchor(undefined)}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleOpenEmojiBoard}
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
size="300"
|
||||||
|
radii="300"
|
||||||
|
aria-pressed={!!emojiBoardAnchor}
|
||||||
|
>
|
||||||
|
<Icon src={Icons.SmilePlus} size="100" />
|
||||||
|
</IconButton>
|
||||||
|
</PopOut>
|
||||||
|
)}
|
||||||
|
<IconButton
|
||||||
|
onClick={onReplyClick}
|
||||||
|
data-event-id={eventId}
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
size="300"
|
||||||
|
radii="300"
|
||||||
|
>
|
||||||
|
<Icon src={Icons.ReplyArrow} size="100" />
|
||||||
|
</IconButton>
|
||||||
|
{canEdit && onEditId && (
|
||||||
|
<IconButton
|
||||||
|
onClick={() => onEditId(eventId)}
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
size="300"
|
||||||
|
radii="300"
|
||||||
|
>
|
||||||
|
<Icon src={Icons.Pencil} size="100" />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
<PopOut
|
||||||
|
anchor={menuAnchor}
|
||||||
|
position="Bottom"
|
||||||
|
align={menuAnchor?.width === 0 ? 'Start' : 'End'}
|
||||||
|
offset={menuAnchor?.width === 0 ? 0 : undefined}
|
||||||
|
content={
|
||||||
|
<FocusTrap
|
||||||
|
focusTrapOptions={{
|
||||||
|
initialFocus: false,
|
||||||
|
onDeactivate: () => setMenuAnchor(undefined),
|
||||||
|
clickOutsideDeactivates: true,
|
||||||
|
isKeyForward: (evt) => evt.key === 'ArrowDown',
|
||||||
|
isKeyBackward: (evt) => evt.key === 'ArrowUp',
|
||||||
|
escapeDeactivates: stopPropagation,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MessageDropdownMenu {...optionProps} />
|
||||||
|
</FocusTrap>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
size="300"
|
||||||
|
radii="300"
|
||||||
|
onClick={handleOpenMenu}
|
||||||
|
aria-pressed={!!menuAnchor}
|
||||||
|
>
|
||||||
|
<Icon src={Icons.VerticalDots} size="100" />
|
||||||
|
</IconButton>
|
||||||
|
</PopOut>
|
||||||
|
</Box>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue