73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
|
import { TreeSelect, TreeSelectProps } from "antd";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { DataNode } from "@nicestack/common";
|
||
|
|
import { useTerm } from "@web/src/hooks/useTerm";
|
||
|
|
|
||
|
|
interface TermSelectProps {
|
||
|
|
defaultValue?: string;
|
||
|
|
value?: string;
|
||
|
|
onChange?: (value: string) => void;
|
||
|
|
width?: number | string;
|
||
|
|
placeholder?: string;
|
||
|
|
taxonomyId: string;
|
||
|
|
extraOptions?: { value: string | undefined, label: string }[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function TermSelect({
|
||
|
|
defaultValue,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
width = '100%',
|
||
|
|
taxonomyId,
|
||
|
|
placeholder = "选择术语"
|
||
|
|
}: TermSelectProps) {
|
||
|
|
const [customTreeData, setCustomTreeData] = useState<DataNode[]>([]);
|
||
|
|
const { treeData, addFetchParentId } = useTerm();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (treeData && taxonomyId) {
|
||
|
|
const processedTreeData = treeData.filter(node => node.data.taxonomyId === taxonomyId);
|
||
|
|
setCustomTreeData(processedTreeData);
|
||
|
|
}
|
||
|
|
}, [treeData, taxonomyId]);
|
||
|
|
|
||
|
|
const [selectedValue, setSelectedValue] = useState<string | undefined>(defaultValue);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (value) {
|
||
|
|
setSelectedValue(value);
|
||
|
|
} else if (defaultValue) {
|
||
|
|
setSelectedValue(defaultValue);
|
||
|
|
}
|
||
|
|
}, [defaultValue, value]);
|
||
|
|
|
||
|
|
const handleChange = (newValue: string) => {
|
||
|
|
setSelectedValue(newValue);
|
||
|
|
if (onChange) {
|
||
|
|
onChange(newValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onLoadData: TreeSelectProps['loadData'] = async ({ id }) => {
|
||
|
|
addFetchParentId(id);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleExpand = (expandedKeys: React.Key[]) => {
|
||
|
|
console.log(expandedKeys)
|
||
|
|
// addFetchParentId(node.key as string);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TreeSelect
|
||
|
|
allowClear
|
||
|
|
value={selectedValue}
|
||
|
|
style={{ width }}
|
||
|
|
placeholder={placeholder}
|
||
|
|
onChange={handleChange}
|
||
|
|
loadData={onLoadData}
|
||
|
|
onTreeExpand={handleExpand}
|
||
|
|
treeData={customTreeData}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|