EditTagList.tsx
1.37 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
import * as React from "react";
import { Tag, Input, Tooltip } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { isArray } from "lodash";
// import "./EditTagList.less";
interface Props {
value?: string[];
onChange?: (value: string[]) => any;
}
const colorArr = ["magenta", "geekblue", "cyan", "orange", "green", "lime", "gold", "volcano", "purple", "red"];
export default ({ value = [], onChange }: Props) => {
function handleClose(tag: string) {
const tags = value.filter((item) => item !== tag);
onChange && onChange(tags);
}
return (
<>
<div style={{ borderStyle: "solid", borderColor: "#eee", padding: 5, borderWidth: 1 }}>
{isArray(value) &&
value.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag
className="edit-tag"
key={tag}
closable={value.length > 1}
color={colorArr[index % 10]}
onClose={() => handleClose(tag)}
>
<span>{isLongTag ? `${tag.slice(0, 20)}...` : tag}</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag} key={tag}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
</div>
</>
);
};