index.tsx raw

   1  import { parseEmojiPickerUnified } from '@/lib/utils'
   2  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   3  import { useTheme } from '@/providers/ThemeProvider'
   4  import customEmojiService from '@/services/custom-emoji.service'
   5  import { TEmoji } from '@/types'
   6  import EmojiPickerReact, {
   7    EmojiStyle,
   8    SkinTonePickerLocation,
   9    SuggestionMode,
  10    Theme
  11  } from 'emoji-picker-react'
  12  
  13  export default function EmojiPicker({
  14    onEmojiClick
  15  }: {
  16    onEmojiClick: (emoji: string | TEmoji | undefined, event: MouseEvent) => void
  17  }) {
  18    const { themeSetting } = useTheme()
  19    const { isSmallScreen } = useScreenSize()
  20  
  21    return (
  22      <EmojiPickerReact
  23        theme={
  24          themeSetting === 'system' ? Theme.AUTO : themeSetting === 'dark' ? Theme.DARK : Theme.LIGHT
  25        }
  26        width={isSmallScreen ? '100%' : 350}
  27        autoFocusSearch={false}
  28        emojiStyle={EmojiStyle.NATIVE}
  29        skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
  30        style={
  31          {
  32            '--epr-bg-color': 'hsl(var(--background))',
  33            '--epr-category-label-bg-color': 'hsl(var(--background))',
  34            '--epr-text-color': 'hsl(var(--foreground))',
  35            '--epr-hover-bg-color': 'hsl(var(--muted) / 0.5)',
  36            '--epr-picker-border-color': 'transparent',
  37            '--epr-search-input-bg-color': 'hsl(var(--muted) / 0.5)'
  38          } as React.CSSProperties
  39        }
  40        suggestedEmojisMode={SuggestionMode.FREQUENT}
  41        onEmojiClick={(data, e) => {
  42          const emoji = parseEmojiPickerUnified(data.unified)
  43          onEmojiClick(emoji, e)
  44        }}
  45        customEmojis={customEmojiService.getAllCustomEmojisForPicker()}
  46      />
  47    )
  48  }
  49