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} {...pop.attributes.popper}
> >
<div className={styles.scroll} ref={scroll}> <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) => ( {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) => ( {tags.map((item, i) => (
@ -121,6 +132,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
title={item} title={item}
type="tag" type="tag"
key={item} key={item}
onSelect={onSelect}
/> />
))} ))}
</div> </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 styles from './styles.module.scss';
import classNames from 'classnames'; import classNames from 'classnames';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
@ -7,13 +7,21 @@ interface IProps {
selected: boolean; selected: boolean;
title: string; title: string;
type: string; type: string;
onSelect: (val: string) => void;
} }
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title }) => ( const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
<div className={classNames(styles.row, styles[type], { [styles.selected]: selected })}> const onClick = useCallback(() => onSelect(title), [title, onSelect]);
<Icon icon={type} size={16} />
<span>{title}</span> return (
</div> <div
); className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
onClick={onClick}
>
<Icon icon={type} size={16} />
<span>{title}</span>
</div>
);
};
export { TagAutocompleteRow }; export { TagAutocompleteRow };