/
emoji-picker.tsx
45 lines (40 loc) · 1.15 KB
/
emoji-picker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import type { MouseEventHandler } from 'react';
import type { EmojiPickerProps } from './defs';
import { Modal } from '../modal';
import { Font } from '../font';
import { EMOJI_DATA } from './consts';
import { Button } from '../button';
const EmojiPicker = ({
className,
title,
data = EMOJI_DATA,
onSelect,
}: EmojiPickerProps) => {
const handleSelect: MouseEventHandler<HTMLButtonElement> = (e) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
onSelect(e.currentTarget.getAttribute('data-emoji')!);
};
const formattedClassName = className ? ` ${className}` : '';
return (
<Modal>
<div className={`emoji-picker${formattedClassName}`}>
<Font className="emoji-picker-header" variant="h6">
{title}
</Font>
<div className="emoji-picker-list">
{data.map((item) => (
<Button
variant="outlined"
key={item.emoji}
data-emoji={item.emoji}
onClick={handleSelect}
>
{item.emoji}
</Button>
))}
</div>
</div>
</Modal>
);
};
export { EmojiPicker };