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