Spaces:
Paused
Paused
File size: 1,908 Bytes
ab2ded1 |
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 |
import { useFetchPureFileList } from '@/hooks/file-manager-hooks';
import { IFile } from '@/interfaces/database/file-manager';
import type { GetProp, TreeSelectProps } from 'antd';
import { TreeSelect } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
type DefaultOptionType = GetProp<TreeSelectProps, 'treeData'>[number];
interface IProps {
value?: string;
onChange?: (value: string) => void;
}
const AsyncTreeSelect = ({ value, onChange }: IProps) => {
const { t } = useTranslation();
const { fetchList } = useFetchPureFileList();
const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>(
[],
);
const onLoadData: TreeSelectProps['loadData'] = useCallback(
async ({ id }) => {
const ret = await fetchList(id);
if (ret.retcode === 0) {
setTreeData((tree) => {
return tree.concat(
ret.data.files
.filter((x: IFile) => x.type === 'folder')
.map((x: IFile) => ({
id: x.id,
pId: x.parent_id,
value: x.id,
title: x.name,
isLeaf:
typeof x.has_child_folder === 'boolean'
? !x.has_child_folder
: false,
})),
);
});
}
},
[fetchList],
);
const handleChange = (newValue: string) => {
onChange?.(newValue);
};
useEffect(() => {
onLoadData?.({ id: '', props: '' });
}, [onLoadData]);
return (
<TreeSelect
treeDataSimpleMode
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder={t('fileManager.pleaseSelect')}
onChange={handleChange}
loadData={onLoadData}
treeData={treeData}
/>
);
};
export default AsyncTreeSelect;
|