IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Add className to TagsInput (#33944)

Browse Source 
* Grafana-UI: Add className to TagsInput

* Do not add existing tags
This commit is contained in:
Alex Khomenko 2021-05-12 15:09:12 +03:00 committed by GitHub
parent 25bb290d36
commit 553d3b9dbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
View File

@ -11,9 +11,16 @@ export interface Props {
tags?: string[];
onChange: (tags: string[]) => void;
width?: number;
className?: string;
}
export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)', tags = [], onChange, width }) => {
export const TagsInput: FC<Props> = ({
placeholder = 'New tag (enter key to add)',
tags = [],
onChange,
width,
className,
}) => {
const [newTagName, setNewName] = useState('');
const styles = useStyles(getStyles);
const theme = useTheme2();
@ -28,7 +35,9 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
const onAdd = (event: React.MouseEvent) => {
event.preventDefault();
onChange(tags.concat(newTagName));
if (!tags.includes(newTagName)) {
onChange(tags.concat(newTagName));
}
setNewName('');
};
@ -41,7 +50,7 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
};
return (
<div className={cx(styles.wrapper, width ? css({ width: theme.spacing(width) }) : '')}>
<div className={cx(styles.wrapper, className, width ? css({ width: theme.spacing(width) }) : '')}>
<div className={tags?.length ? styles.tags : undefined}>
{tags?.map((tag: string, index: number) => {
return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />;