mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-29 08:21:15 +00:00
Fix emoji picker behaviour
This commit is contained in:
parent
5f06e957d8
commit
7e9cbfac2b
@ -71,6 +71,11 @@ const EmojiPickModal: Component<{
|
||||
}
|
||||
};
|
||||
|
||||
const onEmojiSearch = (term: string) => {
|
||||
setEmojiSearchTerm(() => term);
|
||||
setShowPreset(() => term.length === 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={props.open}
|
||||
@ -79,7 +84,7 @@ const EmojiPickModal: Component<{
|
||||
<div id={props.id} class={styles.zapEmojiChangeModal}>
|
||||
<EmojiPickHeader
|
||||
focus={focusInput()}
|
||||
onInput={setEmojiSearchTerm}
|
||||
onInput={onEmojiSearch}
|
||||
onFilter={setFilter}
|
||||
/>
|
||||
|
||||
|
@ -1,28 +1,15 @@
|
||||
import { Component, createEffect, createSignal, For } from 'solid-js';
|
||||
import { Component, createEffect, createSignal, onCleanup, onMount } from 'solid-js';
|
||||
|
||||
import styles from './EmojiPickPopover.module.scss';
|
||||
import { useSettingsContext } from '../../contexts/SettingsContext';
|
||||
import { debounce, getScreenCordinates, isVisibleInContainer, uuidv4 } from '../../utils';
|
||||
import { useIntl } from '@cookbook/solid-intl';
|
||||
import ConfirmModal from '../ConfirmModal/ConfirmModal';
|
||||
import { settings as t } from '../../translations';
|
||||
import { hookForDev } from '../../lib/devTools';
|
||||
import ButtonLink from '../Buttons/ButtonLink';
|
||||
import Modal from '../Modal/Modal';
|
||||
|
||||
import emojiSearch from '@jukben/emoji-search';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { EmojiOption } from '../../types/primal';
|
||||
import ButtonPrimary from '../Buttons/ButtonPrimary';
|
||||
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
||||
import EmojiPickHeader from './EmojiPickHeader';
|
||||
import { useAccountContext } from '../../contexts/AccountContext';
|
||||
|
||||
const defaultTerm = 'smile';
|
||||
|
||||
const EmojiPickModal: Component<{
|
||||
const EmojiPickPopover: Component<{
|
||||
id?: string,
|
||||
open: boolean,
|
||||
onClose: (e: MouseEvent | KeyboardEvent) => void,
|
||||
onSelect: (emoji: EmojiOption) => void,
|
||||
orientation?: 'up' | 'down',
|
||||
@ -41,20 +28,6 @@ const EmojiPickModal: Component<{
|
||||
}
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (props.open) {
|
||||
window.addEventListener('keydown', onKey);
|
||||
setTimeout(() => {
|
||||
setEmojiSearchTerm(() => 'smile');
|
||||
setFocusInput(() => true);
|
||||
setFocusInput(() => false);
|
||||
}, 10);
|
||||
}
|
||||
else {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
}
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (emojiSearchTerm().length === 0) {
|
||||
setEmojiSearchTerm(() => defaultTerm)
|
||||
@ -72,16 +45,43 @@ const EmojiPickModal: Component<{
|
||||
}
|
||||
};
|
||||
|
||||
const onClickOutside = (e: MouseEvent) => {
|
||||
props.onClose(e);
|
||||
};
|
||||
|
||||
const onEmojiSearch = (term: string) => {
|
||||
setEmojiSearchTerm(() => term);
|
||||
setShowPreset(() => term.length === 0);
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
setTimeout(() => {
|
||||
setEmojiSearchTerm(() => 'smile');
|
||||
setFocusInput(() => true);
|
||||
setFocusInput(() => false);
|
||||
window.addEventListener('keydown', onKey);
|
||||
window.addEventListener('click', onClickOutside);
|
||||
}, 10);
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
window.removeEventListener('keydown', onKey);
|
||||
window.removeEventListener('click', onClickOutside);
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
id={props.id}
|
||||
class={`${styles.emojiPickHolder} ${props.orientation && styles[props.orientation]}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div class={styles.zapEmojiChangeModal}>
|
||||
<div
|
||||
class={styles.zapEmojiChangeModal}
|
||||
>
|
||||
<EmojiPickHeader
|
||||
focus={focusInput()}
|
||||
onInput={setEmojiSearchTerm}
|
||||
onInput={onEmojiSearch}
|
||||
onFilter={setFilter}
|
||||
/>
|
||||
|
||||
@ -100,4 +100,4 @@ const EmojiPickModal: Component<{
|
||||
);
|
||||
}
|
||||
|
||||
export default EmojiPickModal;
|
||||
export default EmojiPickPopover;
|
||||
|
@ -1316,7 +1316,6 @@ const EditBox: Component<{
|
||||
|
||||
<Show when={isPickingEmoji()}>
|
||||
<EmojiPickPopover
|
||||
open={isPickingEmoji()}
|
||||
onClose={() => {
|
||||
setIsPickingEmoji(false);
|
||||
textArea?.focus();
|
||||
|
@ -1064,7 +1064,8 @@ export function AccountProvider(props: { children: JSXElement }) {
|
||||
const history = store.emojiHistory;
|
||||
|
||||
if (history.find(e => e.name === emoji.name)) {
|
||||
let sorted = history.sort((a, b) => a.name === emoji.name ? -1 : b.name === emoji.name ? 1 : 0);
|
||||
let sorted = [...history];
|
||||
sorted.sort((a, b) => a.name === emoji.name ? -1 : b.name === emoji.name ? 1 : 0);
|
||||
|
||||
updateStore('emojiHistory', () => [...sorted]);
|
||||
saveEmojiHistory(store.publicKey, store.emojiHistory);
|
||||
|
Loading…
Reference in New Issue
Block a user