65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React, { useCallback, useState } from "react";
|
|
import { Picker, BaseEmoji } from "emoji-mart";
|
|
import { Popover2 } from "@blueprintjs/popover2";
|
|
import Icon, { IconName, IconSize } from "components/ads/Icon";
|
|
|
|
import { withTheme } from "styled-components";
|
|
import { Theme } from "constants/DefaultTheme";
|
|
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
|
|
import "emoji-mart/css/emoji-mart.css";
|
|
|
|
const EmojiPicker = withTheme(
|
|
({
|
|
iconName,
|
|
iconSize,
|
|
onSelectEmoji,
|
|
theme,
|
|
}: {
|
|
iconName?: IconName;
|
|
theme: Theme;
|
|
onSelectEmoji: (e: React.MouseEvent, emojiObject: BaseEmoji) => void;
|
|
iconSize?: IconSize;
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleSelectEmoji = useCallback(
|
|
(emoji, event) => {
|
|
onSelectEmoji(event, emoji);
|
|
setIsOpen(false);
|
|
},
|
|
[onSelectEmoji],
|
|
);
|
|
|
|
return (
|
|
<Popover2
|
|
content={
|
|
<Picker
|
|
onClick={handleSelectEmoji}
|
|
showPreview={false}
|
|
showSkinTones={false}
|
|
style={{
|
|
border: "none",
|
|
borderRadius: 0,
|
|
}}
|
|
/>
|
|
}
|
|
isOpen={isOpen}
|
|
minimal
|
|
onInteraction={(nextOpenState) => {
|
|
setIsOpen(nextOpenState);
|
|
}}
|
|
portalClassName="emoji-picker-portal"
|
|
>
|
|
<Icon
|
|
fillColor={theme.colors.comments.emojiPicker}
|
|
keepColors
|
|
name={iconName || "emoji"}
|
|
size={iconSize || IconSize.XXXL}
|
|
/>
|
|
</Popover2>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default EmojiPicker;
|