bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add flip middleware to emoji picker

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-31 14:00:29 +02:00
parent 0845f1d14b
commit 42ba700039
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
View file

@ -1,10 +1,9 @@
import { useFloating, shift } from '@floating-ui/react'; import { useFloating, shift, flip } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { KeyboardEvent, useState } from 'react'; import React, { KeyboardEvent, useState } from 'react';
import { createPortal } from 'react-dom';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { IconButton } from 'pl-fe/components/ui'; import { IconButton, Portal } from 'pl-fe/components/ui';
import { useClickOutside } from 'pl-fe/hooks'; import { useClickOutside } from 'pl-fe/hooks';
import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown'; import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
@ -21,7 +20,7 @@ const EmojiPickerDropdownContainer = (
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({ const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
middleware: [shift()], middleware: [flip(), shift()],
}); });
useClickOutside(refs, () => { useClickOutside(refs, () => {
@ -50,7 +49,7 @@ const EmojiPickerDropdownContainer = (
tabIndex={0} tabIndex={0}
/> />
{createPortal( <Portal>
<div <div
className='z-[101]' className='z-[101]'
ref={refs.setFloating} ref={refs.setFloating}
@ -67,9 +66,8 @@ const EmojiPickerDropdownContainer = (
update={update} update={update}
{...props} {...props}
/> />
</div>, </div>
document.body, </Portal>
)}
</div> </div>
); );
}; };