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

mobile fixes

Browse source
This commit is contained in:
ewwwwwwww 2022-07-09 10:52:08 -07:00
parent 9770209f00
commit 403db1d46e
1 changed files with 26 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
View file

@ -7,6 +7,7 @@ import { usePopper } from 'react-popper';
import { IconButton } from 'soapbox/components/ui'; import { IconButton } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks'; import { useSettings } from 'soapbox/hooks';
import { isMobile } from 'soapbox/is_mobile';
import { buildCustomEmojis } from '../../emoji'; import { buildCustomEmojis } from '../../emoji';
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components'; import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
@ -79,8 +80,9 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const placement = condensed ? 'bottom-start' : 'top-start';
const { styles, attributes, update } = usePopper(popperReference, popperElement, { const { styles, attributes, update } = usePopper(popperReference, popperElement, {
placement: condensed ? 'bottom-start' : 'top-start', placement: isMobile(window.innerWidth) ? 'auto' : placement,
}); });
const handleToggle = () => { const handleToggle = () => {
@ -139,8 +141,9 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
document.addEventListener('touchend', handleDocClick, listenerOptions); document.addEventListener('touchend', handleDocClick, listenerOptions);
return function cleanup() { return function cleanup() {
document.removeEventListener('click', handleDocClick); document.removeEventListener('click', handleDocClick, false);
document.removeEventListener('touchend', handleDocClick); // @ts-ignore
document.removeEventListener('touchend', handleDocClick, listenerOptions);
}; };
}); });
@ -158,27 +161,10 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
} }
}, [visible]); }, [visible]);
let Popup; // TODO: move to class
const style = !isMobile(window.innerWidth) ? styles.popper : {
if (loading) { ...styles.popper, width: '100%',
Popup = () => <div />; };
} else {
Popup = () => (
<EmojiPicker
custom={[{ emojis: buildCustomEmojis(custom_emojis) }]}
title={title}
onEmojiSelect={handlePick}
recent={frequentlyUsedEmojis}
perLine={8}
skin={onSkinTone}
emojiSize={38}
emojiButtonSize={50}
set={'twitter'}
theme={theme}
autoFocus
/>
);
}
return ( return (
<div className='relative' ref={setContainerElement}> <div className='relative' ref={setContainerElement}>
@ -204,12 +190,25 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
'z-1000': true, 'z-1000': true,
})} })}
ref={setPopperElement} ref={setPopperElement}
style={styles.popper} style={style}
{...attributes.popper} {...attributes.popper}
> >
{visible && ( {visible && (
<RenderAfter update={update}> <RenderAfter update={update}>
<Popup /> {!loading && (
<EmojiPicker
custom={[{ emojis: buildCustomEmojis(custom_emojis) }]}
title={title}
onEmojiSelect={handlePick}
recent={frequentlyUsedEmojis}
perLine={8}
skin={onSkinTone}
emojiSize={38}
emojiButtonSize={50}
set={'twitter'}
theme={theme}
/>
)}
</RenderAfter> </RenderAfter>
)} )}
</div>, </div>,