import { useFloating, shift } from '@floating-ui/react'; import clsx from 'clsx'; import React, { KeyboardEvent, useState } from 'react'; import { createPortal } from 'react-dom'; import { defineMessages, useIntl } from 'react-intl'; import { IconButton } from 'soapbox/components/ui'; import { useClickOutside } from 'soapbox/hooks'; import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown'; export const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, }); const EmojiPickerDropdownContainer = ( props: Pick, ) => { const intl = useIntl(); const title = intl.formatMessage(messages.emoji); const [visible, setVisible] = useState(false); const { x, y, strategy, refs, update } = useFloating({ middleware: [shift()], }); useClickOutside(refs, () => { setVisible(false); }); const handleToggle = (e: MouseEvent | KeyboardEvent) => { e.stopPropagation(); setVisible(!visible); }; return (
} tabIndex={0} /> {createPortal(
, document.body, )}
); }; export default EmojiPickerDropdownContainer;