96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
import { Select } from "antd";
|
|
import { useEffect, useMemo } from "react";
|
|
import { getMatchedItems, getUnmatchedItems } from "../../../utils/index.js";
|
|
|
|
/**
|
|
* 基础下拉组件
|
|
*/
|
|
function BasicSelect(props) {
|
|
const {
|
|
onGetData,
|
|
onChange,
|
|
onGetLabel,
|
|
onGetOption,
|
|
placeholder = "",
|
|
data = [],
|
|
nameKey = "name",
|
|
idKey = "id",
|
|
labelRender,
|
|
exclude = [],
|
|
include = [],
|
|
...restProps
|
|
} = props;
|
|
|
|
const actualData = useMemo(() => {
|
|
let result = data;
|
|
|
|
if (exclude.length > 0) {
|
|
result = getUnmatchedItems({ list: result, value: exclude, idKey });
|
|
}
|
|
|
|
if (include.length > 0) {
|
|
result = getMatchedItems({ list: result, value: include, idKey });
|
|
}
|
|
|
|
return result;
|
|
}, [data, exclude, include, idKey]);
|
|
|
|
const handleChange = (event, option) => {
|
|
if (onGetLabel || onGetOption) {
|
|
if (Array.isArray(event)) {
|
|
if (event.length > 0) {
|
|
const findItems = [];
|
|
const names = [];
|
|
event.forEach((item) => {
|
|
const findItem = actualData.find(dataItem => dataItem[idKey] === item);
|
|
if (findItem) {
|
|
findItems.push(findItem);
|
|
names.push(findItem[nameKey]);
|
|
}
|
|
});
|
|
onGetLabel?.(names);
|
|
onGetOption?.(findItems);
|
|
}
|
|
else {
|
|
onGetLabel?.([]);
|
|
onGetOption?.([]);
|
|
}
|
|
}
|
|
else {
|
|
if (event) {
|
|
const findItem = actualData.find(item => item[idKey] === event);
|
|
onGetLabel?.(findItem[nameKey]);
|
|
onGetOption?.(findItem);
|
|
}
|
|
else {
|
|
onGetLabel?.("");
|
|
onGetOption?.({});
|
|
}
|
|
}
|
|
}
|
|
onChange?.(event, option);
|
|
};
|
|
|
|
useEffect(() => {
|
|
onGetData?.(actualData);
|
|
}, [actualData]);
|
|
|
|
return (
|
|
<Select
|
|
placeholder={`请选择${placeholder}`}
|
|
showSearch={{ optionFilterProp: "children" }}
|
|
allowClear
|
|
onChange={handleChange}
|
|
options={actualData.map(item => ({
|
|
value: item[idKey],
|
|
label: labelRender ? labelRender(item) : item[nameKey],
|
|
}))}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
}
|
|
|
|
BasicSelect.displayName = "BasicSelect";
|
|
|
|
export default BasicSelect;
|