93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
import data from '@emoji-mart/data'
|
|
import Picker from '@emoji-mart/react'
|
|
|
|
/**
|
|
* A button that opens a floating emoji picker.
|
|
* When the user selects an emoji, `onEmojiSelect(emojiNative)` is called
|
|
* with the native Unicode character.
|
|
*
|
|
* Props:
|
|
* onEmojiSelect (string) → void Called with the emoji character
|
|
* disabled boolean Disables the button
|
|
* className string Additional classes for the trigger button
|
|
*/
|
|
export default function EmojiPickerButton({ onEmojiSelect, disabled = false, className = '' }) {
|
|
const [open, setOpen] = useState(false)
|
|
const wrapRef = useRef(null)
|
|
|
|
// Close on outside click
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
function handleClick(e) {
|
|
if (wrapRef.current && !wrapRef.current.contains(e.target)) {
|
|
setOpen(false)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClick)
|
|
return () => document.removeEventListener('mousedown', handleClick)
|
|
}, [open])
|
|
|
|
// Close on Escape
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
function handleKey(e) {
|
|
if (e.key === 'Escape') setOpen(false)
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKey)
|
|
return () => document.removeEventListener('keydown', handleKey)
|
|
}, [open])
|
|
|
|
const handleSelect = useCallback(
|
|
(emoji) => {
|
|
onEmojiSelect?.(emoji.native)
|
|
setOpen(false)
|
|
},
|
|
[onEmojiSelect],
|
|
)
|
|
|
|
return (
|
|
<div ref={wrapRef} className="relative inline-block">
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => setOpen((v) => !v)}
|
|
aria-label="Open emoji picker"
|
|
aria-expanded={open}
|
|
className={[
|
|
'flex items-center justify-center w-8 h-8 rounded-md',
|
|
'text-white/40 hover:text-white/70 hover:bg-white/[0.07]',
|
|
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500',
|
|
'disabled:opacity-30 disabled:pointer-events-none',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
😊
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="absolute bottom-full mb-2 right-0 z-50 shadow-2xl rounded-xl overflow-hidden"
|
|
style={{ filter: 'drop-shadow(0 8px 32px rgba(0,0,0,0.6))' }}
|
|
>
|
|
<Picker
|
|
data={data}
|
|
onEmojiSelect={handleSelect}
|
|
theme="dark"
|
|
previewPosition="none"
|
|
skinTonePosition="none"
|
|
maxFrequentRows={2}
|
|
perLine={8}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|