muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

refresh tag autocomplete on each symbol

Browse source
This commit is contained in:
Fedor Katurov 2023-11-04 13:13:07 +06:00
parent 4aea8cfe3b
commit 73225b166f
1 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/tags/TagAutocomplete/index.tsx
View file

@ -1,4 +1,11 @@
import React, { useCallback, useEffect, useMemo, useRef, useState, VFC } from 'react'; import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
VFC,
} from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
@ -29,9 +36,11 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
const [categories, tags] = useMemo( const [categories, tags] = useMemo(
() => () =>
separateTagOptions( separateTagOptions(
options.slice(0, 7).filter(option => option !== search && !exclude.includes(option)) options
.slice(0, 7)
.filter((option) => option !== search && !exclude.includes(option)),
), ),
[options, search, exclude] [options, search, exclude],
); );
const scroll = useRef<HTMLDivElement>(null); const scroll = useRef<HTMLDivElement>(null);
const wrapper = useRef<HTMLDivElement>(null); const wrapper = useRef<HTMLDivElement>(null);
@ -52,7 +61,9 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
}); });
const onKeyDown = useCallback( const onKeyDown = useCallback(
event => { (event) => {
pop?.update?.();
const all = [...categories, ...tags]; const all = [...categories, ...tags];
switch (event.key) { switch (event.key) {
@ -69,7 +80,7 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
onSelect(selected >= 0 ? all[selected] : search); onSelect(selected >= 0 ? all[selected] : search);
} }
}, },
[setSelected, selected, categories, tags, onSelect, search] [pop, categories, tags, selected, onSelect, search],
); );
useEffect(() => { useEffect(() => {
@ -83,7 +94,10 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
const { scrollTop, clientHeight } = scroll.current; const { scrollTop, clientHeight } = scroll.current;
const { offsetTop } = el; const { offsetTop } = el;
if (clientHeight - scrollTop + el.clientHeight < offsetTop || offsetTop < scrollTop) { if (
clientHeight - scrollTop + el.clientHeight < offsetTop ||
offsetTop < scrollTop
) {
scroll.current.scrollTo(0, el.offsetTop - el.clientHeight); scroll.current.scrollTo(0, el.offsetTop - el.clientHeight);
} }
}, [selected]); }, [selected]);
@ -95,7 +109,11 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
style={pop.styles.popper} style={pop.styles.popper}
{...pop.attributes.popper} {...pop.attributes.popper}
> >
<div style={pop.styles.arrow} ref={setArrowElement} className={styles.arrow} /> <div
style={pop.styles.arrow}
ref={setArrowElement}
className={styles.arrow}
/>
<div className={styles.scroll} ref={scroll}> <div className={styles.scroll} ref={scroll}>
<TagAutocompleteRow <TagAutocompleteRow
selected={selected === -1} selected={selected === -1}