-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Expand file tree
/
Copy pathTagsEditor.tsx
More file actions
112 lines (102 loc) · 2.61 KB
/
Copy pathTagsEditor.tsx
File metadata and controls
112 lines (102 loc) · 2.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from "react";
import {
EuiFlexGroup,
EuiFlexItem,
EuiFieldText,
EuiButtonEmpty,
EuiButtonIcon,
EuiText,
EuiHorizontalRule,
EuiSpacer,
EuiCallOut,
} from "@elastic/eui";
interface TagEntry {
key: string;
value: string;
}
interface TagsEditorProps {
tags: TagEntry[];
onChange: (tags: TagEntry[]) => void;
error?: string;
}
const TagsEditor: React.FC<TagsEditorProps> = ({ tags, onChange, error }) => {
const addTag = () => {
onChange([...tags, { key: "", value: "" }]);
};
const removeTag = (index: number) => {
onChange(tags.filter((_, i) => i !== index));
};
const updateTag = (index: number, field: "key" | "value", val: string) => {
const updated = [...tags];
updated[index] = { ...updated[index], [field]: val };
onChange(updated);
};
return (
<>
<EuiHorizontalRule margin="s" />
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiText size="s">
<h4>Labels</h4>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
iconType="plus"
onClick={addTag}
flush="right"
>
Add label
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
{error && (
<>
<EuiSpacer size="s" />
<EuiCallOut title={error} color="danger" size="s" />
</>
)}
{tags.map((tag, index) => (
<EuiFlexGroup
key={index}
gutterSize="s"
alignItems="center"
style={{ marginTop: 4 }}
>
<EuiFlexItem>
<EuiFieldText
placeholder="Key"
value={tag.key}
onChange={(e) => updateTag(index, "key", e.target.value)}
compressed
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldText
placeholder="Value"
value={tag.value}
onChange={(e) => updateTag(index, "value", e.target.value)}
compressed
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label="Remove label"
onClick={() => removeTag(index)}
/>
</EuiFlexItem>
</EuiFlexGroup>
))}
{tags.length === 0 && (
<EuiText size="xs" color="subdued">
No labels added yet.
</EuiText>
)}
</>
);
};
export default TagsEditor;
export type { TagEntry };