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

restructure to use different rendering strat

Browse source
This commit is contained in:
Gigiaj 2025-06-17 20:15:26 -05:00
parent ccb41c47a3
commit c269e841f6
1 changed files with 64 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/app/features/room/message/MessageOptionsMenu.tsx
View file

@ -31,7 +31,11 @@ import {
MessageSourceCodeItem, MessageSourceCodeItem,
} from './Message'; } from './Message';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize'; import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BottomSheetMenu } from './MobileContextMenu'; import MobileContextMenu from '../../../molecules/mobile-context-menu/MobileContextMenu';
const EmojiBoard = lazy(() =>
import('../../../components/emoji-board').then((module) => ({ default: module.EmojiBoard }))
);
type BaseOptionProps = { type BaseOptionProps = {
mEvent: MatrixEvent; mEvent: MatrixEvent;
@ -85,7 +89,10 @@ export const MessageDropdownMenu = forwardRef<HTMLDivElement, BaseOptionProps>(
size="300" size="300"
after={<Icon size="100" src={Icons.SmilePlus} />} after={<Icon size="100" src={Icons.SmilePlus} />}
radii="300" radii="300"
onClick={handleAddReactions} onClick={(e) => {
handleAddReactions(e);
closeMenu();
}}
> >
<Text className={css.MessageMenuItemText} as="span" size="T300" truncate> <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
Add Reaction Add Reaction
@ -93,7 +100,7 @@ export const MessageDropdownMenu = forwardRef<HTMLDivElement, BaseOptionProps>(
</MenuItem> </MenuItem>
)} )}
{relations && ( {relations && (
<MessageAllReactionItem room={room} relations={relations} onClose={closeMenu} /> <MessageAllReactionItem room={room} relations={relations} onClose={() => {}} />
)} )}
<MenuItem <MenuItem
size="300" size="300"
@ -151,15 +158,16 @@ export const MessageDropdownMenu = forwardRef<HTMLDivElement, BaseOptionProps>(
type ExtendedOptionsProps = BaseOptionProps & { type ExtendedOptionsProps = BaseOptionProps & {
imagePackRooms: Room[] | undefined; imagePackRooms: Room[] | undefined;
onActiveStateChange: React.Dispatch<React.SetStateAction<boolean>>;
menuAnchor: RectCords | undefined; menuAnchor: RectCords | undefined;
emojiBoardAnchor: RectCords | undefined; emojiBoardAnchor: RectCords | undefined;
handleOpenEmojiBoard: MouseEventHandler<HTMLButtonElement>; handleOpenEmojiBoard: MouseEventHandler<HTMLButtonElement>;
handleOpenMenu: MouseEventHandler<HTMLButtonElement>; handleOpenMenu: MouseEventHandler<HTMLButtonElement>;
setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>; setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
setEmojiBoardAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>; setEmojiBoardAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
isMobileSheetOpen; isOptionsMenuOpen;
setMobileSheetOpen; setOptionsMenuOpen;
isEmojiBoardOpen;
setEmojiBoardOpen;
}; };
export function MessageOptionsMenu({ export function MessageOptionsMenu({
@ -176,7 +184,6 @@ export function MessageOptionsMenu({
onReactionToggle, onReactionToggle,
onReplyClick, onReplyClick,
onEditId, onEditId,
onActiveStateChange,
closeMenu, closeMenu,
menuAnchor, menuAnchor,
emojiBoardAnchor, emojiBoardAnchor,
@ -185,13 +192,11 @@ export function MessageOptionsMenu({
handleAddReactions, handleAddReactions,
setMenuAnchor, setMenuAnchor,
setEmojiBoardAnchor, setEmojiBoardAnchor,
isMobileSheetOpen, isOptionsMenuOpen,
setMobileSheetOpen, setOptionsMenuOpen,
isEmojiBoardOpen,
setEmojiBoardOpen,
}: ExtendedOptionsProps) { }: ExtendedOptionsProps) {
useEffect(() => {
onActiveStateChange?.(!!menuAnchor || !!emojiBoardAnchor);
}, [emojiBoardAnchor, menuAnchor, onActiveStateChange]);
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const isMobile = screenSize === ScreenSize.Mobile; const isMobile = screenSize === ScreenSize.Mobile;
const [view, setView] = useState('options'); const [view, setView] = useState('options');
@ -218,47 +223,58 @@ export function MessageOptionsMenu({
if (isMobile) { if (isMobile) {
return ( return (
<BottomSheetMenu onClose={() => setMobileSheetOpen(false)} isOpen={isMobileSheetOpen}> <>
{view === 'options' ? ( {isOptionsMenuOpen && (
<MobileContextMenu
onClose={() => {
closeMenu();
}}
isOpen={isOptionsMenuOpen}
>
<MessageDropdownMenu <MessageDropdownMenu
{...optionProps} {...optionProps}
closeMenu={() => { closeMenu={() => {
closeMenu(); closeMenu();
setMobileSheetOpen(false);
}} }}
handleAddReactions={() => setView('emoji')} handleAddReactions={handleAddReactions}
/> />
) : ( </MobileContextMenu>
<Box direction="Column" style={{ width: '100%' }}> )}
<Header variant="Surface" size="500">
<IconButton size="300" onClick={() => setView('options')}> {isEmojiBoardOpen && (
<Icon src={Icons.ArrowLeft} /> <MobileContextMenu
</IconButton> onClose={() => {
<Box grow="Yes" alignItems="Center"> closeMenu();
<Text size="H4">Add Reaction</Text> setEmojiBoardOpen(false);
</Box> }}
</Header> isOpen={isEmojiBoardOpen}
>
<Suspense fallback={<p>Loading</p>}>
<EmojiBoard <EmojiBoard
imagePackRooms={imagePackRooms ?? []} imagePackRooms={imagePackRooms ?? []}
returnFocusOnDeactivate={false} returnFocusOnDeactivate
allowTextCustomEmoji allowTextCustomEmoji
onEmojiSelect={(key) => { onEmojiSelect={(key) => {
onReactionToggle(mEvent.getId(), key); onReactionToggle(mEvent.getId(), key);
setEmojiBoardAnchor(undefined); setEmojiBoardAnchor(undefined);
closeMenu(); setEmojiBoardOpen(false);
setMobileSheetOpen(false); (document.activeElement as HTMLElement)?.blur();
}} }}
onCustomEmojiSelect={(mxc, shortcode) => { onCustomEmojiSelect={(mxc, shortcode) => {
onReactionToggle(mEvent.getId(), mxc, shortcode); onReactionToggle(mEvent.getId(), mxc, shortcode);
setEmojiBoardAnchor(undefined); setEmojiBoardAnchor(undefined);
closeMenu(); setEmojiBoardOpen(false);
setMobileSheetOpen(false); (document.activeElement as HTMLElement)?.blur();
}}
requestClose={() => {
setEmojiBoardAnchor(undefined);
setEmojiBoardOpen(false);
}} }}
requestClose={() => setEmojiBoardAnchor(undefined)}
/> />
</Box> </Suspense>
</MobileContextMenu>
)} )}
</BottomSheetMenu> </>
); );
} }