From 83abb8b4e3406c2110340f26b5d3d207b9b7190f Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 12 Sep 2025 11:43:00 +0530 Subject: [PATCH] extract emoji board tabs component --- .../components/emoji-board/EmojiBoard.css.tsx | 4 - src/app/components/emoji-board/EmojiBoard.tsx | 100 ++---------------- .../emoji-board/components/Tabs.tsx | 44 ++++++++ .../emoji-board/components/index.tsx | 2 + src/app/components/emoji-board/index.ts | 1 + src/app/components/emoji-board/types.ts | 17 +++ 6 files changed, 75 insertions(+), 93 deletions(-) create mode 100644 src/app/components/emoji-board/components/Tabs.tsx create mode 100644 src/app/components/emoji-board/components/index.tsx create mode 100644 src/app/components/emoji-board/types.ts diff --git a/src/app/components/emoji-board/EmojiBoard.css.tsx b/src/app/components/emoji-board/EmojiBoard.css.tsx index ba4ca4e0..ef5f4bd0 100644 --- a/src/app/components/emoji-board/EmojiBoard.css.tsx +++ b/src/app/components/emoji-board/EmojiBoard.css.tsx @@ -44,10 +44,6 @@ export const Header = style({ paddingBottom: 0, }); -export const EmojiBoardTab = style({ - cursor: 'pointer', -}); - export const Footer = style({ padding: config.space.S200, margin: config.space.S300, diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 72a60f2b..b2124f57 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -11,13 +11,10 @@ import React, { useRef, } from 'react'; import { - Badge, Box, - Chip, Icon, IconButton, Icons, - Input, Line, Scroll, Text, @@ -47,32 +44,15 @@ import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearc import { useDebounce } from '../../hooks/useDebounce'; import { useThrottle } from '../../hooks/useThrottle'; import { addRecentEmoji } from '../../plugins/recent-emoji'; -import { mobileOrTablet } from '../../utils/user-agent'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji'; import { getEmoticonSearchStr } from '../../plugins/utils'; +import { SearchInput, EmojiBoardTabs } from './components'; +import { EmojiBoardTab, EmojiItemInfo, EmojiType } from './types'; const RECENT_GROUP_ID = 'recent_group'; const SEARCH_GROUP_ID = 'search_group'; -export enum EmojiBoardTab { - Emoji = 'Emoji', - Sticker = 'Sticker', -} - -enum EmojiType { - Emoji = 'emoji', - CustomEmoji = 'customEmoji', - Sticker = 'sticker', -} - -export type EmojiItemInfo = { - type: EmojiType; - data: string; - shortcode: string; - label: string; -}; - const getDOMGroupId = (id: string): string => `EmojiBoardGroup-${id}`; const getEmojiItemInfo = (element: Element): EmojiItemInfo | undefined => { @@ -167,43 +147,6 @@ const EmojiBoardLayout = as< )); -function EmojiBoardTabs({ - tab, - onTabChange, -}: { - tab: EmojiBoardTab; - onTabChange: (tab: EmojiBoardTab) => void; -}) { - return ( - - onTabChange(EmojiBoardTab.Sticker)} - > - - Sticker - - - onTabChange(EmojiBoardTab.Emoji)} - > - - Emoji - - - - ); -} - export function SidebarBtn({ active, label, @@ -753,6 +696,11 @@ export function EmojiBoard({ } }; + const handleTextCustomEmojiSelect = (textEmoji: string) => { + onCustomEmojiSelect?.(textEmoji, textEmoji); + requestClose(); + }; + const handleEmojiPreview = useCallback( (element: HTMLButtonElement) => { const emojiInfo = getEmojiItemInfo(element); @@ -819,37 +767,11 @@ export function EmojiBoard({
{onTabChange && } - } - outlined - onClick={() => { - const searchInput = document.querySelector( - '[data-emoji-board-search="true"]' - ); - const textReaction = searchInput?.value.trim(); - if (!textReaction) return; - onCustomEmojiSelect?.(textReaction, textReaction); - requestClose(); - }} - > - React - - ) : ( - - ) - } +
diff --git a/src/app/components/emoji-board/components/Tabs.tsx b/src/app/components/emoji-board/components/Tabs.tsx new file mode 100644 index 00000000..d433354f --- /dev/null +++ b/src/app/components/emoji-board/components/Tabs.tsx @@ -0,0 +1,44 @@ +import React, { CSSProperties } from 'react'; +import { Badge, Box, Text } from 'folds'; +import { EmojiBoardTab } from '../types'; + +const styles: CSSProperties = { + cursor: 'pointer', +}; + +export function EmojiBoardTabs({ + tab, + onTabChange, +}: { + tab: EmojiBoardTab; + onTabChange: (tab: EmojiBoardTab) => void; +}) { + return ( + + onTabChange(EmojiBoardTab.Sticker)} + > + + Sticker + + + onTabChange(EmojiBoardTab.Emoji)} + > + + Emoji + + + + ); +} diff --git a/src/app/components/emoji-board/components/index.tsx b/src/app/components/emoji-board/components/index.tsx new file mode 100644 index 00000000..1018b46d --- /dev/null +++ b/src/app/components/emoji-board/components/index.tsx @@ -0,0 +1,2 @@ +export * from './SearchInput'; +export * from './Tabs'; diff --git a/src/app/components/emoji-board/index.ts b/src/app/components/emoji-board/index.ts index 430cec07..7b1cce3b 100644 --- a/src/app/components/emoji-board/index.ts +++ b/src/app/components/emoji-board/index.ts @@ -1 +1,2 @@ export * from './EmojiBoard'; +export * from './types'; diff --git a/src/app/components/emoji-board/types.ts b/src/app/components/emoji-board/types.ts new file mode 100644 index 00000000..de94cc56 --- /dev/null +++ b/src/app/components/emoji-board/types.ts @@ -0,0 +1,17 @@ +export enum EmojiBoardTab { + Emoji = 'Emoji', + Sticker = 'Sticker', +} + +export enum EmojiType { + Emoji = 'emoji', + CustomEmoji = 'customEmoji', + Sticker = 'sticker', +} + +export type EmojiItemInfo = { + type: EmojiType; + data: string; + shortcode: string; + label: string; +};