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 (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
open={props.open}
|
open={props.open}
|
||||||
@ -79,7 +84,7 @@ const EmojiPickModal: Component<{
|
|||||||
<div id={props.id} class={styles.zapEmojiChangeModal}>
|
<div id={props.id} class={styles.zapEmojiChangeModal}>
|
||||||
<EmojiPickHeader
|
<EmojiPickHeader
|
||||||
focus={focusInput()}
|
focus={focusInput()}
|
||||||
onInput={setEmojiSearchTerm}
|
onInput={onEmojiSearch}
|
||||||
onFilter={setFilter}
|
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 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 { EmojiOption } from '../../types/primal';
|
||||||
import ButtonPrimary from '../Buttons/ButtonPrimary';
|
|
||||||
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
import EmojiPicker from '../EmojiPicker/EmojiPicker';
|
||||||
import EmojiPickHeader from './EmojiPickHeader';
|
import EmojiPickHeader from './EmojiPickHeader';
|
||||||
import { useAccountContext } from '../../contexts/AccountContext';
|
import { useAccountContext } from '../../contexts/AccountContext';
|
||||||
|
|
||||||
const defaultTerm = 'smile';
|
const defaultTerm = 'smile';
|
||||||
|
|
||||||
const EmojiPickModal: Component<{
|
const EmojiPickPopover: Component<{
|
||||||
id?: string,
|
id?: string,
|
||||||
open: boolean,
|
|
||||||
onClose: (e: MouseEvent | KeyboardEvent) => void,
|
onClose: (e: MouseEvent | KeyboardEvent) => void,
|
||||||
onSelect: (emoji: EmojiOption) => void,
|
onSelect: (emoji: EmojiOption) => void,
|
||||||
orientation?: 'up' | 'down',
|
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(() => {
|
createEffect(() => {
|
||||||
if (emojiSearchTerm().length === 0) {
|
if (emojiSearchTerm().length === 0) {
|
||||||
setEmojiSearchTerm(() => defaultTerm)
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
id={props.id}
|
id={props.id}
|
||||||
class={`${styles.emojiPickHolder} ${props.orientation && styles[props.orientation]}`}
|
class={`${styles.emojiPickHolder} ${props.orientation && styles[props.orientation]}`}
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class={styles.zapEmojiChangeModal}
|
||||||
>
|
>
|
||||||
<div class={styles.zapEmojiChangeModal}>
|
|
||||||
<EmojiPickHeader
|
<EmojiPickHeader
|
||||||
focus={focusInput()}
|
focus={focusInput()}
|
||||||
onInput={setEmojiSearchTerm}
|
onInput={onEmojiSearch}
|
||||||
onFilter={setFilter}
|
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()}>
|
<Show when={isPickingEmoji()}>
|
||||||
<EmojiPickPopover
|
<EmojiPickPopover
|
||||||
open={isPickingEmoji()}
|
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setIsPickingEmoji(false);
|
setIsPickingEmoji(false);
|
||||||
textArea?.focus();
|
textArea?.focus();
|
||||||
|
@ -1064,7 +1064,8 @@ export function AccountProvider(props: { children: JSXElement }) {
|
|||||||
const history = store.emojiHistory;
|
const history = store.emojiHistory;
|
||||||
|
|
||||||
if (history.find(e => e.name === emoji.name)) {
|
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]);
|
updateStore('emojiHistory', () => [...sorted]);
|
||||||
saveEmojiHistory(store.publicKey, store.emojiHistory);
|
saveEmojiHistory(store.publicKey, store.emojiHistory);
|
||||||
|
Loading…
Reference in New Issue
Block a user