57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
const useStyles = makeStyles()(() => {
|
|
return {
|
|
loading: {
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
height: '435px',
|
|
justifyContent: 'center'
|
|
}
|
|
};
|
|
});
|
|
|
|
interface IProps {
|
|
onEmojiSelect: (emoji: string) => void;
|
|
}
|
|
|
|
const EmojiPicker: React.FC<IProps> = ({ onEmojiSelect }) => {
|
|
const { classes } = useStyles();
|
|
const [ PickerComponent, setPickerComponent ] = useState<React.ComponentType<any> | null>(null);
|
|
const [ data, setData ] = useState<object | null>(null);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
import('@emoji-mart/react'),
|
|
import('@emoji-mart/data')
|
|
]).then(([ pickerMod, dataMod ]) => {
|
|
setPickerComponent(() => pickerMod.default);
|
|
setData(dataMod.default);
|
|
});
|
|
}, []);
|
|
|
|
const handleSelect = useCallback((emoji: { native: string; }) => {
|
|
onEmojiSelect(emoji.native);
|
|
}, [ onEmojiSelect ]);
|
|
|
|
if (!PickerComponent || !data) {
|
|
return (
|
|
<div className = { classes.loading }>
|
|
Loading...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PickerComponent
|
|
data = { data }
|
|
onEmojiSelect = { handleSelect }
|
|
previewPosition = 'none'
|
|
skinTonePosition = 'search'
|
|
theme = 'dark' />
|
|
);
|
|
};
|
|
|
|
export default EmojiPicker;
|