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

EmojiButtonWrapper: improve Popper positioning

Browse source
This commit is contained in:
Alex Gleason 2022-04-20 16:35:09 -05:00
parent 6e4ba02d6e
commit 234e008c93
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/soapbox/components/emoji-button-wrapper.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { useState, useRef } from 'react'; import React, { useState } from 'react';
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
@ -25,12 +25,13 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
// const [focused, setFocused] = useState(false); // const [focused, setFocused] = useState(false);
const ref = useRef<HTMLDivElement>(null); // `useRef` won't trigger a re-render, while `useState` does.
const popperRef = useRef<HTMLDivElement>(null); // https://popper.js.org/react-popper/v2/
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(ref.current, popperRef.current, { const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: 'top-start', placement: 'top-start',
strategy: 'fixed',
modifiers: [ modifiers: [
{ {
name: 'offset', name: 'offset',
@ -93,10 +94,10 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
const selector = ( const selector = (
<div <div
className={classNames('fixed z-50 transition-opacity duration-100', { className={classNames('z-50 transition-opacity duration-100', {
'opacity-0 pointer-events-none': !visible, 'opacity-0 pointer-events-none': !visible,
})} })}
ref={popperRef} ref={setPopperElement}
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
> >
@ -114,7 +115,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
{React.cloneElement(children, { {React.cloneElement(children, {
onClick: handleClick, onClick: handleClick,
onBlur: handleUnfocus, onBlur: handleUnfocus,
ref, ref: setReferenceElement,
})} })}
{selector} {selector}