54 lines
No EOL
1.3 KiB
TypeScript
54 lines
No EOL
1.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
import { Portal } from 'soapbox/components/ui';
|
|
import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
|
|
|
|
interface IChatMessageReactionWrapper {
|
|
onOpen(isOpen: boolean): void
|
|
onSelect(emoji: string): void
|
|
children: JSX.Element
|
|
}
|
|
|
|
/**
|
|
* Emoji Reaction Selector
|
|
*/
|
|
function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
|
|
const { onOpen, onSelect, children } = props;
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
|
|
|
|
const handleSelect = (emoji: string) => {
|
|
onSelect(emoji);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const onToggleVisibility = () => setIsOpen((prevValue) => !prevValue);
|
|
|
|
useEffect(() => {
|
|
onOpen(isOpen);
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{React.cloneElement(children, {
|
|
ref: setReferenceElement,
|
|
onClick: onToggleVisibility,
|
|
})}
|
|
|
|
<Portal>
|
|
<EmojiSelector
|
|
visible={isOpen}
|
|
referenceElement={referenceElement}
|
|
onReact={handleSelect}
|
|
onClose={() => setIsOpen(false)}
|
|
offset={[-10, 12]}
|
|
all={false}
|
|
/>
|
|
</Portal>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default ChatMessageReactionWrapper; |