From 67c2c800de0f2042efae792db51b138ea078252d Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Thu, 19 Oct 2023 16:46:12 +0530 Subject: [PATCH] add text reaction --- src/app/components/emoji-board/EmojiBoard.tsx | 27 ++++++++++++++++++- src/app/organisms/room/message/Message.tsx | 1 + 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 067ebe39..94ba14c1 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -13,6 +13,7 @@ import React, { import { Badge, Box, + Chip, Icon, IconButton, Icons, @@ -623,6 +624,7 @@ export function EmojiBoard({ onEmojiSelect, onCustomEmojiSelect, onStickerSelect, + allowTextCustomEmoji, }: { tab?: EmojiBoardTab; onTabChange?: (tab: EmojiBoardTab) => void; @@ -632,6 +634,7 @@ export function EmojiBoard({ onEmojiSelect?: (unicode: string, shortcode: string) => void; onCustomEmojiSelect?: (mxc: string, shortcode: string) => void; onStickerSelect?: (mxc: string, shortcode: string) => void; + allowTextCustomEmoji?: boolean; }) { const emojiTab = tab === EmojiBoardTab.Emoji; const stickerTab = tab === EmojiBoardTab.Sticker; @@ -777,11 +780,33 @@ export function EmojiBoard({ <Box direction="Column" gap="200"> {onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />} <Input + data-emoji-board-search variant="SurfaceVariant" size="400" placeholder="Search" maxLength={50} - after={<Icon src={Icons.Search} size="50" />} + after={ + allowTextCustomEmoji && result?.query ? ( + <Chip + variant="Primary" + radii="Pill" + after={<Icon src={Icons.ArrowRight} size="50" />} + onClick={() => { + const searchInput = document.querySelector<HTMLInputElement>( + '[data-emoji-board-search="true"]' + ); + const textReaction = searchInput?.value.trim(); + if (!textReaction) return; + onCustomEmojiSelect?.(textReaction, textReaction); + requestClose(); + }} + > + <Text size="L400">React</Text> + </Chip> + ) : ( + <Icon src={Icons.Search} size="50" /> + ) + } onChange={handleOnChange} autoFocus={!mobileOrTablet()} /> diff --git a/src/app/organisms/room/message/Message.tsx b/src/app/organisms/room/message/Message.tsx index f5d25503..e26f3662 100644 --- a/src/app/organisms/room/message/Message.tsx +++ b/src/app/organisms/room/message/Message.tsx @@ -734,6 +734,7 @@ export const Message = as<'div', MessageProps>( <EmojiBoard imagePackRooms={imagePackRooms ?? []} returnFocusOnDeactivate={false} + allowTextCustomEmoji onEmojiSelect={(key) => { onReactionToggle(mEvent.getId()!, key); setEmojiBoard(false);