mirror of https://github.com/apache/superset.git
chore: Changes the pagination API of the Select component (#15802)
This commit is contained in:
parent
f6fe29db87
commit
fdb40350bb
|
@ -340,15 +340,18 @@ export const AsyncSelect = ({
|
|||
const fetchUserListPage = useCallback(
|
||||
(
|
||||
search: string,
|
||||
offset: number,
|
||||
limit: number,
|
||||
page: number,
|
||||
pageSize: number,
|
||||
): Promise<OptionsTypePage> => {
|
||||
const username = search.trim().toLowerCase();
|
||||
return new Promise(resolve => {
|
||||
let results = getResults(username);
|
||||
const totalCount = results.length;
|
||||
results = results.splice(offset, limit);
|
||||
setRequestLog(offset + results.length, totalCount, username);
|
||||
const start = page * pageSize;
|
||||
const deleteCount =
|
||||
start + pageSize < totalCount ? pageSize : totalCount - start;
|
||||
results = results.splice(start, deleteCount);
|
||||
setRequestLog(start + results.length, totalCount, username);
|
||||
setTimeout(() => {
|
||||
resolve({ data: results, totalCount });
|
||||
}, responseTime * 1000);
|
||||
|
|
|
@ -66,8 +66,8 @@ export type OptionsTypePage = {
|
|||
|
||||
export type OptionsPagePromise = (
|
||||
search: string,
|
||||
offset: number,
|
||||
limit: number,
|
||||
page: number,
|
||||
pageSize: number,
|
||||
) => Promise<OptionsTypePage>;
|
||||
|
||||
export interface SelectProps extends PickedSelectProps {
|
||||
|
@ -125,7 +125,7 @@ const StyledError = styled.div`
|
|||
const MAX_TAG_COUNT = 4;
|
||||
const TOKEN_SEPARATORS = [',', '\n', '\t', ';'];
|
||||
const DEBOUNCE_TIMEOUT = 500;
|
||||
const DEFAULT_PAGE_SIZE = 50;
|
||||
const DEFAULT_PAGE_SIZE = 100;
|
||||
const EMPTY_OPTIONS: OptionsType = [];
|
||||
|
||||
const Error = ({ error }: { error: string }) => (
|
||||
|
@ -162,7 +162,7 @@ const Select = ({
|
|||
const [isLoading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [isDropdownVisible, setIsDropdownVisible] = useState(false);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [page, setPage] = useState(0);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const fetchedQueries = useRef(new Set<string>());
|
||||
const mappedMode = isSingleMode
|
||||
|
@ -269,14 +269,14 @@ const Select = ({
|
|||
};
|
||||
|
||||
const handlePaginatedFetch = useMemo(
|
||||
() => (value: string, offset: number, limit: number) => {
|
||||
const key = `${value};${offset};${limit}`;
|
||||
() => (value: string, page: number, pageSize: number) => {
|
||||
const key = `${value};${page};${pageSize}`;
|
||||
if (fetchedQueries.current.has(key)) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const fetchOptions = options as OptionsPagePromise;
|
||||
fetchOptions(value, offset, limit)
|
||||
fetchOptions(value, page, pageSize)
|
||||
.then(({ data, totalCount }: OptionsTypePage) => {
|
||||
handleData(data);
|
||||
fetchedQueries.current.add(key);
|
||||
|
@ -321,14 +321,12 @@ const Select = ({
|
|||
const vScroll = e.currentTarget;
|
||||
const thresholdReached =
|
||||
vScroll.scrollTop > (vScroll.scrollHeight - vScroll.offsetHeight) * 0.7;
|
||||
const hasMoreData = offset + pageSize < totalCount;
|
||||
const hasMoreData = page * pageSize + pageSize < totalCount;
|
||||
|
||||
if (!isLoading && isAsync && hasMoreData && thresholdReached) {
|
||||
const newOffset = offset + pageSize;
|
||||
const limit =
|
||||
newOffset + pageSize > totalCount ? totalCount - newOffset : pageSize;
|
||||
handlePaginatedFetch(searchedValue, newOffset, limit);
|
||||
setOffset(newOffset);
|
||||
const newPage = page + 1;
|
||||
handlePaginatedFetch(searchedValue, newPage, pageSize);
|
||||
setPage(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -363,9 +361,9 @@ const Select = ({
|
|||
useEffect(() => {
|
||||
const foundOption = hasOption(searchedValue, selectOptions);
|
||||
if (isAsync && !foundOption) {
|
||||
const offset = 0;
|
||||
handlePaginatedFetch(searchedValue, offset, pageSize);
|
||||
setOffset(offset);
|
||||
const page = 0;
|
||||
handlePaginatedFetch(searchedValue, page, pageSize);
|
||||
setPage(page);
|
||||
}
|
||||
}, [isAsync, searchedValue, selectOptions, pageSize, handlePaginatedFetch]);
|
||||
|
||||
|
|
|
@ -27,8 +27,6 @@ import {
|
|||
} from 'src/utils/getClientErrorObject';
|
||||
import { datasetToSelectOption } from './utils';
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
const localCache = new Map<string, any>();
|
||||
|
||||
const cachedSupersetGet = cacheWrapper(
|
||||
|
@ -61,17 +59,16 @@ const DatasetSelect = ({
|
|||
[],
|
||||
);
|
||||
|
||||
// TODO Change offset and limit to page and pageSize
|
||||
const loadDatasetOptions = async (
|
||||
search: string,
|
||||
offset: number,
|
||||
limit: number, // eslint-disable-line @typescript-eslint/no-unused-vars
|
||||
page: number,
|
||||
pageSize: number,
|
||||
) => {
|
||||
const searchColumn = 'table_name';
|
||||
const query = rison.encode({
|
||||
filters: [{ col: searchColumn, opr: 'ct', value: search }],
|
||||
page: Math.floor(offset / PAGE_SIZE),
|
||||
page_size: PAGE_SIZE,
|
||||
page,
|
||||
page_size: pageSize,
|
||||
order_column: searchColumn,
|
||||
order_direction: 'asc',
|
||||
});
|
||||
|
@ -111,7 +108,6 @@ const DatasetSelect = ({
|
|||
<Select
|
||||
ariaLabel={t('Dataset')}
|
||||
value={value?.value}
|
||||
pageSize={PAGE_SIZE}
|
||||
options={loadDatasetOptions}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue