58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { createPicker } from 'picmo';
|
|
|
|
const CUSTOM_EMOJI_URL = '/api/emoji';
|
|
interface Props {
|
|
// eslint-disable-next-line react/no-unused-prop-types
|
|
onEmojiSelect: (emoji: string) => void;
|
|
onCustomEmojiSelect: (emoji: string) => void;
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
export default function EmojiPicker(props: Props) {
|
|
const [customEmoji, setCustomEmoji] = useState([]);
|
|
const { onEmojiSelect, onCustomEmojiSelect } = props;
|
|
const ref = useRef();
|
|
|
|
const getCustomEmoji = async () => {
|
|
try {
|
|
const response = await fetch(CUSTOM_EMOJI_URL);
|
|
const emoji = await response.json();
|
|
setCustomEmoji(emoji);
|
|
} catch (e) {
|
|
console.error('cannot fetch custom emoji', e);
|
|
}
|
|
};
|
|
|
|
// Fetch the custom emoji on component mount.
|
|
useEffect(() => {
|
|
getCustomEmoji();
|
|
}, []);
|
|
|
|
// Recreate the emoji picker when the custom emoji changes.
|
|
useEffect(() => {
|
|
const e = customEmoji.map(emoji => ({
|
|
emoji: emoji.name,
|
|
label: emoji.name,
|
|
url: emoji.url,
|
|
}));
|
|
|
|
const picker = createPicker({
|
|
rootElement: ref.current,
|
|
custom: e,
|
|
initialCategory: 'custom',
|
|
showPreview: false,
|
|
showRecents: true,
|
|
});
|
|
picker.addEventListener('emoji:select', event => {
|
|
if (event.url) {
|
|
onCustomEmojiSelect(event);
|
|
} else {
|
|
onEmojiSelect(event);
|
|
}
|
|
});
|
|
}, [customEmoji]);
|
|
|
|
return <div ref={ref} />;
|
|
}
|