heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(composer): isolate the web emoji pop-out state so opening it no longer re-renders the whole composer

Browse source
This commit is contained in:
heaven 2026-06-04 02:45:04 +03:00
parent 587d117f96
commit fa17029a45
1 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/app/features/room/RoomInput.tsx
View file

@ -57,6 +57,7 @@ import {
getMentions,
} from '../../components/editor';
import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
import { UseStateProvider } from '../../components/UseStateProvider';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import {
TUploadContent,
@ -606,34 +607,29 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
</IconButton>
);
const closeEmojiBoard = () => {
setEmojiBoardTab(undefined);
if (!mobileOrTablet()) ReactEditor.focus(editor);
};
const emojiBoard = (
// The native dock renders the board in the composer's top slot, so its
// open/close state lives here (only read on native). Desktop keeps its
// state isolated inside the UseStateProvider below so opening the pop-out
// doesn't re-render the whole composer.
const dockedEmojiBoard = dockEmojiBoard && emojiBoardTab !== undefined && (
<EmojiBoard
tab={emojiBoardTab ?? EmojiBoardTab.Emoji}
tab={emojiBoardTab}
onTabChange={setEmojiBoardTab}
imagePackRooms={imagePackRooms}
returnFocusOnDeactivate={false}
dock={dockEmojiBoard}
dock
onEmojiSelect={handleEmoticonSelect}
onCustomEmojiSelect={handleEmoticonSelect}
onStickerSelect={handleStickerSelect}
requestClose={closeEmojiBoard}
requestClose={() => setEmojiBoardTab(undefined)}
/>
);
const emojiTriggerButton = (
const emojiButton = dockEmojiBoard ? (
<IconButton
ref={emojiBtnRef}
aria-pressed={!!emojiBoardTab}
onClick={() =>
dockEmojiBoard
? setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)
: setEmojiBoardTab(EmojiBoardTab.Emoji)
}
onClick={() => setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
fill="None"
size="300"
@ -641,27 +637,54 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
>
<Icon src={StreamComposerIcons.Smile} />
</IconButton>
);
// Native docks the board inline (rendered in the composer's top slot); the
// desktop trigger keeps the floating pop-out anchored to the button.
const emojiButton = dockEmojiBoard ? (
emojiTriggerButton
) : (
<PopOut
offset={16}
alignOffset={-44}
position="Top"
align="End"
anchor={
emojiBoardTab === undefined
? undefined
: emojiBtnRef.current?.getBoundingClientRect() ?? undefined
}
content={emojiBoard}
>
{emojiTriggerButton}
</PopOut>
<UseStateProvider initial={undefined}>
{(emojiTab: EmojiBoardTab | undefined, setEmojiTab) => (
<PopOut
offset={16}
alignOffset={-44}
position="Top"
align="End"
anchor={
emojiTab === undefined
? undefined
: emojiBtnRef.current?.getBoundingClientRect() ?? undefined
}
content={
<EmojiBoard
tab={emojiTab ?? EmojiBoardTab.Emoji}
onTabChange={setEmojiTab}
imagePackRooms={imagePackRooms}
returnFocusOnDeactivate={false}
onEmojiSelect={handleEmoticonSelect}
onCustomEmojiSelect={handleEmoticonSelect}
onStickerSelect={handleStickerSelect}
requestClose={() => {
setEmojiTab((tab) => {
if (tab) {
if (!mobileOrTablet()) ReactEditor.focus(editor);
return undefined;
}
return tab;
});
}}
/>
}
>
<IconButton
ref={emojiBtnRef}
aria-pressed={!!emojiTab}
onClick={() => setEmojiTab(EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
fill="None"
size="300"
radii="300"
>
<Icon src={StreamComposerIcons.Smile} />
</IconButton>
</PopOut>
)}
</UseStateProvider>
);
const sendButton = (
@ -799,7 +822,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
onPaste={handlePaste}
top={
<>
{dockEmojiBoard && emojiBoardTab !== undefined && emojiBoard}
{dockedEmojiBoard}
{replyDraft && (
<div>
<Box