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

Enable adding tags on blur (#34374)

Browse Source
This commit is contained in:
Alex Khomenko 2021-05-19 17:32:14 +03:00 committed by GitHub
parent e291203528
commit 958ebce1e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ export interface Props {
width?: number; width?: number;
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
addOnBlur?: boolean;
} }
export const TagsInput: FC<Props> = ({ export const TagsInput: FC<Props> = ({
@ -22,6 +23,7 @@ export const TagsInput: FC<Props> = ({
width, width,
className, className,
disabled, disabled,
addOnBlur,
}) => { }) => {
const [newTagName, setNewName] = useState(''); const [newTagName, setNewName] = useState('');
const styles = useStyles(getStyles); const styles = useStyles(getStyles);
@ -38,14 +40,20 @@ export const TagsInput: FC<Props> = ({
onChange(tags?.filter((x) => x !== tagToRemove)); onChange(tags?.filter((x) => x !== tagToRemove));
}; };
const onAdd = (event: React.MouseEvent) => { const onAdd = (event?: React.MouseEvent) => {
event.preventDefault(); event?.preventDefault();
if (!tags.includes(newTagName)) { if (!tags.includes(newTagName)) {
onChange(tags.concat(newTagName)); onChange(tags.concat(newTagName));
} }
setNewName(''); setNewName('');
}; };
const onBlur = () => {
if (addOnBlur && newTagName) {
onAdd();
}
};
const onKeyboardAdd = (event: KeyboardEvent) => { const onKeyboardAdd = (event: KeyboardEvent) => {
event.preventDefault(); event.preventDefault();
if (event.key === 'Enter' && newTagName !== '') { if (event.key === 'Enter' && newTagName !== '') {
@ -68,6 +76,7 @@ export const TagsInput: FC<Props> = ({
onChange={onNameChange} onChange={onNameChange}
value={newTagName} value={newTagName}
onKeyUp={onKeyboardAdd} onKeyUp={onKeyboardAdd}
onBlur={onBlur}
suffix={ suffix={
newTagName.length > 0 && ( newTagName.length > 0 && (
<Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md"> <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">