zy-react-library 1.0.19 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { SelectProps } from "antd/es/select";
|
|
2
|
+
import type { FC } from "react";
|
|
3
|
+
|
|
4
|
+
export interface SelectCreateOption {
|
|
5
|
+
/** 选项的唯一标识符 */
|
|
6
|
+
id: string | number;
|
|
7
|
+
/** 选项的显示名称 */
|
|
8
|
+
name: string;
|
|
9
|
+
/** 其他自定义属性 */
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface SelectCreateProps extends SelectProps {
|
|
14
|
+
/** 选项列表 */
|
|
15
|
+
items: SelectCreateOption[];
|
|
16
|
+
/** 是否显示删除图标，默认为 true */
|
|
17
|
+
showDelete?: boolean;
|
|
18
|
+
/** 标签名称，用于占位符显示 */
|
|
19
|
+
label?: string;
|
|
20
|
+
/** 删除选项时的回调函数 */
|
|
21
|
+
onDelete?: (option: SelectCreateOption) => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* 可创建选项的选择器组件
|
|
26
|
+
*/
|
|
27
|
+
declare const SelectCreate: FC<SelectCreateProps>;
|
|
28
|
+
|
|
29
|
+
export default SelectCreate;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { CloseCircleOutlined } from "@ant-design/icons";
|
|
2
|
+
import { Select } from "antd";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 可创建选项的选择器组件
|
|
6
|
+
*/
|
|
7
|
+
function SelectCreate(props) {
|
|
8
|
+
const { items, showDelete = true, label = "", maxCount = 1, onDelete, ...restProps } = props;
|
|
9
|
+
|
|
10
|
+
const handlerDelete = (option) => {
|
|
11
|
+
onDelete?.(option);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Select
|
|
16
|
+
mode="tags"
|
|
17
|
+
maxCount={maxCount}
|
|
18
|
+
placeholder={`请选择${label}，无对应选项可直接输入创建选项`}
|
|
19
|
+
optionRender={option => (
|
|
20
|
+
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
|
21
|
+
<span>{option.label}</span>
|
|
22
|
+
{
|
|
23
|
+
showDelete && (
|
|
24
|
+
<CloseCircleOutlined
|
|
25
|
+
style={{ marginRight: 10 }}
|
|
26
|
+
onClick={(e) => {
|
|
27
|
+
e.stopPropagation();
|
|
28
|
+
handlerDelete(option);
|
|
29
|
+
}}
|
|
30
|
+
/>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
</div>
|
|
34
|
+
)}
|
|
35
|
+
{...restProps}
|
|
36
|
+
>
|
|
37
|
+
{
|
|
38
|
+
items.map(item => (
|
|
39
|
+
<Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
|
|
40
|
+
))
|
|
41
|
+
}
|
|
42
|
+
</Select>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export default SelectCreate;
|