mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-07 07:40: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

112
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 && (
<MessageDropdownMenu <MobileContextMenu
{...optionProps} onClose={() => {
closeMenu={() => {
closeMenu(); closeMenu();
setMobileSheetOpen(false);
}} }}
handleAddReactions={() => setView('emoji')} isOpen={isOptionsMenuOpen}
/> >
) : ( <MessageDropdownMenu
<Box direction="Column" style={{ width: '100%' }}> {...optionProps}
<Header variant="Surface" size="500"> closeMenu={() => {
<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(); closeMenu();
setMobileSheetOpen(false);
}} }}
onCustomEmojiSelect={(mxc, shortcode) => { handleAddReactions={handleAddReactions}
onReactionToggle(mEvent.getId(), mxc, shortcode);
setEmojiBoardAnchor(undefined);
closeMenu();
setMobileSheetOpen(false);
}}
requestClose={() => setEmojiBoardAnchor(undefined)}
/> />
</Box> </MobileContextMenu>
)} )}
</BottomSheetMenu>
{isEmojiBoardOpen && (
<MobileContextMenu
onClose={() => {
closeMenu();
setEmojiBoardOpen(false);
}}
isOpen={isEmojiBoardOpen}
>
<Suspense fallback={<p>Loading</p>}>
<EmojiBoard
imagePackRooms={imagePackRooms ?? []}
returnFocusOnDeactivate
allowTextCustomEmoji
onEmojiSelect={(key) => {
onReactionToggle(mEvent.getId(), key);
setEmojiBoardAnchor(undefined);
setEmojiBoardOpen(false);
(document.activeElement as HTMLElement)?.blur();
}}
onCustomEmojiSelect={(mxc, shortcode) => {
onReactionToggle(mEvent.getId(), mxc, shortcode);
setEmojiBoardAnchor(undefined);
setEmojiBoardOpen(false);
(document.activeElement as HTMLElement)?.blur();
}}
requestClose={() => {
setEmojiBoardAnchor(undefined);
setEmojiBoardOpen(false);
}}
/>
</Suspense>
</MobileContextMenu>
)}
</>
); );
} }