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

fixed autocomplete rows click

Browse source
This commit is contained in:
Fedor Katurov 2020-11-03 12:48:57 +07:00
parent d2e35382f1
commit 9ea5b8ae8f
2 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -109,10 +109,21 @@ const TagAutocompleteUnconnected: FC<Props> = ({
{...pop.attributes.popper}
>
<div className={styles.scroll} ref={scroll}>
<TagAutocompleteRow selected={selected === -1} title={search} type="enter" />
<TagAutocompleteRow
selected={selected === -1}
title={search}
type="enter"
onSelect={onSelect}
/>
{categories.map((item, i) => (
<TagAutocompleteRow selected={selected === i} title={item} type="right" key={item} />
<TagAutocompleteRow
selected={selected === i}
title={item}
type="right"
key={item}
onSelect={onSelect}
/>
))}
{tags.map((item, i) => (
@ -121,6 +132,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
title={item}
type="tag"
key={item}
onSelect={onSelect}
/>
))}
</div>

22
src/components/tags/TagAutocompleteRow/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, useCallback } from 'react';
import styles from './styles.module.scss';
import classNames from 'classnames';
import { Icon } from '~/components/input/Icon';
@ -7,13 +7,21 @@ interface IProps {
selected: boolean;
title: string;
type: string;
onSelect: (val: string) => void;
}
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title }) => (
<div className={classNames(styles.row, styles[type], { [styles.selected]: selected })}>
<Icon icon={type} size={16} />
<span>{title}</span>
</div>
);
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
return (
<div
className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
onClick={onClick}
>
<Icon icon={type} size={16} />
<span>{title}</span>
</div>
);
};
export { TagAutocompleteRow };