135 lines
4.4 KiB
TypeScript
135 lines
4.4 KiB
TypeScript
import { useRef, useState, useCallback, useEffect, type FC } from 'react';
|
|
import { Select, Spin, Avatar } from 'antd';
|
|
import type { SelectProps, DefaultOptionType } from 'antd/es/select';
|
|
|
|
import { request } from '@/utils/request';
|
|
|
|
interface OptionType {
|
|
[key: string]: any;
|
|
}
|
|
|
|
interface ApiResponse<T> {
|
|
items?: T[];
|
|
page: { hasnext: boolean };
|
|
}
|
|
|
|
export interface DebounceSelectProps extends Omit<SelectProps, 'options'> {
|
|
/** API endpoint URL — mutually exclusive with fetchOptions */
|
|
url?: string;
|
|
/** Extra query params merged with the search keyword */
|
|
params?: Record<string, unknown>;
|
|
/** Key used as option value */
|
|
valueKey?: string;
|
|
/** Key used as option label */
|
|
labelKey?: string;
|
|
/** Key name sent to the API for the search keyword */
|
|
searchKey?: string;
|
|
pageSize?: number;
|
|
/** Custom fetch function — mutually exclusive with url */
|
|
fetchOptions?: (search: string | null, page: number) => Promise<{ options: DefaultOptionType[]; hasMore: boolean }>;
|
|
/** Transform raw API items before rendering */
|
|
format?: (items: OptionType[]) => OptionType[];
|
|
debounceTimeout?: number;
|
|
}
|
|
|
|
const DebounceSelect: FC<DebounceSelectProps> = ({
|
|
url,
|
|
params = {},
|
|
valueKey = 'value',
|
|
labelKey = 'label',
|
|
searchKey = 'search',
|
|
pageSize = 20,
|
|
fetchOptions,
|
|
format,
|
|
debounceTimeout = 300,
|
|
...props
|
|
}) => {
|
|
const [fetching, setFetching] = useState(false);
|
|
const [options, setOptions] = useState<DefaultOptionType[]>([]);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const pageRef = useRef(1);
|
|
const keywordRef = useRef<string | null>(null);
|
|
const fetchRef = useRef(0);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout>>();
|
|
|
|
const fetchPage = useCallback((keyword: string | null, page: number, replace: boolean) => {
|
|
fetchRef.current += 1;
|
|
const fetchId = fetchRef.current;
|
|
setFetching(true);
|
|
|
|
const promise = fetchOptions
|
|
? fetchOptions(keyword, page)
|
|
: request
|
|
.get<ApiResponse<OptionType>>(url!, { ...params, [searchKey]: keyword, page, pagesize: pageSize })
|
|
.then((res) => {
|
|
const data: OptionType[] = Array.isArray(res) ? res : res?.items || [];
|
|
const formatted = format
|
|
? format(data)
|
|
: data.map((item) => ({ label: item[labelKey], value: item[valueKey], avatar: item.avatar, raw: item }));
|
|
|
|
console.log('more', res.page?.hasnext)
|
|
return { options: formatted, hasMore: res.page?.hasnext };
|
|
});
|
|
|
|
promise
|
|
.then(({ options: newOptions, hasMore: more }) => {
|
|
if (fetchId !== fetchRef.current) return;
|
|
setOptions((prev) => (replace ? newOptions : [...prev, ...newOptions]));
|
|
setHasMore(more);
|
|
setFetching(false);
|
|
})
|
|
.catch(() => setFetching(false));
|
|
}, [url, params, searchKey, fetchOptions, format, valueKey, labelKey, pageSize]);
|
|
|
|
const debounceFetcher = useCallback((keyword: string | null) => {
|
|
clearTimeout(timerRef.current);
|
|
timerRef.current = setTimeout(() => {
|
|
keywordRef.current = keyword;
|
|
pageRef.current = 1;
|
|
fetchPage(keyword, 1, true);
|
|
}, debounceTimeout);
|
|
}, [fetchPage, debounceTimeout]);
|
|
|
|
useEffect(() => {
|
|
debounceFetcher(null);
|
|
}, []);
|
|
|
|
const handlePopupScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
|
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
|
|
if (!fetching && hasMore && scrollHeight - scrollTop - clientHeight < 50) {
|
|
const nextPage = pageRef.current + 1;
|
|
pageRef.current = nextPage;
|
|
fetchPage(keywordRef.current, nextPage, false);
|
|
}
|
|
}, [fetching, hasMore, fetchPage]);
|
|
|
|
return (
|
|
<Select
|
|
labelInValue
|
|
filterOption={false}
|
|
onSearch={debounceFetcher}
|
|
onPopupScroll={handlePopupScroll}
|
|
notFoundContent={fetching ? <Spin size="small" /> : null}
|
|
allowClear
|
|
{...props}
|
|
options={options}
|
|
dropdownRender={(menu) => (
|
|
<>
|
|
{menu}
|
|
{fetching && options.length > 0 && (
|
|
<div style={{ textAlign: 'center', padding: '4px 0' }}><Spin size="small" /></div>
|
|
)}
|
|
</>
|
|
)}
|
|
optionRender={(option) => (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
{option.data.avatar && <Avatar src={option.data.avatar} size="small" />}
|
|
{option.label}
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DebounceSelect;
|