moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix emoji selector on touchscreen 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-03-01 20:27:16 +01:00
parent 277045c7a1
commit eb93cb39fd
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/soapbox/components/status-reaction-wrapper.tsx
View File

@ -112,6 +112,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
referenceElement={referenceElement} referenceElement={referenceElement}
onReact={handleReact} onReact={handleReact}
visible={visible} visible={visible}
onClose={() => setVisible(false)}
/> />
</Portal> </Portal>
)} )}

16
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -3,10 +3,12 @@ import clsx from 'clsx';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
import { Emoji, HStack, IconButton } from 'soapbox/components/ui'; import { Emoji as EmojiComponent, HStack, IconButton } from 'soapbox/components/ui';
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown'; import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { useSoapboxConfig } from 'soapbox/hooks'; import { useSoapboxConfig } from 'soapbox/hooks';
import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
interface IEmojiButton { interface IEmojiButton {
/** Unicode emoji character. */ /** Unicode emoji character. */
emoji: string emoji: string
@ -29,7 +31,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
return ( return (
<button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}> <button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
<Emoji className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} /> <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
</button> </button>
); );
}; };
@ -61,7 +63,6 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
}): JSX.Element => { }): JSX.Element => {
const soapboxConfig = useSoapboxConfig(); const soapboxConfig = useSoapboxConfig();
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
// `useRef` won't trigger a re-render, while `useState` does. // `useRef` won't trigger a re-render, while `useState` does.
@ -74,6 +75,8 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
} }
if (document.querySelector('em-emoji-picker')) { if (document.querySelector('em-emoji-picker')) {
event.preventDefault();
event.stopPropagation();
return setExpanded(false); return setExpanded(false);
} }
@ -98,6 +101,10 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
setExpanded(true); setExpanded(true);
}; };
const handlePickEmoji = (emoji: Emoji) => {
onReact((emoji as NativeEmoji).native);
};
useEffect(() => () => { useEffect(() => () => {
document.body.style.overflow = ''; document.body.style.overflow = '';
}, []); }, []);
@ -112,7 +119,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
}; };
}, [referenceElement]); }, [referenceElement, popperElement]);
useEffect(() => { useEffect(() => {
if (visible && update) { if (visible && update) {
@ -142,6 +149,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
setVisible={setExpanded} setVisible={setExpanded}
update={update} update={update}
withCustom={false} withCustom={false}
onPickEmoji={handlePickEmoji}
/> />
) : ( ) : (
<HStack <HStack

1
app/soapbox/features/emoji/search.ts
View File

@ -40,7 +40,6 @@ export const addCustomToPool = (customEmojis: any[]) => {
const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => { const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
return index.search(str, maxResults) return index.search(str, maxResults)
.flatMap((id: string) => { .flatMap((id: string) => {
console.log(id);
if (id[0] === 'c') { if (id[0] === 'c') {
const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS(); const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();